:root {
  --bg: #07111f;
  --bg-deep: #030810;
  --panel: rgba(12, 25, 43, .88);
  --panel-soft: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .12);
  --text: #f5f8ff;
  --muted: #aebbd0;
  --navy: #0a2a5a;
  --blue: #3278ff;
  --orange: #ff6a00;
  --orange-light: #ff8a2d;
  --green: #31c978;
  --red: #e95465;
  --radius: 20px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .4);
  --container: 1460px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg-deep);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 999; padding: 12px 18px; border-radius: 10px; background: white; color: #07111f; transition: .2s; }
.skip-link:focus { top: 12px; }

.section-carbon {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255,255,255,.018) 25%, transparent 25%) 0 0/10px 10px,
    linear-gradient(315deg, rgba(255,255,255,.018) 25%, transparent 25%) 0 0/10px 10px,
    linear-gradient(135deg, transparent 75%, rgba(255,255,255,.018) 75%) 0 0/10px 10px,
    linear-gradient(315deg, transparent 75%, rgba(255,255,255,.018) 75%) 0 0/10px 10px,
    radial-gradient(circle at 18% 0%, rgba(46, 116, 255, .12), transparent 30%),
    linear-gradient(180deg, #071321 0%, #040b13 100%);
}
.section-dark { background: linear-gradient(180deg, #06101c 0%, #081522 100%); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(3, 9, 16, .82);
  border-bottom: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(18px);
}
.nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: clamp(1.12rem, 2vw, 1.48rem); letter-spacing: -.04em; white-space: nowrap; }
.brand > span > span, .app-brand-mini span { color: var(--orange); }
.main-nav { display: flex; gap: 32px; align-items: center; margin-left: auto; }
.main-nav a { color: #e6edf8; font-weight: 650; font-size: .94rem; transition: color .2s; }
.main-nav a:hover { color: var(--orange-light); }
.nav-cta { margin-left: 10px; }
.menu-toggle { display: none; border: 0; background: none; padding: 8px; margin-left: auto; }
.menu-toggle span { display: block; width: 26px; height: 2px; background: white; margin: 5px 0; }

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 750;
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: linear-gradient(135deg, var(--orange), #ff7f1d); box-shadow: 0 12px 30px rgba(255,106,0,.24); }
.button-primary:hover { box-shadow: 0 18px 38px rgba(255,106,0,.34); }
.button-secondary { color: white; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.04); }
.button-secondary:hover { border-color: white; background: rgba(255,255,255,.09); }

.hero { overflow: hidden; padding: 60px 0 72px; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .82fr 1.3fr; gap: 46px; align-items: center; }
.hero-copy { padding: 52px 0; }
.eyebrow { margin: 0 0 12px; color: var(--orange-light); text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 900; }
.hero h1 { max-width: 650px; margin: 0; font-size: clamp(3rem, 5.3vw, 5.8rem); line-height: .98; letter-spacing: -.065em; }
.hero-lead { max-width: 670px; margin: 28px 0 0; color: #c6d1e1; font-size: clamp(1.05rem, 1.4vw, 1.32rem); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.trust-item { display: flex; align-items: center; gap: 11px; min-width: 0; }
.trust-item strong, .trust-item small { display: block; }
.trust-item strong { font-size: .9rem; }
.trust-item small { color: var(--muted); font-size: .75rem; margin-top: 2px; }
.icon-ring { flex: 0 0 37px; width: 37px; height: 37px; display: grid; place-items: center; color: var(--orange-light); border: 1px solid rgba(255,106,0,.45); border-radius: 50%; background: rgba(255,106,0,.08); }
.icon-ring svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .34; z-index: -1; }
.hero-glow-one { width: 420px; height: 420px; background: #173f8f; top: -150px; left: 4%; }
.hero-glow-two { width: 330px; height: 330px; background: #8a3200; right: -80px; bottom: -190px; opacity: .2; }

.dashboard-shell { min-width: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 19px; overflow: hidden; background: #f8fbff; box-shadow: var(--shadow), 0 0 0 7px rgba(255,255,255,.02); transform: perspective(1400px) rotateY(-1deg) rotateX(.4deg); }
.browser-bar { height: 37px; background: #eef3f9; border-bottom: 1px solid #dae3ef; display: flex; align-items: center; gap: 6px; padding: 0 14px; }
.browser-bar > span { width: 9px; height: 9px; border-radius: 50%; background: #c9d1dd; }
.browser-bar > span:first-child { background: #ff756c; }.browser-bar > span:nth-child(2){background:#ffc95d}.browser-bar > span:nth-child(3){background:#5ed18a}
.browser-address { width: 38%; margin-left: 14px; color: #8d9bad; background: white; border: 1px solid #dce4ee; border-radius: 7px; font-size: .63rem; padding: 4px 11px; }
.app-window { display: grid; grid-template-columns: 152px 1fr; min-height: 535px; color: #15233a; }
.app-sidebar { padding: 16px 12px; background: linear-gradient(180deg, #071b3d, #0a2b57); color: #cbd8ec; }
.app-brand-mini { display: flex; align-items: center; gap: 7px; margin: 0 4px 17px; color: white; font-size: .65rem; }.app-brand-mini img{width:20px}.app-brand-mini b{white-space:nowrap}
.app-sidebar a { display: flex; align-items: center; gap: 8px; margin: 4px 0; padding: 8px 9px; border-radius: 7px; font-size: .66rem; }
.app-sidebar a.active { color: white; background: rgba(61,123,234,.28); }.app-sidebar i { width: 15px; font-style: normal; text-align:center; }
.app-main { background: #f6f9fc; padding: 13px; overflow: hidden; }
.app-topbar { display: flex; justify-content: space-between; align-items: center; height: 35px; }
.fake-search { width: 40%; color: #9caabc; background: white; border: 1px solid #e1e7ef; border-radius: 6px; padding: 6px 10px; font-size: .61rem; }
.app-user { display: flex; align-items: center; gap: 7px; font-size: .56rem; }.app-user b,.app-user small{display:block}.app-user small{color:#8491a1}.avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:white;background:#153c76;font-size:.55rem}
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 9px; }
.kpi-grid article { position: relative; background: white; border: 1px solid #e4e9f0; border-radius: 8px; padding: 9px; box-shadow: 0 3px 10px rgba(29,54,84,.04); }
.kpi-grid span,.kpi-grid strong { display:block }.kpi-grid span{font-size:.55rem;color:#65748a}.kpi-grid strong{font-size:1.05rem;margin-top:3px}.kpi-grid small{position:absolute;right:8px;bottom:9px;font-size:.49rem}.positive{color:#18a65b}.warning{color:#e77b16}
.chart-grid { display: grid; grid-template-columns: 1.45fr .8fr; gap: 8px; margin-top: 8px; }
.chart-card,.table-card{background:white;border:1px solid #e4e9f0;border-radius:8px;padding:10px}.chart-card h3,.table-card h3{margin:0;font-size:.61rem}.line-chart{width:100%;height:132px;margin-top:7px}.grid-lines path{stroke:#e8edf4;stroke-width:1}.line{fill:none;stroke:#3278ff;stroke-width:3;stroke-linecap:round}.area{fill:url(#chartFill)}
.donut-wrap { display: flex; align-items: center; justify-content:center; gap: 16px; min-height: 130px; }.donut{width:78px;height:78px;border-radius:50%;background:conic-gradient(#3278ff 0 35%,#ff7a16 35% 75%,#43b671 75% 95%,#e65b67 95%);position:relative}.donut:after{content:"";position:absolute;inset:17px;border-radius:50%;background:#fff}.donut-wrap ul{list-style:none;margin:0;padding:0;font-size:.51rem;min-width:84px}.donut-wrap li{display:flex;align-items:center;gap:5px;margin:6px 0}.donut-wrap li b{margin-left:auto}.donut-wrap i{width:7px;height:7px;border-radius:2px}.blue{background:#3278ff}.orange{background:#ff7a16}.green{background:#43b671}.red{background:#e65b67}
.table-card{margin-top:8px;padding-bottom:6px}.table-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.table-title span{font-size:.5rem;color:#3278ff}.table-row{display:grid;grid-template-columns:.55fr 1.3fr 1.1fr 1.8fr .8fr;gap:7px;align-items:center;border-top:1px solid #edf1f5;padding:5px 0;font-size:.48rem;color:#526176}.table-head{border-top:0;color:#8190a3;font-weight:700}.status{display:inline-block;padding:2px 5px;border-radius:4px;font-style:normal;font-weight:700}.in-progress{color:#ad6300;background:#fff0d6}.accepted{color:#155fa9;background:#deefff}.ready{color:#277146;background:#dff7e8}

.features,.system-preview { padding: 100px 0; }
.section-heading { max-width: 780px; margin-bottom: 42px; }.section-heading.centered{text-align:center;margin-inline:auto}.section-heading h2{font-size:clamp(2rem,3.4vw,3.4rem);letter-spacing:-.045em;line-height:1.08;margin:0}.section-heading>p:last-child{color:var(--muted);font-size:1.05rem;margin:15px 0 0}
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { display: flex; gap: 17px; min-height: 156px; padding: 25px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: 0 16px 40px rgba(0,0,0,.12); }
.feature-card:hover { border-color: rgba(255,106,0,.44); transform: translateY(-3px); }
.feature-card,.preview-card { transition: transform .25s, border-color .25s; }
.feature-icon { flex:0 0 47px;width:47px;height:47px;display:grid;place-items:center;border-radius:12px;color:var(--orange-light);background:rgba(255,106,0,.09);border:1px solid rgba(255,106,0,.23)}.feature-icon svg{width:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.feature-card h3{margin:3px 0 7px;font-size:1.08rem}.feature-card p{margin:0;color:var(--muted);font-size:.91rem}

.workflow { padding: 100px 0; overflow:hidden; }
.workflow-grid { counter-reset: steps; list-style:none; padding:0; margin:50px 0 0; display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.workflow-grid li { position:relative;text-align:center;padding:26px 18px 22px;border:1px solid var(--line);border-radius:18px;background:rgba(4,12,22,.72) }.workflow-grid li:not(:last-child):after{content:"";position:absolute;top:44px;right:-15px;width:16px;border-top:1px dashed rgba(255,138,45,.7)}.workflow-grid li>span{position:absolute;top:13px;left:14px;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;font-weight:800;color:#fff;background:var(--orange)}.workflow-icon{font-size:2rem;margin:14px 0 10px}.workflow-grid h3{margin:0;font-size:1rem}.workflow-grid p{margin:8px 0 0;color:var(--muted);font-size:.82rem}

.preview-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:18px }.preview-card{border:1px solid var(--line);border-radius:16px;padding:12px 12px 21px;background:rgba(255,255,255,.035)}.preview-card:hover{transform:translateY(-5px);border-color:rgba(50,120,255,.5)}.preview-card h3{margin:18px 7px 5px}.preview-card p{margin:0 7px;color:var(--muted);font-size:.84rem}.mini-app{height:250px;display:grid;grid-template-columns:19% 1fr;border-radius:11px;overflow:hidden;background:#f4f8fc}.mini-side{background:#0a2852}.mini-content{padding:15px}.mini-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.mini-kpis i{height:40px;border-radius:5px;background:#fff;border:1px solid #e1e8f0}.mini-chart{height:90px;margin-top:10px;border-radius:6px;background:linear-gradient(180deg,rgba(49,120,255,.2),transparent),repeating-linear-gradient(0deg,#fff 0 21px,#eaf0f6 22px)}.mini-table{height:66px;margin-top:10px;border-radius:5px;background:repeating-linear-gradient(180deg,#fff 0 11px,#e6edf4 12px 13px)}.mini-toolbar{height:27px;border-radius:5px;background:#fff;border:1px solid #e2e8f0}.rows{margin-top:10px}.rows i{display:block;height:29px;border-bottom:1px solid #dbe3ec;background:linear-gradient(90deg,#fff 0 28%,#edf3f8 28% 30%,#fff 30% 69%,#dff0ff 69% 82%,#fff 82%)}.rows.stock i{background:linear-gradient(90deg,#fff 0 38%,#edf3f8 38% 40%,#fff 40% 65%,#e3f6e9 65% 78%,#fff 78%)}.book-head{height:60px;border-radius:7px;background:linear-gradient(110deg,#fff,#e8f0fb)}.timeline{padding-left:18px;margin-top:11px;border-left:2px solid #3278ff}.timeline i{display:block;height:33px;border-bottom:1px solid #dde5ee;position:relative}.timeline i:before{content:"";position:absolute;left:-23px;top:10px;width:8px;height:8px;border-radius:50%;background:#3278ff}

.customer-garage { padding: 105px 0; overflow:hidden; }.garage-grid{display:grid;grid-template-columns:.75fr 1.25fr;align-items:center;gap:70px}.garage-copy h2{font-size:clamp(2.2rem,3.7vw,4rem);letter-spacing:-.05em;line-height:1.06;margin:0}.garage-copy>p:not(.eyebrow){color:var(--muted);font-size:1.05rem;margin:22px 0}.check-list{list-style:none;margin:25px 0 0;padding:0}.check-list li{display:flex;align-items:flex-start;gap:11px;margin:14px 0}.check-list span{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border-radius:50%;color:white;background:var(--orange);font-weight:800}.device-stage{position:relative;display:grid;place-items:center;min-height:500px}.device-stage:before{content:"";position:absolute;width:520px;height:270px;border-radius:50%;background:rgba(49,120,255,.17);filter:blur(70px)}.tablet{position:relative;width:min(100%,780px);border:13px solid #0b0d11;border-radius:29px;background:#0b0d11;box-shadow:0 35px 80px rgba(0,0,0,.55),0 0 0 1px #59606a;z-index:1}.tablet-camera{position:absolute;top:4px;left:50%;width:6px;height:6px;border-radius:50%;background:#2d333c;z-index:2}.garage-ui{background:#f8fafc;color:#14233a;border-radius:17px;padding:18px}.garage-top{display:flex;justify-content:space-between;font-size:.75rem}.garage-top span{color:#78889d}.vehicle-card{display:grid;grid-template-columns:150px 1fr 165px;gap:14px;align-items:center;margin-top:13px;padding:15px;border:1px solid #e1e7ee;border-radius:11px;background:white}.car-art svg{fill:#8795a7;stroke:#4e5a6b;stroke-width:3}.vehicle-card h3{margin:0 0 3px}.vehicle-card p{margin:0;color:#728197;font-size:.72rem}.next-service{padding:10px 12px;border-radius:8px;background:#f5f8fc}.next-service small,.next-service strong,.next-service span{display:block}.next-service small{color:#6c7c91;font-size:.61rem}.next-service strong{font-size:.83rem;margin-top:3px}.next-service span{color:#738197;font-size:.61rem}.garage-tabs{display:flex;gap:24px;margin:16px 0 4px;border-bottom:1px solid #dce4ed;font-size:.68rem}.garage-tabs span{padding:0 3px 8px}.garage-tabs .active{color:#3278ff;border-bottom:2px solid #3278ff}.history-row{display:grid;grid-template-columns:90px 1fr 90px;gap:10px;padding:10px 3px;border-bottom:1px solid #e1e7ee;font-size:.67rem}.history-row time{color:#3278ff}.history-row span{text-align:right;color:#758499}

.demo-cta { border-top:1px solid rgba(255,106,0,.3); border-bottom:1px solid rgba(255,255,255,.1); background:radial-gradient(circle at 85% 50%,rgba(255,106,0,.25),transparent 24%),linear-gradient(90deg,#07172e,#06101c); }.cta-grid{min-height:150px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:25px}.cta-icon{width:68px;height:68px;display:grid;place-items:center;border:2px solid rgba(255,138,45,.65);border-radius:50%;font-size:2rem;color:var(--orange-light)}.cta-grid h2{margin:0;font-size:clamp(1.5rem,2.4vw,2.35rem)}.cta-grid p{margin:5px 0 0;color:var(--muted)}.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.site-footer{background:#030811;padding:28px 0}.footer-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px}.footer-brand{font-size:1.05rem}.site-footer nav{display:flex;justify-content:center;gap:25px}.site-footer nav a,.site-footer nav button{border:0;background:none;padding:0;color:#b5c0d1;font-size:.82rem;cursor:pointer}.site-footer p{color:#7e8b9e;font-size:.76rem;margin:0;text-align:right}

.demo-dialog { width:min(calc(100% - 32px),520px);padding:35px;border:1px solid rgba(255,255,255,.14);border-radius:19px;color:var(--text);background:linear-gradient(150deg,#0c1d33,#07111f);box-shadow:0 35px 100px rgba(0,0,0,.65) }.demo-dialog::backdrop{background:rgba(0,4,10,.78);backdrop-filter:blur(5px)}.demo-dialog h2{font-size:2rem;letter-spacing:-.04em;margin:8px 0 12px}.demo-dialog>p:not(.eyebrow){color:var(--muted)}.dialog-note{margin:20px 0;padding:13px;border:1px solid rgba(255,106,0,.25);border-radius:10px;color:#ffd8bd;background:rgba(255,106,0,.08);font-size:.88rem}.dialog-close{position:absolute;right:15px;top:12px;border:0;background:none;color:#aebbd0;font-size:2rem;cursor:pointer}.dialog-ok{width:100%;margin-top:5px}

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible{opacity:1;transform:none}

@media (max-width: 1180px) {
  .main-nav { gap: 18px; }.hero-grid{grid-template-columns:1fr}.hero-copy{padding-bottom:15px}.hero h1{max-width:800px}.dashboard-shell{max-width:970px;margin:auto}.feature-grid{grid-template-columns:repeat(2,1fr)}.workflow-grid{grid-template-columns:repeat(3,1fr)}.workflow-grid li:not(:last-child):after{display:none}.preview-grid{grid-template-columns:repeat(2,1fr)}.garage-grid{grid-template-columns:1fr}.garage-copy{max-width:760px}.cta-grid{grid-template-columns:auto 1fr}.cta-actions{grid-column:2}.footer-grid{grid-template-columns:1fr;text-align:center}.site-footer nav{flex-wrap:wrap}.site-footer p{text-align:center}
}
@media (max-width: 850px) {
  .nav-wrap{min-height:68px}.menu-toggle{display:block}.nav-cta{display:none}.main-nav{position:absolute;left:20px;right:20px;top:72px;display:none;flex-direction:column;align-items:stretch;padding:18px;border:1px solid var(--line);border-radius:14px;background:#071321;box-shadow:var(--shadow)}.main-nav.open{display:flex}.main-nav a{padding:9px}.hero{padding-top:30px}.hero-copy{padding-top:35px}.hero h1{font-size:clamp(2.8rem,12vw,4.7rem)}.trust-row{grid-template-columns:1fr}.dashboard-shell{transform:none}.app-window{grid-template-columns:106px 1fr;min-height:480px}.app-sidebar{padding:10px 7px}.app-sidebar a{font-size:.53rem}.kpi-grid{grid-template-columns:repeat(2,1fr)}.chart-grid{grid-template-columns:1fr}.status-card{display:none}.table-row{grid-template-columns:.5fr 1.3fr 1.1fr .8fr}.table-row span:nth-child(4){display:none}.feature-grid{grid-template-columns:1fr}.workflow-grid{grid-template-columns:1fr 1fr}.vehicle-card{grid-template-columns:95px 1fr}.next-service{grid-column:1/-1}.cta-grid{grid-template-columns:1fr;text-align:center;padding:35px 0}.cta-icon{margin:auto}.cta-actions{grid-column:auto;justify-content:center}.garage-grid{gap:25px}.device-stage{min-height:auto}.tablet{border-width:8px}.garage-ui{padding:11px}.history-row{grid-template-columns:75px 1fr}.history-row span{display:none}
}
@media (max-width: 560px) {
  .container{width:min(calc(100% - 26px),var(--container))}.brand img{width:37px}.hero-actions .button{width:100%}.dashboard-shell{display:none}.hero{padding-bottom:55px}.features,.system-preview,.workflow,.customer-garage{padding:72px 0}.workflow-grid,.preview-grid{grid-template-columns:1fr}.feature-card{padding:20px}.section-heading h2{font-size:2.15rem}.device-stage{display:none}.garage-grid{display:block}.site-footer nav{gap:14px}.cta-actions .button{width:100%}
}
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button{transition:none} }

/* Theme system — dark carbon is the default */
:root {
  color-scheme: dark;
  --header-bg: rgba(3, 9, 16, .84);
  --nav-link: #e6edf8;
  --secondary-button-text: #ffffff;
  --section-dark-a: #06101c;
  --section-dark-b: #081522;
  --footer-bg: #030811;
  --card-bg: rgba(255,255,255,.055);
  --card-border: rgba(255,255,255,.11);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6fa;
  --bg-deep: #e9eef5;
  --panel: rgba(255,255,255,.92);
  --panel-soft: rgba(8, 31, 58, .055);
  --line: rgba(9, 33, 61, .14);
  --text: #10233c;
  --muted: #66768a;
  --shadow: 0 24px 70px rgba(23, 45, 72, .15);
  --header-bg: rgba(255,255,255,.88);
  --nav-link: #18304d;
  --secondary-button-text: #14304e;
  --section-dark-a: #f8fafc;
  --section-dark-b: #edf2f7;
  --footer-bg: #e7edf4;
  --card-bg: rgba(255,255,255,.88);
  --card-border: rgba(14,43,72,.12);
}

body { transition: background-color .28s ease, color .28s ease; }
.site-header { background: var(--header-bg); }
.main-nav a { color: var(--nav-link); }
.nav-actions { margin-left: 10px; display:flex; align-items:center; gap:10px; }
.nav-cta { margin-left:0; }
.theme-toggle {
  min-height: 42px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-soft);
  color:var(--text);
  cursor:pointer;
  font-weight:750;
  font-size:.78rem;
  transition:transform .2s, background .2s, border-color .2s;
}
.theme-toggle:hover { transform:translateY(-1px); border-color:rgba(255,106,0,.55); }
.theme-icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.theme-icon-moon { display:none; }
html[data-theme="light"] .theme-icon-sun { display:none; }
html[data-theme="light"] .theme-icon-moon { display:block; }

.section-carbon {
  background:
    linear-gradient(135deg, rgba(255,255,255,.022) 25%, transparent 25%) 0 0/8px 8px,
    linear-gradient(315deg, rgba(255,255,255,.022) 25%, transparent 25%) 0 0/8px 8px,
    linear-gradient(135deg, transparent 75%, rgba(255,255,255,.018) 75%) 0 0/8px 8px,
    linear-gradient(315deg, transparent 75%, rgba(255,255,255,.018) 75%) 0 0/8px 8px,
    radial-gradient(circle at 18% 0%, rgba(46,116,255,.12), transparent 30%),
    linear-gradient(180deg,#071321 0%,#040b13 100%);
}
html[data-theme="light"] .section-carbon {
  background:
    linear-gradient(135deg, rgba(18,52,84,.026) 25%, transparent 25%) 0 0/9px 9px,
    linear-gradient(315deg, rgba(18,52,84,.026) 25%, transparent 25%) 0 0/9px 9px,
    radial-gradient(circle at 18% 0%, rgba(49,120,255,.11), transparent 31%),
    linear-gradient(180deg,#ffffff 0%,#f1f5f9 100%);
}
.section-dark { background:linear-gradient(180deg,var(--section-dark-a),var(--section-dark-b)); }
.button-secondary { color:var(--secondary-button-text); border-color:var(--line); background:var(--panel-soft); }
html[data-theme="light"] .button-secondary:hover { border-color:#16395e; background:rgba(12,44,76,.08); }
html[data-theme="light"] .hero-lead { color:#52657a; }
html[data-theme="light"] .hero-glow-one { opacity:.14; }
html[data-theme="light"] .hero-glow-two { opacity:.12; }
html[data-theme="light"] .feature-card,
html[data-theme="light"] .preview-card { background:var(--card-bg); border-color:var(--card-border); box-shadow:0 12px 35px rgba(28,55,83,.08); }
html[data-theme="light"] .workflow-grid li { background:rgba(255,255,255,.7); border-color:rgba(15,45,74,.1); }
html[data-theme="light"] .site-footer { background:var(--footer-bg); }
html[data-theme="light"] .site-footer nav a,
html[data-theme="light"] .site-footer nav button { color:#43566c; }
html[data-theme="light"] .demo-dialog { background:linear-gradient(150deg,#ffffff,#edf3f9); color:#10233c; border-color:rgba(14,43,72,.12); }
html[data-theme="light"] .dialog-note { color:#8b4300; }
html[data-theme="light"] .main-nav { background:#ffffff; }

.concept-section { padding:100px 0; overflow:hidden; }
.concept-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:52px; align-items:center; }
.concept-copy h2 { font-size:clamp(2.1rem,3.5vw,3.7rem); line-height:1.06; letter-spacing:-.05em; margin:0; }
.concept-copy>p:not(.eyebrow) { color:var(--muted); font-size:1.05rem; margin:20px 0 0; }
.theme-preview-buttons { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.concept-figure { margin:0; padding:10px; border:1px solid var(--line); border-radius:20px; background:var(--panel-soft); box-shadow:var(--shadow); }
.concept-figure img { width:100%; border-radius:13px; aspect-ratio:16/9; object-fit:cover; }
.concept-figure figcaption { padding:10px 7px 2px; color:var(--muted); font-size:.76rem; }
html[data-theme="light"] .concept-figure { background:white; }

@media (max-width:1180px) {
  .theme-label { display:none; }
  .concept-grid { grid-template-columns:1fr; }
}
@media (max-width:850px) {
  .nav-actions { margin-left:auto; }
  .theme-toggle { min-width:42px; padding:0 10px; }
  .main-nav { color:var(--text); }
}
@media (max-width:560px) {
  .concept-section { padding:72px 0; }
  .theme-preview-buttons .button { width:100%; }
}