/* ==========================================================================
   AI2Content — Portfolio
   Дизайн от Claude Design (handoff bundle, May 2026).
   Cool light base + dark inverted + cyan neon accents.
   ========================================================================== */

:root{
  /* COOL LIGHT BASE */
  --bg: #f4f5f7;
  --bg-2: #eaecef;
  --ink: #14171c;
  --ink-2: #2a2f37;
  --muted: #7a7f88;
  --line: #d6d9de;

  /* DARK INVERTED */
  --dark: #1c1f25;
  --dark-2: #262a31;
  --dark-3: #2f343c;
  --dark-line: #353941;
  --on-dark: #eef0f3;
  --on-dark-muted: #8e939d;

  /* NEON */
  --neon: #4cc9ff;
  --neon-2: #2a7bff;
  --neon-glow: 0 0 24px rgba(76,201,255,0.55), 0 0 1px rgba(76,201,255,0.9);
  --neon-glow-soft: 0 0 14px rgba(76,201,255,0.35);

  --radius: 14px;
  --radius-l: 22px;
  --maxw: 1480px;
  --gap: 16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Onest', system-ui, -apple-system, Segoe UI, sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:16px;line-height:1.45;font-weight:400;letter-spacing:-0.005em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
img,video{display:block;max-width:100%}
::selection{background:var(--neon);color:var(--dark)}

.mono{font-family:'JetBrains Mono', ui-monospace, monospace;letter-spacing:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 36px}
@media (max-width:720px){ .wrap{padding:0 18px} }

/* TYPE */
.h-display{font-weight:500;font-size:clamp(48px,9vw,148px);line-height:0.92;letter-spacing:-0.045em}
.h-1{font-weight:500;font-size:clamp(36px,5.2vw,72px);line-height:0.98;letter-spacing:-0.035em}
.h-2{font-weight:500;font-size:clamp(28px,3.4vw,46px);line-height:1.02;letter-spacing:-0.028em}
.h-3{font-weight:500;font-size:clamp(20px,2vw,26px);line-height:1.18;letter-spacing:-0.018em}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
.light{color:var(--muted);font-weight:400}

/* INVERTED */
.inv{background:var(--dark);color:var(--on-dark)}
.inv .h-display, .inv .h-1, .inv .h-2, .inv .h-3{color:var(--on-dark)}
.inv .light{color:#6f747d !important}
.inv .eyebrow{color:var(--on-dark-muted)}
.inv hr.line{border-color:var(--dark-line)}

/* NEON */
.neon-rule{height:1px;background:linear-gradient(90deg,transparent,var(--neon) 50%,transparent);box-shadow:var(--neon-glow-soft);border:none;margin:0}
.neon-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--neon);box-shadow:var(--neon-glow);vertical-align:middle;margin-right:10px}
.neon-text{color:var(--neon);text-shadow:0 0 18px rgba(76,201,255,0.45)}

/* NAV */
nav.top{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 86%, transparent);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;transition:border-color .25s ease}
nav.top.scrolled{border-bottom-color:var(--line)}
nav.top .row{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
nav.top .logo{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-0.015em}
nav.top .logo .mark{
  width:28px;height:28px;border-radius:8px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;
  position:relative;overflow:hidden;
}
nav.top .logo .mark::before{content:"";position:absolute;left:-2px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:var(--neon-glow)}
nav.top .links{display:flex;gap:30px;font-size:14px;color:var(--ink-2)}
nav.top .links a{position:relative;padding:6px 0}
nav.top .links a:hover{color:var(--ink)}
nav.top .cta{font-size:13px;padding:11px 18px;border-radius:999px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;gap:10px;transition:transform .25s ease,background .2s ease,box-shadow .25s ease}
nav.top .cta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--neon);box-shadow:var(--neon-glow)}
nav.top .cta:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(20,23,28,0.18)}
@media (max-width:920px){ nav.top .links{display:none} }

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-size:15px;font-weight:500;transition:transform .25s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .25s ease;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(20,23,28,0.18)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--bg-2);border-color:var(--ink)}
.inv .btn-ghost{border-color:var(--dark-line);color:var(--on-dark)}
.inv .btn-ghost:hover{background:var(--dark-2);border-color:var(--neon);color:var(--neon)}
.btn-neon{background:var(--neon);color:var(--dark);box-shadow:var(--neon-glow)}
.btn-neon:hover{background:#7adcff}

/* HERO */
.hero{padding:64px 0 48px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:-10%;top:30%;width:50%;height:60%;background:radial-gradient(closest-side,rgba(76,201,255,0.12),transparent 70%);pointer-events:none;filter:blur(8px)}
.hero > *{position:relative}
.hero .meta-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;color:var(--muted);margin-bottom:40px}
.hero h1{margin:0}
.hero .sub{margin-top:36px;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}
.hero .sub p{max-width:540px;font-size:18px;line-height:1.5;color:var(--ink-2)}
.hero .sub .ctas{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:780px){ .hero .sub{grid-template-columns:1fr} .hero .sub .ctas{justify-content:flex-start} }

