:root{
  --bg:#050a16; --bg2:#0a1329; --panel:#091124;
  --ink:#edf1fa; --soft:#adb9d6; --soft2:#8d9aba;
  --accent:#85bcf0; --night:#050a16;
  --line:rgba(133,188,240,.13); --line2:rgba(133,188,240,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif; font-weight:400; line-height:1.6; letter-spacing:.004em;
  background:
    radial-gradient(110% 70% at 50% -8%, #101d3e 0%, rgba(16,29,62,0) 58%),
    linear-gradient(180deg, #0a1329 0%, #060c1c 42%, #04080f 100%);
  background-attachment:fixed; background-color:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:'Newsreader',Georgia,serif; font-weight:200; margin:0; letter-spacing:-.012em;}
p{margin:0} a{color:inherit; text-decoration:none}
img{max-width:100%}
::selection{background:rgba(133,188,240,.3); color:#fff}

.grain{position:fixed; inset:0; pointer-events:none; z-index:5; opacity:.045; mix-blend-mode:soft-light;
  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.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.skip{position:absolute; left:-9999px; top:0; z-index:300; background:var(--accent); color:#04122a; padding:12px 18px; border-radius:0 0 8px 0; font-weight:600; font-size:14px;}
.skip:focus{left:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

.lineMask{display:block; overflow:hidden;}
.lineInner{display:block; transform:translateY(115%); opacity:0; animation:rise 1.05s cubic-bezier(.19,.74,.22,1) forwards;}
.d1{animation-delay:.2s}.d2{animation-delay:.38s}
.fadeUp{opacity:0; animation:fadeUp 1.1s ease forwards;}
@keyframes rise{to{transform:translateY(0); opacity:1}}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}
@keyframes drift{to{transform:translateX(-80px)}}
.waveDrift{animation:drift 26s linear infinite alternate}
@keyframes cue{0%,100%{transform:scaleY(.35); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}}
.scrollCue{animation:cue 2.6s ease-in-out infinite}

.navlink{position:relative; transition:color .25s}
.navlink::after{content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .35s cubic-bezier(.19,.74,.22,1)}
.navlink:hover{color:var(--ink)}
.navlink:hover::after{transform:scaleX(1); transform-origin:left}

.cta-phone{transition:background .3s,color .3s,border-color .3s}
.cta-phone:hover{background:var(--accent); color:#04122a; border-color:var(--accent)}

.contact-card{transition:background .3s}
.contact-card:hover{background:#0c1530}

.footer-link{transition:color .25s}
.footer-link:hover{color:var(--accent)}

.faq-panel{overflow:hidden; transition:max-height .45s cubic-bezier(.19,.74,.22,1), opacity .35s ease;}
.faq-btn{appearance:none; background:none; border:0; width:100%; text-align:left; cursor:pointer; font-family:inherit;}
.faq-btn:hover .fq{color:var(--accent)}

@media (max-width:1120px){ .nav-sub{display:none!important} }
@media (max-width:860px){
  .nav-links{display:none!important}
  .two-col{grid-template-columns:1fr!important; gap:56px!important}
  .center-rail{display:none!important}
  .duo-img{max-width:340px!important}
  .piliers{grid-template-columns:1fr!important; gap:48px!important}
  .portrait-grid{grid-template-columns:1fr!important}
  .portrait-img{max-width:320px!important; position:static!important}
  .contact-grid{grid-template-columns:1fr!important}
  .footer-grid{grid-template-columns:1fr!important; gap:36px!important}
  .hero-meta{flex-direction:column!important; gap:8px!important; align-items:flex-start!important}
  .presta-in{flex-direction:column!important; align-items:flex-start!important; gap:8px!important}
  .sec-head{flex-direction:column!important; align-items:flex-start!important; text-align:left!important}
  .sec-head .zone{text-align:left!important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lineInner,.fadeUp{animation:none!important; opacity:1!important; transform:none!important}
  .waveDrift,.scrollCue{animation:none!important}
  .faq-panel{transition:none!important}
}