/* ==========================================================================
   QuaBook Marketing — shared site shell
   Reused by every marketing page. Pairs with styles.css (design tokens).
   ========================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-sans);background:#0b1322;color:var(--gray-900);}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

/* ---- layout ---- */
.wrap{position:relative;max-width:1240px;margin:0 auto;padding:0 44px;}
@media(max-width:680px){.wrap{padding:0 22px;}}

/* ---- dark atmosphere (hero + dark sections) ---- */
.darkbg{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(1100px 700px at 74% -12%, rgba(75,111,165,.36), transparent 56%),
  radial-gradient(900px 620px at 4% 116%, rgba(124,58,237,.18), transparent 55%),
  linear-gradient(155deg,#0e1a30 0%,#13223c 46%,#0a1120 100%);}
.aurora{position:absolute;inset:-25% -12%;pointer-events:none;filter:blur(70px);opacity:.62;}
.aurora::before,.aurora::after{content:"";position:absolute;border-radius:50%;}
.aurora::before{width:560px;height:560px;left:52%;top:-16%;background:radial-gradient(circle,rgba(75,111,165,.58),transparent 62%);animation:drift1 19s ease-in-out infinite;}
.aurora::after{width:480px;height:480px;left:-2%;top:44%;background:radial-gradient(circle,rgba(124,58,237,.36),transparent 62%);animation:drift2 23s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-46px,34px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
.flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:radial-gradient(110% 120% at 90% 38%, #000 22%, transparent 72%);
  mask-image:radial-gradient(110% 120% at 90% 38%, #000 22%, transparent 72%);}
.flow canvas{position:absolute;inset:0;width:100%;height:100%;}
.glow{position:absolute;top:-180px;right:-150px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(75,111,165,.26),transparent 62%);pointer-events:none;}
@media (prefers-reduced-motion:reduce){.aurora::before,.aurora::after{animation:none;}}

/* ---- nav ---- */
.nav{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:22px 0;}
.brand{display:flex;align-items:center;gap:12px;}
.mk{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:none;}
.mk svg{width:34px;height:34px;}
.wm{font-size:22px;font-weight:700;letter-spacing:-.6px;color:#fff;}
.links{display:flex;gap:30px;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.72);}
.links a:hover{color:#fff;}
.links a.on{color:#fff;}
.navcta{display:flex;gap:14px;align-items:center;}
.signin{color:rgba(255,255,255,.82);font-size:14.5px;font-weight:500;}
.navtoggle{display:none;width:40px;height:40px;border:none;background:transparent;cursor:pointer;position:relative;z-index:60;}
.navtoggle span{position:absolute;left:9px;height:2.5px;border-radius:2px;background:#fff;transition:all .3s cubic-bezier(.77,0,.18,1);}
.navtoggle span:nth-child(1){top:14px;width:22px;}
.navtoggle span:nth-child(2){top:20px;width:16px;}
.navtoggle.open span:nth-child(1){top:19px;transform:rotate(45deg);}
.navtoggle.open span:nth-child(2){top:19px;width:22px;transform:rotate(-45deg);}

/* mobile menu */
.mobnav{position:fixed;inset:0;z-index:50;background:linear-gradient(160deg,#0e1a30,#0a1120);opacity:0;pointer-events:none;transition:opacity .4s;display:flex;flex-direction:column;padding:88px 28px 32px;}
.mobnav.open{opacity:1;pointer-events:auto;}
.mobnav a{font-size:24px;font-weight:600;color:#fff;padding:16px 0;border-bottom:1px solid rgba(143,176,206,.16);display:flex;justify-content:space-between;align-items:center;}
.mobnav .mobcta{margin-top:auto;display:flex;flex-direction:column;gap:12px;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 19px;border-radius:11px;font-size:14.5px;font-weight:600;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:transform .15s,box-shadow .2s,border-color .2s;}
.btn:hover{transform:translateY(-1px);}
.btn-white{background:#fff;color:var(--star-800);}
.btn-ghost{background:transparent;color:rgba(255,255,255,.92);border-color:rgba(255,255,255,.26);}
.btn-ghost:hover{border-color:rgba(255,255,255,.5);}
.btn-pri{background:linear-gradient(135deg,var(--star-700),var(--star-800));color:#fff;box-shadow:0 8px 18px -8px rgba(35,54,89,.4);}
.btn-line{background:#fff;color:var(--gray-800);border-color:var(--gray-300);}
.btn-line:hover{border-color:var(--gray-400);}

/* ---- page hero (interior pages) ---- */
.pagehero{position:relative;}
.pagehero .inner{position:relative;z-index:5;padding:64px 0 96px;max-width:760px;}
.pagehero .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:7px 14px;border-radius:999px;background:rgba(143,176,206,.1);border:1px solid rgba(143,176,206,.22);color:var(--star-300);}
.pagehero .eyebrow.ai{background:var(--ai-bg-light);border-color:var(--ai-border);color:var(--ai-300);}
.pagehero h1{font-size:clamp(40px,5vw,68px);font-weight:700;line-height:1.02;letter-spacing:-.04em;color:#fff;margin:22px 0 22px;}
.pagehero h1 .g{background:linear-gradient(120deg,#a9c6e0,#5e86b6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.pagehero .lead{font-size:19px;line-height:1.6;color:rgba(255,255,255,.64);max-width:560px;margin:0 0 30px;}
.pagehero .lead b{color:#fff;font-weight:600;}
.pagehero .cta{display:flex;gap:14px;flex-wrap:wrap;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--success-500);animation:blip 1.5s ease-in-out infinite;flex:none;}
@keyframes blip{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---- section system ---- */
.sec{position:relative;padding:104px 0;}
.sec.white{background:#fff;}
.sec.alt{background:linear-gradient(180deg,var(--star-50),#fbfcfe);}
.sec.dark{color:#fff;background:linear-gradient(160deg,#13223c,#0c1525);}
.sec.aiband{color:#fff;background:linear-gradient(150deg,#1c1740,#241a52 50%,#120e2a);}
@media(max-width:680px){.sec{padding:64px 0;}}
.shead{max-width:730px;margin-bottom:48px;}
.shead.center{margin-left:auto;margin-right:auto;text-align:center;}
.skick{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--star-700);}
.skick.ai{color:var(--ai-600);}
.skick.on{color:rgba(255,255,255,.78);}
.skick .d2{width:7px;height:7px;border-radius:50%;background:var(--star-500);}
.skick.ai .d2{background:var(--ai-500);}
.sh2{font-size:clamp(30px,3.6vw,46px);font-weight:600;line-height:1.06;letter-spacing:-.025em;color:var(--gray-900);margin:16px 0 14px;}
.sec.dark .sh2,.sec.aiband .sh2{color:#fff;}
.sh2 .g{background:linear-gradient(135deg,var(--star-600),var(--star-800));-webkit-background-clip:text;background-clip:text;color:transparent;}
.sec.dark .sh2 .g,.sec.aiband .sh2 .g{background:linear-gradient(120deg,#a9c6e0,#7c95c4);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ssub{font-size:18px;line-height:1.62;color:var(--gray-600);max-width:600px;}
.sec.dark .ssub,.sec.aiband .ssub{color:rgba(255,255,255,.62);}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}

/* ---- certs strip ---- */
.certs{background:#fff;border-bottom:1px solid var(--gray-100);}
.certs .row{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:22px 0;}
.certs .lab{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-400);padding-right:8px;border-right:1px solid var(--gray-200);}
.certs .c{font-size:15px;font-weight:700;color:var(--gray-500);letter-spacing:-.01em;}

/* ---- browser mock ---- */
.mock{background:#fff;border:1px solid var(--gray-200);border-radius:16px;box-shadow:0 30px 70px -42px rgba(35,54,89,.3);overflow:hidden;}
.mock-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--gray-100);background:var(--gray-50);}
.mock-bar i{width:10px;height:10px;border-radius:50%;display:block;}
.mock-url{font-family:var(--font-mono);font-size:11px;color:var(--gray-400);margin-left:6px;}
.mock-body{padding:24px;}

/* ---- feature cards ---- */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.fcard{position:relative;background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:26px;box-shadow:0 1px 2px rgba(17,24,39,.04);transition:transform .2s,box-shadow .2s;}
.fcard:hover{transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(35,54,89,.25);}
.fic{width:44px;height:44px;border-radius:12px;background:var(--star-50);border:1px solid var(--star-100);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.fic svg{width:22px;height:22px;stroke:var(--star-600);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.fcard h3{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--gray-900);margin:0 0 8px;}
.fcard p{font-size:14.5px;line-height:1.6;color:var(--gray-600);margin:0;}

/* ---- pills ---- */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;letter-spacing:.04em;white-space:nowrap;}
.pill.ok{background:var(--success-50);color:var(--success-700);border:1px solid rgba(34,197,94,.28);}
.pill.warn{background:var(--warning-50);color:var(--warning-700);border:1px solid rgba(245,158,11,.32);}
.pdot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* ---- proof stats (dark) ---- */
.pstats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);}
.pstat{padding:26px 24px;border-right:1px solid rgba(255,255,255,.12);}
.pstat:last-child{border-right:none;}
.pstat .v{font-size:38px;font-weight:700;letter-spacing:-.02em;}
.pstat .v small{color:var(--star-300);font-size:18px;}
.pstat .l{font-family:var(--font-mono);font-size:10.5px;color:rgba(255,255,255,.5);margin-top:4px;letter-spacing:.05em;text-transform:uppercase;}

/* ---- CTA band ---- */
.ctabox{text-align:center;max-width:680px;margin:0 auto;}
.getearly{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px;}
.getearly input{padding:14px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-size:15px;width:300px;outline:none;}
.getearly input::placeholder{color:rgba(255,255,255,.45);}
.getearly input:focus{border-color:rgba(255,255,255,.55);}

/* ---- footer ---- */
.sec.dark.sitefooter{background:#0A1322;background-image:none;}
.footer{position:relative;padding:8px 0 26px;}
.footer::before{content:none;}
.fcols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:30px;}
.fbrand .blogo{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-weight:700;font-size:18px;color:#fff;}
.fbrand p{font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.6;max-width:280px;margin:0 0 18px;}
.socials{display:flex;gap:18px;}
.socials a{display:inline-flex;align-items:center;justify-content:center;}
.socials svg{width:20px;height:20px;fill:rgba(255,255,255,.5);transition:fill .15s;}
.socials a:hover svg{fill:#fff;}
.fcol h5{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 14px;}
.fcol a{display:block;font-size:13.5px;color:rgba(255,255,255,.62);margin-bottom:10px;}
.fcol a:hover{color:#fff;}
.fbottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;color:rgba(255,255,255,.42);}
.fbottom a{color:rgba(255,255,255,.5);margin-left:18px;}

/* ---- responsive ---- */
@media(max-width:1024px){
  .links,.navcta .signin,.navcta .btn{display:none;}
  .navtoggle{display:block;}
}
@media(max-width:880px){
  .twocol{grid-template-columns:1fr;gap:36px;}
  .fgrid{grid-template-columns:1fr;}
  .pstats{grid-template-columns:repeat(2,1fr);}
  .fcols{grid-template-columns:1fr 1fr;gap:26px;}
}