/* ============================================================
   APEX DATA CLOUD — Design System
   Navy + rose palette, shared across all pages.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

:root {
  --navy:#060D1A; --navy-2:#0A1628; --navy-3:#112240; --navy-4:#1a3a6b;
  --blue:#F1C6D3; --blue-2:#EAA0B5; --blue-3:#F8DDE5; --rose:#C96B87;
  --gold:#F59E0B; --green:#10B981;
  --white:#F8FAFC; --text:#94A3B8; --text-2:#CBD5E1;
  --border:rgba(241,198,211,0.22); --border-2:rgba(241,198,211,0.09);
  --shadow-sm:0 4px 20px rgba(0,0,0,0.35); --shadow-md:0 12px 40px rgba(0,0,0,0.45);
  --shadow-glow:0 8px 36px rgba(241,198,211,0.28);
  --maxw:1200px; --prose:760px;
}

body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--navy); color:var(--white); line-height:1.6; overflow-x:hidden;
}
a { color:var(--blue-2); }
img { max-width:100%; height:auto; }

/* ---------------- NAV ---------------- */
.nav { position:fixed; top:0; left:0; right:0; z-index:1000; padding:14px 32px;
  background:rgba(6,13,26,0.88); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border-2); transition:padding .3s, background .3s; }
.nav.scrolled { padding:10px 32px; background:rgba(6,13,26,0.97); border-bottom-color:var(--border); }
.nav-inner { max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo img { height:34px; width:auto; }
.nav-logo-text { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:17px; color:var(--white); }
.nav-logo-text span { color:var(--blue-2); }
.nav-links { display:flex; align-items:center; gap:26px; list-style:none; }
.nav-links a { font-size:14px; font-weight:500; color:var(--text-2); text-decoration:none; transition:color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--white); }
.nav-cta { background:linear-gradient(135deg,var(--blue),var(--rose))!important; color:#060D1A!important;
  padding:9px 22px; border-radius:8px; font-weight:700!important; box-shadow:var(--shadow-glow); transition:all .3s; }
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 6px 28px rgba(241,198,211,.48)!important; color:#060D1A!important; }
.hamburger-btn { display:none; background:none; border:none; cursor:pointer; padding:6px; flex-direction:column; gap:5px; z-index:1100; }
.hamburger-btn span { display:block; width:22px; height:2px; background:var(--white); border-radius:2px; transition:all .3s; }
.hamburger-btn.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2){ opacity:0; }
.hamburger-btn.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { display:none; position:fixed; inset:0; z-index:1050; background:rgba(6,13,26,.98);
  backdrop-filter:blur(20px); flex-direction:column; align-items:center; justify-content:center; gap:28px; opacity:0; transition:opacity .3s; }
.mobile-menu.active { display:flex; opacity:1; }
.mobile-menu a { font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700; color:var(--white); text-decoration:none; }
.mobile-menu a:hover { color:var(--blue-2); }
.mobile-menu .m-cta { background:linear-gradient(135deg,var(--blue),var(--rose)); color:#060D1A!important; padding:14px 36px; border-radius:12px; font-size:20px; }

/* ---------------- BUTTONS ---------------- */
.btn-primary { display:inline-flex; align-items:center; gap:9px; background:linear-gradient(135deg,var(--blue),var(--rose));
  color:#060D1A; padding:15px 32px; border-radius:10px; font-size:15px; font-weight:700; text-decoration:none;
  border:none; cursor:pointer; transition:all .3s; box-shadow:var(--shadow-glow); white-space:nowrap; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 42px rgba(241,198,211,.48); color:#060D1A; }
.btn-ghost { display:inline-flex; align-items:center; gap:9px; background:transparent; color:var(--text-2);
  padding:15px 28px; border-radius:10px; font-size:15px; font-weight:500; text-decoration:none;
  border:1px solid rgba(255,255,255,.12); transition:all .3s; white-space:nowrap; }
.btn-ghost:hover { color:var(--white); border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.05); }

/* ---------------- REVEAL ---------------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}

/* ---------------- PAGE HERO + BREADCRUMB ---------------- */
.page-hero { position:relative; overflow:hidden; padding:150px 32px 70px; background:var(--navy);
  border-bottom:1px solid var(--border-2); }
.page-hero::before { content:''; position:absolute; top:-20%; right:-8%; width:680px; height:680px;
  background:radial-gradient(circle,rgba(241,198,211,.08) 0%,transparent 65%); pointer-events:none; }
.page-hero::after { content:''; position:absolute; bottom:-30%; left:-10%; width:520px; height:520px;
  background:radial-gradient(circle,rgba(245,158,11,.05) 0%,transparent 65%); pointer-events:none; }
.page-hero-inner { max-width:var(--maxw); margin:0 auto; position:relative; z-index:1; }
.eyebrow { display:inline-flex; align-items:center; gap:7px; background:rgba(241,198,211,.08);
  border:1px solid rgba(241,198,211,.28); border-radius:50px; padding:5px 16px; font-size:11px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--blue-2); margin-bottom:20px; }
