@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&display=swap');

:root{
  --bg:#f4f6fb;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --primary:#FF4D00;
  --primary-600:#E64500;
  --success:#16a34a;
  --danger:#ef4444;
  --danger-600:#dc2626;
  --shadow:0 12px 30px rgba(15,23,42,.08);
  --radius:16px;

  --bg-grad-1:#faf5ff;
  --bg-grad-2:var(--bg);
  --bg-grad-3:#fff1f2;

  --text-2:#334155;
  --text-3:#111827;
  --surface-2:rgba(255,255,255,.8);
  --surface-3:rgba(255,255,255,.75);
  --topbar-bg:rgba(255,255,255,.7);
  --topbar-border:rgba(229,231,235,.8);
  --ring-track:#e5e7eb;

  --chip-bg:#eef2ff;
  --chip-border:#e0e7ff;
}

html{color-scheme:light}

html[data-theme="dark"]{color-scheme:dark}

/* Dark theme (manual toggle sets data-theme="dark"). */
:root[data-theme="dark"],
body[data-theme="dark"]{
  --bg:#000000;
  --surface:#0f172a;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --border:rgba(148,163,184,.22);
  --primary:#FF4D00;
  --primary-600:#E64500;
  --shadow:0 14px 34px rgba(0,0,0,.45);

  --bg-grad-1:#000000;
  --bg-grad-2:#000000;
  --bg-grad-3:#000000;

  --text-2:#cbd5e1;
  --text-3:#e5e7eb;
  --surface-2:rgba(15,23,42,.82);
  --surface-3:rgba(15,23,42,.72);
  --topbar-bg:rgba(15,23,42,.75);
  --topbar-border:rgba(148,163,184,.18);
  --ring-track:rgba(148,163,184,.22);

  --chip-bg:rgba(15,23,42,.85);
  --chip-border:rgba(148,163,184,.22);

  --danger:#ef4444;
  --danger-600:#dc2626;
}

/* Fallback: if JS doesn't run, follow system theme automatically. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) {
    --bg:#000000;
    --surface:#0f172a;
    --text:#e5e7eb;
    --muted:#94a3b8;
    --border:rgba(148,163,184,.22);
    --shadow:0 14px 34px rgba(0,0,0,.45);

    --bg-grad-1:#000000;
    --bg-grad-2:#000000;
    --bg-grad-3:#000000;

    --text-2:#cbd5e1;
    --text-3:#e5e7eb;
    --surface-2:rgba(15,23,42,.82);
    --surface-3:rgba(15,23,42,.72);
    --topbar-bg:rgba(15,23,42,.75);
    --topbar-border:rgba(148,163,184,.18);
    --ring-track:rgba(148,163,184,.22);

    --chip-bg:rgba(15,23,42,.85);
    --chip-border:rgba(148,163,184,.22);
  }

  html:not([data-theme="light"]) { color-scheme: dark; }
}

/* (kept for compatibility) */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","Liberation Sans",sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg-grad-1) 0%, var(--bg-grad-2) 60%, var(--bg-grad-3) 100%);
  background-attachment:fixed;
}

::selection{
  background:var(--primary);
  color:#fff;
}

*::selection{
  background:var(--primary);
  color:#fff;
}

/* Fixed background + neon lighting (dark theme only). */
:root[data-theme="dark"] body{
  background:transparent;
}

:root[data-theme="dark"] body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(800px 500px at 15% 10%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 60%),
    radial-gradient(700px 460px at 85% 25%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 62%),
    radial-gradient(900px 600px at 45% 85%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 66%),
    linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 60%, var(--bg-grad-3) 100%);
  filter:saturate(1.05);
  will-change: transform, opacity, filter;
  animation: neonGlow 4s ease-in-out infinite alternate,
             neonDrift 7s ease-in-out infinite;
}

@keyframes neonGlow{
  0%{opacity:.82; filter:saturate(1.0) brightness(0.98)}
  50%{opacity:.92; filter:saturate(1.12) brightness(1.06)}
  100%{opacity:.86; filter:saturate(1.04) brightness(1.01)}
}