/* HERO METRICS */
.hero-metrics{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.hero-metrics .m{padding:28px 24px 24px;border-right:1px solid var(--line);position:relative}
.hero-metrics .m:last-child{border-right:none}
.hero-metrics .num{font-size:clamp(36px,4.4vw,68px);font-weight:500;line-height:1;letter-spacing:-0.035em;display:flex;align-items:baseline;gap:6px}
.hero-metrics .num sup{font-size:0.42em;color:var(--neon);font-weight:500;text-shadow:0 0 18px rgba(76,201,255,0.45);letter-spacing:0;position:relative;top:-0.65em}
.hero-metrics .lbl{margin-top:14px;color:var(--muted);font-size:13px;max-width:220px}
@media (max-width:780px){
  .hero-metrics{grid-template-columns:1fr 1fr}
  .hero-metrics .m:nth-child(2){border-right:none}
  .hero-metrics .m{border-bottom:1px solid var(--line)}
}

/* MARQUEE */
.marquee{background:var(--dark);color:var(--on-dark);padding:24px 0;overflow:hidden;white-space:nowrap;position:relative;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line)}
.marquee::before, .marquee::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--neon) 50%,transparent);box-shadow:var(--neon-glow-soft)}
.marquee::before{top:0} .marquee::after{bottom:0}
.marquee .track{display:inline-flex;gap:54px;animation:scroll 38s linear infinite}
.marquee span{font-size:20px;color:var(--on-dark);display:inline-flex;align-items:center;gap:54px;font-weight:500;letter-spacing:-0.01em}
.marquee span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--neon);display:inline-block;box-shadow:var(--neon-glow)}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* SECTION HEADER */
.sec{padding:96px 0;position:relative;overflow:hidden}
.sec.tight{padding:72px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:48px}
.sec-head .left{max-width:880px}
.sec-head .left h2{margin:10px 0 0}
.sec-head .left p.lead{margin:18px 0 0;font-size:17px;color:var(--ink-2);max-width:640px}
.inv .sec-head .left p.lead{color:#bcc1cb}
.sec-head .right{color:var(--muted);font-size:13px;text-align:right;max-width:320px;line-height:1.5}
.inv .sec-head .right{color:var(--on-dark-muted)}
@media (max-width:780px){ .sec-head{flex-direction:column;align-items:flex-start} .sec-head .right{text-align:left} }

/* CASE METRICS */
.metrics-inline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:36px 0 0;border-top:1px solid var(--line)}
.inv .metrics-inline{border-color:var(--dark-line)}
.metrics-inline .m{padding:22px 18px 20px;border-right:1px solid var(--line)}
.inv .metrics-inline .m{border-color:var(--dark-line)}
.metrics-inline .m:last-child{border-right:none}
.metrics-inline .num{font-size:clamp(28px,3vw,42px);font-weight:500;line-height:1;letter-spacing:-0.03em}
.metrics-inline .num em{font-style:normal;color:var(--neon);text-shadow:0 0 14px rgba(76,201,255,0.45)}
.metrics-inline .lbl{margin-top:10px;color:var(--muted);font-size:12px;letter-spacing:0.04em}
.inv .metrics-inline .lbl{color:var(--on-dark-muted)}
@media (max-width:780px){ .metrics-inline{grid-template-columns:1fr 1fr} .metrics-inline .m:nth-child(2){border-right:none} .metrics-inline .m{border-bottom:1px solid var(--line)} .inv .metrics-inline .m{border-bottom-color:var(--dark-line)} }