.page-hero h1 { font-family:'Space Grotesk',sans-serif; font-size:clamp(32px,4.4vw,54px); font-weight:800;
  line-height:1.08; letter-spacing:-1.5px; color:var(--white); margin-bottom:20px; max-width:900px; }
.page-hero h1 .hl { background:linear-gradient(130deg,var(--blue) 0%,var(--blue-2) 50%,var(--rose) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.page-hero .lede { font-size:19px; line-height:1.7; color:var(--text-2); max-width:680px; margin-bottom:30px; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

.breadcrumb { margin-bottom:26px; font-size:13px; color:var(--text); }
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.breadcrumb a { color:var(--text-2); text-decoration:none; }
.breadcrumb a:hover { color:var(--white); }
.breadcrumb li:not(:last-child)::after { content:'›'; margin-left:8px; color:var(--text); }
.breadcrumb [aria-current="page"] { color:var(--blue-2); }

/* ---------------- CONTENT / PROSE ---------------- */
.content-wrap { max-width:var(--maxw); margin:0 auto; padding:72px 32px; }
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start; }
.prose { max-width:var(--prose); font-size:17px; line-height:1.8; color:var(--text-2); }
.prose.full { max-width:none; }
.prose h2 { font-family:'Space Grotesk',sans-serif; font-size:clamp(24px,2.6vw,34px); font-weight:700;
  color:var(--white); letter-spacing:-.5px; margin:48px 0 16px; line-height:1.25; }
.prose h3 { font-family:'Space Grotesk',sans-serif; font-size:21px; font-weight:600; color:var(--white); margin:32px 0 12px; }
.prose h2:first-child, .prose h3:first-child { margin-top:0; }
.prose p { margin-bottom:18px; }
.prose ul, .prose ol { margin:0 0 18px 22px; }
.prose li { margin-bottom:9px; }
.prose strong { color:var(--white); }
.prose a { color:var(--blue-2); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(234,160,181,.4); }
.prose a:hover { text-decoration-color:var(--blue-2); }
.prose blockquote { border-left:3px solid var(--blue-2); background:rgba(17,34,64,.5); padding:16px 22px;
  border-radius:0 12px 12px 0; margin:24px 0; color:var(--text-2); font-style:italic; }
.prose code { background:rgba(17,34,64,.8); border:1px solid var(--border-2); border-radius:6px; padding:2px 7px; font-size:.9em; color:var(--blue-3); }
.prose pre { background:var(--navy-2); border:1px solid var(--border-2); border-radius:12px; padding:18px; overflow-x:auto; margin:22px 0; }
.prose pre code { background:none; border:none; padding:0; }
.prose hr { border:none; border-top:1px solid var(--border-2); margin:40px 0; }
.prose table { width:100%; border-collapse:collapse; margin:24px 0; font-size:15px; }
.prose th, .prose td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--border-2); }
.prose th { color:var(--white); font-weight:700; background:rgba(17,34,64,.6); }
.prose tr:hover td { background:rgba(17,34,64,.35); }

.tldr { background:linear-gradient(180deg,var(--navy-3),var(--navy-2)); border:1px solid var(--border);
  border-radius:16px; padding:24px 26px; margin:0 0 36px; }
.tldr h2 { font-size:13px!important; letter-spacing:2px; text-transform:uppercase; color:var(--blue-2)!important;
  margin:0 0 10px!important; font-family:'Inter',sans-serif!important; }
.tldr p { font-size:17px; color:var(--text-2); margin:0; }
.tldr.full { max-width:none; }