@keyframes neonDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  35%{transform:translate3d(10px,-8px,0) scale(1.02)}
  70%{transform:translate3d(-12px,10px,0) scale(1.01)}
  100%{transform:translate3d(0,0,0) scale(1)}
}

@media (prefers-reduced-motion: reduce){
  :root[data-theme="dark"] body::before{animation:none}
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

input, select, button, textarea{font:inherit}

.srOnly{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.container{
  width:min(1120px, calc(100% - 48px));
  margin:0 auto;
}

.topbar{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--topbar-bg);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--topbar-border);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  gap:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.brand img{width:64px;height:64px; display:block}
.brandText{
  font-size:18px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text-3);
  line-height:1;
  white-space:nowrap;
}

.navlinks{
  display:flex;
  align-items:center;
  gap:18px;
  flex:1 1 auto;
  min-width:0;
  flex-wrap:nowrap;
  justify-content:center;
  overflow-x:auto;
}

.navlinks a{white-space:nowrap}

.navlinks a{
  font-size:13px;
  color:var(--text-2);
  padding:7px 10px;
  border-radius:999px;
}

/* Non-link nav items (e.g. coming soon). */
.navlinks .navBtn{
  appearance:none;
  border:0;
  background:transparent;
  font:inherit;
  cursor:not-allowed;
  white-space:nowrap;
  font-size:13px;
  color:var(--text-2);
  padding:7px 10px;
  border-radius:999px;
  opacity:.75;
}

.navlinks a[aria-current="page"],
.navlinks a:hover{background:color-mix(in srgb, var(--primary) 14%, transparent); color:var(--primary)}

.navactions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.guestAuthButtons{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}

.guestAuthButtons .btn{
  height:34px;
  min-width:96px;
  padding:0 14px;
  justify-content:center;
  line-height:1;
}

/* Hide guest hamburger menu when logged out. */
.guestMenu{display:none;}


.profileMenu{position:relative}

.iconBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  position:relative;
  border:0;
  background:transparent;
  color:var(--text-2);
  cursor:pointer;
}

.iconBtn:hover{color:var(--primary)}

.iconBtn:focus-visible{outline:2px solid var(--primary); outline-offset:2px}

.iconBtn:disabled,
.iconBtn[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.6;
}

.iconBtn svg{display:block}

.notifDot{
  position:absolute;
  top:6px;
  right:6px;
  width:9px;
  height:9px;
  border-radius:999px;
  background:var(--danger);
  border:2px solid var(--surface);
}

:root[data-theme="dark"] .notifDot{
  border-color:var(--surface);
}

.announcePanel{
  width:min(360px, calc(100vw - 28px));
}

.announceKicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-2);
}

.announceTitle{
  margin-top:6px;
  font-weight:800;
  color:var(--text);
}

