/* Minimal custom Material-inspired design system */
:root {
  --md-font-family: "Manrope", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-color-bg: #ffffff;
  --md-color-surface: #ffffff;
  --md-color-primary: #2962ff;
  --md-color-primary-rgb: 41,98,255;
  --md-color-secondary: #455a64;
  --md-color-text: #212121;
  --md-color-text-light: #757575;
  --md-color-border: #e0e0e0;
  --md-radius: 12px;
  --md-shadow-1: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
  --md-shadow-2: 0 3px 6px rgba(0,0,0,.15),0 2px 4px rgba(0,0,0,.12);
  --md-shadow-3: 0 6px 12px rgba(0,0,0,.18),0 4px 8px rgba(0,0,0,.15);
  --md-transition: all .25s cubic-bezier(.4,0,.2,1);
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin:0; font-family: var(--md-font-family); background: var(--md-color-bg); color: var(--md-color-text); -webkit-font-smoothing: antialiased; }
a { color: var(--md-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
header.site-header { position:sticky; top:0; backdrop-filter: blur(14px); background: rgba(255,255,255,.92); border-bottom:1px solid var(--md-color-border); z-index:60; }
.site-header__inner { max-width:1180px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:28px; }
header.site-header .logo { display:flex; align-items:center; gap:12px; font-size:18px; font-weight:600; letter-spacing:.3px; color:var(--md-color-text); }
.brand-mark { width:38px; height:38px; border-radius:12px; background:#2b4bee; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:14px; }
.brand-text { display:flex; flex-direction:column; line-height:1.1; font-size:13px; text-transform:uppercase; letter-spacing:.2px; color:var(--md-color-text-light); }
.brand-text strong { font-size:15px; text-transform:none; color:var(--md-color-text); }
nav.main-nav { display:flex; gap:20px; margin-left:auto; }
nav.main-nav a { padding:8px 12px; border-radius:999px; font-weight:500; color:var(--md-color-text-light); transition: var(--md-transition); }
nav.main-nav a:hover, nav.main-nav a.active { color:var(--md-color-text); background: rgba(var(--md-color-primary-rgb),.12); }
.header-actions { display:flex; gap:10px; margin-left:20px; }
main { width:100%; max-width:1180px; margin:0 auto; padding:32px 24px; }
@media (min-width: 1024px) {
  main { padding:0; }
}
footer.site-footer { border-top:1px solid var(--md-color-border); padding:32px 24px; font-size:13px; background:#fafafa; }
.grid { display:grid; gap:28px; }
.cards-3 { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.card { background: var(--md-color-surface); border:1px solid var(--md-color-border); border-radius: var(--md-radius); padding:20px 18px 22px; box-shadow: var(--md-shadow-1); position:relative; display:flex; flex-direction:column; gap:12px; }
.card:hover { box-shadow: var(--md-shadow-2); transform: translateY(-2px); }
.card h3 { margin:0 0 4px; font-size:18px; font-weight:600; letter-spacing:.3px; }
.badge { display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px; background:#e3f2fd; color:#0d47a1; font-weight:500; letter-spacing:.3px; }
.actions { margin-top:auto; display:flex; gap:10px; }
.svc-card { border-radius:28px; padding:22px 22px 26px; display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--md-color-border); box-shadow:var(--md-shadow-1); }
.svc-card__preview { width:100%; aspect-ratio:16 / 9; border-radius:22px; background-image: var(--svc-preview, linear-gradient(135deg,#e0e7ff,#f3f4f6)); background-size:cover; background-position:center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); position:relative; }
.svc-card__meta { margin-top:-6px; }
.svc-card__status { display:inline-flex; align-items:center; justify-content:center; padding:4px 16px; border-radius:999px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; background:#e8f0ff; color:#1b3faa; }
.svc-card__body h3 { margin:0 0 6px; font-size:20px; }
.svc-card__body p { margin:0; font-size:15px; color:var(--md-color-text-light); line-height:1.5; }
.svc-card__actions { display:flex; gap:12px; flex-wrap:wrap; }
.svc-card__btn { flex:1 1 140px; text-align:center; border:none; border-radius:16px; padding:12px 20px; font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; background: var(--md-color-primary); color:#fff; box-shadow: var(--md-shadow-1); transition: var(--md-transition); }
.svc-card__btn:hover { box-shadow: var(--md-shadow-2); transform: translateY(-1px); }
.svc-card__btn--ghost { background:rgba(var(--md-color-primary-rgb),.12); color:var(--md-color-primary); box-shadow:none; }
.svc-card__btn.is-disabled { opacity:.5; pointer-events:none; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; cursor:pointer; font-size:15px; font-weight:600; letter-spacing:.4px; padding:12px 20px; background: var(--md-color-primary); color:#fff; border-radius:12px; box-shadow: var(--md-shadow-1); transition: var(--md-transition); text-decoration:none; }
.btn.secondary { background:#eceff1; color:#37474f; }
.btn.ghost { background:rgba(var(--md-color-primary-rgb),.12); color:var(--md-color-primary); }
.btn:hover { box-shadow: var(--md-shadow-2); }
.btn:active { box-shadow: var(--md-shadow-1); transform: translateY(1px); }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
article.doc { max-width:860px; margin:0 auto; line-height:1.55; font-size:16px; }
article.doc h1 { font-size:34px; margin:0 0 16px; letter-spacing:.5px; }
article.doc h2 { font-size:26px; margin:36px 0 12px; }
article.doc h3 { font-size:20px; margin:28px 0 10px; }
article.doc p { margin:0 0 18px; }
article.doc pre { background:#263238; color:#eceff1; padding:14px 16px; border-radius:8px; overflow:auto; font-size:13px; line-height:1.4; }
article.doc code { background:#eceff1; padding:2px 5px; border-radius:4px; font-size:90%; }
.toc { position:sticky; top:90px; max-height:calc(100vh - 120px); overflow:auto; padding:12px 4px 16px; }
.layout-doc { display:grid; gap:40px; grid-template-columns: 240px 1fr; }
@media (max-width: 1000px){ .layout-doc { grid-template-columns: 1fr; } .toc { position:static; max-height:none; } }
.toc a { display:block; padding:5px 8px; border-radius:6px; font-size:13px; color:#37474f; }
.toc a:hover { background:#eceff1; }
.hero { display:flex; flex-direction:column; gap:18px; margin-bottom:42px; }
.hero h1 { font-size:44px; margin:0; letter-spacing:.8px; }
.hero p.lead { font-size:18px; color: var(--md-color-text-light); max-width:760px; line-height:1.5; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.4px; background:rgba(var(--md-color-primary-rgb),.12); color:var(--md-color-primary); text-transform:uppercase; }
.chip.ghost { background:rgba(0,0,0,.05); color:var(--md-color-text-light); }
.landing-services .section-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:28px; }
.section-head h2 { margin:6px 0; font-size:32px; }
.section-head p { margin:0; max-width:540px; color:var(--md-color-text-light); }
.pill { background:#f1f8e9; color:#33691e; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:500; }
.section { margin-bottom:64px; }
/* Elevation utility */
.elev-1 { box-shadow: var(--md-shadow-1); }
.elev-2 { box-shadow: var(--md-shadow-2); }
.elev-3 { box-shadow: var(--md-shadow-3); }
/* Dark mode (optional toggle later) */
@media (prefers-color-scheme: dark){
  :root { --md-color-bg:#121212; --md-color-surface:#1e1e1e; --md-color-text:#f5f5f5; --md-color-text-light:#b0bec5; --md-color-border:#2a2a2a; }
  header.site-header { background: rgba(30,30,30,.85); }
  .card { background:#1e1e1e; }
  footer.site-footer { background:#181818; }
  article.doc pre { background:#1e1e1e; }
  article.doc code { background:#37474f; }
}

/* Landing dark theme */
.page-landing {
  background:#0f1324;
  color:#f8fafc;
}
.page-landing main { max-width:1100px; padding:48px 20px 96px; }
.page-landing .site-header { background: rgba(6,10,22,.92); border-bottom:1px solid rgba(255,255,255,.08); }
.page-landing .site-header__inner { max-width:1100px; }
.page-landing nav.main-nav a { color:rgba(248,250,252,.7); }
.page-landing nav.main-nav a:hover,
.page-landing nav.main-nav a.active { color:#fff; background: rgba(66,133,244,.18); }
.page-landing .brand-mark { background:#4285f4; }
.page-landing .brand-text strong { color:#fff; }
.page-landing .brand-text { color:rgba(248,250,252,.6); }
.page-landing .header-actions .btn { background:#4285f4; }
.page-landing .header-actions .btn.ghost { background:rgba(66,133,244,.2); color:#fff; }

.landing-page { display:flex; flex-direction:column; gap:40px; }
.landing-hero { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:48px; padding:32px; background: radial-gradient(circle at top left, rgba(66,133,244,.3), rgba(15,19,36,0.4)), #101322; border:1px solid rgba(255,255,255,.08); border-radius:32px; }
.landing-hero__copy { display:flex; flex-direction:column; gap:18px; }
.hero-chip { font-size:14px; text-transform:uppercase; letter-spacing:.2em; color:rgba(248,250,252,.7); }
.landing-hero__copy h1 { font-size:48px; line-height:1.1; margin:0; color:#fff; }
.hero-subhead { font-size:18px; color:rgba(248,250,252,.7); margin:0; max-width:480px; }
.landing-hero__media { width:100%; border-radius:28px; min-height:280px; background-image:url('https://lh3.googleusercontent.com/aida-public/AB6AXuCIBSL7XtxjR0Gi_SipmcfPWjvFaYu6QVdoDxsb3GssnLTmI37ejeqWgBlG5b__4oSkyWZT695wkpB27QVU9w2Y_TNo2IghxzVEpb8uzaU_hkLEF2rd6uLQJB0xuNr8x-i8tTCiBNfrObe880LlcpQ4spie3BDddIWMgHDhHlrTGw9ibIeFkAz201v1JtfNXKBQRk1E9mDf_eLPJKVu4ulsHfP5qYSyHvh0xHHF96BBH42HZ38yBKQfpnQXFrn-VrSe5nFJ2un_gPE'); background-size:cover; background-position:center; box-shadow:0 40px 80px rgba(8,8,16,.5); border:1px solid rgba(255,255,255,.1); }
.landing-section { border:1px solid rgba(255,255,255,.08); border-radius:28px; padding:32px; background:rgba(15,19,36,.6); box-shadow:0 20px 60px rgba(5,5,12,.35); }
.landing-features { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:24px; background:rgba(18,20,30,.8); }
.feature-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:24px; padding:24px; display:flex; flex-direction:column; gap:12px; }
.feature-card .material-symbols-outlined { font-size:34px; color:#8ab4ff; }
.feature-card h3 { margin:0; font-size:20px; color:#fff; }
.feature-card p { margin:0; color:rgba(248,250,252,.7); line-height:1.5; }
.landing-how { background:rgba(12,14,24,.95); display:flex; flex-direction:column; gap:28px; }
.landing-how h2 { margin:0; font-size:32px; }
.timeline { display:grid; grid-template-columns:80px 1fr; gap:20px; }
.timeline-col { display:flex; flex-direction:column; align-items:center; }
.timeline-col--icons { gap:18px; }
.timeline-icon { width:56px; height:56px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; }
.timeline-icon .material-symbols-outlined { color:#8ab4ff; }
.timeline-line { width:2px; flex:1; background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0)); }
.timeline-col--content { gap:40px; }
.timeline-step { padding-bottom:4px; }
.step-title { margin:0 0 6px; font-size:20px; color:#fff; }
.step-text { margin:0; color:rgba(248,250,252,.7); line-height:1.5; }
.landing-cta { text-align:center; display:flex; flex-direction:column; gap:18px; align-items:center; background:linear-gradient(135deg, rgba(66,133,244,.35), rgba(15,19,36,.9)); }
.landing-cta h2 { margin:0; font-size:36px; }
.landing-cta p { margin:0; max-width:640px; color:rgba(248,250,252,.8); }
.landing-services { background:rgba(12,14,24,.92); }
.landing-section__head { display:flex; flex-direction:column; gap:6px; margin-bottom:24px; }
.landing-section__head h2 { margin:0; font-size:30px; }
.landing-section__head p { margin:0; color:rgba(248,250,252,.7); }
.landing-section__head .hero-chip { color:rgba(248,250,252,.6); font-size:12px; letter-spacing:.35em; }
.landing-services .svc-card { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); color:#e2e8f0; box-shadow:none; }
.landing-services .svc-card__body h3 { color:#fff; }
.landing-services .svc-card__body p { color:rgba(248,250,252,.65); }
.landing-services .svc-card__status { background:rgba(255,255,255,.08); color:#cdd9ff; border:1px solid rgba(255,255,255,.15); }
.landing-services .svc-card__preview { background-image: var(--svc-preview, linear-gradient(145deg,#1d264b,#111628)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.landing-services .svc-card__btn--ghost { background:rgba(255,255,255,.08); color:#fff; }
.landing-services .svc-card__btn { box-shadow:none; }

@media (max-width:720px){
  .site-header__inner { flex-direction:column; align-items:flex-start; gap:14px; }
  nav.main-nav { margin-left:0; }
  .header-actions { margin-left:0; }
  .landing-hero { padding:24px; }
  .landing-section { padding:24px; }
  .timeline { grid-template-columns:1fr; }
  .timeline-col { flex-direction:row; justify-content:flex-start; }
  .timeline-col--icons { display:none; }
}