/* ============================================================
   Aadvika Technologies — editorial design system
   Colour roles: Aadvika = antique gold · Build OS = Renaud aubergine/gold · Vitalis = green
   ============================================================ */
:root{
  --paper:#F4F1E8; --paper2:#FBF9F2; --ink:#14171D; --ink2:#565B66; --ink3:#8A8F9A;
  --hero1:#143756; --hero2:#0B1F39; --hero3:#04101E;
  --amber:#C7A24E; --amber-d:#A9843A; --gold-lite:#E6D3A3;
  --renaud:#4A3848; --renaud-gold:#C6A669; --renaud-lite:#6B5468; --renaud-tint:#F3F0EB;
  --green:#13A56E; --green-tint:#E9F5EF;
  --coral:#E5573D;
  --line:rgba(20,23,29,.14); --line2:rgba(20,23,29,.08); --lineN:rgba(244,241,232,.16);
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"Space Mono",monospace;
  --pad:clamp(22px,5vw,48px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:400; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{display:block}
::selection{background:var(--amber); color:#20160a}
.wrap{max-width:1240px; margin:0 auto; padding:0 var(--pad)}
.mono{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase}
h1,h2,h3,h4{font-family:var(--serif); font-weight:360; letter-spacing:-.015em; line-height:1.05}
em{font-style:italic}
a{color:inherit}

/* buttons */
.btn{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; display:inline-block; transition:.25s; cursor:pointer; border:0}
.btn.solid{background:var(--amber); color:#20160a; padding:15px 22px}
.btn.solid:hover{background:var(--amber-d)}
.btn.dark{background:var(--ink); color:var(--paper); padding:15px 22px}
.btn.dark:hover{background:#000}
.btn.link{color:var(--ink); border-bottom:2px solid var(--coral); padding:0 0 4px}
.btn.link:hover{color:var(--coral)}

/* ---------------- interior light header ---------------- */
.hdr{position:sticky; top:0; z-index:100; background:rgba(244,241,232,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.hdr .in{display:flex; align-items:center; gap:30px; max-width:1240px; margin:0 auto; padding:16px var(--pad)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand svg{width:28px}
.brand b{font-family:var(--mono); font-weight:700; letter-spacing:.24em; font-size:13px}
.hdr nav{margin-left:auto; display:flex; gap:22px}
.hdr nav a{font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink2); text-decoration:none; transition:.2s}
.hdr nav a:hover,.hdr nav a.on{color:var(--ink)}
.hdr .navbtn{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:11px 15px; text-decoration:none; white-space:nowrap}
.menub{display:none; margin-left:auto; background:none; border:1px solid var(--line); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; padding:9px 13px}

/* ---------------- home hero (dark, animated A) ---------------- */
.hero{position:relative; min-height:90vh; overflow:hidden; color:var(--paper);
  background:radial-gradient(58% 54% at 68% 40%, rgba(199,162,78,.10), transparent 62%), radial-gradient(95% 85% at 66% 42%, var(--hero1) 0%, var(--hero2) 52%, var(--hero3) 100%); display:flex; flex-direction:column}
.hero #ink{position:absolute; inset:0; width:100%; height:100%}
.hero .hbar{position:relative; z-index:3}
.hero .hbar .in{display:flex; align-items:center; gap:28px; max-width:1240px; margin:0 auto; padding:22px var(--pad)}
.hero .hbar .brand b{color:var(--paper)}
.hero .hbar nav{margin-left:auto; display:flex; gap:22px}
.hero .hbar nav a{font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:#a9bcce; text-decoration:none}
.hero .hbar nav a.on,.hero .hbar nav a:hover{color:var(--paper)}
.hero .hbar .navbtn{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(199,162,78,.7); color:var(--amber); padding:10px 15px; text-decoration:none}
.hud{position:relative; z-index:2; margin:auto 0; pointer-events:none}
.hud .in{max-width:1240px; margin:0 auto; padding:40px var(--pad)}
.kick{display:flex; align-items:center; gap:12px; color:#a9bcce; margin-bottom:24px}
.kick .sq{width:9px; height:9px; background:var(--amber)}
.hero h1{font-size:clamp(44px,5.4vw,80px); line-height:1.0; max-width:15ch; color:var(--paper)}
.hero h1 .u{background:linear-gradient(transparent 85%, rgba(199,162,78,.9) 0)}
.hero .lead{margin-top:24px; font-size:17px; color:#c3d0dd; max-width:47ch}
.hero .cta{margin-top:32px; display:flex; align-items:center; gap:22px; pointer-events:auto; flex-wrap:wrap}
.hero .cta .btn.link{color:var(--paper)}
.hstats{position:relative; z-index:2; border-top:1px solid var(--lineN)}
.hstats .in{max-width:1240px; margin:0 auto; padding:20px var(--pad); display:flex; gap:40px; flex-wrap:wrap}
.hstats .n{font-family:var(--serif); font-size:26px; line-height:1}
.hstats div:nth-child(1) .n{color:var(--paper)} .hstats div:nth-child(2) .n{color:var(--amber)}
.hstats div:nth-child(3) .n{color:#45B98A} .hstats div:nth-child(4) .n{color:#7C8FE6}
.hstats .l{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#93a7ba; margin-top:7px}

/* ---------------- interior page hero ---------------- */
.pagehero{padding:96px var(--pad) 6vh; border-bottom:1px solid var(--line)}
.pagehero .in{max-width:1240px; margin:0 auto}
.pagehero .kick{color:var(--ink2); margin-bottom:22px}
.pagehero .kick .sq{background:var(--amber)}
.pagehero h1{font-size:clamp(40px,5vw,72px); line-height:1.0; max-width:16ch}
.pagehero .sub{margin-top:22px; font-size:17px; color:var(--ink2); max-width:56ch}

/* ---------------- generic section ---------------- */
.sec{padding:78px var(--pad)}
.sec .in{max-width:1240px; margin:0 auto}
.sechd{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); padding-bottom:24px}
.sechd h2{font-size:clamp(28px,3vw,44px); line-height:1.04}
.sechd .r{text-align:right}
.sechd .r .mono{color:var(--ink2)}
.sechd .r .note{display:inline-block; margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--renaud)}

/* editorial services grid */
.grid3{display:grid; grid-template-columns:repeat(3,1fr)}
.cell{padding:32px 30px 38px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.cell:nth-child(3n){border-right:0}
.cell .no{font-family:var(--mono); font-weight:700; font-size:13px}
.cell:nth-child(1) .no{color:var(--amber)} .cell:nth-child(2) .no{color:var(--renaud)} .cell:nth-child(3) .no{color:var(--green)}
.cell:nth-child(4) .no{color:var(--coral)} .cell:nth-child(5) .no{color:var(--amber)} .cell:nth-child(6) .no{color:var(--renaud)}
.cell h3{font-size:21px; margin:16px 0 9px; font-weight:400}
.cell p{font-size:13.5px; color:var(--ink2)}

/* product feature (theme via --pc / --pc-tint) */
.feature{--pc:var(--renaud); --pc-accent:var(--renaud-gold); --pc-tint:var(--renaud-tint); border-top:1px solid var(--line)}
.feature.vitalis{--pc:var(--green); --pc-accent:var(--green); --pc-tint:var(--green-tint)}
.feature .in{max-width:1240px; margin:0 auto; padding:74px var(--pad); display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.feature .tag{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--pc); margin-bottom:18px}
.feature .tag .dot{width:8px; height:8px; border-radius:50%; background:var(--pc)}
.feature h2{font-size:clamp(30px,3.4vw,50px); line-height:1.02}
.feature h2 em{font-style:normal; color:var(--pc)}
.feature p{margin-top:18px; font-size:15.5px; color:var(--ink2); max-width:52ch}
.feature .cta{margin-top:30px; display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.feature .cta .btn.solid{background:var(--pc); color:#fff}
.feature .cta .btn.link{border-color:var(--pc)}
.feature .panel{border:1px solid var(--line); border-left:3px solid var(--pc-accent); background:var(--pc-tint); padding:26px 30px 10px}
.feature .panel .row{font-family:var(--mono); font-size:12.5px; color:var(--ink); padding:12px 0; border-bottom:1px solid var(--line2); display:flex; gap:10px}
.feature .panel .row:last-child{border-bottom:0}
.feature .panel .row b{color:var(--pc-accent); font-weight:700}

/* engagement / models */
.models{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line)}
.model{padding:30px 26px 34px; border-right:1px solid var(--line)}
.model:last-child{border-right:0}
.model .sn{font-family:var(--mono); font-weight:700; font-size:12px; color:var(--ink3)}
.model h4{font-size:19px; margin:14px 0 8px; font-weight:400}
.model p{font-size:13px; color:var(--ink2)}

/* signature strip */
.sig{background:radial-gradient(110% 150% at 50% 8%, var(--hero1) 0%, var(--hero2) 70%); color:var(--paper); text-align:center; border-top:1px solid rgba(199,162,78,.30)}
.sig .in{max-width:1240px; margin:0 auto; padding:90px var(--pad)}
.sig blockquote{font-family:var(--serif); font-style:italic; font-weight:340; font-size:clamp(24px,3vw,40px); line-height:1.32; max-width:24ch; margin:0 auto; color:var(--paper)}
.sig blockquote span{color:var(--amber)}
.sig .attr{margin-top:26px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#9aa3af}

/* footer */
footer{background:var(--hero2); color:#a9bcce; border-top:3px solid var(--amber)}
footer .in{max-width:1240px; margin:0 auto; padding:64px var(--pad) 30px}
.fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px}
.fbrand .brand b{color:var(--paper)}
.fbrand p{margin-top:16px; font-size:13.5px; color:#9fb1c4; max-width:32ch}
.fcol h5{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:16px}
.fcol a{display:block; color:#a9bcce; text-decoration:none; font-size:13.5px; padding:6px 0; transition:.2s}
.fcol a:hover{color:var(--paper)}
.fbase{margin-top:52px; padding-top:22px; border-top:1px solid var(--lineN); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#7f93a6}

/* forms */
.form{display:grid; gap:6px}
.form label{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2); margin-top:18px}
.form input,.form textarea{background:var(--paper2); border:1px solid var(--line); color:var(--ink); font-family:var(--sans); font-size:15px; padding:13px 15px; outline:none; transition:.2s}
.form input:focus,.form textarea:focus{border-color:var(--ink)}
.form textarea{resize:vertical; min-height:120px}
.form .btn{margin-top:22px; justify-self:start}

@media (max-width:900px){
  .feature .in{grid-template-columns:1fr; gap:30px}
  .grid3{grid-template-columns:1fr 1fr}
  .models{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .hdr nav{display:none} .menub{display:block}
  .grid3,.models{grid-template-columns:1fr}
  .cell{border-right:0}
  .sechd{flex-direction:column; align-items:flex-start; gap:12px}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }