/* ==================== TOKENS ==================== */
:root{
  --bg:#F6F5F1;
  --surface:#FFFFFF;
  --ink:#12131A;
  --ink-soft:#63636F;
  --accent:#3A2BFF;
  --accent-violet:#8B5CFF;
  --accent-2:#C6FF3D;
  --line:#E4E2DA;
  --radius:18px;
  --shadow:0 24px 48px rgba(18,19,26,.08);
  --ease:cubic-bezier(.16,.84,.44,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--bg); height:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.loader ~ *{opacity:0; transition:opacity .5s var(--ease);}
body.ready .loader ~ *{opacity:1;}
main{flex:1 0 auto; width:100%;}
header,footer{flex:none; width:100%;}
h1,h2,h3,.disp{font-family:'Bricolage Grotesque',sans-serif; letter-spacing:-0.02em; font-weight:600;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1240px; margin:0 auto; padding-left:32px; padding-right:32px;}
::selection{background:var(--accent); color:#fff;}
img,svg{display:block; max-width:100%;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ==================== LOADER ==================== */
.loader{
  position:fixed; inset:0; z-index:999; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.hide{opacity:0; visibility:hidden;}
.loader-mark{
  font-family:'Bricolage Grotesque',sans-serif; font-size:32px; font-weight:700;
  display:flex; gap:2px;
}
.loader-mark span{
  animation:loaderPulse 1.1s var(--ease) infinite;
  opacity:.2;
}
.loader-mark span:nth-child(1){animation-delay:0s;}
.loader-mark span:nth-child(2){animation-delay:.08s;}
.loader-mark span:nth-child(3){animation-delay:.16s;}
.loader-mark span:nth-child(4){animation-delay:.24s;}
.loader-mark span:nth-child(5){animation-delay:.32s;}
.loader-mark span:nth-child(6){animation-delay:.4s; color:var(--accent);}
@keyframes loaderPulse{0%,100%{opacity:.2; transform:translateY(0);} 50%{opacity:1; transform:translateY(-6px);}}

/* ==================== CURSOR ==================== */
.cursor-dot{
  position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%;
  background:var(--accent); pointer-events:none; z-index:998; mix-blend-mode:normal;
  transform:translate(-50%,-50%); transition:width .2s,height .2s,background .2s;
}
.cursor-ring{
  position:fixed; top:0; left:0; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--ink); pointer-events:none; z-index:998; opacity:.5;
  transform:translate(-50%,-50%); transition:width .25s var(--ease),height .25s var(--ease),border-color .25s;
}
.cursor-dot.grow{width:14px; height:14px; background:var(--accent-2);}
.cursor-ring.grow{width:56px; height:56px; border-color:var(--accent);}
@media (hover:none), (max-width:900px){ .cursor-dot,.cursor-ring{display:none;} }

/* ==================== HEADER ==================== */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(246,245,241,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; position:relative;}
.logo{font-size:22px; font-weight:700; display:flex; align-items:center;}
.logo span{color:var(--accent);}
.nav-links{display:flex; align-items:center; gap:6px;}
.nav-item{position:relative;}
.nav-link, .nav-link-btn{
  font-size:14px; color:var(--ink-soft); padding:10px 14px; display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; font-family:'Inter',sans-serif; cursor:pointer; border-radius:100px;
  transition:color .2s, background .2s;
}
.nav-link:hover, .nav-link-btn:hover, .nav-link.active{color:var(--ink); background:rgba(18,19,26,.05);}
.nav-link-btn svg{transition:transform .25s var(--ease);}
.nav-item.open .nav-link-btn svg{transform:rotate(180deg);}
.nav-cta{
  background:var(--ink); color:#fff; padding:10px 20px; border-radius:100px;
  font-size:14px; font-weight:500; white-space:nowrap; transition:background .25s,transform .25s;
}
.nav-cta:hover{background:var(--accent); transform:translateY(-1px);}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.burger span{width:22px; height:2px; background:var(--ink); transition:transform .2s, opacity .2s;}

/* Mega menu */
.mega-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%,-10px);
  width:min(760px, 88vw); background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow); padding:28px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index:90;
}
.nav-item.open .mega-menu{opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);}
.mega-grid{display:grid; grid-template-columns:repeat(2,1fr) 220px; gap:8px 28px;}
.mega-col{display:flex; flex-direction:column; gap:4px;}
.mega-link{
  display:flex; gap:14px; align-items:flex-start; padding:12px; border-radius:14px; transition:background .2s, transform .2s;
  opacity:0; transform:translateY(8px);
}
.nav-item.open .mega-link{animation:megaIn .35s var(--ease) forwards;}
.nav-item.open .mega-link:nth-child(1){animation-delay:.04s;}
.nav-item.open .mega-link:nth-child(2){animation-delay:.09s;}
@keyframes megaIn{to{opacity:1; transform:translateY(0);}}
.mega-link:hover{background:var(--bg);}
.mega-icon{
  width:38px; height:38px; border-radius:10px; background:var(--bg); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex:none; color:var(--accent);
}
.mega-link h4{font-size:14px; font-weight:600; margin-bottom:3px;}
.mega-link p{font-size:12.5px; color:var(--ink-soft); line-height:1.4;}
.mega-promo{
  background:var(--ink); color:#fff; border-radius:14px; padding:20px; display:flex; flex-direction:column; justify-content:space-between; gap:14px;
}
.mega-promo .tag{font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2);}
.mega-promo h4{font-size:16px; margin-top:8px; line-height:1.3;}
.mega-promo a{font-size:13px; display:inline-flex; align-items:center; gap:6px; color:var(--accent-2); font-weight:500;}
.mega-cases{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.mega-case{border-radius:14px; overflow:hidden; border:1px solid var(--line); transition:transform .25s var(--ease); opacity:0; transform:translateY(8px);}
.nav-item.open .mega-case{animation:megaIn .35s var(--ease) forwards;}
.nav-item.open .mega-case:nth-child(1){animation-delay:.02s;}
.nav-item.open .mega-case:nth-child(2){animation-delay:.06s;}
.nav-item.open .mega-case:nth-child(3){animation-delay:.1s;}
.nav-item.open .mega-case:nth-child(4){animation-delay:.14s;}
.mega-case:hover{transform:translateY(-3px);}
.mega-case .thumb{height:64px;}
.mega-case .info{padding:10px 12px;}
.mega-case .cat{font-size:10px; color:var(--accent); font-family:'IBM Plex Mono',monospace; text-transform:uppercase;}
.mega-case h5{font-size:12.5px; margin-top:3px;}

/* Ticker */
.ticker-band{background:var(--ink); color:var(--bg); overflow:hidden; white-space:nowrap; border-bottom:1px solid var(--line);}
.ticker-track{display:inline-flex; gap:48px; padding:9px 0; animation:scroll 22s linear infinite;}
.ticker-track span{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.85;}
.ticker-track span.dot{color:var(--accent-2);}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ==================== BUTTONS ==================== */
.btn-primary{
  background:var(--ink); color:#fff; padding:15px 26px; border-radius:100px; font-size:15px; font-weight:500;
  display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; transition:background .25s,transform .25s;
}
.btn-primary:hover{background:var(--accent); transform:translateY(-2px);}
.btn-ghost{
  border:1px solid var(--line); background:var(--surface); padding:15px 26px; border-radius:100px; font-size:15px; font-weight:500;
  transition:border-color .25s,transform .25s;
}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px);}