/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.srv-card{padding:32px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s ease;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:240px}
.srv-card:nth-child(4n){border-right:none}
.srv-card:nth-child(n+5):nth-child(-n+8){border-bottom:none}
.srv-card:hover{background:var(--bg-2)}
.srv-card .num{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;color:var(--muted)}
.srv-card .name{font-size:24px;font-weight:500;letter-spacing:-0.018em;margin:24px 0 8px}
.srv-card .desc{color:var(--ink-2);font-size:14px;line-height:1.5;max-width:300px}
.srv-card .arrow{align-self:flex-end;margin-top:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:all .25s ease}
.srv-card:hover .arrow{background:var(--ink);color:#fff;border-color:var(--ink);transform:rotate(-45deg)}
.srv-card.placeholder{opacity:0.55}
.srv-card.placeholder::after{content:"SOON";position:absolute;top:18px;right:18px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;color:var(--neon);padding:3px 7px;border:1px solid var(--neon);border-radius:4px;box-shadow:var(--neon-glow-soft)}
@media (max-width:980px){
  .services-grid{grid-template-columns:1fr 1fr}
  .srv-card:nth-child(4n){border-right:1px solid var(--line)}
  .srv-card:nth-child(2n){border-right:none}
  .srv-card:nth-child(n+5):nth-child(-n+8){border-bottom:1px solid var(--line)}
  .srv-card:nth-last-child(-n+2){border-bottom:none}
}
@media (max-width:560px){
  .services-grid{grid-template-columns:1fr}
  .srv-card{border-right:none !important;border-bottom:1px solid var(--line) !important;min-height:auto}
  .srv-card:last-child{border-bottom:none !important}
}

/* MEDIA TILES */
.tile{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--bg-2);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.inv .tile{background:var(--dark-2)}
.tile:hover{transform:translateY(-2px)}
.tile .ph{position:absolute;inset:0}
.tile .ph img, .tile .ph video{width:100%;height:100%;object-fit:cover;display:block}
.tile .scan{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(76,201,255,0) 49%,rgba(76,201,255,0.32) 50%,rgba(76,201,255,0) 51%,transparent 100%);background-size:100% 8px;opacity:0;transition:opacity .25s ease}
.tile.video.in-view .scan, .tile.video:hover .scan{opacity:0.55;animation:scan 1.6s linear infinite}
@keyframes scan{from{background-position:0 -120%} to{background-position:0 220%}}
.tile .label{position:absolute;left:14px;bottom:14px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:#fff;background:rgba(20,23,28,0.7);backdrop-filter:blur(4px);padding:5px 9px;border-radius:6px;display:flex;align-items:center;gap:6px;max-width:calc(100% - 28px)}
.tile .label .name{opacity:0.7}
.tile .badge{position:absolute;top:14px;left:14px;padding:5px 9px;border-radius:6px;background:rgba(255,255,255,0.95);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;display:flex;align-items:center;gap:6px;z-index:2}
.tile .badge.video::before{content:"";width:0;height:0;border-style:solid;border-width:4px 0 4px 6px;border-color:transparent transparent transparent var(--ink)}
.tile.video.in-view .badge.video{background:var(--neon);box-shadow:var(--neon-glow)}
.tile.video.in-view .badge.video::before{border-color:transparent transparent transparent var(--dark)}
.tile .duration{position:absolute;top:14px;right:14px;padding:5px 9px;border-radius:6px;background:rgba(20,23,28,0.7);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.04em;backdrop-filter:blur(4px);z-index:2}
.tile .play-pulse{position:absolute;left:50%;top:50%;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.92);transform:translate(-50%,-50%) scale(0.85);opacity:0;transition:all .3s ease;display:flex;align-items:center;justify-content:center;z-index:2}
.tile.video:hover .play-pulse{opacity:1;transform:translate(-50%,-50%) scale(1);box-shadow:var(--neon-glow)}
.tile .play-pulse::after{content:"";width:0;height:0;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent var(--dark);margin-left:3px}
.tile.zoom .ph{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.tile.zoom:hover .ph img, .tile.zoom:hover .ph video{transform:scale(1.04)}

/* PLACEHOLDER pattern (fallback when media missing) */
.ph-stripes{width:100%;height:100%;background-color:#dde0e5;background-image:repeating-linear-gradient(135deg,transparent 0,transparent 14px,rgba(20,23,28,0.06) 14px,rgba(20,23,28,0.06) 15px);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);text-align:center;padding:8px}
.inv .ph-stripes{background-color:#2a2e36;background-image:repeating-linear-gradient(135deg,transparent 0,transparent 14px,rgba(76,201,255,0.08) 14px,rgba(76,201,255,0.08) 15px);color:var(--on-dark-muted)}

/* GRIDS */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
.col-2{grid-column:span 2} .col-3{grid-column:span 3} .col-4{grid-column:span 4} .col-5{grid-column:span 5} .col-6{grid-column:span 6} .col-7{grid-column:span 7} .col-8{grid-column:span 8} .col-9{grid-column:span 9} .col-12{grid-column:span 12}
.ar-1{aspect-ratio:1/1} .ar-43{aspect-ratio:4/3} .ar-34{aspect-ratio:3/4} .ar-169{aspect-ratio:16/9} .ar-219{aspect-ratio:21/9} .ar-45{aspect-ratio:4/5} .ar-54{aspect-ratio:5/4}
@media (max-width:980px){
  .grid-4,.grid-5,.grid-6{grid-template-columns:repeat(2,1fr)}
  .col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 6}
}
@media (max-width:560px){
  .grid-4,.grid-5,.grid-6{grid-template-columns:1fr}
  .col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{grid-column:span 12}
}

/* CATEGORY ROW */
.cat-row{display:flex;align-items:baseline;gap:14px;margin:32px 0 14px}
.cat-row .cat-num{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;color:var(--neon);text-shadow:var(--neon-glow-soft)}
.cat-row .cat-name{font-size:14px;color:var(--on-dark-muted)}
.cat-row .cat-line{flex:1;height:1px;background:var(--dark-line)}
.cat-row.lt .cat-num{color:var(--ink)}
.cat-row.lt .cat-name{color:var(--muted)}
.cat-row.lt .cat-line{background:var(--line)}

/* APPLICATION FORM */
.form-block{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start;background:var(--dark);color:var(--on-dark);border-radius:var(--radius-l);padding:clamp(36px,6vw,80px);position:relative;overflow:hidden}
.form-block::before{content:"";position:absolute;left:-15%;bottom:-50%;width:70%;height:160%;background:radial-gradient(closest-side,rgba(76,201,255,0.30),transparent 70%);pointer-events:none}
.form-block > *{position:relative}
.form-block h2{color:var(--on-dark);margin:8px 0 0}
.form-block p.lead{color:#bcc1cb;font-size:17px;max-width:480px;margin:18px 0 0}
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--on-dark-muted)}
.field input, .field textarea{font-family:inherit;font-size:15px;color:var(--on-dark);background:transparent;border:none;border-bottom:1px solid var(--dark-line);padding:10px 0;transition:border-color .2s ease}
.field input:focus, .field textarea:focus{outline:none;border-bottom-color:var(--neon)}
.field textarea{resize:vertical;min-height:80px}
.form .submit-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:8px;flex-wrap:wrap}
.form .submit-row .policy{font-size:12px;color:var(--on-dark-muted);max-width:280px;line-height:1.5}
.form .submit-row .policy a{color:var(--on-dark);border-bottom:1px solid var(--dark-line)}
@media (max-width:900px){ .form-block{grid-template-columns:1fr} }

