/* ============================================================
   KaderWeb — shared site styles
   Clean white base · professional blue accent · deep-navy ink
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,500&display=swap');

:root{
  --bg:#FFFFFF; --bg-2:#F2F7FC; --surface:#FFFFFF; --surface-2:#F4F8FC; --surface-3:#E6EEF7;
  --line:rgba(37,99,235,0.16); --line-strong:rgba(37,99,235,0.34); --line-cool:rgba(15,23,42,0.09); --line-cool-2:rgba(15,23,42,0.14);
  --gold:#2563EB; --gold-bright:#3B82F6; --gold-deep:#1D4ED8;
  --cream:#0E1B2E; --cream-2:#FFFFFF; --cream-dim:#475569;
  --text:#1E293B; --mute:#64748B; --dim:#94A3B8;
  --ink:#0E1B2E; --ink-mute:#52617A;
  --disp:'Space Grotesk',sans-serif; --body:'Manrope',sans-serif; --mono:'JetBrains Mono',monospace; --serif:'Fraunces',serif;
  --maxw:1200px; --r:12px; --r-sm:8px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--body); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
::selection{background:rgba(37,99,235,.22); color:#0E1B2E;}

/* page grain (barely-there texture) */
body::before{content:''; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:2;}
.section{padding:100px 0; position:relative;}
.section--tight{padding:72px 0;}
.section--cream{background:linear-gradient(180deg,#EFF5FF,#E7F0FC); color:var(--ink);}
.section--cream .eyebrow{color:var(--gold-deep);}
.section--cream .eyebrow::before{background:var(--gold-deep);}
.section--cream .h-sec{color:var(--ink);}
.section--cream .lead{color:var(--ink-mute);}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:11px; font-weight:500;}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--gold); opacity:.7;}
.eyebrow.center{justify-content:center;}
.h-sec{font-family:var(--disp); font-weight:700; font-size:clamp(32px,4vw,50px); line-height:1.05; letter-spacing:-.025em; color:var(--cream); margin:18px 0 0;}
.h-sec em{font-family:var(--serif); font-style:italic; font-weight:500; color:var(--gold);}
.lead{font-size:18px; line-height:1.6; color:var(--mute); max-width:560px; margin:20px 0 0;}
.lead.center{margin-left:auto; margin-right:auto; text-align:center;}
.sec-head{max-width:680px;}
.sec-head.center{margin:0 auto; text-align:center;}

/* ---------- buttons ---------- */
.btn{font-family:var(--body); font-weight:600; font-size:15px; padding:13px 22px; border-radius:var(--r-sm); cursor:pointer; border:1px solid transparent; display:inline-flex; align-items:center; gap:9px; transition:.18s var(--ease); white-space:nowrap;}
.btn svg{transition:transform .2s var(--ease);}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#fff; box-shadow:0 10px 26px -10px rgba(37,99,235,.55);}
.btn-gold:hover{filter:brightness(1.04); transform:translateY(-1px);} .btn-gold:hover svg{transform:translateX(3px);}
.btn-ghost{border-color:var(--line-cool-2); color:var(--ink);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}
.btn-dark{background:var(--ink); color:#fff;}
.btn-dark:hover{transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(14,27,46,.4);}
.btn-lg{padding:16px 30px; font-size:16px;}
.btn-block{width:100%; justify-content:center;}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.78); backdrop-filter:blur(16px); border-bottom:1px solid var(--line-cool);}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--disp); font-weight:600; font-size:19px; letter-spacing:-.01em; flex-shrink:0;}
.brand .mark{width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(150deg,#EAF1FF,#D6E5FF); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
.brand b{color:var(--cream); font-weight:700;} .brand i{color:var(--gold); font-weight:500; font-style:normal; margin-left:-11px;}
.nlinks{display:flex; gap:30px; font-size:14.5px; color:var(--mute); font-weight:500;}
.nlinks a{position:relative; padding:4px 0; transition:color .16s;}
.nlinks a:hover,.nlinks a.active{color:var(--cream);}
.nlinks a.active::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--gold); border-radius:2px;}
.nav-right{display:flex; align-items:center; gap:14px;}
.burger{display:none; background:none; border:1px solid var(--line-cool-2); border-radius:8px; width:42px; height:42px; cursor:pointer; color:var(--ink); align-items:center; justify-content:center;}
.burger svg{width:20px; height:20px;}
.mobile-menu{display:none; position:fixed; inset:0; z-index:60; background:rgba(255,255,255,.98); backdrop-filter:blur(10px); flex-direction:column; padding:24px 32px;}
.mobile-menu.open{display:flex;}
.mobile-menu .mm-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:40px;}
.mobile-menu a{font-family:var(--disp); font-size:28px; font-weight:600; color:var(--cream); padding:14px 0; border-bottom:1px solid var(--line-cool);}
.mobile-menu a:active{color:var(--gold);}
.mobile-menu .mm-cta{margin-top:auto;}
.mm-close{background:none; border:1px solid var(--line-cool-2); border-radius:8px; width:42px; height:42px; color:var(--ink); cursor:pointer; font-size:20px;}