.announceBody{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.menuMobileOnly{display:none; position:relative}

/* Menu nav items are mobile-only; desktop uses the horizontal .navlinks. */
.menuNavSection{display:none;}

/* Mobile breakpoint (smaller max width): hide horizontal nav, show menu nav section. */
@media (max-width: 640px){
  .navlinks{display:none;}
  .menuNavSection{display:block;}
}

/* Keep horizontal .navlinks hidden on mobile for all states. */

.profileBtn{
  gap:10px;
  padding:0 10px;
}

.avatar{
  width:26px;
  height:26px;
  border-radius:999px;
  overflow:hidden;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:800;
  color:var(--text);
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Motion (professional, subtle). */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep the theme toggle affordance readable (still slides). */
  .themeSwitch .knob{
    transition-duration: .18s !important;
  }
}

@media (prefers-reduced-motion: no-preference){
  /* Hover/transition effects are handled in React (Framer Motion). */
}

.hamburger{display:inline-grid; gap:3px}
.hamburger span{display:block; width:16px; height:2px; background:var(--text-2); border-radius:999px}

.menuPanel{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  width:min(240px, calc(100vw - 24px));
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:8px;
  z-index:20;
}

.menuPanel::before{
  content:"";
  position:absolute;
  top:-7px;
  right:18px;
  width:14px;
  height:14px;
  background:var(--surface);
  border-left:1px solid var(--border);
  border-top:1px solid var(--border);
  transform:rotate(45deg);
}

.menuHeader{
  font-size:12px;
  font-weight:800;
  color:var(--text);
  padding:8px 10px;
}

.menuPanel .menuItem{
  display:block;
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  color:var(--text-2);
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}


.menuItem:hover{background:color-mix(in srgb, var(--primary) 14%, transparent); color:var(--primary)}

/* Logout button: simple solid background color. */
.menuPanel .menuItem--logout{
  margin-top:2px;
  text-align:center;
  border:1px solid var(--danger);
  background:var(--danger);
  color:#fff;
}

.menuPanel .menuItem--logout:hover{
  background:var(--danger-600);
  border-color:var(--danger-600);
  color:#fff;
}

.menuPanel .menuItem--logout:active{
  transform:translateY(1px);
}

.menuSep{
  height:1px;
  background:var(--border);
  margin:6px 6px;
}

.menuPanel[hidden]{display:none}

@media (max-width: 560px){
  .menuPanel{right:-6px}
  .menuPanel::before{right:22px}
}

.badge{
  font-size:12px;
  color:var(--text);
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid var(--border);
  background-color:var(--surface);
  color:var(--text);
  position:relative;
}

.btn:focus-visible{outline:2px solid var(--primary); outline-offset:2px}

.btn:disabled,
.btn[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.7;
  box-shadow:none !important;
  transform:none !important;
}

.themeSwitch{
  width:44px;
  height:26px;
  padding:0;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--primary) 16%, transparent);
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  cursor:pointer;
}

:root[data-theme="dark"] .themeSwitch{
  background:rgba(148,163,184,.12);
}

.themeSwitch .knob{
  display:block;
  width:20px;
  height:20px;
  border-radius:999px;
  margin-left:3px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 6px 16px rgba(15,23,42,.14);
  transition:none;
}

.themeSwitch[aria-checked="true"],
:root[data-theme="dark"] .themeSwitch{
  background:rgba(34,197,94,.14);
}

.themeSwitch[aria-checked="true"] .knob,
:root[data-theme="dark"] .themeSwitch .knob{
  transform:none;
}

.btn-primary{
  background-color:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.btn-primary:hover{border-color:var(--primary)}
.btn:hover{border-color:var(--border)}

.hero{
  padding:34px 0 22px;
}

.hero--ai{
  padding:28px 0 18px;
}

.heroCard{
  background:var(--surface-3);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:24px;
  padding:28px;
}

.heroCard--ai{
  position:relative;
  overflow:hidden;
}

.heroCard--ai::after{
  content:"";
  position:absolute;
  inset:-200px -220px;
  pointer-events:none;
  background:
    radial-gradient(520px 320px at 15% 18%, color-mix(in srgb, var(--success) 12%, transparent), transparent 60%),
    radial-gradient(620px 380px at 85% 20%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 62%);
  opacity:.8;
  transform:translate3d(0,0,0);
  z-index:0;
}

.heroCard--ai > *{position:relative; z-index:1;}

.homePage{perspective:1200px}

.homePage .card,
.homePage .progressCard,
.homePage .step,
.homePage .work,
.homePage .heroVisual{
  transform-style:preserve-3d;
  backface-visibility:hidden;
}

/* Home: neon glow in card backgrounds (inside the card). */
.homePage .card,
.homePage .step,
.homePage .work,
.homePage .heroVisual{
  position:relative;
  overflow:hidden;
}

.homePage .card::before,
.homePage .step::before,
.homePage .work::before,
.homePage .heroVisual::before{
  content:"";
  position:absolute;
  inset:-90px -140px;
  pointer-events:none;
  background:
    radial-gradient(420px 280px at 18% 22%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 66%),
    radial-gradient(520px 340px at 86% 18%, color-mix(in srgb, var(--success) 12%, transparent), transparent 70%);
  opacity:.9;
  filter:blur(18px);
  transform:translate3d(0,0,0);
  z-index:0;
}

.homePage .card > *,
.homePage .step > *,
.homePage .work > *,
.homePage .heroVisual > *{position:relative; z-index:1;}

.heroGrid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:26px;
  align-items:center;
}

h1{
  margin:0 0 12px;
  font-size:38px;
  line-height:1.05;
  letter-spacing:-.02em;
}

.heroTitle{margin:12px 0 10px;}

.heroTitleAccent{
  color:var(--primary);
  text-shadow:0 10px 34px color-mix(in srgb, var(--primary) 22%, transparent);
}

:root[data-theme="dark"] .heroTitleAccent{
  color:color-mix(in srgb, var(--success) 70%, var(--primary));
}

.sub{
  margin:0 0 18px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
  max-width:52ch;
}

.heroSub{max-width:58ch;}

.trustPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background:color-mix(in srgb, var(--surface) 74%, transparent);
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
}

.trustDot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--success);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--success) 16%, transparent);
}

.heroPills{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 12px;}

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
}


.heroActions{display:flex;gap:10px;flex-wrap:wrap}

.heroActions--ai{align-items:center;}

.btn-ghost{
  background-color:color-mix(in srgb, var(--surface) 78%, transparent);
  border-color:color-mix(in srgb, var(--border) 78%, transparent);
  --btn-fill:color-mix(in srgb, var(--primary) 16%, transparent);
}

.btn-ghost:hover{border-color:color-mix(in srgb, var(--primary) 18%, var(--border));}

.btnArrow{margin-left:6px; display:inline-block; transform:translateY(-.5px); opacity:.9;}

.heroMeta{
  margin-top:14px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  color:var(--text-2);
}

.metaItem{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  font-weight:800;
  color:var(--text-2);
  opacity:.95;
}

.metaItem svg{opacity:.9}

.heroVisual{
  position:relative;
  border-radius:22px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 64%, transparent);
  overflow:hidden;
  box-shadow:var(--shadow);
  padding:14px;
  min-height:280px;
}

.heroVisualFrame{
  border-radius:18px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background:
    radial-gradient(520px 320px at 30% 30%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 60%),
    radial-gradient(520px 320px at 80% 60%, color-mix(in srgb, var(--success) 10%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--text) 8%, transparent), transparent 70%);
}

.heroVisualImg{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:translateZ(0);
}

.heroBadge{
  position:absolute;
  left:18px;
  bottom:18px;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid color-mix(in srgb, var(--success) 22%, var(--border));
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow:0 14px 30px rgba(15,23,42,.12);
}

:root[data-theme="dark"] .heroBadge{box-shadow:0 18px 36px rgba(0,0,0,.42)}

.heroBadgePct{
  width:44px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:900;
  color:color-mix(in srgb, var(--success) 84%, var(--text));
  background:rgba(34,197,94,.14);
  border:1px solid rgba(34,197,94,.22);
}

.heroBadgeLabel{font-weight:900; font-size:12px; color:var(--text);}
.heroBadgeSub{font-size:11px; color:var(--muted); margin-top:1px;}

.heroSpark{
  position:absolute;
  right:14px;
  bottom:14px;
  width:10px;
  height:10px;
  border-radius:999px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow:
    0 0 0 10px color-mix(in srgb, var(--primary) 8%, transparent),
    0 0 0 18px color-mix(in srgb, var(--success) 6%, transparent);
  opacity:.9;
}

.illustration{
  background:linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 10%, transparent),
    color-mix(in srgb, var(--success) 8%, transparent)
  );
  border:1px solid var(--border);
  border-radius:20px;
  padding:14px;
}

@media (max-width: 1100px){
  .heroMeta{gap:10px}
  .metaItem{font-size:11px}
}

@media (max-width: 560px){
  .heroBadge{left:12px; bottom:12px}
  .heroBadgePct{width:42px}
}

.section{
  padding:22px 0 44px;
}

.panel{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:18px;
}

.panelTitle{
  font-weight:700;
  font-size:13px;
  color:var(--text);
  margin:6px 6px 12px;
}

.hub{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:14px;
}

.progressCard{
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  will-change:transform;
}

.homePage .progressCard::after{
  content:"";
  position:absolute;
  inset:-120px -160px;
  pointer-events:none;
  background:
    radial-gradient(380px 240px at 18% 22%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 62%),
    radial-gradient(420px 260px at 85% 20%, color-mix(in srgb, var(--success) 12%, transparent), transparent 66%);
  opacity:.9;
  filter:blur(14px);
  transform:translate3d(0,0,0);
  z-index:0;
}

