/* CrewOS Marketing Theme v1.0 */
:root {
  --font-sans: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --radius-xs: 4px; --radius-sm: 8px; --radius: 18px; --radius-lg: 32px;
  --gradient-brand: linear-gradient(90deg,#4f46e5,#6366f1 40%,#0ea5e9 75%,#06b6d4);
  --gradient-accent: radial-gradient(circle at 30% 25%,rgba(99,102,241,.35),rgba(14,165,233,0) 70%);
  --gradient-hero: linear-gradient(140deg,#101a2e 0%,#0d2541 55%,#0f172a 100%);
  --gradient-section: linear-gradient(135deg,#ffffff,#f4f7fb);
  --shadow-sm: 0 2px 4px -2px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.08);
  --shadow: 0 8px 32px -10px rgba(0,8,40,.45),0 4px 18px -6px rgba(0,15,50,.3);
  --ease: cubic-bezier(.4,0,.2,1);
  --c-bg: #ffffff; --c-bg-alt: #f4f7fb; --c-surface: #ffffff; --c-surface-alt:#f0f4fa; --c-border:#e2e8f0;
  --c-text:#0f172a; --c-text-sub:#475569; --c-brand:#6366f1; --c-brand-dark:#4f46e5; --c-brand-soft:#eef2ff;
  --c-accent:#0ea5e9; --c-danger:#ef4444; --c-ok:#10b981;
}
@media (prefers-color-scheme: dark) {
  :root {
    --gradient-section: linear-gradient(135deg,#121d30,#0d1526);
    --c-bg:#0b1220; --c-bg-alt:#0f1828; --c-surface:#162133; --c-surface-alt:#1b2a40; --c-border:#1e3148;
    --c-text:#f1f5f9; --c-text-sub:#94a3b8; --c-brand:#818cf8; --c-brand-dark:#6366f1; --c-brand-soft:#273459; --c-accent:#38bdf8;
    --shadow: 0 8px 36px -14px rgba(0,0,0,.75),0 4px 18px -6px rgba(0,0,0,.55);
  }
}
* { box-sizing:border-box; }
html,body { padding:0; margin:0; font-family:var(--font-sans); background:var(--c-bg); color:var(--c-text); -webkit-font-smoothing:antialiased; }
body.doc-page { background:linear-gradient(140deg,#101a2e 0%,#0d2541 55%,#0f172a 100%); }
@media (prefers-color-scheme: light){ body.doc-page { background:linear-gradient(160deg,#eef3f9 0%,#e5edf6 40%,#dbe7f3 70%); }}
/* Document card wrapper for legal/support pages */
.doc-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:34px; padding:70px 70px 60px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
@media (max-width:900px){ .doc-card { padding:56px 28px 54px; border-radius:28px; } }
body.doc-page .site-header { background:rgba(12,19,35,.82); }
@media (prefers-color-scheme: light){ body.doc-page .site-header { background:rgba(255,255,255,.85); }}
::selection { background:rgba(99,102,241,.35); }
a { color:var(--c-brand); text-decoration:none; transition:color .25s var(--ease); }
a:hover { color:var(--c-accent); }

/* Layout */
.container { width:100%; max-width:1240px; margin:0 auto; padding:0 46px; }
@media (max-width:900px){ .container { padding:0 26px; } }

/* Header */
.site-header { position:sticky; top:0; z-index:60; backdrop-filter:saturate(180%) blur(16px); background:rgba(12,19,35,.75); border-bottom:1px solid rgba(255,255,255,.06); display:flex; align-items:center; justify-content:space-between; padding:14px 46px; }
@media (prefers-color-scheme: light){ .site-header { background:rgba(255,255,255,.85); border-color:var(--c-border);} }
.nav-links { list-style:none; margin:0; padding:0; display:flex; gap:1.6rem; font-size:.85rem; font-weight:500; }
.nav-links a { position:relative; padding:.35rem .2rem; }
.nav-links a:after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--c-accent); transition:width .3s var(--ease); }
.nav-links a:hover:after { width:100%; }
.brand { font-weight:600; letter-spacing:.6px; font-size:1.05rem; display:flex; align-items:center; gap:.65rem; }
.badge { background:var(--gradient-brand); color:#fff; font-size:.6rem; letter-spacing:1px; padding:.3rem .55rem; border-radius:20px; font-weight:600; }
/* Mobile Nav */
.nav-toggle { display:none; background:var(--c-surface); border:1px solid var(--c-border); width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-sm); }
.nav-toggle span { width:20px; height:2px; background:var(--c-text); position:relative; display:block; }
.nav-toggle span:before,.nav-toggle span:after { content:""; position:absolute; left:0; width:100%; height:2px; background:var(--c-text); }
.nav-toggle span:before { top:-6px; }
.nav-toggle span:after { top:6px; }
@media (max-width:860px){
  .site-header { padding:12px 18px; }
  .nav-toggle { display:flex; }
  .nav-links { position:fixed; top:64px; right:14px; left:14px; background:var(--c-surface); flex-direction:column; padding:0 0 4px; border:1px solid var(--c-border); border-radius:26px; box-shadow:0 18px 48px -12px rgba(0,0,0,.25); backdrop-filter:saturate(180%) blur(14px); max-height:0; overflow:hidden; transition:max-height .45s var(--ease); gap:.2rem; }
  .nav-links li { list-style:none; }
  .nav-links li:first-child { margin-top:6px; }
  .nav-links a { display:block; padding:14px 20px; margin:0 4px; border-radius:18px; font-size:.95rem; font-weight:600; }
  .nav-links a:after { display:none; }
  .nav-links a:hover { background:var(--c-surface-alt); }
  @media (prefers-color-scheme: dark){ .nav-links a:hover { background:#1e293b; }}
  .nav-links.open { max-height:420px; }
  .hero { padding:108px 0 86px; }
  .hero-grid { gap:54px; grid-template-columns:1fr; }
  .hero-copy h1 { font-size:clamp(2.15rem,8vw,2.8rem); }
  .device-stack { height:360px; }
  .mock { width:210px; }
  .mock.two { display:none; }
  .features-grid { gap:28px; margin-top:46px; }
  .feature-card { padding:22px 20px 26px; border-radius:22px; }
  .value-grid { gap:38px; }
  .section { padding:70px 0; }
  footer { padding:60px 0 46px; }
  .footer-grid { gap:34px; }
  .doc-card { padding:50px 24px 48px; }
}

/* Small phones */
@media (max-width:600px){
  .container { padding:0 20px; }
  .hero { padding:94px 0 72px; }
  .hero-copy h1 { font-size:2.05rem; }
  .hero-copy p { font-size:.95rem; }
  .device-stack { order:2; height:300px; }
  .mock { position:relative; transform:none !important; width:230px; margin:0 auto; }
  .features-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-card { padding:18px 16px 22px; }
  .feature-icon { width:40px; height:40px; font-size:17px; }
  .value-grid { grid-template-columns:1fr; }
  .gallery { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:20px; }
  .faq details { padding:16px 16px 16px; }
  .cta-row { flex-direction:column; align-items:stretch; }
  .cta-row .btn { width:100%; justify-content:center; }
  .mobile-cta { display:flex; }
}

/* Sticky bottom mobile CTA */
.mobile-cta { position:fixed; left:0; right:0; bottom:0; display:none; z-index:80; backdrop-filter:blur(14px) saturate(180%); background:rgba(11,18,32,.9); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); gap:12px; border-top:1px solid rgba(255,255,255,.08); }
@media (prefers-color-scheme: light){ .mobile-cta { background:rgba(255,255,255,.92); border-color:var(--c-border); } }
.mobile-cta .btn { flex:1; padding:.85rem 1rem; font-size:.83rem; box-shadow:none; }
.mobile-cta .btn.outline { background:var(--c-surface-alt); }

/* Improve tap targets for small screens */
@media (max-width:600px){ footer a { padding:4px 0; display:inline-block; } }

/* Hero */
.hero { position:relative; overflow:hidden; background:var(--gradient-hero); color:#fff; padding:130px 0 120px; }
.hero:before,.hero:after { content:""; position:absolute; width:840px; height:840px; background:radial-gradient(circle at 50% 50%,rgba(99,102,241,.55),rgba(14,165,233,0)); filter:blur(90px); opacity:.35; animation:spin 28s linear infinite; }
.hero:after { animation-direction:reverse; top:-420px; left:-220px; }
.hero:before { top: -320px; right:-260px; }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg);} }
.hero-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:70px; align-items:center; }
.hero-copy h1 { margin:0 0 24px; font-size:clamp(2.4rem,5.4vw,3.4rem); line-height:1.03; letter-spacing:-1px; font-weight:650; }
.gradient-text { background:var(--gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-copy p { margin:0 0 28px; font-size:1.05rem; line-height:1.55; max-width:620px; color:rgba(255,255,255,.78); }
.cta-row { display:flex; flex-wrap:wrap; gap:18px; }
.btn { --b:var(--c-brand); --bh:var(--c-brand-dark); --c:#fff; display:inline-flex; align-items:center; gap:.55rem; font-weight:600; font-size:.9rem; padding:.9rem 1.35rem; border-radius:14px; background:var(--b); color:var(--c); box-shadow:0 4px 20px -6px rgba(0,0,0,.4),0 2px 10px -4px rgba(99,102,241,.55); transition:.25s var(--ease); border:1px solid rgba(255,255,255,.15); }
.btn:hover { background:var(--bh); transform:translateY(-3px); }
.btn.outline { --b:var(--c-surface-alt); --bh:#fff; --c:var(--c-text); box-shadow:var(--shadow-sm); border:1px solid var(--c-border); }
@media (prefers-color-scheme: dark){ .btn.outline { --b:#1e293b; --bh:#24344d; border-color:#26374e; --c:#fff; } }

/* Device previews */
.device-stack { position:relative; height:540px; display:flex; justify-content:center; align-items:center; }
.mock { width:250px; aspect-ratio:9/19; background:#0f151f; border:14px solid #0d1117; border-radius:40px; box-shadow:0 14px 48px -10px rgba(0,0,0,.55); position:absolute; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.mock:before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:42%; height:18px; background:#0d1117; border-bottom-left-radius:14px; border-bottom-right-radius:14px; }
.mock img, .mock svg { width:100%; height:100%; object-fit:cover; }
.mock.one { transform:translate(-150px,-40px) rotate(-10deg); }
.mock.two { transform:translate(170px,30px) rotate(11deg); }
@media (max-width:960px){ .device-stack { height:420px; } .mock { width:200px; } }

/* Sections */
.section { padding:90px 0; position:relative; }
.section.alt { background:var(--gradient-section); }
.section.dark-alt { background:linear-gradient(135deg,#0d182b,#0b1220); }
.center { text-align:center; }
.mini { font-size:.7rem; letter-spacing:2px; font-weight:600; text-transform:uppercase; color:var(--c-accent); margin:0 0 14px; }
.section h2 { margin:0; font-size:2.15rem; line-height:1.1; letter-spacing:-.5px; font-weight:640; }
.lead { font-size:.95rem; max-width:760px; margin:18px auto 0; color:var(--c-text-sub); line-height:1.55; }

.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:40px; margin-top:60px; }
.feature-card { position:relative; background:var(--c-surface); border:1px solid var(--c-border); padding:26px 22px 28px; border-radius:26px; overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:14px; }
.feature-card:before { content:""; position:absolute; inset:0; background:var(--gradient-accent); mix-blend-mode:overlay; opacity:.55; pointer-events:none; }
.feature-icon { width:46px; height:46px; display:grid; place-items:center; font-size:20px; font-weight:600; color:#fff; background:linear-gradient(140deg,#6366f1,#0ea5e9); border-radius:14px; box-shadow:0 4px 18px -6px rgba(14,165,233,.45); }
.feature-card h3 { margin:0; font-size:1.05rem; letter-spacing:.3px; }
.feature-card p { margin:0; font-size:.8rem; line-height:1.5; color:var(--c-text-sub); }
@media (prefers-color-scheme: dark){ .feature-card { background:linear-gradient(135deg,#162235,#142033); border-color:#1e3148; } }

.value-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:50px; margin-top:50px; }
.value-item h3 { margin:0 0 10px; font-size:1.08rem; }
.value-item p { margin:0; font-size:.9rem; line-height:1.55; color:var(--c-text-sub); }

/* Screens gallery */
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:30px; margin-top:46px; }
.screen-card { background:var(--c-surface); border:1px solid var(--c-border); padding:12px 12px 18px; border-radius:22px; box-shadow:var(--shadow-sm); }
.screen-card img, .screen-card svg { width:100%; border-radius:16px; aspect-ratio:9/19; background:#0f172a; object-fit:cover; }
.screen-card p { margin:10px 0 0; font-size:.65rem; text-align:center; opacity:.65; letter-spacing:.5px; text-transform:uppercase; }
@media (prefers-color-scheme: dark){ .screen-card { background:#162133; border-color:#1e3148; } }

/* FAQ */
.faq { max-width:880px; margin:50px auto 0; }
.faq details { background:var(--c-surface); border:1px solid var(--c-border); padding:18px 20px 18px; border-radius:18px; margin-bottom:16px; box-shadow:var(--shadow-sm); }
.faq details[open] { background:linear-gradient(135deg,var(--c-surface),var(--c-surface-alt)); }
.faq summary { cursor:pointer; font-weight:600; outline:none; }
.faq p { margin:12px 0 0; font-size:.85rem; line-height:1.55; color:var(--c-text-sub); }
@media (prefers-color-scheme: dark){ .faq details { background:#162133; border-color:#1e3148; } }

/* Footer */
footer { background:linear-gradient(180deg,#ffffff,#eef3f9); padding:80px 0 50px; margin-top:0; border-top:1px solid var(--c-border); }
@media (prefers-color-scheme: dark){ footer { background:linear-gradient(180deg,#0d1524,#0b1220); border-color:#1e3148; } }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:46px; margin-bottom:50px; }
.footer-grid h4 { margin:0 0 16px; font-size:.75rem; letter-spacing:1.8px; text-transform:uppercase; font-weight:600; }
.footer-grid a { display:block; font-size:.72rem; margin:0 0 9px; color:var(--c-text-sub); }
.footer-grid a:hover { color:var(--c-accent); }
.legal { font-size:.65rem; text-align:center; opacity:.6; }

/* Motion / utilities */
.fade-in { animation:fade .9s var(--ease) .05s both; }
@keyframes fade { from { opacity:0; transform:translateY(24px);} to { opacity:1; transform:translateY(0);} }

code { font-family:ui-monospace,monospace; font-size:.8rem; background:var(--c-surface-alt); padding:2px 6px; border-radius:6px; }
@media (prefers-color-scheme: dark){ code { background:#1e3148; } }