/* ---------- backgrounds / atmosphere ---------- */
.glow{position:absolute; border-radius:50%; pointer-events:none; z-index:0; filter:blur(30px);}
.glow-gold{background:radial-gradient(circle, rgba(37,99,235,.12), transparent 64%);}
.grid-bg{position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--line-cool) 1px,transparent 1px),linear-gradient(90deg,var(--line-cool) 1px,transparent 1px); background-size:64px 64px; opacity:.6;}

/* ---------- hero (A) ---------- */
.hero{position:relative; overflow:hidden;}
.hero .wrap{padding-top:72px; padding-bottom:96px;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center;}
.hero-h1{font-family:var(--disp); font-weight:700; font-size:clamp(40px,5.2vw,64px); line-height:1.02; letter-spacing:-.03em; color:var(--cream); margin:24px 0 0;}
.hero-h1 em{font-family:var(--serif); font-style:italic; font-weight:500; color:var(--gold);}
.hero-stats{display:flex; gap:42px; margin-top:48px; flex-wrap:wrap;}
.hero-stats .n{font-family:var(--disp); font-weight:700; font-size:30px; color:var(--gold);}
.hero-stats .l{font-size:12.5px; color:var(--dim); margin-top:3px; max-width:130px; line-height:1.35;}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}

/* product mockup */
.mock{background:linear-gradient(180deg,#FFFFFF,#EFF5FC); border:1px solid var(--line); border-radius:14px; box-shadow:0 40px 80px -36px rgba(15,40,90,.30), 0 2px 0 rgba(255,255,255,.6) inset; overflow:hidden; transform:rotate(1.2deg); transition:transform .4s var(--ease);}
.mock:hover{transform:rotate(0deg);}
.mock-bar{display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--line-cool);}
.mock-bar i{width:9px; height:9px; border-radius:50%; background:#CBD8E8; display:block;}
.mock-bar .tt{margin-left:10px; font-family:var(--mono); font-size:11px; color:var(--dim);}
.mock-body{padding:22px;}
.mock-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px;}
.mock-top .k{font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--mute);}
.mock-top .v{font-family:var(--disp); font-weight:700; font-size:32px; color:var(--cream); margin-top:6px;}
.mock-badge{font-family:var(--mono); font-size:11px; color:var(--gold); background:rgba(37,99,235,.1); border:1px solid var(--line); padding:5px 9px; border-radius:6px;}
.mock-chart{display:flex; align-items:flex-end; gap:9px; height:120px; padding-top:8px;}
.mock-chart i{flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg,rgba(37,99,235,.22),rgba(37,99,235,.05)); transform-origin:bottom; animation:growbar .9s var(--ease) backwards;}
.mock-chart i.hi{background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));}
@keyframes growbar{from{transform:scaleY(.05);}}
.mock-row{display:flex; gap:10px; margin-top:18px;}
.mock-card{flex:1; background:var(--surface-2); border:1px solid var(--line-cool); border-radius:9px; padding:12px;}
.mock-card .mk{font-size:11px; color:var(--dim);} .mock-card .mv{font-family:var(--disp); font-weight:600; font-size:18px; color:var(--cream); margin-top:4px;}

/* ---------- logo wall ---------- */
.logowall{border-top:1px solid var(--line-cool); border-bottom:1px solid var(--line-cool); padding:30px 0;}
.logowall .lw-label{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); text-align:center; margin-bottom:22px;}
.logowall .lw-row{display:flex; align-items:center; justify-content:center; gap:52px; flex-wrap:wrap; opacity:.55;}
.logowall .lw-row span{font-family:var(--disp); font-weight:600; font-size:18px; color:var(--cream); letter-spacing:.01em;}