/* ==================== HERO (shared pattern) ==================== */
.hero{position:relative; width:100%; overflow:hidden;}
.hero-content{padding-top:110px; padding-bottom:72px; position:relative; z-index:1;}
.blob{
  position:absolute; width:560px; height:560px; border-radius:50%;
  background:conic-gradient(from 180deg, var(--accent), var(--accent-violet), var(--accent-2), var(--accent));
  filter:blur(80px); opacity:.16; top:-200px; right:-160px; pointer-events:none;
  animation:blobFloat 14s ease-in-out infinite, blobSpin 30s linear infinite;
}
@keyframes blobFloat{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-30px,30px) scale(1.08);}}
@keyframes blobSpin{from{filter:blur(80px) hue-rotate(0deg);} to{filter:blur(80px) hue-rotate(30deg);}}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); background:var(--surface);
  padding:6px 14px; border-radius:100px; margin-bottom:26px;
}
.eyebrow::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 3px rgba(198,255,61,.35); animation:dotPulse 2s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 3px rgba(198,255,61,.35);} 50%{box-shadow:0 0 0 7px rgba(198,255,61,.12);}}

/* ==================== SECTION SHELL ==================== */
section{padding:96px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:56px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:28px;
}
.section-head .tag{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; display:block;}
.section-head h2{font-size:clamp(28px,3.6vw,44px); max-width:16ch;}
.section-head p{max-width:360px; color:var(--ink-soft); font-size:15px; line-height:1.5;}