.homePage .progressCard > *{position:relative; z-index:1;}

.progressWrap{display:flex;gap:14px;align-items:center; position:relative}

.ring{
  width:92px;
  height:92px;
  min-width:92px;
  min-height:92px;
  aspect-ratio:1/1;
  box-sizing:border-box;
  flex:0 0 auto;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: conic-gradient(
    color-mix(in srgb, var(--success) 70%, var(--primary)) 0% calc(var(--pct, 60) * 1%),
    var(--ring-track) calc(var(--pct, 60) * 1%) 100%
  );
}

.ringInner{
  width:74px;
  height:74px;
  border-radius:999px;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  display:grid;
  place-items:center;
}

.ringVal{font-weight:800;font-size:18px}
.ringLbl{font-size:11px;color:var(--muted);margin-top:-2px}

.progressTitle{
  font-weight:900;
  font-size:13px;
  margin-bottom:4px;
  color:var(--text);
  letter-spacing:-.01em;
}

.progressDesc{
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

.smallMuted{font-size:12px;color:var(--muted);line-height:1.4;margin-top:10px}

.cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  min-height:110px;
}

.cardIcon{
  width:34px;height:34px;border-radius:12px;
  color:var(--primary);
  background:color-mix(in srgb, var(--primary) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  display:grid;place-items:center;
  margin-bottom:10px;
}

.cardTitle{font-weight:700;font-size:12px;margin:0 0 6px}
.cardText{margin:0;color:var(--muted);font-size:12px;line-height:1.45}

.work{
  margin-top:14px;
  background:var(--surface-3);
  border:1px solid var(--border);
  border-radius:24px;
  padding:18px;
}

.workGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}

.step{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  will-change:transform;
}

.step:hover{
  border-color:color-mix(in srgb, var(--primary) 20%, var(--border));
  box-shadow:0 14px 28px rgba(15,23,42,.10);
}

:root[data-theme="dark"] .step:hover{
  box-shadow:0 18px 34px rgba(0,0,0,.38);
}

.progressCard:hover{
  border-color:color-mix(in srgb, var(--primary) 18%, var(--border));
  box-shadow:0 14px 28px rgba(15,23,42,.10);
}

:root[data-theme="dark"] .progressCard:hover{
  box-shadow:0 18px 34px rgba(0,0,0,.38);
}

/* Home: Demo information */
.demoPanel{position:relative; overflow:hidden;}

.demoPanel::before{
  content:"";
  position:absolute;
  inset:-120px -180px;
  pointer-events:none;
  background:
    radial-gradient(420px 260px at 15% 10%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%),
    radial-gradient(440px 280px at 90% 35%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 62%);
  opacity:.85;
  transform:translate3d(0,0,0);
  animation:demoDrift 9s ease-in-out infinite;
}

@keyframes demoDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  45%{transform:translate3d(10px,-10px,0) scale(1.02)}
  100%{transform:translate3d(0,0,0) scale(1)}
}

.demoGrid{
  position:relative;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items:stretch;
}

.demoPreview{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px;
  position:relative;
  overflow:hidden;
}

.demoPreview::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 60%);
  opacity:.9;
}

.demoHeading{position:relative; font-weight:800; font-size:13px; color:var(--text);}

.demoKpis{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}

.kpi{
  background:var(--surface-3);
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 12px;
}

.kpiVal{font-weight:900; font-size:13px; letter-spacing:-.01em;}
.kpiLbl{font-size:11px; color:var(--muted); margin-top:2px;}

.demoChecklist{position:relative; display:grid; gap:10px; margin-top:14px;}

.demoItem{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:11px 12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  will-change:transform;
}

.demoItem:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--primary) 22%, var(--border));
  box-shadow:0 14px 28px rgba(15,23,42,.10);
}

:root[data-theme="dark"] .demoItem:hover{box-shadow:0 18px 34px rgba(0,0,0,.38);}

.demoBullet{
  width:18px;
  height:18px;
  border-radius:7px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  margin-top:1px;
  color:var(--success);
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.22);
}

