:root {
  --bg:#07111d; --surface:#0e1c2b; --surface-2:#14263a; --ink:#f6f9fc; --muted:#a9b9c9;
  --paper:#f5f7f8; --paper-ink:#12202c; --paper-muted:#5c6a76; --line:rgba(255,255,255,.14);
  --accent:#43e0c0; --accent-2:#ffc75f; --accent-rgb:67,224,192; --max:1220px;
}
body.alarm { --bg:#120f0b; --surface:#1d1812; --surface-2:#2a2117; --accent:#f6b94f; --accent-2:#72d4c7; --accent-rgb:246,185,79; }
body.video { --bg:#04111a; --surface:#0a1d2a; --surface-2:#0e2a3c; --accent:#35d9ff; --accent-2:#b7ff70; --accent-rgb:53,217,255; }
body.access { --bg:#071511; --surface:#0d211a; --surface-2:#123128; --accent:#62e5ae; --accent-2:#ffcf67; --accent-rgb:98,229,174; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.62; }
body::before { content:""; position:fixed; inset:0; z-index:-3; pointer-events:none; background:radial-gradient(circle at 82% 8%,rgba(var(--accent-rgb),.12),transparent 30%),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:auto,56px 56px,56px 56px; }
img { display:block; width:100%; }
a { color:inherit; }
button { font:inherit; }
.wrap { width:min(calc(100% - 40px),var(--max)); margin-inline:auto; }
.concept-bar { padding:0 20px; color:#c7d1da; background:#03070b; border-bottom:1px solid var(--line); font-size:.74rem; letter-spacing:.035em; }
.concept-bar-inner { width:min(100%,var(--max)); min-height:44px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.parent-brand { display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; color:#f5f8fb; text-decoration:none; font-size:.78rem; font-weight:900; letter-spacing:-.01em; }
.parent-brand svg { width:22px; height:25px; color:#43e0c0; }
.parent-brand b { color:#43e0c0; }
.concept-status { min-width:0; text-align:center; }
.concept-status strong { color:var(--accent); }
.concept-switch { flex:0 0 auto; font-weight:850; text-underline-offset:3px; }
.header { position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(18px); }
.nav { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; font-weight:950; letter-spacing:-.035em; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(var(--accent-rgb),.65); border-radius:13px; color:var(--bg); background:var(--accent); font-size:.78rem; box-shadow:0 10px 30px rgba(var(--accent-rgb),.18); }
.brand-mark.brand-shield { display:block; width:38px; height:42px; border:0; border-radius:0; color:var(--accent); background:transparent; box-shadow:none; }
.brand small { display:block; color:var(--muted); font-size:.61rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.nav-links { display:flex; align-items:center; gap:25px; color:#c6d0da; font-size:.88rem; }
.nav-links a { text-decoration:none; font-weight:750; }
.nav-links a:hover,.nav-links a:focus-visible { color:#fff; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 21px; border:1px solid var(--accent); border-radius:12px; color:var(--bg); background:var(--accent); text-decoration:none; font-weight:900; cursor:pointer; box-shadow:0 14px 34px rgba(var(--accent-rgb),.14); transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
.button:hover,.button:focus-visible { transform:translateY(-2px); box-shadow:0 18px 44px rgba(var(--accent-rgb),.25); }
.button.ghost { color:var(--ink); background:rgba(4,9,14,.36); border-color:rgba(255,255,255,.34); box-shadow:none; }
.button.small { min-height:42px; padding-inline:16px; font-size:.82rem; }
.hero { position:relative; min-height:min(820px,91vh); display:grid; align-items:end; isolation:isolate; overflow:hidden; }
.hero-media { position:absolute; inset:0; z-index:-2; }
.hero-media img { height:100%; object-fit:cover; animation:hero-drift 18s ease-in-out infinite alternate; }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(3,8,12,.97) 0%,rgba(3,8,12,.76) 46%,rgba(3,8,12,.2) 78%),linear-gradient(0deg,var(--bg) 0%,transparent 46%); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.42fr); gap:70px; align-items:end; padding:126px 0 78px; }
.kicker { display:flex; align-items:center; gap:12px; color:var(--accent); font-size:.76rem; font-weight:950; letter-spacing:.16em; text-transform:uppercase; }
.kicker::before { content:""; width:34px; height:2px; background:currentColor; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:900px; margin:24px 0; font-size:clamp(3.15rem,7vw,7rem); line-height:.9; letter-spacing:-.07em; text-wrap:balance; }
h1 span { color:var(--accent); }
.lead { max-width:720px; color:#d4dde5; font-size:clamp(1.06rem,1.8vw,1.3rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero-panel { align-self:end; padding:26px; border:1px solid rgba(255,255,255,.18); border-radius:22px; background:rgba(5,12,18,.72); backdrop-filter:blur(16px); box-shadow:0 28px 70px rgba(0,0,0,.32); }
.hero-panel small { color:var(--accent); font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.hero-panel h2 { margin:12px 0 18px; font-size:1.55rem; line-height:1.08; letter-spacing:-.035em; }
.hero-panel-list { display:grid; gap:0; }
.hero-panel-list span { display:flex; justify-content:space-between; gap:18px; padding:12px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; }
.hero-panel-list b { color:var(--ink); font-weight:800; }
.proof-strip { border-block:1px solid var(--line); background:rgba(9,19,28,.9); }
.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.proof { min-height:142px; display:grid; align-content:center; padding:30px; border-right:1px solid var(--line); }
.proof:last-child { border-right:0; }
.proof b { display:block; color:var(--accent); font-size:1.04rem; }
.proof span { color:var(--muted); font-size:.91rem; }
.section { padding:108px 0; }
.section.paper { color:var(--paper-ink); background:var(--paper); }
.section-head { display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:end; margin-bottom:50px; }
.section-head h2 { margin-bottom:0; max-width:820px; font-size:clamp(2.35rem,5vw,5rem); line-height:.96; letter-spacing:-.055em; text-wrap:balance; }
.section-head p { max-width:560px; margin-bottom:4px; color:var(--muted); }
.paper .section-head p { color:var(--paper-muted); }
.bento { display:grid; grid-template-columns:1.15fr .85fr; grid-template-rows:repeat(2,1fr); gap:16px; }
.bento article { min-height:255px; padding:31px; border:1px solid var(--line); border-radius:22px; background:var(--surface); transition:transform .25s ease,border-color .25s ease; }
.bento article:hover { transform:translateY(-4px); border-color:rgba(var(--accent-rgb),.45); }
.bento article:first-child { grid-row:1/3; min-height:526px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(145deg,rgba(var(--accent-rgb),.14),var(--surface) 62%); }
.index { color:var(--accent); font-size:.72rem; font-weight:950; letter-spacing:.14em; }
.bento h3 { margin:16px 0 10px; font-size:clamp(1.5rem,3vw,2.6rem); line-height:1; letter-spacing:-.04em; }
.bento p { margin-bottom:0; color:var(--muted); }
.checklist { display:grid; gap:12px; margin-top:26px; }
.checklist div { display:flex; gap:12px; padding-top:12px; border-top:1px solid var(--line); }
.checklist div::before { content:"✓"; color:var(--accent-2); font-weight:950; }
.building-story { padding-top:0; }
.building-visual { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr); overflow:hidden; border:1px solid var(--line); border-radius:26px; background:var(--surface); box-shadow:0 32px 90px rgba(0,0,0,.25); }
.building-visual-media { min-height:510px; overflow:hidden; }
.building-visual-media img { height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.75,.2,1); }
.building-visual:hover .building-visual-media img { transform:scale(1.028); }
.building-visual-copy { display:flex; flex-direction:column; justify-content:center; padding:44px; }
.building-visual-copy h2 { margin:18px 0; font-size:clamp(2.1rem,4vw,3.8rem); line-height:.98; letter-spacing:-.05em; }
.building-visual-copy p { color:var(--muted); }
.visual-points { display:grid; gap:12px; margin-top:22px; }
.visual-points span { display:flex; gap:11px; padding-top:12px; border-top:1px solid var(--line); color:#d7e0e8; font-size:.92rem; }
.visual-points span::before { content:"✓"; color:var(--accent); font-weight:950; }
.scenarios { display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; align-items:start; }
.scenario-copy h2 { margin:0 0 18px; font-size:clamp(2.3rem,4.8vw,4.8rem); line-height:.96; letter-spacing:-.055em; text-wrap:balance; }
.scenario-copy p { color:var(--paper-muted); }
.scenario-box { padding:34px; border:1px solid #d1d9de; border-radius:24px; background:#fff; box-shadow:0 24px 70px rgba(20,30,40,.1); }
.scenario-box fieldset { margin:0; padding:0; border:0; }
.scenario-box legend { margin-bottom:18px; font-weight:900; font-size:1.02rem; }
.scenario-options { display:flex; flex-wrap:wrap; gap:9px; }
.scenario-button { min-height:46px; padding:0 16px; border:1px solid #cbd4da; border-radius:999px; color:#26343f; background:#f3f6f7; font-weight:850; cursor:pointer; transition:transform .18s ease,background .18s ease; }
.scenario-button:hover { transform:translateY(-1px); }
.scenario-button[aria-pressed="true"] { color:var(--bg); background:var(--accent); border-color:var(--accent); }
.scenario-result { min-height:8em; margin-top:25px; padding:22px; border-left:4px solid var(--accent); color:#4e5d68; background:#f0f4f5; font-size:1.02rem; }
.scenario-result strong { display:block; margin-bottom:6px; color:#12202c; font-size:1.08rem; }
.process { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid #cbd4d9; }
.process article { padding:29px 24px 35px 0; }
.process article+article { padding-left:24px; border-left:1px solid #cbd4d9; }
.process b { display:block; margin-bottom:54px; color:color-mix(in srgb,var(--accent) 72%,#111); font-size:.78rem; }
.process h3 { margin-bottom:8px; font-size:1.16rem; }
.process p { margin:0; color:var(--paper-muted); font-size:.91rem; }
.final-cta { padding:98px 0; background:linear-gradient(135deg,rgba(var(--accent-rgb),.2),var(--bg) 58%); border-top:1px solid var(--line); }
.final-grid { display:grid; grid-template-columns:1fr auto; align-items:center; gap:48px; }
.final-grid h2 { margin-bottom:12px; font-size:clamp(2.2rem,4.6vw,4.7rem); line-height:.97; letter-spacing:-.055em; text-wrap:balance; }
.final-grid p { max-width:700px; margin-bottom:0; color:var(--muted); }
.footer { padding:36px 0 92px; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; }
.footer-grid { display:flex; justify-content:space-between; gap:24px; }
.footer a { text-underline-offset:3px; }
.mobile-cta { position:fixed; left:14px; right:14px; bottom:14px; z-index:50; display:none; min-height:52px; }
.hub-hero { padding:112px 0 72px; }
.hub-hero h1 { max-width:1020px; }
.hub-hero p { max-width:780px; color:var(--muted); font-size:1.16rem; }
.hub-note { margin-top:28px; padding:18px 20px; border-left:3px solid var(--accent-2); color:var(--muted); background:var(--surface); }
.hub-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding-bottom:112px; }
.hub-card { display:block; overflow:hidden; border:1px solid var(--line); border-radius:22px; color:inherit; background:var(--surface); text-decoration:none; transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease; }
.hub-card:hover,.hub-card:focus-visible { transform:translateY(-7px); border-color:rgba(var(--accent-rgb),.48); box-shadow:0 24px 56px rgba(0,0,0,.24); }
.hub-card img { aspect-ratio:4/3; object-fit:cover; transition:transform .7s cubic-bezier(.2,.75,.2,1); }
.hub-card:hover img,.hub-card:focus-visible img { transform:scale(1.035); }
.hub-card-copy { padding:27px; }
.hub-card small { color:var(--accent); font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.hub-card h2 { margin:12px 0; font-size:1.85rem; line-height:1.05; }
.hub-card p { color:var(--muted); }
.hub-features { display:grid; gap:8px; margin:18px 0 22px; padding:0; list-style:none; color:#d0d9e1; font-size:.88rem; }
.hub-features li::before { content:"✓"; margin-right:9px; color:var(--accent); font-weight:900; }
.hub-card .button { width:100%; pointer-events:none; }
.motion-ready .reveal { opacity:0; transform:translateY(28px); transition:opacity .72s ease,transform .72s cubic-bezier(.2,.75,.2,1); transition-delay:var(--reveal-delay,0ms); }
.motion-ready .reveal.is-visible { opacity:1; transform:none; }
@keyframes hero-drift { from { transform:scale(1.015); } to { transform:scale(1.065); } }
:focus-visible { outline:3px solid var(--accent-2); outline-offset:4px; }
@media (max-width:980px) {
  .nav-links a:not(.button) { display:none; }
  .hero-grid { grid-template-columns:1fr; gap:28px; }
  .hero-panel { max-width:520px; }
  .section-head,.scenarios { grid-template-columns:1fr; gap:30px; }
  .bento { grid-template-columns:1fr; grid-template-rows:auto; }
  .bento article:first-child { grid-row:auto; min-height:360px; }
  .building-visual { grid-template-columns:1fr; }
  .building-visual-media { min-height:420px; }
  .hub-grid { grid-template-columns:1fr; }
  .hub-card { display:grid; grid-template-columns:.88fr 1.12fr; }
  .hub-card img { height:100%; aspect-ratio:auto; }
}
@media (max-width:680px) {
  .wrap { width:min(calc(100% - 28px),var(--max)); }
  .concept-bar { padding:8px 14px; font-size:.66rem; }
  .concept-bar-inner { min-height:0; display:grid; grid-template-columns:1fr auto; gap:3px 12px; }
  .parent-brand { font-size:.72rem; }
  .concept-status { grid-column:1/-1; grid-row:2; text-align:left; }
  .concept-switch { grid-column:2; grid-row:1; }
  .nav { min-height:66px; }
  .brand small,.nav-links .button { display:none; }
  .hero { min-height:auto; }
  .hero::after { background:linear-gradient(0deg,rgba(3,8,12,.99),rgba(3,8,12,.72) 68%,rgba(3,8,12,.28)); }
  .hero-grid { padding:92px 0 54px; }
  h1 { font-size:clamp(3rem,15vw,5rem); }
  .hero-actions .button { width:100%; }
  .hero-panel { padding:21px; }
  .proof-grid { grid-template-columns:1fr; }
  .proof { min-height:112px; border-right:0; border-bottom:1px solid var(--line); }
  .proof:last-child { border-bottom:0; }
  .section { padding:76px 0; }
  .bento article,.scenario-box { padding:23px; }
  .building-visual-media { min-height:290px; }
  .building-visual-copy { padding:27px; }
  .process { grid-template-columns:1fr; }
  .process article,.process article+article { padding:24px 0; border-left:0; border-bottom:1px solid #cbd4d9; }
  .process b { margin-bottom:24px; }
  .final-grid { grid-template-columns:1fr; gap:26px; }
  .final-grid .button { width:100%; }
  .footer-grid { display:grid; }
  .mobile-cta { display:inline-flex; }
  .hub-hero { padding:76px 0 54px; }
  .hub-grid { padding-bottom:84px; }
  .hub-card { display:block; }
  .hub-card img { aspect-ratio:4/3; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; }
  .hero-media img { animation:none; transform:none; }
  .motion-ready .reveal { opacity:1; transform:none; }
}