/* stat blocks */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:60px;}
.stat{background:var(--surface); padding:28px 24px;}
.stat .num{font-family:'Bricolage Grotesque',sans-serif; font-size:clamp(28px,3.4vw,40px); font-weight:700; color:var(--accent);}
.stat .label{font-size:13px; color:var(--ink-soft); margin-top:6px;}

/* services grid */
.services{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.service{background:var(--surface); padding:40px; position:relative; transition:background .25s;}
.service:hover{background:#FCFCFA;}
.service .idx{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-soft);}
.service h3{font-size:26px; margin:18px 0 12px;}
.service p{color:var(--ink-soft); font-size:15px; line-height:1.55; max-width:38ch;}
.service .tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px;}
.service .tags span{font-size:12px; padding:5px 11px; border-radius:100px; background:var(--bg); border:1px solid var(--line); color:var(--ink-soft);}
.service a.more{display:inline-flex; gap:6px; margin-top:18px; font-size:13px; font-weight:600; color:var(--accent);}

/* process */
.process{display:flex; flex-direction:column;}
.step{display:grid; grid-template-columns:100px 1fr 1fr; gap:24px; align-items:start; padding:32px 0; border-top:1px solid var(--line);}
.step:last-child{border-bottom:1px solid var(--line);}
.step .n{font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:14px; padding-top:4px;}
.step h3{font-size:22px;}
.step p{color:var(--ink-soft); font-size:15px; line-height:1.55;}

/* cases grid + thumbs (generated pattern, no external images) */
.thumb{
  height:170px; border-radius:14px 14px 0 0; position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--tc1,#3A2BFF), var(--tc2,#8B5CFF));
}
.thumb::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 55%),
             repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px);
}
.cases-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.case-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); cursor:pointer;
}
.case-card:hover{transform:translateY(-6px); box-shadow:var(--shadow);}
.case-card .info{padding:22px;}
.case-card .cat{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:.06em;}
.case-card h3{font-size:19px; margin-top:10px;}
.case-card p.desc{font-size:13.5px; color:var(--ink-soft); margin-top:8px; line-height:1.5;}
.case-card .meta{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft); margin-top:18px; padding-top:14px; border-top:1px solid var(--line);}

/* filter tabs */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.filter-btn{
  border:1px solid var(--line); background:var(--surface); padding:9px 18px; border-radius:100px; font-size:13.5px;
  color:var(--ink-soft); cursor:pointer; transition:all .2s;
}
.filter-btn:hover{border-color:var(--ink); color:var(--ink);}
.filter-btn.active{background:var(--ink); color:#fff; border-color:var(--ink);}
.case-card.hide{display:none;}

/* modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(18,19,26,.55); backdrop-filter:blur(4px); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.modal-overlay.open{opacity:1; visibility:visible;}
.modal{
  background:var(--surface); border-radius:20px; max-width:640px; width:100%; max-height:86vh; overflow-y:auto;
  transform:translateY(24px) scale(.97); transition:transform .35s var(--ease);
}
.modal-overlay.open .modal{transform:translateY(0) scale(1);}
.modal-thumb{height:220px; border-radius:20px 20px 0 0;}
.modal-body{padding:32px;}
.modal-body .cat{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--accent); text-transform:uppercase;}
.modal-body h2{font-size:26px; margin:12px 0 16px;}
.modal-body h4{font-size:13px; text-transform:uppercase; color:var(--ink-soft); margin:20px 0 8px; font-family:'IBM Plex Mono',monospace;}
.modal-body p{font-size:14.5px; color:var(--ink-soft); line-height:1.6;}
.modal-close{
  position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.9);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
}
.modal-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}
.modal-tags span{font-size:12px; padding:5px 11px; border-radius:100px; background:var(--bg); border:1px solid var(--line); color:var(--ink-soft);}
.modal-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px;}
.modal-stats div{background:var(--bg); border-radius:12px; padding:14px; text-align:center;}
.modal-stats .num{font-family:'Bricolage Grotesque',sans-serif; font-size:22px; font-weight:700; color:var(--accent);}
.modal-stats .label{font-size:11.5px; color:var(--ink-soft); margin-top:4px;}

/* team */
.team{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.member{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; transition:transform .25s var(--ease);}
.member:hover{transform:translateY(-4px);}
.member .avatar{width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); margin-bottom:16px;}
.member h3{font-size:16px;}
.member p{font-size:13px; color:var(--ink-soft); margin-top:4px;}

/* values / about grid */
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.value-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px; transition:transform .25s var(--ease);}
.value-card:hover{transform:translateY(-4px);}
.value-card .num{font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:13px;}
.value-card h3{font-size:19px; margin:14px 0 10px;}
.value-card p{font-size:14px; color:var(--ink-soft); line-height:1.55;}