/* FOOTER */
footer{background:var(--dark);color:var(--on-dark);padding:80px 0 32px;font-size:14px;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--neon) 50%,transparent);box-shadow:var(--neon-glow-soft)}
footer .row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;align-items:flex-start}
footer .col{display:flex;flex-direction:column;gap:10px;min-width:0}
footer .col--brand{padding-right:24px}
footer .col .k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:8px}
footer a{color:var(--on-dark);transition:color .2s ease}
footer a:hover{color:var(--neon)}

footer .legal-block{margin-top:64px;padding-top:32px;border-top:1px solid var(--dark-line);display:flex;flex-direction:column;gap:8px;color:var(--on-dark-muted);font-size:12px;line-height:1.7}
footer .legal-entity{font-size:13px;color:var(--on-dark);font-weight:500;letter-spacing:-0.005em}
footer .legal-details{max-width:560px}
footer .legal-copy{margin-top:8px;color:var(--on-dark-muted);font-size:11px;letter-spacing:0.06em}

footer .legal-bottom{margin-top:32px;padding-top:20px;border-top:1px solid var(--dark-line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;color:var(--on-dark-muted);font-size:11px;letter-spacing:0.08em;text-transform:uppercase}
footer .legal-bottom a:hover{color:var(--neon)}

@media (max-width:980px){
  footer .row{grid-template-columns:1fr 1fr;gap:32px}
  footer .col--brand{grid-column:span 2;padding-right:0}
}
@media (max-width:560px){
  footer .row{grid-template-columns:1fr}
  footer .col--brand{grid-column:span 1}
}

/* REVEAL ON SCROLL */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}