@font-face { font-family: fallback; src: local('Arial'); font-display: swap; }
:root { color-scheme: dark; --bg:#08120f; --surface:#101f1a; --line:#2c4036; --text:#f3f7ef; --muted:#b3c6b9; --accent:#67edbe; --ink:#07281c; }
* { box-sizing:border-box; }
section,article,.fact,.section-head>*,.roadmap-row>* { min-width:0; }
h1,h2,h3,p,.fact span { overflow-wrap:break-word; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size:1rem; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
button { color:inherit; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.1; letter-spacing:-.04em; }
h2 { font-size:clamp(2.1rem,4vw,3.4rem); font-weight:650; }
h3 { font-size:1.25rem; font-weight:600; letter-spacing:-.02em; }
.wrap { width:min(1184px,calc(100% - 64px)); margin-inline:auto; }
.skip { position:absolute; left:20px; top:-100px; padding:12px 18px; background:var(--accent); color:var(--ink); z-index:10; }
.skip:focus { top:12px; }
.header { min-height:100px; display:flex; align-items:center; gap:36px; }
.brand { font-size:1.7rem; font-weight:750; letter-spacing:-.065em; display:inline-flex; align-items:baseline; white-space:nowrap; }
.brand span { color:var(--accent); }
.nav { display:flex; gap:28px; margin-left:auto; font-size:.9375rem; font-weight:500; }
.nav a { padding:12px 0; color:var(--muted); }
.nav a:hover { color:var(--text); }
.languages { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:99px; font-size:.875rem; line-height:1; }
.languages a { padding:12px 13px; min-height:40px; border-radius:99px; }
.languages a[aria-current] { background:var(--accent); color:var(--ink); font-weight:650; }
.hero { position:relative; overflow:hidden; display:grid; grid-template-columns:1.04fr .96fr; border:1px solid #385442; border-radius:30px; background:radial-gradient(ellipse at 78% 30%,#326950 0%,#153b2b 43%,#11271d 72%); }
.hero::before { content:''; position:absolute; inset:14px; border:1px solid #6a95602b; border-radius:20px; pointer-events:none; }
.hero-copy { padding:64px 0 44px 48px; position:relative; z-index:1; align-self:center; }
.eyebrow { text-transform:uppercase; letter-spacing:.13em; font-size:.875rem; font-weight:650; color:var(--accent); margin-bottom:20px; }
.hero h1 { font-size:clamp(3.8rem,6.7vw,6rem); font-weight:700; line-height:1.02; letter-spacing:-.065em; }
.hero h1 span { display:block; }
.hero h1 span:last-child { color:var(--accent); }
.hero-intro { max-width:440px; margin-top:28px; color:#d3e1d2; font-size:1.125rem; line-height:1.6; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 22px; border-radius:8px; font-weight:650; font-size:.9375rem; border:1px solid transparent; cursor:pointer; }
.button.primary { background:var(--accent); color:var(--ink); }
.button.primary:hover { background:#95f7d3; }
.button.secondary { border-color:#7ea18b; color:var(--text); background:transparent; }
.button.secondary:hover { background:#ffffff0a; }
.prototype-note { display:grid; gap:8px; max-width:440px; margin-top:36px; }
.status-label { font-size:.875rem; font-weight:650; }
.prototype-note p { font-size:.875rem; line-height:1.55; color:#c0d1c0; }
.hero-preview { position:relative; margin:34px 30px 28px 0; display:flex; align-items:center; flex-direction:column; justify-content:center; z-index:1; }
.screen-label { font-size:.875rem; font-weight:500; color:#d9edda; margin-bottom:16px; }
.phone { width:min(276px,76%); padding:6px; border:1px solid #7c9a87; background:#070e0b; border-radius:24px; box-shadow:0 28px 54px #001a0dc4; transform:rotate(5deg); }
.phone img { border-radius:18px; width:100%; }
.hero-preview figcaption { font-size:.875rem; color:#c6dbc9; margin-top:24px; }
.facts { display:flex; gap:0; padding:28px 0; border-bottom:1px solid var(--line); }
.fact { flex:1; display:flex; justify-content:center; align-items:baseline; gap:16px; padding:0 16px; border-right:1px solid var(--line); }
.fact:first-child { justify-content:flex-start; padding-left:0; }
.fact:last-child { justify-content:flex-end; padding-right:0; border-right:0; }
.fact strong { font-size:1.25rem; font-weight:650; letter-spacing:-.035em; }
.fact span { color:var(--muted); font-size:.9375rem; max-width:100%; }
.section { padding-top:100px; }
.section-head { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end; margin-bottom:36px; }
.section-head .eyebrow { margin-bottom:14px; }
.section-head>p { color:var(--muted); max-width:540px; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-bottom:70px; }
.feature { padding-top:22px; border-top:1px solid var(--line); }
.feature-number { color:var(--accent); font-size:.875rem; letter-spacing:.07em; margin-bottom:14px; }
.feature p { color:var(--muted); margin-top:12px; }
.gallery-heading { display:flex; gap:24px; justify-content:space-between; align-items:end; margin-bottom:24px; }
.gallery-heading h3 { font-size:1.6rem; max-width:420px; }
.gallery-heading p { color:var(--muted); font-size:.9375rem; max-width:480px; }
.gallery { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.capture { margin:0; padding:28px 24px 24px; background:linear-gradient(135deg,#14261d,#10201a); border:1px solid var(--line); border-radius:16px; }
.capture-stage { height:446px; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse,#28514133,transparent 70%); }
.capture-stage img { max-height:430px; width:auto; max-width:100%; border-radius:14px; border:1px solid #51735d; box-shadow:0 12px 36px #0005; }
.capture figcaption { margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.capture figcaption span { font-size:.9375rem; line-height:1.4; font-weight:500; min-width:0; flex:1 1 160px; }
.image-trigger { min-width:44px; min-height:44px; padding:8px 14px; background:transparent; border:1px solid #658773; border-radius:8px; font-size:.875rem; white-space:nowrap; cursor:pointer; }
.image-trigger:hover { background:#ffffff08; }
.evidence { margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:22px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:.9375rem; }
.evidence strong { display:block; color:var(--text); font-weight:600; margin-bottom:6px; }
.roadmap { border-top:1px solid var(--line); }
.roadmap-row { display:grid; grid-template-columns:1fr 130px 1.15fr; gap:30px; align-items:start; padding:28px 0; border-bottom:1px solid var(--line); }
.roadmap-row h3 { font-size:1.125rem; line-height:1.4; }
.roadmap-row p { color:var(--muted); }
.tag { display:inline-flex; justify-content:center; padding:5px 12px; border:1px solid #567360; border-radius:99px; font-size:.875rem; line-height:1.6; white-space:nowrap; width:fit-content; color:#d1e0d2; }
.tag.current { background:#233e2e; color:var(--accent); border-color:#4f8265; }
.access { padding-bottom:78px; }
.access h2 { white-space:pre-line; }
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.plan { padding:28px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.plan:nth-child(2) { background:#1c3929; border-color:#547b5f; }
.plan h3 { font-size:1rem; letter-spacing:0; line-height:1.4; }
.price { font-size:clamp(2rem,3vw,2.6rem); font-weight:650; letter-spacing:-.05em; margin-top:24px; line-height:1.1; }
.unit { color:var(--muted); font-size:.875rem; margin-top:8px; }
.plan>p:last-child { color:var(--muted); margin-top:26px; }
.invite { display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; padding:34px 0 24px; border-bottom:1px solid var(--line); margin-top:14px; }
.invite h3 { font-size:1.5rem; line-height:1.25; max-width:350px; }
.invite p { color:var(--muted); }
.fine-print { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:24px; color:var(--muted); font-size:.9375rem; }
.release { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; }
.release summary { min-height:44px; cursor:pointer; display:list-item; font-size:1rem; font-weight:500; padding:10px 4px; }
.release p { color:var(--muted); max-width:820px; padding:16px 4px 12px; }
.footer { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 0 42px; }
.footer p { color:var(--muted); font-size:.875rem; }
.footer .brand { font-size:1.5rem; }
.footer-middle { margin-right:auto; }
.image-dialog { background:#101b16; color:var(--text); border:1px solid #7b9984; border-radius:16px; width:min(680px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:20px; }
.image-dialog::backdrop { background:#020906eb; }
.dialog-head { display:flex; gap:20px; align-items:center; justify-content:space-between; margin-bottom:14px; }
.dialog-head h2 { font-size:1.125rem; line-height:1.4; letter-spacing:0; }
.dialog-close { min-width:44px; min-height:44px; background:transparent; border:1px solid #7a9583; border-radius:8px; cursor:pointer; font-size:1.5rem; }
.dialog-image { max-height:calc(100dvh - 220px); max-width:100%; width:auto; margin:auto; }
.dialog-hint { color:var(--muted); font-size:.875rem; margin-top:16px; }
.not-found { min-height:65vh; padding:80px 0; }
.not-found p { color:var(--muted); margin:24px 0; }
.rules-page { padding-block:36px 70px; }
.breadcrumbs { font-size:.9375rem; color:var(--muted); margin-bottom:24px; }
.breadcrumbs a:hover { color:var(--accent); }
.rules-page h1 { font-size:clamp(2.4rem,4.5vw,3.8rem); max-width:900px; }
.rules-intro { font-size:1.125rem; color:var(--muted); max-width:780px; margin-top:24px; }
.rule-contents { display:flex; flex-wrap:wrap; gap:8px 22px; margin-block:32px 38px; }
.rule-contents a { color:var(--accent); min-height:44px; padding-block:10px; font-size:.9375rem; }
.rule-body { max-width:820px; }
.rule-body section { padding:28px 0; border-top:1px solid var(--line); }
.rule-body h2 { font-size:1.65rem; letter-spacing:-.025em; line-height:1.25; margin-bottom:18px; }
.rule-body p { max-width:76ch; }
.rule-status { color:var(--muted); margin:22px 0; font-size:.9375rem; }
@media (max-width:1000px) { .nav{gap:20px} .header{gap:24px} .hero-copy{padding:44px 0 38px 36px} .hero h1{font-size:clamp(3.5rem,7vw,5.8rem)} .hero-preview{margin-right:14px} .section-head{gap:32px} .fact{gap:10px; flex-direction:column} .fact:last-child{align-items:flex-end} .features{gap:20px} .plan{padding:24px} .roadmap-row{grid-template-columns:1fr 110px 1.1fr;gap:24px} }
@media (max-width:760px) { .wrap{width:calc(100% - 32px)} .header{min-height:86px;flex-wrap:wrap;gap:10px 20px;padding:18px 0} .brand{font-size:1.5rem} .languages{margin-left:auto} .nav{order:3;flex-basis:100%;margin:0;justify-content:space-between;gap:12px;font-size:.875rem} .nav a{padding:8px 0} .hero{grid-template-columns:1fr;border-radius:22px} .hero::before{inset:10px;border-radius:14px} .hero-copy{padding:36px 28px 18px} .hero h1{font-size:clamp(3.5rem,12vw,5rem)} .hero-intro{font-size:1rem;max-width:500px;margin-top:24px} .eyebrow{font-size:.8125rem;letter-spacing:.1em} .actions{margin-top:24px} .button{font-size:.875rem;padding:12px 16px} .prototype-note{margin-top:26px} .hero-preview{margin:22px 20px 28px} .phone{width:230px;transform:rotate(3deg)} .screen-label{margin-bottom:18px} .hero-preview figcaption{margin-top:20px} .facts{padding:22px 0} .fact{padding:0 10px;gap:3px;align-items:center;text-align:center} .fact:first-child,.fact:last-child{align-items:center;justify-content:center} .fact strong{font-size:1.0625rem} .fact span{font-size:.8125rem} .section{padding-top:64px} .section-head{grid-template-columns:1fr;gap:20px;margin-bottom:28px} .features{grid-template-columns:1fr;gap:26px;margin-bottom:48px} .feature{padding-top:20px} .feature-number{display:inline-block;margin-right:12px;margin-bottom:10px} .feature h3{display:inline;font-size:1.1875rem;letter-spacing:-.015em} .feature p{margin-top:4px} .gallery-heading{display:block} .gallery-heading p{margin-top:16px} .gallery{gap:16px} .capture{padding:20px 16px} .capture-stage{height:350px} .capture-stage img{max-height:330px} .capture figcaption{flex-direction:column;align-items:start} .evidence{grid-template-columns:1fr;gap:18px} .roadmap-row{grid-template-columns:1fr auto;gap:16px;padding:24px 0} .roadmap-row p{grid-column:1 / -1} .plans{grid-template-columns:1fr;gap:14px} .plan{padding:24px} .plan>p:last-child{margin-top:18px} .price{margin-top:18px;font-size:2.2rem} .invite{grid-template-columns:1fr;gap:16px;padding:30px 0} .fine-print{grid-template-columns:1fr;gap:18px} .access{padding-bottom:50px} .footer{flex-wrap:wrap;gap:12px 20px;padding:26px 0 32px} .footer-middle{margin:0}.footer>p:last-child{flex-basis:100%} }
@media (max-width:480px) { .gallery{grid-template-columns:1fr} .capture-stage{height:400px} .capture-stage img{max-height:380px} .capture figcaption{flex-direction:row;align-items:center} .hero-copy{padding:32px 22px 14px} .actions{flex-direction:column;align-items:stretch}.hero h1{font-size:clamp(3rem,13vw,4rem)} .facts .fact{padding-inline:6px} .fact strong{font-size:1rem} .fact span{font-size:.8125rem} .tag{white-space:normal; max-width:120px; text-align:center}.roadmap-row{grid-template-columns:1fr auto;gap:12px}.roadmap-row h3{font-size:1rem} .hero-preview{margin-top:26px} }
@media (max-width:1000px) { .header{flex-wrap:wrap;gap:10px 20px;padding:18px 0}.languages{margin-left:auto}.nav{order:3;flex-basis:100%;margin:0;flex-wrap:wrap;justify-content:flex-start;column-gap:24px} }
@media (max-width:760px) { .price{overflow-wrap:anywhere} }
@media (min-width:481px) and (max-width:760px) { .capture figcaption span{flex:0 1 auto} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }
@media (prefers-contrast:more) { :root{--muted:#e0eadf;--line:#809b83} .hero{border-color:#b9d3be}.prototype-note p,.screen-label,.hero-preview figcaption{color:#edf6ee}.tag{border-color:#bbd3c0}.phone{border-color:#d6e8d9} }
@media (forced-colors:active) { .hero,.plan,.capture{background:Canvas;border:1px solid CanvasText}.button,.tag,.languages{border:1px solid ButtonText}.button.primary,.languages a[aria-current]{background:Highlight;color:HighlightText}.phone{transform:none;border:1px solid CanvasText} }