:root { --ink:#f3f0ff; --muted:#aaa5bd; --dim:#777189; --violet:#a77cff; --violet-2:#7048c8; --line:rgba(190,174,255,.18); --surface:rgba(24,22,42,.77); --mono:"DM Mono", monospace; --sans:"Manrope", Arial, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:#080911; }
body { min-width:320px; margin:0; overflow-x:hidden; color:var(--ink); font-family:var(--sans); background:linear-gradient(135deg,#080911 0%,#0b0c18 44%,#141026 100%); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:linear-gradient(rgba(180,156,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(180,156,255,.03) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
.ambient { position:fixed; width:46rem; height:46rem; border-radius:50%; pointer-events:none; filter:blur(90px); opacity:.15; }
.ambient-one { top:-30rem; right:-15rem; background:#7249ed; }
.ambient-two { left:-27rem; top:62rem; background:#1756ae; }
.site-header, main, footer { position:relative; z-index:1; }
.site-header { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px clamp(24px,5vw,84px); border-bottom:1px solid rgba(206,194,255,.1); background:rgba(8,9,17,.65); backdrop-filter:blur(18px); }
.brand { display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }
.brand strong { display:block; font-size:20px; line-height:1; letter-spacing:-.9px; }
.brand small { display:inline-block; margin-top:6px; padding:3px 7px; border:1px solid rgba(171,137,255,.32); border-radius:99px; color:#d4c5ff; font:500 9px/1 var(--mono); letter-spacing:.02em; }
.brand-companion { position:relative; width:42px; height:42px; border:1px solid rgba(185,161,255,.4); border-radius:16px 16px 17px 17px; background:linear-gradient(145deg,#42306d,#221c3a); box-shadow:0 10px 24px rgba(0,0,0,.3); transform:rotate(-3deg); }
.brand-companion i { position:absolute; top:7px; width:12px; height:18px; border-radius:9px 9px 4px 4px; background:#efeaff; }
.brand-companion i:first-child { left:9px; transform:rotate(-22deg); }.brand-companion i:nth-child(2) { right:9px; transform:rotate(22deg); }.brand-companion b { position:absolute; left:7px; right:7px; bottom:6px; padding:8px 0 5px; border-radius:50%; background:#f3f0ff; color:#5b5077; font:700 7px/1 var(--mono); text-align:center; letter-spacing:2px; }
.brand-companion.small { width:30px; height:30px; border-radius:12px; transform:scale(.9); }.brand-companion.small i { top:4px; width:8px; height:13px; }.brand-companion.small i:first-child { left:7px; }.brand-companion.small i:nth-child(2) { right:7px; }.brand-companion.small b { left:5px; right:5px; bottom:4px; padding:6px 0 3px; font-size:5px; letter-spacing:1px; }
nav { display:flex; gap:26px; margin-left:auto; } nav a, footer a { color:#c8c2d8; text-decoration:none; font-size:12px; font-weight:700; transition:color .2s; } nav a:hover, footer a:hover { color:#fff; }
.prototype-badge { display:inline-flex; align-items:center; gap:7px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:rgba(111,77,186,.14); color:#d6c8ff; font:500 10px var(--mono); }.prototype-badge i,.eyebrow span,.eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--violet); box-shadow:0 0 12px #a77cff; }
main { max-width:1420px; margin:auto; padding:0 clamp(24px,5vw,84px); }.hero { max-width:720px; padding:136px 0 60px; }.eyebrow { display:flex; align-items:center; gap:9px; color:#bcaeff; font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; }.hero h1,.section-heading h2,.building h2,.closing h2 { margin:18px 0 20px; font-size:clamp(48px,7vw,100px); line-height:.96; letter-spacing:-.075em; }.hero h1 em,.building h2 em { font-style:normal; color:#b793ff; }.hero p { max-width:580px; color:#b8b3c6; font-size:17px; line-height:1.7; }.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }.button { display:inline-flex; align-items:center; gap:16px; border-radius:12px; padding:14px 18px; font-size:12px; font-weight:800; text-decoration:none; transition:transform .2s,border-color .2s; }.button:hover { transform:translateY(-2px); }.button span { font-size:18px; line-height:0; }.button-primary { color:#fff; border:1px solid #a981ff; background:linear-gradient(135deg,#9a6bff,#533599); box-shadow:0 12px 26px rgba(101,61,192,.28); }.button-quiet { border:1px solid var(--line); color:#dcd6ef; background:rgba(31,28,49,.64); }.hero-meta { display:flex; flex-wrap:wrap; gap:18px; margin-top:24px; color:#8f889f; font:500 10px var(--mono); }.hero-meta b { color:#ac81ff; }
.hero-preview { position:relative; margin:25px 0 118px; padding:14px; overflow:hidden; border:1px solid rgba(181,158,255,.35); border-radius:25px; background:linear-gradient(145deg,rgba(55,45,84,.72),rgba(17,18,31,.82)); box-shadow:0 38px 90px rgba(0,0,0,.42); }.preview-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:10px; height:43px; padding:0 9px 13px; color:#938ba7; font:500 9px var(--mono); }.toolbar-brand { margin-right:auto; color:#e9e4f6; font:800 14px var(--sans); }.toolbar-pill { padding:7px 10px; border:1px solid var(--line); border-radius:7px; color:#d5c8fa; background:rgba(69,45,120,.27); }.hero-preview img { display:block; width:100%; border-radius:13px; opacity:.95; }.floating-note { position:absolute; max-width:180px; padding:13px 14px; border:1px solid rgba(193,172,255,.35); border-radius:11px; background:rgba(20,18,37,.9); box-shadow:0 12px 32px rgba(0,0,0,.35); }.floating-note span,.feature-index { display:block; color:#af88ff; font:500 10px var(--mono); letter-spacing:.08em; }.floating-note b { display:block; margin-top:5px; font-size:12px; }.floating-note small { display:block; margin-top:4px; color:#a5a0b5; font-size:10px; line-height:1.4; }.note-one { left:3%; bottom:4%; }.note-two { right:3%; top:18%; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:140px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.principles article { min-height:210px; padding:31px 30px; border-right:1px solid var(--line); }.principles article:last-child { border-right:0; }.principles span { color:#a782f7; font:500 10px var(--mono); }.principles h2 { margin:22px 0 9px; font-size:20px; letter-spacing:-.05em; }.principles p { max-width:260px; margin:0; color:#a8a2b6; font-size:12px; line-height:1.65; }
.tour-section { margin-bottom:130px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:42px; margin-bottom:42px; }.section-heading h2,.building h2,.closing h2 { font-size:clamp(38px,4.7vw,70px); }.section-heading p { max-width:340px; margin:0 0 7px; color:#a8a2b6; font-size:13px; line-height:1.7; }.tour-feature { border:1px solid var(--line); background:linear-gradient(145deg,rgba(39,34,61,.75),rgba(18,19,32,.72)); box-shadow:inset 0 1px rgba(255,255,255,.03); }.feature-wide { display:grid; grid-template-columns:minmax(260px,.82fr) minmax(400px,1.5fr); gap:28px; align-items:center; padding:clamp(28px,4vw,64px); border-radius:26px; }.feature-copy h3,.feature-card h3 { margin:17px 0; font-size:clamp(27px,3.2vw,46px); line-height:1.04; letter-spacing:-.07em; }.feature-copy p,.feature-card p { color:#b0aabd; font-size:13px; line-height:1.7; }.feature-copy ul { display:grid; gap:10px; margin:24px 0 0; padding:0; list-style:none; color:#d0c9df; font-size:11px; }.feature-copy li::before { content:"✦"; margin-right:10px; color:#ae86ff; }.feature-wide figure { position:relative; min-width:0; margin:0; }.feature-wide figure::before { content:""; position:absolute; inset:8% -4% -7% 4%; z-index:-1; border-radius:25px; background:#6244b7; filter:blur(40px); opacity:.25; }.feature-wide img { display:block; width:100%; border:1px solid rgba(180,155,255,.26); border-radius:16px; }.feature-wide figcaption { margin-top:12px; color:#898297; font:500 9px var(--mono); text-align:right; }.tour-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }.feature-card { min-height:0; padding:40px 40px 22px; overflow:hidden; border-radius:24px; }.feature-card:nth-child(2) { background:linear-gradient(145deg,rgba(44,32,57,.78),rgba(22,19,35,.75)); }.feature-card h3 { margin-bottom:14px; font-size:clamp(28px,3vw,42px); }.feature-card p { max-width:470px; min-height:67px; }.feature-card img { display:block; width:calc(100% + 24px); margin:28px -12px -36px; border:1px solid rgba(188,165,255,.2); border-radius:14px 14px 0 0; }
.building { display:grid; grid-template-columns:.78fr 1.22fr; gap:8vw; align-items:start; padding:90px 0; border-top:1px solid var(--line); }.building h2 { margin-bottom:0; }.building-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.building-list article { min-height:156px; padding:25px; border:1px solid var(--line); border-radius:17px; background:rgba(27,26,43,.55); }.building-list b { font-size:14px; }.building-list p { margin:10px 0 0; color:#a9a3b5; font-size:11px; line-height:1.7; }.closing { max-width:750px; padding:110px 0 130px; }.closing h2 { margin:17px 0; }.closing p { max-width:600px; color:#afa9bb; font-size:15px; line-height:1.7; }.closing .button { margin-top:18px; }
.install-notice { display:grid; grid-template-columns:auto minmax(0,1fr); gap:26px; margin:0 0 120px; padding:clamp(28px,4vw,56px); border:1px solid rgba(244,182,104,.42); border-radius:25px; background:linear-gradient(135deg,rgba(95,56,30,.32),rgba(39,27,48,.66)); box-shadow:inset 0 1px rgba(255,245,221,.06); }.install-notice-mark { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,203,126,.6); border-radius:13px; color:#ffd28a; background:rgba(125,75,33,.28); font:700 23px/1 var(--mono); }.install-notice h2 { max-width:710px; margin:14px 0 17px; font-size:clamp(30px,3.4vw,50px); line-height:1.02; letter-spacing:-.065em; }.install-notice p { max-width:800px; margin:0 0 13px; color:#c4bdcb; font-size:13px; line-height:1.72; }.notice-emphasis { margin:20px 0 2px; color:#ffe0ad; font:600 11px/1.6 var(--mono); }.disclaimer-page { max-width:1000px; }.disclaimer-hero { max-width:690px; padding:112px 0 56px; }.disclaimer-hero h1 { margin:16px 0; font-size:clamp(50px,7vw,94px); line-height:.95; letter-spacing:-.08em; }.disclaimer-hero h1 em { color:#b793ff; font-style:normal; }.disclaimer-hero p { color:#b8b3c6; font-size:16px; line-height:1.7; }.disclaimer-copy { margin-bottom:120px; padding:clamp(28px,5vw,58px); border:1px solid var(--line); border-radius:25px; background:linear-gradient(145deg,rgba(42,35,63,.8),rgba(19,19,34,.78)); }.disclaimer-copy section { padding:0 0 28px; margin-bottom:28px; border-bottom:1px solid var(--line); }.disclaimer-copy section:last-child { padding:0; margin:0; border:0; }.disclaimer-copy h2 { margin:0 0 11px; color:#eee8ff; font-size:17px; letter-spacing:-.04em; }.disclaimer-copy p { max-width:810px; margin:0 0 13px; color:#b9b2c2; font-size:13px; line-height:1.8; }.disclaimer-copy p:last-child { margin-bottom:0; }.disclaimer-copy strong { color:#eee9fb; }
footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:31px clamp(24px,5vw,84px); border-top:1px solid var(--line); color:#807a90; font:500 10px var(--mono); } footer .brand strong { font-size:16px; } footer .brand { gap:7px; }
@media (max-width:850px) { .site-header { min-height:72px; }.site-header nav { display:none; }.prototype-badge { margin-left:auto; }.hero { padding-top:82px; }.hero-preview { margin-bottom:80px; }.floating-note { display:none; }.principles { grid-template-columns:1fr; margin-bottom:86px; }.principles article { min-height:auto; border-right:0; border-bottom:1px solid var(--line); }.principles article:last-child { border-bottom:0; }.section-heading,.feature-wide,.building { grid-template-columns:1fr; display:grid; }.section-heading { gap:15px; }.feature-wide { padding:30px; }.tour-grid,.building-list { grid-template-columns:1fr; }.feature-card { padding:30px 30px 20px; }.building { gap:35px; padding:65px 0; }.closing { padding:70px 0 90px; } footer { align-items:flex-start; flex-direction:column; } }
@media (max-width:850px) { .install-notice { grid-template-columns:1fr; gap:18px; margin-bottom:84px; }.disclaimer-hero { padding:80px 0 42px; }.disclaimer-copy { margin-bottom:84px; } }
@media (max-width:500px) { main { padding:0 18px; }.site-header { padding:14px 18px; }.prototype-badge { padding:8px; font-size:8px; }.prototype-badge i { display:none; }.brand strong { font-size:18px; }.hero h1 { font-size:53px; }.hero p { font-size:15px; }.hero-actions { align-items:stretch; flex-direction:column; }.button { justify-content:space-between; }.hero-preview { padding:8px; border-radius:17px; }.preview-toolbar { height:34px; padding-bottom:8px; }.toolbar-brand { font-size:11px; }.toolbar-pill { padding:5px; }.feature-wide { padding:22px; }.feature-copy h3,.feature-card h3 { font-size:31px; }.feature-card { padding:25px 22px 17px; }.feature-card img { width:calc(100% + 16px); margin:24px -8px -28px; }.building-list article { min-height:0; }.closing h2 { font-size:43px; } }