/* timeline (about) */
.timeline{border-left:1px solid var(--line); padding-left:32px; display:flex; flex-direction:column; gap:36px; margin-top:8px;}
.timeline-item{position:relative;}
.timeline-item::before{content:''; position:absolute; left:-37px; top:4px; width:11px; height:11px; border-radius:50%; background:var(--accent); border:3px solid var(--bg);}
.timeline-item .yr{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--accent);}
.timeline-item h3{font-size:18px; margin:6px 0;}
.timeline-item p{font-size:14px; color:var(--ink-soft); line-height:1.5;}

/* page hero (inner pages) */
.page-hero{padding-top:70px; padding-bottom:40px;}
.page-hero .eyebrow{margin-bottom:20px;}
.page-hero h1{font-size:clamp(34px,5vw,58px); max-width:16ch;}
.page-hero p{max-width:52ch; color:var(--ink-soft); font-size:16px; margin-top:18px; line-height:1.6;}
.breadcrumb{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); margin-bottom:18px;}
.breadcrumb a{color:var(--ink-soft);}
.breadcrumb a:hover{color:var(--accent);}

/* service detail block */
.service-block{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; padding:64px 0; border-top:1px solid var(--line);}
.service-block:last-child{padding-bottom:0;}
.service-block .idx-big{font-family:'Bricolage Grotesque',sans-serif; font-size:64px; color:var(--line); font-weight:700; line-height:1;}
.service-block h2{font-size:32px; margin-top:8px;}
.service-block p.lead{color:var(--ink-soft); font-size:15.5px; line-height:1.6; margin-top:14px;}
.deliverables{display:flex; flex-direction:column; gap:10px; margin-top:24px;}
.deliverables div{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--ink);}
.deliverables div::before{content:'→'; color:var(--accent); font-weight:600;}
.service-panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px;}
.service-panel h4{font-size:13px; text-transform:uppercase; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; margin-bottom:16px;}
.service-panel .tags{display:flex; gap:8px; flex-wrap:wrap;}
.service-panel .tags span{font-size:12.5px; padding:6px 12px; border-radius:100px; background:var(--bg); border:1px solid var(--line);}
.service-panel .example{margin-top:22px; padding-top:22px; border-top:1px solid var(--line);}
.service-panel .example .cat{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--accent); text-transform:uppercase;}
.service-panel .example h5{font-size:15px; margin-top:6px;}

