:root{
  --apo-bg:#0b1220; --apo-text:#e6edf3; --apo-muted:#cdd6f4; --apo-subtle:#94a3b8; 
  --apo-primary:#2563eb; --apo-violet:#7c3aed; --apo-accent:#93c5fd; --glass: 
  rgba(15,23,42,.58); --border: rgba(148,163,184,.22); --card: rgba(2,6,23,.6);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} 
body{margin:0;background:var(--apo-bg);color:var(--apo-text);font-family:'Inter',system-ui,-apple-system,Segoe 
UI,Roboto,Arial,sans-serif;line-height:1.6}
#apo{isolation:isolate;position:relative;min-height:100vh}
/* Containers & Sections */ .apo-container{width:100%;max-width:1200px;margin:0 
auto;padding:0 1rem} .apo-section{position:relative;z-index:1;padding:5.5rem 0} 
.apo-center{text-align:center} .section-head{margin-bottom:1.5rem} 
.narrow{max-width:860px;margin:0 auto} .strong{font-weight:800;color:#fff} 
.muted{color:#cbd5e1} /* Navigation helpers*/ .apo-nav-left{ margin-left:1rem; } 
/* keeps a small gap after logo */ .apo-nav-right{ margin-left:auto; display:flex; 
align-items:center; gap:.6rem; } /* Background */ 
.apo-bg-wrap{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} 
.apo-bg-grid{
  position:absolute;inset:-200px;opacity:.6; background: radial-gradient(circle at 
  20% 20%,
    rgba(124,58,237,.12), transparent 40%), radial-gradient(circle at 80% 30%, 
    rgba(37,99,235,.10), transparent 40%), radial-gradient(circle at 30% 80%, 
    rgba(147,197,253,.08), transparent 45%), linear-gradient(180deg, 
    rgba(255,255,255,.02), rgba(255,255,255,0));
  -webkit-mask:linear-gradient(#000, rgba(0,0,0,.22)); mask:linear-gradient(#000, 
          rgba(0,0,0,.22));
  animation:apo-drift 60s linear infinite;
}
.apo-bg-grid::before{ content:"";position:absolute;inset:0; background-image: 
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), 
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px; mix-blend-mode:overlay;
}
.apo-blob{position:absolute;width:60vmax;height:60vmax;filter:blur(80px);border-radius:50%;opacity:.85} 
.apo-b1{background: radial-gradient(closest-side, rgba(124,58,237,.33), 
transparent 70%); animation:apo-blob1 38s ease-in-out infinite alternate;} 
.apo-b2{background: radial-gradient(closest-side, rgba(37,99,235,.33), transparent 
70%); animation:apo-blob2 52s ease-in-out infinite alternate;} @keyframes 
apo-drift{from{transform:translate3d(0,0,0) 
rotate(0)}to{transform:translate3d(0,-6%,0) rotate(1deg)}} @keyframes 
apo-blob1{0%{transform:translate(-10%,-8%) 
scale(1)}100%{transform:translate(20%,6%) scale(1.15)}} @keyframes 
apo-blob2{0%{transform:translate(10%,12%) 
scale(1)}100%{transform:translate(-18%,-8%) scale(1.2)}} /* Glass & Cards */ 
.apo-glass{background:var(--glass);border:1px solid 
var(--border);border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} 
.apo-card{background:var(--card);border:1px solid 
rgba(148,163,184,.18);border-radius:16px;padding:1.25rem;transition:transform .25s 
ease,border-color .25s ease} 
.apo-card:hover{transform:translateY(-4px);border-color:rgba(147,197,253,.45)} 
.card-title{color:#a5b4fc;font-size:1.2rem;font-weight:700;margin:.25rem 0} /* 
Header / Nav */ .apo-header{position:sticky;top:0;padding:1rem 0 0;z-index:50} 
.apo-nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 
1rem;transition:transform .25s ease, background-color .25s ease, box-shadow .25s 
ease} 
.apo-brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit} 
.apo-logo{width:32px;height:32px;transition:transform .2s ease} .apo-brand:hover 
.apo-logo{transform:scale(1.06)} 
.apo-brand-name{font-weight:800;letter-spacing:.2px} .apo-brand-name 
em{color:#a5b4fc;font-style:normal} 
.apo-nav-links{display:none;gap:1rem;align-items:center;flex-wrap:wrap} @media 
(min-width:900px){.apo-nav-links{display:flex}} 
.apo-link{color:var(--apo-muted);text-decoration:none;font-weight:600;font-size:.95rem;position:relative;padding:.4rem 
.5rem;border-radius:10px;transition:color .2s ease, background .2s ease} 
.apo-link:hover{color:#fff;background:rgba(255,255,255,.06)} 
.apo-link.active{color:#fff;background:rgba(147,197,253,.12);box-shadow:0 0 0 1px 
rgba(147,197,253,.25) inset} .apo-lang.plain{
  background:none; border:none; padding:.4rem .6rem; border-radius:10px; 
  color:#a8b0bf; font-weight:700; cursor:pointer; transition:color .2s ease, 
  background .2s ease;
}
.apo-lang.plain:hover{ color:#ffffff; background:rgba(255,255,255,.06); } 
.apo-lang{
  appearance:none;border:none;border-radius:999px;padding:.5rem .9rem; 
  font-weight:700;cursor:pointer; color:#0f172a;background:#fff; /* FIXED COLOR */ 
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.apo-lang:hover{transform:translateY(-1px);box-shadow:0 8px 22px 
rgba(255,255,255,.15)} .apo-lang:active{transform:translateY(0)} .apo-cta{
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center; 
  padding:.6rem 
  1rem;border-radius:999px;font-weight:800;font-size:.95rem;color:#0f172a; 
  background:#fff;border:1px solid rgba(15,23,42,.08); transition:transform .15s 
  ease, box-shadow .25s ease, background .25s ease;
}
.apo-cta:hover{background:#eef2ff;transform:translateY(-1px);box-shadow:0 10px 
28px rgba(99,102,241,.25)} .apo-cta:active{transform:translateY(0)} /* Hero */ 
.apo-hero 
h1{font-size:clamp(2.25rem,5vw,4.5rem);font-weight:900;letter-spacing:-.02em;margin:0} 
.apo-gradient{background-image:linear-gradient(90deg,var(--apo-accent),#a78bfa 
35%,#60a5fa 
70%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-top:.5rem} 
.apo-lede{color:#c7d2fe;font-size:clamp(1rem,1.6vw,1.25rem);max-width:48rem;margin:1.25rem 
auto 0;text-align:center} /* Curved shelf */ .apo-hero-rail{
  margin-top:1.25rem;display:flex;justify-content:center;
}
.apo-hero-rail::before{ content:""; position:absolute; transform:translateY(-6px); 
height:72px;
  border:0.5px solid rgba(148,163,184,.18); 
  background:rgba(2,6,23,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); 
  border-radius:28px/38px; /* more curve on top */ z-index:0;
}
.apo-hero-actions{position:relative;z-index:1;display:flex;flex-direction:column;gap:.9rem;align-items:center;justify-content:center} 
@media (min-width:768px){.apo-hero-actions{flex-direction:row}} /* Buttons 
(global) */ .apo-btn{
  display:inline-flex;align-items:center;justify-content:center; padding:1rem 
  1.75rem;border-radius:999px;font-weight:800;border:1px solid 
  transparent;text-decoration:none; transform:translateZ(0);transition:transform 
  .15s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.apo-btn.primary{background:linear-gradient(90deg,#6366f1,#7c3aed);color:#fff;box-shadow:0 
0 0 1px rgba(99,102,241,.45),0 8px 40px rgba(99,102,241,.25)} 
.apo-btn.primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 0 1px 
rgba(99,102,241,.6),0 16px 48px rgba(99,102,241,.35)} 
.apo-btn.secondary{border-color:rgba(129,140,248,.6);color:#c7d2fe;background:transparent} 
.apo-btn.secondary:hover{background:rgba(99,102,241,.12);transform:translateY(-2px) 
scale(1.02)} .apo-btn.white{background:#fff;color:#0f172a} 
.apo-btn.white:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 46px 
rgba(255,255,255,.25)} .apo-btn.strong{font-weight:900} /* Section headers */ 
.apo-eyebrow{color:#a5b4fc;text-transform:uppercase;font-weight:700;letter-spacing:.2em;font-size:.8rem} 
.apo-title{font-size:clamp(1.75rem,2.8vw,2.5rem);font-weight:800} 
.apo-title.sm{font-size:1.4rem} 
.tagline{font-weight:900;font-size:1.35rem;margin-top:.25rem} /* Separator */ 
.apo-sep{position:relative} 
.apo-sep::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;height:1px;width:90%;
  background:linear-gradient(90deg,transparent,rgba(148,163,184,.28),transparent);pointer-events:none;z-index:0} 
/* Grids */ .apo-grid{display:grid;gap:1rem} 
.apo-grid.two{grid-template-columns:1fr} @media 
(min-width:768px){.apo-grid.two{grid-template-columns:1fr 1fr}} 
.apo-grid.four{grid-template-columns:1fr} @media 
(min-width:1024px){.apo-grid.four{grid-template-columns:repeat(4,1fr)}} /* 
Features parallax */ .apo-features{position:relative;z-index:1} 
.apo-features::before{
  content:"";position:absolute;inset:-10% -5%; background: radial-gradient(60% 60% 
  at 10% 20%,
    rgba(124,58,237,.18), transparent 60%), radial-gradient(60% 60% at 90% 30%, 
    rgba(37,99,235,.16), transparent 60%), linear-gradient(180deg, 
    rgba(255,255,255,.04), rgba(255,255,255,0));
  filter:blur(2px);transform:translateY(var(--parallax,0px)); transition:transform 
  .15s linear;pointer-events:none;z-index:0
}
.apo-stick{position:sticky;top:0;height:1px;width:1px;margin-top:-1px;z-index:0} 
/* Steps list */ 
.apo-steps{margin:0;padding-left:1.25rem;font-size:1.15rem;font-weight:700;color:#f1f5f9} 
/* Value cards */ .apo-vcard{text-align:center;border-top:4px solid 
rgba(99,102,241,.7)} .apo-vcard h5{font-size:1.15rem;margin-top:.25rem} .apo-vcard 
p{color:#cbd5e1;margin-top:.25rem} 
.apo-ico{width:20px;height:20px;color:#4ade80;flex:0 0 auto} /* Pricing */ 
.apo-pricing{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:2rem} 
@media (min-width:1024px){.apo-pricing{grid-template-columns:repeat(3,1fr)}} 
.apo-price h4{font-size:1.5rem;margin:.25rem 0 .5rem} .apo-price 
.price{margin-top:1rem} .amount{font-size:2.75rem;font-weight:800;color:#fff} 
.per{font-size:1.1rem;color:#cbd5e1;margin-left:.3rem} 
.buy{display:block;text-align:center;padding:.85rem 
1rem;border-radius:999px;text-decoration:none;font-weight:800;color:#c7d2fe;background:rgba(79,70,229,.2);border:1px 
solid rgba(99,102,241,.4);transition:transform .15s ease, background .2s ease, 
box-shadow .25s ease} 
.buy:hover{background:rgba(79,70,229,.3);transform:translateY(-2px) 
scale(1.01);box-shadow:0 14px 40px rgba(99,102,241,.25)} 
.apo-feature-list{list-style:none;margin:1rem 0 0;padding:0;color:#e2e8f0} 
.apo-feature-list li{display:flex;align-items:center;gap:.6rem;margin:.6rem 0} 
.apo-feature-list .muted{opacity:.6} 
.apo-badge{position:absolute;left:50%;transform:translateX(-50%);top:-12px;background:#4f46e5;color:#fff;font-weight:800;font-size:.7rem;padding:.3rem 
.6rem;border-radius:999px;box-shadow:0 6px 18px rgba(79,70,229,.45)} 
.featured{position:relative;box-shadow:0 0 0 1px rgba(99,102,241,.45), 0 8px 40px 
rgba(99,102,241,.25)} .solid{background:#fff
!important;color:#0f172a;border-color:rgba(15,23,42,.08)}
/* CTA band & Footer */ 
.apo-band{background:linear-gradient(90deg,#4f46e5,#7c3aed);color:#fff} 
.cta-title{font-size:clamp(2rem,4vw,3rem);font-weight:900;margin:0} 
.cta-sub{font-size:1.2rem;color:#e0e7ff;max-width:48rem;margin:1rem auto 0} 
.apo-footer{background:#020617} 
.apo-footgrid{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)} @media 
(min-width:768px){.apo-footgrid{grid-template-columns:repeat(5,1fr)}} 
.foot-brand{grid-column:span 2} .brand-lg{font-size:1.4rem} 
.foot-sub{margin-top:.75rem;color:#94a3b8;font-size:.9rem} 
.foot-head{font-weight:700;margin-bottom:.5rem} 
.foot-list{list-style:none;margin:0;padding:0;color:#94a3b8;font-size:.95rem} 
.foot-list a{color:inherit;text-decoration:none} .foot-list 
a:hover{text-decoration:underline} .foot-subscribe form{max-width:420px} 
.foot-subscribe input{width:100%;padding:.75rem;border:none;border-radius:.5rem 
.5rem 0 0;color:#0f172a} .foot-subscribe 
button{width:100%;padding:.75rem;background:#4f46e5;color:#fff;font-weight:700;border:none;border-radius:0 
0 .5rem .5rem;cursor:pointer} .foot-subscribe 
button:hover{filter:brightness(1.05)} .apo-copy{border-top:1px solid 
rgba(255,255,255,.1);margin-top:2rem;padding-top:1.25rem;display:flex;flex-direction:column;gap:.75rem;align-items:center;justify-content:space-between;color:#94a3b8;font-size:.9rem} 
@media (min-width:768px){.apo-copy{flex-direction:row}} 
.foot-lang{background:none;border:none;color:inherit;cursor:pointer} /* Scroll 
effects & helpers */ [data-reveal]{
  opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease;
}
.js [data-reveal]{ opacity: 0; transform: translateY(14px); } .js .revealed{ 
opacity: 1; transform: none; }
#final-cta .apo-btn{ margin-top:1.25rem; }
/* Scroll offset so anchors don't hide under sticky nav */
#hero,#about,#who,#value-prop,#pricing,#final-cta,#footer{scroll-margin-top:90px}
/* Sticky nav shrink */ 
.nav-shrink{transform:translateY(-4px);background:rgba(2,6,23,.55);box-shadow:0 
8px 24px rgba(2,6,23,.35)} /* ===== Modals / Popups ===== */ /* Backdrop: hidden 
by default to avoid flash-of-modal on first paint */ .apo-modal-backdrop{
  position:fixed; inset:0; background:rgba(2,6,23,.62); backdrop-filter:blur(6px); 
  -webkit-backdrop-filter:blur(6px); display:none; /* was: flex */ 
  align-items:center; justify-content:center; z-index:1000; opacity:0; 
  pointer-events:none; transition:opacity .2s ease;
}
.apo-modal-backdrop.open{ display:flex; /* show when open */ opacity:1; 
  pointer-events:auto;
}
.apo-modal{ width:min(92vw,560px); background:var(--glass); border:1px solid 
  var(--border); border-radius:16px; padding:1.25rem; color:var(--apo-text); 
  box-shadow:0 24px 64px rgba(2,6,23,.5);
}
.apo-modal header{ display:flex; align-items:center; 
  justify-content:space-between; gap:.5rem; margin-bottom:.5rem;
}
.apo-modal h3{ margin:0; font-size:1.15rem; font-weight:800; } .apo-x{ 
  background:none; border:1px solid rgba(255,255,255,.12); color:#cbd5e1; 
  border-radius:10px; padding:.35rem .55rem; cursor:pointer;
}
.apo-modal .modal-body{ padding:.5rem 0 0; } .apo-lang-list{ display:grid; 
gap:.5rem; margin-top:.5rem; } .apo-lang-list button{
  text-align:left; width:100%; border:1px solid rgba(148,163,184,.25); 
  background:var(--card); color:#e2e8f0; padding:.7rem .8rem; 
  border-radius:.75rem; font-weight:700; cursor:pointer;
}
.apo-lang-list button:hover{ border-color:rgba(147,197,253,.5) } .apo-form{ 
  display:grid; gap:.6rem; margin-top:.25rem;
}
.apo-form input[type="email"]{ width:100%; padding:.9rem 1rem; 
  border-radius:.75rem; border:1px solid rgba(148,163,184,.35); background:#fff; 
  color:#0f172a; outline:none;
}
.apo-form input[type="email"].invalid{ border-color:#ef4444; box-shadow:0 0 0 2px 
  rgba(239,68,68,.25);
}
.apo-form button{ padding:.9rem 1rem; border-radius:.75rem; font-weight:800; 
  border:1px solid rgba(99,102,241,.4); 
  background:linear-gradient(90deg,#6366f1,#7c3aed); color:#fff; cursor:pointer; 
  opacity:.6; pointer-events:none; transition:opacity .15s ease, transform .15s 
  ease;
}
.apo-form button.enabled{ opacity:1; pointer-events:auto; } .apo-form 
button:active{ transform:translateY(1px) } .apo-modal .content-scroll{
  max-height:60vh; overflow:auto; padding-right:.25rem;
}
/* small helper for subtle links in modals */ .apo-muted-link{ color:#cbd5e1; 
text-decoration:none; } .apo-muted-link:hover{ text-decoration:underline; } /* 
Ensure modal header/footer match TOS */ .apo-modal-header {
  display: flex; align-items: center; justify-content: space-between; padding: 
  16px 20px; border-bottom: 1px solid var(--modal-border, #e2e8f0); background: 
  var(--modal-header-bg, #ffffff);
}
.apo-modal-title { margin: 0; font-size: 1.125rem; line-height: 1.4; font-weight: 
  600;
}
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--modal-border, 
  #e2e8f0);
  background: var(--modal-footer-bg, #f8fafc); text-align: center;
}
.apo-muted-link { color: var(--muted-link, #4b5563); text-decoration: none; 
  font-weight: 500;
}
/* Body spacing like TOS text blocks */ .apo-modal .modal-body.content-scroll { 
  padding: 20px;
}
/* Make the iframe area look like a TOS text section */ .apo-doc-embed { border: 
  1px solid var(--modal-border, #e2e8f0); background: var(--modal-body-bg, 
  #ffffff);
  border-radius: 12px; overflow: hidden; box-shadow: var(--modal-shadow, 0 1px 2px 
  rgba(0,0,0,0.04));
}
/* Frame sizing to match typical TOS height */ .apo-doc-embed iframe { display: 
  block; width: 100%; height: 65vh; /* adjust if your TOS runs taller/shorter */ 
  border: 0; background: transparent;
}
/* Optional: dark mode alignment if your site supports it */ @media 
(prefers-color-scheme: dark) {
  .apo-modal-header { background: var(--modal-header-bg-dark, #0f172a); 
    border-bottom-color: var(--modal-border-dark, #243041);
  }
  .modal-footer { background: var(--modal-footer-bg-dark, #0b1220); 
    border-top-color: var(--modal-border-dark, #243041);
  }
  .apo-muted-link { color: var(--muted-link-dark, #94a3b8); } .apo-modal 
  .modal-body.content-scroll { color: #e6edf3; } .apo-doc-embed {
    background: var(--modal-body-bg-dark, #0f172a); border-color: 
    var(--modal-border-dark, #243041); box-shadow: none;
  }
}
/* Dark chrome for modal shell; do NOT force text color inside content */ 
.apo-modal { background: #0b1220; } /* Match TOS header/footer look in dark */ 
.apo-modal-header {
  background: #0f172a; border-bottom-color: #243041; color: #e6edf3;
}
.modal-footer { background: #0b1220; border-top-color: #243041;
}
.apo-modal-title, .apo-x, .apo-muted-link { color: #e6edf3; } /* Keep the doc card 
(iframe wrapper) looking like TOS text area */ .apo-doc-embed {
  background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: 
  hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); color: #0f172a; /* text color for 
  anything inside the wrapper (non-iframe) */
}
/* Size the frame; let the document itself keep black-on-white like TOS */ 
.apo-doc-embed iframe {
  display: block; width: 100%; height: 65vh; border: 0; background: transparent; 
  /* leave the doc’s own background alone */
}
/* Body spacing like TOS */ .apo-modal .modal-body.content-scroll { padding: 20px; 
}
/* When embedding a doc, do not nest scroll areas */ .apo-modal 
.modal-body.has-embed {
  max-height: none; /* cancel the 60vh cap */ overflow: visible; /* let the iframe 
  handle scroll */ padding: 20px; /* keep the same spacing */
}
/* Give the embed a single scrollable surface */ .apo-doc-embed { height: 68vh; } 
/* tweak to taste */ .apo-doc-embed iframe {
  display: block; width: 100%; height: 100%; border: 0; background: transparent; 
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
}
.message.loading { color:#93c5fd; } .message.error { color:#ef4444; } 
.message.success { color:#10b981; } @keyframes shake {
  0%,100%{transform:translateX(0);} 20%,60%{transform:translateX(-8px);} 
  40%,80%{transform:translateX(8px);}
}
.shake { animation:shake .4s; }