.demoItemTitle{font-weight:800; font-size:12px; margin:0 0 3px; color:var(--text);}
.demoItemText{font-size:12px; color:var(--muted); line-height:1.45;}

.demoCards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.demoCard{min-height:118px}

@media (max-width: 1100px){
  .demoGrid{grid-template-columns:1fr;}
  .demoCards{grid-template-columns:repeat(2, minmax(0,1fr));}
}

@media (max-width: 560px){
  .demoKpis{grid-template-columns:1fr;}
  .demoCards{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  .demoPanel::before{animation:none}
  .demoItem{transition:none}
  .demoItem:hover{transform:none}
}

.stepTop{display:flex;gap:10px;align-items:flex-start}
.stepNum{
  width:26px;height:26px;border-radius:999px;
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  color:var(--primary);
  font-weight:800;
  display:grid;place-items:center;
  flex:0 0 auto;
  font-size:12px;
}

.step h3{margin:0 0 6px;font-size:12px}
.step p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}

.footer{
  margin-top:28px;
  padding:26px 0 36px;
  background:var(--surface-2);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
}

/* React SPA footer (AI-generated style) */
.siteFooter{
  --footer-bg: var(--surface);
  --footer-fg: var(--text);
  --footer-muted: var(--muted);
  --footer-border: var(--border);

  position:relative;
  margin-top:28px;
  padding:44px 0 20px;
  background:var(--surface-2);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  color:var(--footer-fg);
  overflow:hidden;
}

:root[data-theme="dark"] .siteFooter{
  --footer-bg: var(--surface);
  --footer-fg: var(--text);
  --footer-muted: var(--muted);
  --footer-border: var(--border);
}

.footerTopLine{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, var(--success), var(--primary));
  opacity:.9;
}

.siteFooter::before{
  content:none;
  position:absolute;
  inset:-220px -240px;
  pointer-events:none;
  background:none;
  opacity:0;
  transform:translate3d(0,0,0);
  animation:none;
}

@keyframes footerDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(12px,-10px,0) scale(1.02)}
  100%{transform:translate3d(0,0,0) scale(1)}
}

@media (prefers-reduced-motion: reduce){
  .siteFooter::before{animation:none}
}

.footerCta{position:relative; text-align:center; margin-bottom:18px;}

.footerCta h2{
  margin:0;
  font-size:22px;
  letter-spacing:-.01em;
}

.footerGrid{
  position:relative;
  display:grid;
  grid-template-columns: 1.2fr .7fr .8fr 1fr;
  gap:18px;
  padding:18px 0 16px;
}

.footerBrandRow{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.2px;
}

.footerBrandRow img{width:28px;height:28px;}

.footerDesc{
  margin:10px 0 12px;
  color:var(--footer-muted);
  font-size:12px;
  line-height:1.5;
  max-width:34ch;
}

.footerSocial{display:flex; gap:8px; align-items:center;}

.footerSocialBtn{
  width:32px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb, var(--footer-fg) 8%, transparent);
  border:1px solid var(--footer-border);
  color:color-mix(in srgb, var(--footer-fg) 86%, transparent);
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease;
}

.footerSocialBtn:hover{
  transform:translateY(-2px);
  background:color-mix(in srgb, var(--success) 18%, transparent);
  border-color:color-mix(in srgb, var(--success) 36%, var(--footer-border));
}

.footerSocialBtn:active{transform:translateY(-1px) scale(.98)}

.footerColTitle{
  font-weight:800;
  font-size:12px;
  margin:2px 0 10px;
}

.footerLinks{display:grid; gap:8px;}

.footerLinks a{
  color:var(--footer-muted);
  font-size:12px;
  transition:transform .16s ease, color .16s ease;
  width:max-content;
}

.footerLinks a:hover{
  color:color-mix(in srgb, var(--footer-fg) 92%, transparent);
  transform:translateX(2px);
}

.footerSmall{
  color:var(--footer-muted);
  font-size:12px;
  line-height:1.45;
  margin-bottom:10px;
}

.footerForm{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px;
  border-radius:999px;
  border:1px solid var(--footer-border);
  background:color-mix(in srgb, var(--footer-fg) 6%, transparent);
}