/* ==================== CONTACT ==================== */
.contact-box{background:var(--ink); color:var(--bg); border-radius:24px; padding:72px 56px; position:relative; overflow:hidden;}
.contact-box::before{content:''; position:absolute; width:420px; height:420px; border-radius:50%; background:var(--accent); filter:blur(100px); opacity:.35; top:-140px; left:-90px; animation:blobFloat 12s ease-in-out infinite;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; position:relative; z-index:1;}
.contact-box h2{font-size:clamp(30px,4vw,48px); color:#fff; max-width:12ch;}
.contact-box p.lead{color:#B9B9C6; margin-top:18px; max-width:38ch; font-size:16px; line-height:1.6;}
.tg-line{
  display:inline-flex; align-items:center; gap:10px; margin-top:28px; font-family:'IBM Plex Mono',monospace; font-size:15px;
  color:var(--accent-2); border:1px solid rgba(255,255,255,.18); padding:12px 18px; border-radius:100px; transition:border-color .2s, transform .2s;
}
.tg-line:hover{border-color:var(--accent-2); transform:translateY(-2px);}
form{display:flex; flex-direction:column; gap:14px;}
.field label{font-size:12px; color:#9C9CAC; display:block; margin-bottom:6px; font-family:'IBM Plex Mono',monospace;}
.field input, .field textarea, .field select{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:13px 16px;
  color:#fff; font-family:'Inter',sans-serif; font-size:14px; transition:border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--accent-2); background:rgba(255,255,255,.1);}
.field input::placeholder, .field textarea::placeholder{color:#75758A;}
.field textarea{resize:vertical; min-height:80px;}
.submit-btn{
  background:var(--accent-2); color:var(--ink); border:none; padding:15px 22px; border-radius:100px; font-weight:600; font-size:15px;
  cursor:pointer; margin-top:4px; transition:transform .2s;
}
.submit-btn:hover{transform:translateY(-2px);}
.form-note{font-size:12px; color:#75758A; margin-top:4px;}
.form-status{font-size:13px; color:var(--accent-2); min-height:18px;}

/* contact page extras */
.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:56px;}
.contact-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; transition:transform .25s var(--ease);}
.contact-card:hover{transform:translateY(-4px);}
.contact-card .ic{width:38px; height:38px; border-radius:10px; background:var(--bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:14px;}
.contact-card h3{font-size:16px; margin-bottom:6px;}
.contact-card p{font-size:13.5px; color:var(--ink-soft);}
.faq{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:56px;}
.faq-item{background:var(--surface);}
.faq-q{width:100%; text-align:left; padding:22px 26px; background:none; border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:15.5px; font-weight:500; color:var(--ink); font-family:'Inter',sans-serif;}
.faq-q svg{transition:transform .3s var(--ease); flex:none;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s var(--ease);}
.faq-a p{padding:0 26px 22px; font-size:14px; color:var(--ink-soft); line-height:1.6; max-width:60ch;}

/* ==================== FOOTER ==================== */
footer{padding:64px 0 40px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid var(--line);}
.footer-brand h2{font-size:clamp(32px,5vw,64px);}
.footer-links{display:flex; gap:56px; flex-wrap:wrap;}
.footer-col h4{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:14px; font-family:'IBM Plex Mono',monospace;}
.footer-col a, .footer-col p{display:block; font-size:14px; margin-bottom:10px; color:var(--ink-soft); transition:color .2s;}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:13px; color:var(--ink-soft); flex-wrap:wrap; gap:12px;}

/* ==================== REVEAL ==================== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.stagger.in > *{opacity:0; transform:translateY(18px); animation:staggerIn .6s var(--ease) forwards;}
.stagger.in > *:nth-child(1){animation-delay:.02s;}
.stagger.in > *:nth-child(2){animation-delay:.09s;}
.stagger.in > *:nth-child(3){animation-delay:.16s;}
.stagger.in > *:nth-child(4){animation-delay:.23s;}
.stagger.in > *:nth-child(5){animation-delay:.3s;}
.stagger.in > *:nth-child(6){animation-delay:.37s;}
@keyframes staggerIn{to{opacity:1; transform:translateY(0);}}

/* page fade transition on nav */
.page-fade-out{animation:fadeOutPage .35s var(--ease) forwards;}
@keyframes fadeOutPage{to{opacity:0; transform:translateY(-8px);}}

/* ==================== RESPONSIVE ==================== */
@media (max-width:1024px){
  .mega-grid{grid-template-columns:repeat(2,1fr);}
  .mega-promo{grid-column:span 2;}
  .mega-cases{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .nav-links{
    display:none; position:fixed; top:64px; left:0; right:0; bottom:0; background:var(--bg); flex-direction:column;
    align-items:stretch; padding:20px 24px; overflow-y:auto; gap:6px;
  }
  .nav-links.mobile-open{display:flex;}
  .nav-item{width:100%;}
  .nav-link, .nav-link-btn{width:100%; justify-content:space-between; padding:16px 10px; font-size:16px; border-bottom:1px solid var(--line); border-radius:0;}
  .mega-menu{
    position:static; transform:none; width:100%; box-shadow:none; border:none; border-radius:0; padding:6px 10px 16px;
    display:none; opacity:1; visibility:visible; pointer-events:auto;
  }
  .nav-item.open .mega-menu{display:block;}
  .mega-grid{grid-template-columns:1fr;}
  .mega-promo{grid-column:auto;}
  .mega-cases{grid-template-columns:repeat(2,1fr);}
  .burger{display:flex;}
  .nav-cta{display:none;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .services{grid-template-columns:1fr;}
  .step{grid-template-columns:60px 1fr;}
  .step p{grid-column:2/3;}
  .cases-grid{grid-template-columns:1fr;}
  .team{grid-template-columns:repeat(2,1fr);}
  .values{grid-template-columns:1fr;}
  .contact-box{padding:48px 28px;}
  .contact-grid{grid-template-columns:1fr;}
  .contact-cards{grid-template-columns:1fr;}
  .footer-links{gap:32px;}
  .service-block{grid-template-columns:1fr; gap:28px;}
}
@media (max-width:520px){
  .wrap{padding-left:20px; padding-right:20px;}
  .hero{padding:96px 0 56px;}
  .stats{grid-template-columns:1fr 1fr;}
  .team{grid-template-columns:1fr;}
  .mega-cases{grid-template-columns:1fr;}
}