/* ---------- generic cards / grids ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
.card{background:linear-gradient(180deg,#FFFFFF,#F6FAFE); border:1px solid var(--line-cool); border-radius:var(--r); padding:28px; transition:.25s var(--ease); position:relative; overflow:hidden; box-shadow:0 1px 2px rgba(15,40,90,.04);}
.card:hover{border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(15,40,90,.22);}
.card .c-ico{width:46px; height:46px; border-radius:10px; display:grid; place-items:center; background:rgba(37,99,235,.1); border:1px solid var(--line); margin-bottom:18px; color:var(--gold);}
.card h3{font-family:var(--disp); font-weight:600; font-size:21px; color:var(--cream); margin:0 0 9px; letter-spacing:-.01em;}
.card p{font-size:14.5px; line-height:1.6; color:var(--mute); margin:0;}
.card .c-num{font-family:var(--disp); font-weight:700; font-size:13px; color:var(--gold); margin-bottom:14px;}

/* ---------- value highlight (big stat block) ---------- */
.bigstat{background:linear-gradient(180deg,#F4F8FC,#E9F1FB); border:1px solid var(--line); border-radius:var(--r); padding:34px;}
.bigstat .n{font-family:var(--disp); font-weight:700; font-size:64px; line-height:1; color:var(--gold); letter-spacing:-.03em;}
.bigstat .l{font-size:15px; color:var(--ink-mute); margin-top:12px; line-height:1.5;}

/* ---------- process ---------- */
.process{display:flex; flex-direction:column;}
.pstep{display:grid; grid-template-columns:64px 1fr; gap:28px; padding:30px 0; border-top:1px solid var(--line-cool); align-items:start;}
.pstep:last-child{border-bottom:1px solid var(--line-cool);}
.pstep .pn{font-family:var(--mono); font-size:13px; color:var(--gold); padding-top:4px;}
.pstep h3{font-family:var(--disp); font-weight:600; font-size:24px; color:var(--cream); margin:0 0 8px; letter-spacing:-.01em;}
.pstep p{font-size:15px; line-height:1.6; color:var(--mute); margin:0; max-width:620px;}
.pstep .ptag{font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:10px;}

/* ---------- service rows (services page) ---------- */
.svc{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; padding:64px 0; border-top:1px solid var(--line-cool);}
.svc:nth-child(even) .svc-media{order:-1;}
.svc-tag{font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold);}
.svc h2{font-family:var(--disp); font-weight:700; font-size:34px; color:var(--cream); margin:14px 0 0; letter-spacing:-.02em;}
.svc p{font-size:16px; line-height:1.65; color:var(--mute); margin:16px 0 0;}
.svc ul{list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px;}
.svc li{font-size:14px; color:var(--ink-mute); display:flex; align-items:center; gap:9px;}
.svc li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0;}
.svc-media{background:linear-gradient(160deg,#EAF2FC,#D9E8F7); border:1px solid var(--line); border-radius:var(--r); min-height:300px; display:grid; place-items:center; position:relative; overflow:hidden; padding:30px;}

/* ---------- project cards (work) ---------- */
.proj{border:1px solid var(--line-cool); border-radius:var(--r); overflow:hidden; background:var(--surface); transition:.25s var(--ease); cursor:pointer; box-shadow:0 1px 2px rgba(15,40,90,.04);}
.proj:hover{border-color:var(--line-strong); transform:translateY(-4px); box-shadow:0 20px 44px -26px rgba(15,40,90,.26);}
.proj-img{aspect-ratio:16/10; position:relative; display:grid; place-items:center; overflow:hidden;}
.proj-img .pl-label{font-family:var(--disp); font-weight:700; font-size:26px; color:rgba(255,255,255,.95); letter-spacing:-.01em; text-align:center; padding:20px; position:relative; z-index:2;}
.proj-tags{position:absolute; top:14px; left:14px; z-index:2; display:flex; gap:7px;}
.proj-tags span{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#fff; background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.28); padding:4px 8px; border-radius:5px; backdrop-filter:blur(4px);}
.proj-body{padding:22px;}
.proj-body .pcat{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);}
.proj-body h3{font-family:var(--disp); font-weight:600; font-size:20px; color:var(--cream); margin:9px 0 8px;}
.proj-body p{font-size:14px; line-height:1.55; color:var(--mute); margin:0;}
.proj-body .pmetrics{display:flex; gap:24px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-cool);}
.proj-body .pmetrics .pm .n{font-family:var(--disp); font-weight:700; font-size:20px; color:var(--gold);}
.proj-body .pmetrics .pm .l{font-size:11px; color:var(--dim); margin-top:2px;}
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-top:34px;}
.filt{font-family:var(--body); font-size:13.5px; font-weight:500; color:var(--mute); background:transparent; border:1px solid var(--line-cool-2); border-radius:100px; padding:9px 18px; cursor:pointer; transition:.16s;}
.filt:hover{color:var(--cream); border-color:var(--gold);}
.filt.active{background:var(--gold); color:#fff; border-color:var(--gold); font-weight:600;}

/* ---------- pricing ---------- */
.price-toggle{display:inline-flex; align-items:center; gap:0; background:var(--surface-2); border:1px solid var(--line-cool-2); border-radius:100px; padding:5px; margin-top:30px;}
.price-toggle button{font-family:var(--body); font-size:14px; font-weight:600; color:var(--mute); background:none; border:none; padding:9px 20px; border-radius:100px; cursor:pointer; transition:.18s;}
.price-toggle button.active{background:var(--gold); color:#fff;}
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start;}
.price-card{background:linear-gradient(180deg,#FFFFFF,#F6FAFE); border:1px solid var(--line-cool); border-radius:var(--r); padding:32px; position:relative; transition:.25s var(--ease); box-shadow:0 1px 2px rgba(15,40,90,.04);}
.price-card.feat{border-color:var(--gold); background:linear-gradient(180deg,#F4F9FF,#E8F1FE); box-shadow:0 30px 60px -34px rgba(37,99,235,.4);}
.price-card .pop{position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:#fff; background:var(--gold); padding:5px 14px; border-radius:100px; font-weight:600;}
.price-card .pt{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);}
.price-card .pdesc{font-size:13.5px; color:var(--mute); margin:10px 0 22px; line-height:1.5; min-height:40px;}
.price-card .pamt{font-family:var(--disp); font-weight:700; font-size:46px; color:var(--cream); letter-spacing:-.02em; line-height:1;}
.price-card .pamt small{font-size:15px; color:var(--mute); font-weight:500; font-family:var(--body);}
.price-card .pfrom{font-size:12px; color:var(--dim); margin-top:6px;}
.price-card .pfeat{list-style:none; padding:0; margin:26px 0; display:flex; flex-direction:column; gap:13px;}
.price-card .pfeat li{font-size:14px; color:var(--ink-mute); display:flex; gap:11px; align-items:flex-start; line-height:1.45;}
.price-card .pfeat li svg{flex-shrink:0; margin-top:2px; color:var(--gold);}

/* ---------- testimonials ---------- */
.quote{background:linear-gradient(180deg,#FFFFFF,#F6FAFE); border:1px solid var(--line-cool); border-radius:var(--r); padding:30px; display:flex; flex-direction:column; box-shadow:0 1px 2px rgba(15,40,90,.04);}
.quote .stars{color:var(--gold); font-size:14px; letter-spacing:3px; margin-bottom:16px;}
.quote p{font-size:16px; line-height:1.6; color:var(--ink-mute); margin:0 0 22px; flex:1;}
.quote .qby{display:flex; align-items:center; gap:13px; margin-top:auto;}
.quote .qav{width:44px; height:44px; border-radius:50%; background:linear-gradient(140deg,var(--gold-bright),var(--gold-deep)); display:grid; place-items:center; font-family:var(--disp); font-weight:700; color:#fff; font-size:16px; flex-shrink:0;}
.quote .qn{font-family:var(--disp); font-weight:600; font-size:15px; color:var(--cream);}
.quote .qr{font-size:12.5px; color:var(--dim); margin-top:1px;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line-cool);}
.faq-q{width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:24px; font-family:var(--disp); font-weight:500; font-size:18px; color:var(--cream);}
.faq-q .pm{flex-shrink:0; width:24px; height:24px; position:relative; transition:transform .25s var(--ease);}
.faq-q .pm::before,.faq-q .pm::after{content:''; position:absolute; background:var(--gold); border-radius:2px; top:50%; left:50%; transform:translate(-50%,-50%);}
.faq-q .pm::before{width:14px; height:2px;} .faq-q .pm::after{width:2px; height:14px; transition:transform .25s var(--ease);}
.faq-item.open .pm{transform:rotate(180deg);}
.faq-item.open .pm::after{transform:translate(-50%,-50%) scaleY(0);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s var(--ease);}
.faq-a p{font-size:15px; line-height:1.65; color:var(--mute); margin:0 0 24px; max-width:680px;}

/* ---------- CTA band (solid blue feature moment) ---------- */
.cta-band{position:relative; overflow:hidden; background:linear-gradient(150deg,#2563EB,#1D4ED8); border:1px solid rgba(255,255,255,.16); border-radius:20px; padding:64px 56px; text-align:center; box-shadow:0 40px 80px -40px rgba(37,99,235,.6);}
.cta-band .eyebrow{color:#BFD6FF;} .cta-band .eyebrow::before{background:#BFD6FF;}
.cta-band h2{font-family:var(--disp); font-weight:700; font-size:clamp(30px,4vw,46px); color:#fff; letter-spacing:-.025em; margin:18px 0 0;}
.cta-band h2 em{font-family:var(--serif); font-style:italic; font-weight:500; color:#BFD6FF;}
.cta-band .lead,.cta-band .lead.center{color:rgba(255,255,255,.86);}
.cta-band .cta-row{display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap;}
.cta-band .glow-gold{background:radial-gradient(circle, rgba(255,255,255,.18), transparent 64%);}
.cta-band .btn-gold{background:#fff; color:var(--gold-deep); box-shadow:0 12px 30px -12px rgba(0,0,0,.35);}
.cta-band .btn-gold:hover{filter:none; background:#F2F7FF;}
.cta-band .btn-ghost{border-color:rgba(255,255,255,.5); color:#fff;}
.cta-band .btn-ghost:hover{border-color:#fff; color:#fff; background:rgba(255,255,255,.1);}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line-cool); padding:64px 0 36px; background:var(--bg-2);}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;}
.foot-brand p{font-size:14px; line-height:1.6; color:var(--mute); margin:18px 0 22px; max-width:280px;}
.foot-col h4{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin:0 0 16px;}
.foot-col a{display:block; font-size:14.5px; color:var(--ink-mute); padding:6px 0; transition:color .15s;}
.foot-col a:hover{color:var(--gold);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:48px; padding-top:24px; border-top:1px solid var(--line-cool); flex-wrap:wrap; gap:16px;}
.foot-bottom p{font-size:13px; color:var(--dim); margin:0;}
.foot-social{display:flex; gap:10px;}
.foot-social a{width:38px; height:38px; border-radius:9px; border:1px solid var(--line-cool-2); display:grid; place-items:center; color:var(--mute); transition:.16s;}
.foot-social a:hover{color:var(--gold); border-color:var(--gold);}

/* ---------- forms ---------- */
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px;}
.field label .req{color:var(--gold);}
.field input,.field textarea,.field select{width:100%; font-family:var(--body); font-size:15px; color:var(--ink); background:var(--surface); border:1px solid var(--line-cool-2); border-radius:var(--r-sm); padding:13px 15px; transition:.16s; outline:none;}
.field input::placeholder,.field textarea::placeholder{color:var(--dim);}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold); box-shadow:0 0 0 3px rgba(37,99,235,.14);}
.field textarea{resize:vertical; min-height:120px;}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; cursor:pointer;}
.field.err input,.field.err textarea,.field.err select{border-color:#e0564f; box-shadow:0 0 0 3px rgba(224,86,79,.14);}
.field .errmsg{display:none; font-size:12.5px; color:#d6453d; margin-top:6px;}
.field.err .errmsg{display:block;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.budget-pills{display:flex; gap:9px; flex-wrap:wrap;}
.budget-pills input{position:absolute; opacity:0; pointer-events:none;}
.budget-pills label{font-size:13.5px; font-weight:500; color:var(--mute); border:1px solid var(--line-cool-2); border-radius:8px; padding:11px 16px; cursor:pointer; transition:.16s; margin:0;}
.budget-pills label:hover{border-color:var(--gold); color:var(--cream);}
.budget-pills input:checked + label{background:var(--gold); color:#fff; border-color:var(--gold); font-weight:600;}
.form-success{display:none; text-align:center; padding:40px 20px;}
.form-success.show{display:block;}
.form-success .fs-ico{width:64px; height:64px; border-radius:50%; background:rgba(37,99,235,.12); border:1px solid var(--line); display:grid; place-items:center; margin:0 auto 20px; color:var(--gold);}
.form-success h3{font-family:var(--disp); font-size:24px; color:var(--cream); margin:0 0 10px;}
.form-success p{color:var(--mute); font-size:15px; margin:0;}

/* contact info cards */
.cinfo{display:flex; flex-direction:column; gap:14px;}
.cinfo-item{display:flex; gap:16px; align-items:flex-start; padding:18px; background:var(--surface); border:1px solid var(--line-cool); border-radius:var(--r); transition:.18s; box-shadow:0 1px 2px rgba(15,40,90,.04);}
.cinfo-item:hover{border-color:var(--line-strong);}
.cinfo-item .ci-ico{width:42px; height:42px; border-radius:10px; background:rgba(37,99,235,.1); border:1px solid var(--line); display:grid; place-items:center; color:var(--gold); flex-shrink:0;}
.cinfo-item .ci-k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);}
.cinfo-item .ci-v{font-size:15px; color:var(--cream); margin-top:4px; font-weight:500;}
.cinfo-item .ci-s{font-size:13px; color:var(--mute); margin-top:2px;}

/* booking embed shell */
.book-shell{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; min-height:560px; position:relative; box-shadow:0 20px 50px -30px rgba(15,40,90,.25);}
.cal-embed{width:100%; min-height:560px;}
.book-placeholder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px; gap:14px;}
.book-placeholder .bp-cal{font-family:var(--mono); font-size:12px; color:var(--gold); background:rgba(37,99,235,.08); border:1px solid var(--line); padding:6px 12px; border-radius:6px;}

/* page hero (interior) */
.page-hero{position:relative; overflow:hidden; padding:80px 0 60px;}
.page-hero .ph-meta{font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);}
.page-hero h1{font-family:var(--disp); font-weight:700; font-size:clamp(38px,5.5vw,62px); line-height:1.02; letter-spacing:-.03em; color:var(--cream); margin:20px 0 0; max-width:880px;}
.page-hero h1 em{font-family:var(--serif); font-style:italic; font-weight:500; color:var(--gold);}
.page-hero .ph-sub{font-size:18px; line-height:1.6; color:var(--mute); max-width:560px; margin:22px 0 0;}

/* team */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.tcard{text-align:left;}
.tcard .tav{aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; display:grid; place-items:center; position:relative; margin-bottom:16px; border:1px solid var(--line-cool);}
.tcard .tav .ti{font-family:var(--disp); font-weight:700; font-size:40px; color:rgba(255,255,255,.92);}
.tcard h3{font-family:var(--disp); font-weight:600; font-size:18px; color:var(--cream); margin:0;}
.tcard .trole{font-size:13.5px; color:var(--gold); margin-top:3px;}
.tcard .tbio{font-size:13px; color:var(--mute); margin-top:8px; line-height:1.5;}

/* values list */
.val-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-cool); border:1px solid var(--line-cool); border-radius:var(--r); overflow:hidden;}
.val{background:var(--surface); padding:34px;}
.val .vn{font-family:var(--disp); font-weight:700; font-size:14px; color:var(--gold); margin-bottom:14px;}
.val h3{font-family:var(--disp); font-weight:600; font-size:22px; color:var(--cream); margin:0 0 10px;}
.val p{font-size:14.5px; line-height:1.6; color:var(--mute); margin:0;}

/* tech stack chips */
.stack{display:flex; flex-wrap:wrap; gap:11px;}
.stack span{font-family:var(--mono); font-size:13px; color:var(--ink); background:var(--surface); border:1px solid var(--line-cool-2); border-radius:8px; padding:9px 15px;}

/* ---------- reveal animation ---------- */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
[data-reveal].in{opacity:1; transform:none;}
[data-reveal][data-d="1"]{transition-delay:.08s;}
[data-reveal][data-d="2"]{transition-delay:.16s;}
[data-reveal][data-d="3"]{transition-delay:.24s;}
[data-reveal][data-d="4"]{transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1!important; transform:none!important;} .mock-chart i{animation:none!important;}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr; gap:40px;}
  .svc{grid-template-columns:1fr; gap:30px;} .svc:nth-child(even) .svc-media{order:0;}
  .grid-3,.price-grid{grid-template-columns:1fr 1fr;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px;}
}
@media (max-width:760px){
  .nlinks{display:none;} .burger{display:flex;} .nav-right .btn-ghost{display:none;}
  .section{padding:68px 0;} .wrap{padding:0 22px;}
  .grid-3,.grid-2,.price-grid,.val-grid,.team-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .svc ul{grid-template-columns:1fr;}
  .cta-band{padding:44px 24px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .hero .wrap{padding-top:48px; padding-bottom:64px;}
  .pstep{grid-template-columns:1fr; gap:8px;}
  .foot-bottom{flex-direction:column; align-items:flex-start;}
}