/* Sidebar */
.sidebar { position:sticky; top:96px; display:flex; flex-direction:column; gap:18px; }
.side-card { background:var(--navy-3); border:1px solid var(--border-2); border-radius:16px; padding:24px; }
.side-card h4 { font-family:'Space Grotesk',sans-serif; font-size:16px; color:var(--white); margin-bottom:12px; }
.side-card p { font-size:14px; color:var(--text); line-height:1.65; margin-bottom:16px; }
.side-card ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.side-card ul a { font-size:14px; color:var(--text-2); text-decoration:none; }
.side-card ul a:hover { color:var(--white); }

/* ---------------- SECTIONS / GRIDS ---------------- */
section.band { padding:84px 32px; }
.band.alt { background:linear-gradient(180deg,var(--navy-3) 0%,var(--navy-2) 100%); border-top:1px solid var(--border-2); border-bottom:1px solid var(--border-2); }
.container { max-width:var(--maxw); margin:0 auto; }
.sec-header { text-align:center; margin-bottom:54px; }
.sec-label { display:inline-block; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--blue-2); margin-bottom:14px; }
.sec-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(26px,3.2vw,42px); font-weight:700; letter-spacing:-1px; color:var(--white); margin-bottom:16px; line-height:1.2; }
.sec-sub { font-size:17px; color:var(--text-2); max-width:620px; margin:0 auto; line-height:1.75; }

.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card-grid.two { grid-template-columns:repeat(2,1fr); }
.card { background:var(--navy-3); border:1px solid var(--border-2); border-radius:18px; padding:30px 26px;
  transition:all .35s; position:relative; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; }
.card::after { content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--rose),transparent); transform:scaleX(0); transition:transform .4s; }
.card:hover { border-color:var(--border); transform:translateY(-6px); box-shadow:0 24px 56px rgba(241,198,211,.10); }
.card:hover::after { transform:scaleX(1); }
.card-icon { width:50px; height:50px; border-radius:14px; background:rgba(241,198,211,.1); border:1px solid rgba(241,198,211,.2);
  display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px; }
.card h3 { font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:600; color:var(--white); margin-bottom:10px; }
.card p { font-size:14px; color:var(--text); line-height:1.65; flex-grow:1; }
.card .card-link { margin-top:16px; font-size:13px; font-weight:600; color:var(--blue-2); }

/* feature list with checks */
.check-list { list-style:none; display:grid; gap:14px; margin:8px 0 0!important; }
.check-list li { position:relative; padding-left:30px; color:var(--text-2); font-size:16px; }
.check-list li::before { content:'✓'; position:absolute; left:0; top:0; color:var(--green); font-weight:800; }