.footerInput{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--footer-fg);
  padding:10px 12px;
  outline:none;
  width:100%;
  min-width:0;
  font-size:12px;
}

.footerInput::placeholder{color:color-mix(in srgb, var(--footer-muted) 90%, transparent)}

.footerSubmit{
  border:0;
  border-radius:999px;
  height:34px;
  padding:0 14px;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  background:color-mix(in srgb, var(--success) 78%, transparent);
  color:color-mix(in srgb, var(--footer-fg) 96%, transparent);
  transition:transform .16s ease, filter .16s ease;
}

.footerSubmit:hover{transform:translateY(-1px); filter:brightness(1.03)}
.footerSubmit:active{transform:translateY(0) scale(.99)}

.footerBottom{
  position:relative;
  margin-top:10px;
  padding-top:14px;
  border-top:1px solid var(--footer-border);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.footerCopy{color:var(--footer-muted); font-size:12px;}

.footerBottomLinks{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}

.footerBottomLinks a{
  color:var(--footer-muted);
  font-size:12px;
  transition:color .16s ease;
}

.footerBottomLinks a:hover{color:color-mix(in srgb, var(--footer-fg) 92%, transparent)}

.footerChat{
  position:fixed;
  right:16px;
  bottom:16px;
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--success) 38%, var(--border));
  background:color-mix(in srgb, var(--success) 22%, transparent);
  color:color-mix(in srgb, var(--footer-fg) 92%, transparent);
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:30;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  transition:transform .16s ease, filter .16s ease;
}

.footerChat:hover{transform:translateY(-2px); filter:brightness(1.05)}
.footerChat:active{transform:translateY(-1px) scale(.98)}

@media (max-width: 1100px){
  .footerGrid{grid-template-columns: 1fr 1fr;}
  .footerDesc{max-width:none}
}

@media (max-width: 640px){
  .footerGrid{grid-template-columns: 1fr;}
  .footerCta h2{font-size:20px}
}

.form{display:grid;gap:14px;margin-top:12px}
.field{display:grid;gap:6px}
.field span{font-size:12px;color:#334155;font-weight:600}
.field span{color:var(--text-2)}
.input{
  width:100%;
  height:42px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.95);
  padding:0 12px;
  font-size:13px;
  outline:none;
  color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

:root[data-theme="dark"] .input{
  background:rgba(15,23,42,.65);
}

textarea.input{height:auto; padding:10px 12px; min-height:96px; resize:vertical}

.input::placeholder{color:#94a3b8}

select.input{
  padding-right:38px;
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 13px) 18px,
    0 0;
  background-size:
    5px 5px,
    5px 5px,
    100% 100%;
  background-repeat:no-repeat;
}

.input:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(59,130,246,.12); background:var(--surface)}

:root[data-theme="dark"] .input:focus{background:rgba(15,23,42,.85)}

.formActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

.alert{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(248,113,113,.35);
  background:rgba(248,113,113,.10);
  color:#7f1d1d;
  font-size:12px;
}

.alert-success{
  border-color:rgba(34,197,94,.30);
  background:rgba(34,197,94,.10);
  color:#14532d;
}

.pageHeader{
  padding:30px 0 14px;
}

.pageHeader h1{font-size:30px}

.grid2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

@media (max-width: 1100px){
  .heroGrid{grid-template-columns:1fr;}
  .hub{grid-template-columns:1fr;}
  .cards{grid-template-columns:repeat(2, minmax(0,1fr));}
}

@media (max-width: 760px){
  .nav{flex-wrap:wrap;}
  .navactions{order:2; margin-left:auto}

  .grid2{grid-template-columns:1fr;}
}

@media (max-width: 560px){
  .container{width:calc(100% - 28px)}
  .nav{gap:12px}
  .navlinks{gap:10px}
  .navlinks a{padding:6px 9px; font-size:12px}
  .brand img{width:54px;height:54px}
  .brandText{font-size:14px; letter-spacing:.06em}
  h1{font-size:32px}
  .cards{grid-template-columns:1fr;}
  .workGrid{grid-template-columns:1fr;}
  .badge{display:none}
}