:root{color-scheme:light;--blue:#996000;--ink:#11182f;--muted:#536177;--line:#e4e2da;--paper:#fffdf7;--soft:#fff3cf;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:2rem}
body{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button,a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #d17b00;outline-offset:5px}
button:disabled{cursor:default}
.wrap{width:min(1160px,calc(100% - 64px));margin-inline:auto}
.skip-link{position:absolute;top:-100px;left:20px;padding:12px;background:var(--ink);color:#fff;z-index:10}
.skip-link:focus{top:10px}
.site-header{display:flex;align-items:center;justify-content:space-between;padding-block:27px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;font-size:1.65rem;font-weight:850;letter-spacing:-1.4px;white-space:nowrap}
nav{display:flex;gap:32px;align-items:center;font-size:.9rem;font-weight:600}
.nav-cta{display:flex;gap:25px;border:1px solid var(--line);padding:11px 17px;border-radius:7px}
.nav-cta:hover{border-color:var(--blue);color:var(--blue)}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:55px;align-items:center;padding-block:70px 76px}
.eyebrow{font-size:.75rem;font-weight:750;letter-spacing:1.5px;line-height:1.6;margin:0 0 23px;display:flex;gap:9px;align-items:center}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}
h1{font-size:clamp(3.5rem,6.3vw,5.25rem);letter-spacing:-.065em;line-height:1.02;margin:0;font-weight:780}
h1 span{color:var(--blue)}
.hero-description{font-size:1.125rem;line-height:1.7;color:var(--muted);max-width:440px;margin:26px 0}
.button{display:inline-flex;justify-content:space-between;align-items:center;gap:28px;padding:18px 23px;font-size:1rem;font-weight:650;border-radius:8px;transition:background .16s,transform .16s}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--blue);color:white;box-shadow:0 5px 0 #d4a821}
.button-primary:hover{background:#ffe16b}
.microcopy{font-size:.8125rem;color:var(--muted);margin:20px 0 0;line-height:1.5}
.demo-stage{background:var(--blue);padding:27px 34px 23px;border-radius:16px;box-shadow:9px 9px 0 #eee5cc;transform:rotate(1deg)}
.demo-topline{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:.75rem;font-weight:700;letter-spacing:1.1px;margin-bottom:23px}
.channel-preview{background:white;border:1px solid #ccd3e6;border-radius:13px;overflow:hidden;box-shadow:0 15px 35px #0c237633;transform:rotate(-1deg)}
.channel-header{display:flex;align-items:center;padding:18px;gap:10px;background:#fff}
.avatar{display:grid;place-items:center;width:41px;height:41px;border-radius:50%;background:#f2bb4b;font-size:1.3rem;font-family:Georgia,serif}
.channel-header strong{display:block;font-size:.95rem}
.channel-header div>span{display:block;font-size:.8125rem;color:var(--muted);margin-top:4px}
.channel-menu{margin-left:auto;font-size:1.5rem}
.pinned-bar{display:flex;gap:10px;padding:10px 18px;border-top:1px solid #eef0f4;color:#315db9;background:#f8faff}
.pinned-bar>span{font-size:1.5rem}
.pinned-bar>div{border-left:2px solid #6593ec;padding-left:9px;min-width:0}
.pinned-bar strong{display:block;font-size:.8125rem}
.pinned-bar div>span{display:block;font-size:.75rem;color:var(--muted);margin-top:3px;overflow-wrap:anywhere}
.message-area{background:#e6edf3;padding:23px 18px 28px}
.message{border-radius:3px 12px 12px 12px;background:white;padding:16px 17px 11px;min-height:222px}
.message-author{color:#315db9;font-size:.8125rem;font-weight:650}
.message h2{font-size:1.4rem;line-height:1.25;letter-spacing:-.5px;margin:13px 0 10px}
.message p{font-size:.9375rem;line-height:1.55;margin:0}
.message-meta{font-size:.75rem;color:#637188;text-align:right;margin-top:16px}
.preview-action{display:flex;justify-content:center;position:relative;gap:12px;width:100%;border:0;background:#d3e1ed;color:#234e79;border-radius:6px;margin-top:6px;padding:13px 20px;font-size:.875rem;font-weight:650;min-height:46px}
.preview-action:hover{background:#c3d6e7}
.preview-action>span:last-child{position:absolute;right:15px}
.demo-controls{display:flex;justify-content:center;gap:6px;margin-top:24px;flex-wrap:wrap}
.example-choice{color:white;background:transparent;border:1px solid #657087;border-radius:30px;padding:8px 14px;font-size:.8125rem}
.example-choice.active{background:white;color:var(--blue);border-color:white}
.example-choice:hover{border-color:white}
.demo-caption{text-align:center;color:#fff;font-size:.8125rem;line-height:1.5;margin:14px 0 0;min-height:2.5rem}
.destination-strip{border-block:1px solid var(--line);background:#fff7e5}
.destination-strip>.wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-block:25px}
.destination-strip p{font-size:.6875rem;letter-spacing:1px;line-height:1.7;margin:0;color:var(--muted)}
.destination-strip strong{font-size:.75rem;color:var(--ink)}
.destination-strip span{font-size:.9375rem;font-weight:600}
.destination-strip b{color:var(--blue);margin-left:12px}
.how{padding-block:78px}
.section-heading{display:grid;grid-template-columns:1fr 1fr;column-gap:55px}
.section-heading .eyebrow{grid-column:1/-1;margin-bottom:12px}
h2{font-size:2.6rem;line-height:1.12;letter-spacing:-1.5px;margin:0;font-weight:750}
.section-heading>p:last-child{align-self:end;line-height:1.7;color:var(--muted);margin:0 0 3px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:45px}
.steps article{border-top:1px solid var(--line);padding-top:20px}
.step-number{font-size:.8125rem;font-weight:700;color:var(--blue);letter-spacing:1px}
.steps h3{font-size:1.125rem;letter-spacing:-.3px;margin:19px 0 12px}
.steps p{line-height:1.7;font-size:1rem;color:var(--muted);margin:0}
code{font-size:.95em;background:var(--soft);padding:2px 4px;border-radius:3px}
.start-section{background:var(--blue);color:#fff;border-radius:13px;padding:42px 46px;display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:35px}
.start-section .eyebrow{color:#ffd333;margin-bottom:17px}
.start-section h2{font-size:2.7rem}
.start-section p{line-height:1.6}
.start-section>div>p:last-child{margin-bottom:0}
.start-action{text-align:center}
.button-light{background:#fff;color:var(--blue);width:100%;max-width:310px}
.button-light:hover{background:#ffe16b}
.start-action p{font-size:.8125rem;color:#fff7e5}
.start-action .launch-note{font-size:.875rem}
.launch-note[hidden]{display:none}
.faq{display:grid;grid-template-columns:1fr 1.6fr;gap:70px;padding-block:78px}
.faq .eyebrow{margin-bottom:13px}
.faq h2{font-size:2.25rem}
.faq-items details{border-bottom:1px solid var(--line)}
.faq-items details:first-child{border-top:1px solid var(--line)}
summary{cursor:pointer;position:relative;list-style:none;padding:20px 30px 20px 0;font-weight:600;font-size:1rem;line-height:1.45}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:3px;top:19px;color:var(--blue);font-size:1.3rem;font-weight:400}
details[open] summary::after{content:"−"}
details p{line-height:1.75;color:var(--muted);margin:0 25px 20px 0;font-size:.9375rem}
footer{border-top:1px solid var(--line);padding-block:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px}
footer .brand{font-size:1.3rem}
footer p{font-size:.875rem;color:var(--muted)}
footer>span{font-size:.75rem;color:var(--muted)}

@media(min-width:1400px){.hero{padding-block:84px 90px}
}

@media(max-width:950px){.wrap{width:calc(100% - 40px)}
.hero{gap:30px}
.demo-stage{padding:20px}
.hero h1{font-size:3.9rem}
.destination-strip>.wrap{flex-wrap:wrap;justify-content:flex-start;gap:20px 32px}
.destination-strip p{width:100%}
.start-section{padding:35px}
.start-section h2{font-size:2.25rem}
.faq{gap:35px;grid-template-columns:1fr 1.5fr}
}

@media(max-width:700px){.wrap{width:calc(100% - 36px)}
.site-header{padding-block:20px}
nav{gap:14px}
nav>a:first-child{display:none}
.brand{font-size:1.45rem}
.nav-cta{padding:10px 12px;gap:15px}
.hero{grid-template-columns:1fr;gap:42px;padding-block:43px 45px}
.hero h1{font-size:clamp(3.3rem,13vw,4.8rem)}
.hero-description{max-width:500px}
.eyebrow{font-size:.6875rem;letter-spacing:1.25px}
.demo-stage{width:min(450px,100% - 8px);justify-self:center;padding:22px}
.message{min-height:205px}
.destination-strip>.wrap{padding-block:24px;gap:17px}
.destination-strip span{font-size:.875rem;width:100%;display:flex;justify-content:space-between}
.destination-strip p br{display:none}
.destination-strip strong{margin-left:4px}
.how{padding-block:48px}
.section-heading{display:block}
h2{font-size:2.2rem}
.section-heading>p:last-child{margin-top:20px}
.steps{grid-template-columns:1fr;gap:26px;margin-top:30px}
.steps h3{margin-top:12px}
.start-section{grid-template-columns:1fr;padding:30px 24px;gap:20px}
.start-section h2{font-size:2.2rem}
.start-action{text-align:left}
.start-action p br{display:none}
.button-light{max-width:none}
.faq{grid-template-columns:1fr;gap:25px;padding-block:48px}
footer{flex-wrap:wrap;justify-content:flex-start;gap:12px 24px}
footer p{margin:0}
footer>span{width:100%}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{transition:none!important}
.button:hover{transform:none}
}


/* Amenable identity and artwork-led layout. */
:root { --navy: #11182f; --gold: #ffd333; --cream: #fff7e5; }

.brand { font-size: 1.3rem; letter-spacing: -.6px; gap: 10px; }

.brand-avatar { width: 44px; height: 44px; border-radius: 14px; object-fit: contain; }

.brand-suffix { font-weight: 450; }

.site-header { border-bottom: 0; }

.nav-cta { background: var(--navy); border-color: var(--navy); color: var(--cream); border-radius: 30px; }

.nav-cta:hover { background: #26304e; color: white; border-color: #26304e; }

.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: center; position: relative; width: min(1360px, calc(100% - 40px)); margin: 0 auto; padding: 64px 6%; min-height: 610px; border-radius: 26px; background: radial-gradient(ellipse at 85% 45%, #30354b 0, var(--navy) 65%); color: var(--cream); }

.hero-copy { width: 100%; max-width: 630px; min-width: 0; }

.hero h1 { font-size: clamp(3.6rem, 5.5vw, 5.1rem); letter-spacing: -.065em; line-height: 1.05; }

.hero h1 span { color: var(--gold); }

.hero .eyebrow { color: var(--cream); }

.status-dot { background: var(--gold); }

.hero-description { color: #e1e3eb; max-width: 450px; margin: 25px 0 30px; }

.hero .microcopy { color: #d5d9e4; max-width: 410px; }

.button-primary { background: var(--gold); color: var(--navy); box-shadow: none; border-radius: 30px; }

.button-primary:hover { background: #ffe16b; }

.hero-mascot { display: block; width: 100%; height: auto; max-width: 510px; justify-self: center; filter: drop-shadow(0 22px 28px #0003); }

.example-section { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; padding-block: 78px; }

.example-intro h2 { font-size: clamp(2.5rem, 4vw, 3.4rem); line-height: 1.12; }

.example-intro h2 span { color: #996000; }

.example-intro>p:not(.eyebrow) { color: var(--muted); line-height: 1.8; max-width: 420px; margin-block: 24px; }

.text-link { display: inline-flex; gap: 25px; align-items: center; font-weight: 650; border-bottom: 1px solid #c5a960; padding-bottom: 8px; }

.text-link:hover { color: #996000; }

.demo-stage { background: var(--navy); box-shadow: 9px 9px 0 #f5df9c; transform: none; border-radius: 22px; }

.channel-preview { transform: none; }

.demo-topline { color: var(--gold); }

.example-choice.active { background: var(--gold); color: var(--navy); border-color: var(--gold); }

.example-choice:hover { border-color: var(--gold); }

#example-title { white-space: pre-line; }

.destination-strip { background: var(--cream); }

.step-number { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--navy); background: var(--gold); }

.start-section { background: var(--navy); border-radius: 24px; }

.button-light { background: var(--gold); color: var(--navy); border-radius: 30px; }

.button-light:hover { background: #ffe16b; }

footer .brand { font-size: 1.15rem; }

footer .brand-avatar { width: 34px; height: 34px; border-radius: 10px; }

@media (max-width: 1050px) {
  .hero { padding: 58px 5%; min-height: 560px; }

  .hero h1 { font-size: 3.8rem; }

  .hero-description { font-size: 1rem; }

  .example-section { gap: 40px; }

}

@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; gap: 16px; width: calc(100% - 28px); padding: 40px 28px 24px; min-height: 0; overflow: hidden; }

  .hero-copy { width: 100%; max-width: 600px; }

  .hero h1 { font-size: clamp(3rem, 9vw, 4.3rem); }

  .hero-description { max-width: 510px; }

  .hero-mascot { width: min(330px, 90%); margin: 0 auto; }

  .hero .microcopy { max-width: none; }

  .example-section { grid-template-columns: 1fr; gap: 30px; padding-block: 48px; }

  .example-intro h2 { font-size: 2.6rem; }

  .example-intro>p:not(.eyebrow) { max-width: 550px; }

  .demo-stage { width: min(470px, calc(100% - 9px)); justify-self: center; }

}

@media (max-width: 400px) {
  .site-header .brand { font-size: 1.05rem; gap: 7px; }

  .site-header .brand-avatar { width: 34px; height: 34px; border-radius: 10px; }

  .nav-cta { font-size: .8125rem; gap: 8px; padding: 10px; }

  .hero { padding-inline: 22px; }

  .hero .button { font-size: .9375rem; gap: 14px; padding: 17px 18px; }

}

/* Telegram cues: dark channel chrome and a blue pinned-message action. */
.telegram-icon { flex: 0 0 auto; vertical-align: middle; }
.telegram-preview-label { display: inline-flex; align-items: center; gap: 9px; }
.hero .button-primary { gap: 12px; }
.demo-topline { color: #c5d3e1; letter-spacing: .9px; }
.demo-stage { padding: 24px; }
.channel-preview { background: #0e1621; border-color: #314151; box-shadow: 0 16px 40px #0003; }
.channel-header { background: #17212b; color: #f5f7fa; gap: 10px; padding: 13px 14px; }
.channel-identity { min-width: 0; flex: 1; }
.channel-header strong { font-size: .9375rem; }
.channel-header div>span { color: #a8bdce; font-size: .8125rem; margin-top: 2px; }
.channel-header .avatar { width: 38px; height: 38px; flex: 0 0 38px; background: #4e7d94; color: white; font-family: inherit; font-size: .8125rem; font-weight: 700; }
.channel-tools { display: flex; align-items: center; gap: 17px; color: #f4f7fa; }
.channel-tools svg { stroke: currentColor; stroke-width: 1.6; fill: none; }
.channel-tools>span { font-size: 1.5rem; line-height: 1; }
.pinned-bar { display: flex; align-items: center; gap: 9px; background: #17212b; border-top: 1px solid #2c3a47; border-bottom: 1px solid #2c3a47; padding: 8px 10px; }
.pinned-bar .pinned-copy { flex: 1; min-width: 0; border-left: 2px solid #58b9f6; padding-left: 8px; }
.pinned-copy strong { color: #f5f7fa; font-size: .8125rem; }
.pinned-bar .pinned-copy>span { color: #e2eaf1; font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.pinned-action { flex: 0 0 auto; border: 0; background: #2aabef; color: #071c2b; font-weight: 750; font-size: .8125rem; border-radius: 20px; padding: 9px 12px; min-height: 36px; }
.pinned-action:hover { background: #60c5ff; }
.message-area { background: #0e1621; padding: 24px 14px 28px; }
.message { color: #f5f7fa; background: #182533; border-radius: 5px 13px 13px 13px; border: 1px solid #223346; }
.message-author { color: #67c3fa; }
.message h2 { font-size: 1.35rem; }
.message p { color: #e5edf5; }
.message-meta { color: #a5b5c5; }
.preview-action { background: #263e52; color: #fff; min-height: 44px; }
.preview-action:hover { background: #335570; }
.example-choice.active { background: #2aabef; border-color: #2aabef; color: #071c2b; }
.example-choice:hover { border-color: #60c5ff; }
.demo-caption { color: #bccddd; }
.hero { grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 48px 5%; }
.hero h1 { font-size: clamp(2.8rem, 4.6vw, 4.1rem); letter-spacing: -.05em; }
.hero .demo-stage { width: 100%; max-width: 470px; justify-self: center; border: 1px solid #344056; box-shadow: 7px 7px 0 #ffd333; }
.hero-description { max-width: 490px; }
.hero .microcopy { max-width: 430px; }
.demo-topline { font-size: .6875rem; letter-spacing: .6px; }
.value-card { padding: 32px; background: var(--cream); border: 1px solid #e8dcb8; border-radius: 20px; }
.value-card h3 { font-size: 1.5rem; margin: 0 0 18px; letter-spacing: -.5px; }
.value-card p { line-height: 1.75; color: var(--muted); }
.value-card .fit-note { border-top: 1px solid #e2d7bd; padding-top: 18px; font-size: .9375rem; }
@media (max-width: 1050px) {
  .hero { gap: 28px; padding-inline: 4%; }
  .hero h1 { font-size: 3rem; }
}
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; }
  .hero h1 { font-size: clamp(2.35rem, 7.5vw, 3.6rem); }
  .hero .demo-stage { width: min(470px, calc(100% - 7px)); }
  .hero-description { margin-block: 20px; }
  .hero .microcopy { margin-top: 16px; }
  .value-card { padding: 26px; }
}
@media (max-width: 400px) {
  .demo-stage { padding: 15px 10px; }
  .channel-tools { gap: 10px; }
  .pinned-bar { gap: 6px; padding-inline: 8px; }
  .pinned-action { padding-inline: 10px; }
  .demo-topline { font-size: .6875rem; letter-spacing: .6px; }
}