/* stat row */
.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; max-width:980px; margin:0 auto; }
.stat-item .stat-num { font-family:'Space Grotesk',sans-serif; font-size:clamp(30px,3.4vw,48px); font-weight:800;
  background:linear-gradient(135deg,var(--blue),var(--blue-2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block; margin-bottom:8px; }
.stat-item .stat-label { font-size:14px; color:var(--text); }

/* numbered steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.step { background:var(--navy-3); border:1px solid var(--border-2); border-radius:16px; padding:26px; }
.step .step-n { font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; color:var(--blue-2); margin-bottom:12px; }
.step h3 { font-size:17px; color:var(--white); margin-bottom:8px; font-family:'Space Grotesk',sans-serif; }
.step p { font-size:14px; color:var(--text); line-height:1.6; }

/* ---------------- FAQ ---------------- */
.faq-list { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item { background:var(--navy-3); border:1px solid var(--border-2); border-radius:14px; overflow:hidden; transition:border-color .25s; }
.faq-item.open { border-color:var(--border); }
.faq-question { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:22px 24px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--white);
  font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:600; }
.faq-question::after { content:'+'; font-size:22px; color:var(--blue-2); transition:transform .3s; flex-shrink:0; }
.faq-item.open .faq-question::after { transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-answer { max-height:560px; }
.faq-answer-inner { padding:0 24px 22px; color:var(--text-2); font-size:15px; line-height:1.75; }

/* ---------------- CTA BAND ---------------- */
.cta-band { background:linear-gradient(135deg,var(--navy-3),var(--navy-4)); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:72px 32px; text-align:center; position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 0%,rgba(241,198,211,.12),transparent 60%); pointer-events:none; }
.cta-band-inner { max-width:720px; margin:0 auto; position:relative; z-index:1; }
.cta-band h2 { font-family:'Space Grotesk',sans-serif; font-size:clamp(26px,3vw,38px); font-weight:700; color:var(--white); letter-spacing:-.5px; margin-bottom:16px; }
.cta-band p { font-size:18px; color:var(--text-2); margin-bottom:28px; }
.cta-band-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------------- POST LIST ---------------- */
.post-list { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.post-card { background:var(--navy-3); border:1px solid var(--border-2); border-radius:16px; padding:28px; text-decoration:none; display:block; transition:all .3s; }
.post-card:hover { border-color:var(--border); transform:translateY(-4px); }
.post-card .post-meta { font-size:12px; color:var(--blue-2); letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.post-card h3 { font-family:'Space Grotesk',sans-serif; font-size:20px; color:var(--white); margin-bottom:10px; line-height:1.3; }
.post-card p { font-size:14px; color:var(--text); line-height:1.6; }

/* ---------------- FOOTER ---------------- */
.footer { background:var(--navy); border-top:1px solid var(--border-2); padding:60px 32px 32px; }
.footer-top { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.f-brand-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.f-brand-row img { height:30px; }
.f-brand-name { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px; color:var(--white); }
.f-brand-desc { font-size:13px; color:var(--text); line-height:1.7; max-width:300px; margin-bottom:20px; }
.f-social { display:flex; gap:10px; }
.f-social-link { width:36px; height:36px; border-radius:9px; border:1px solid var(--border-2); background:rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; text-decoration:none; transition:all .2s; color:var(--text); }
.f-social-link:hover { border-color:var(--border); color:var(--white); background:rgba(241,198,211,.08); }
.f-col h5 { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text); margin-bottom:18px; }
.f-col ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.f-col ul a { font-size:13px; color:var(--text-2); text-decoration:none; transition:color .2s; }
.f-col ul a:hover { color:var(--white); }
.footer-bottom { max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px; padding-top:28px; border-top:1px solid var(--border-2); }
.f-copy { font-size:12px; color:var(--text); }
.f-bottom-links { display:flex; gap:24px; }
.f-bottom-links a { font-size:12px; color:var(--text); text-decoration:none; }
.f-bottom-links a:hover { color:var(--white); }

/* ---------------- FORMS ---------------- */
.form-card { background:var(--navy-3); border:1px solid var(--border); border-radius:20px; padding:32px; max-width:620px; margin:0 auto; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { margin-bottom:16px; }
.field label { display:block; font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:7px; }
.field input, .field select, .field textarea { width:100%; background:var(--navy-2); border:1px solid var(--border-2); border-radius:10px;
  padding:13px 15px; color:var(--white); font-family:inherit; font-size:15px; transition:border-color .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--blue-2); }
.cf-submit { width:100%; background:linear-gradient(135deg,var(--blue),var(--rose)); color:#060D1A; border:none;
  padding:15px; border-radius:10px; font-size:16px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-glow); transition:all .3s; }
.cf-submit:hover { transform:translateY(-2px); }
.form-success { display:none; text-align:center; padding:40px 20px; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1024px){ .footer-top{grid-template-columns:1fr 1fr;} .content-grid{grid-template-columns:1fr;} .sidebar{position:static; flex-direction:row; flex-wrap:wrap;} .side-card{flex:1; min-width:240px;} }
@media (max-width:960px){ .card-grid,.steps{grid-template-columns:repeat(2,1fr);} .stat-row{grid-template-columns:repeat(2,1fr); gap:32px;} .post-list{grid-template-columns:1fr;} }
@media (max-width:768px){ .nav-links{display:none;} .hamburger-btn{display:flex;} .card-grid,.card-grid.two,.steps{grid-template-columns:1fr;} .footer-top{grid-template-columns:1fr; gap:32px;} .form-row{grid-template-columns:1fr;} .page-hero{padding:130px 20px 56px;} .content-wrap{padding:56px 20px;} section.band{padding:64px 20px;} }
@media (max-width:640px){ .stat-row{grid-template-columns:1fr 1fr;} .footer-bottom{flex-direction:column; text-align:center;} .cta-band-btns{flex-direction:column; align-items:center;} }