@font-face {
  font-family: Manrope;
  src: url('assets/manrope-variable.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Orange Marker';
  src: url('assets/orange-marker-smooth.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { color-scheme: dark; --bg:#020407; --ink:#fff; --muted:#aaa; --accent:#db4200; --line:#ffffff1c; font-family:Manrope,Arial,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.page { --page-inset:64px; --card-width:400px; --hero-gap:96px; position:relative; z-index:2; max-width:1360px; margin:auto; padding:0 var(--page-inset); }
/* A cached, transparent tile: no live turbulence or full-screen blend pass. */
.grain { position:fixed; inset:0; z-index:8; pointer-events:none; background-image:url('assets/grain-static.png'); background-size:192px 192px; opacity:.45; contain:strict; transform:translateZ(0); }
@property --ambient-one-x { syntax:'<percentage>'; inherits:true; initial-value:77%; }
@property --ambient-one-y { syntax:'<percentage>'; inherits:true; initial-value:72%; }
@property --ambient-two-x { syntax:'<percentage>'; inherits:true; initial-value:20%; }
@property --ambient-two-y { syntax:'<percentage>'; inherits:true; initial-value:12%; }
.terminal-light { --beam-x:-1000px; --beam-y:-1000px; position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; user-select:none; opacity:0; transition:opacity .25s ease; contain:strict; transform:translateZ(0); animation:ambient-one 24s ease-in-out infinite,ambient-two 31s ease-in-out infinite; animation-play-state:paused; }
.terminal-light[data-active="true"] { opacity:1; animation-play-state:running; }
.terminal-ambient { position:absolute; inset:0; opacity:.75; background:radial-gradient(ellipse 520px 300px at var(--ambient-one-x) var(--ambient-one-y),#ffe47824 0%,#e9c84d10 42%,transparent 100%),radial-gradient(ellipse 380px 480px at var(--ambient-two-x) var(--ambient-two-y),#d5fa6121 0%,#b4dc490d 45%,transparent 100%); }
.terminal-ambient::before,.terminal-ambient::after { content:''; position:absolute; pointer-events:none; }
.terminal-ambient::before { left:var(--ambient-one-x); top:var(--ambient-one-y); width:min(1100px,90vw); height:260px; transform:translate(-50%,-50%) rotate(-27deg); background:radial-gradient(ellipse at center,#ffe17a5c 0%,#f3d15b32 24%,#d9b23c12 50%,transparent 74%); }
.terminal-ambient::after { left:var(--ambient-two-x); top:var(--ambient-two-y); width:270px; height:min(1000px,110vh); transform:translate(-50%,-50%) rotate(-34deg); background:radial-gradient(ellipse at center,#d2fa644d 0%,#c4ed542b 25%,#a4cf3510 52%,transparent 76%); }
@media(max-width:740px) {
  .terminal-ambient::before { width:115vw; height:200px; }
  .terminal-ambient::after { width:210px; height:88vh; }
}
.terminal-glow { position:absolute; inset:0; opacity:0; transition:opacity .25s ease; background:radial-gradient(circle 210px at var(--beam-x) var(--beam-y),#f6d88730 0%,#dfba6520 24%,#b38a380a 58%,transparent 100%); }
.terminal-light[data-pointer="true"] .terminal-glow { opacity:1; }
.terminal-code { position:absolute; inset:0; overflow:hidden; color:#b6ab88; opacity:.55; --code-mask:radial-gradient(circle 165px at var(--beam-x) var(--beam-y),#000 0%,#000e 25%,#0006 58%,transparent 100%),radial-gradient(ellipse 390px 210px at var(--ambient-one-x) var(--ambient-one-y),#000c 0%,#0008 35%,transparent 100%),radial-gradient(ellipse 235px 390px at var(--ambient-two-x) var(--ambient-two-y),#000b 0%,#0007 35%,transparent 100%); -webkit-mask-image:var(--code-mask); mask-image:var(--code-mask); }
@keyframes ambient-one { 0%,100% { --ambient-one-x:77%; --ambient-one-y:72%; } 25% { --ambient-one-x:64%; --ambient-one-y:12%; } 50% { --ambient-one-x:10%; --ambient-one-y:44%; } 75% { --ambient-one-x:46%; --ambient-one-y:88%; } }
@keyframes ambient-two { 0%,100% { --ambient-two-x:20%; --ambient-two-y:12%; } 25% { --ambient-two-x:94%; --ambient-two-y:40%; } 50% { --ambient-two-x:58%; --ambient-two-y:92%; } 75% { --ambient-two-x:6%; --ambient-two-y:64%; } }
.terminal-fragment { position:absolute; width:max-content; margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--fragment-size,11px); font-weight:400; line-height:1.5; letter-spacing:0; white-space:pre; transform:rotate(var(--fragment-angle,0deg)); animation:terminal-drift var(--drift-duration,20s) ease-in-out var(--drift-delay,0s) infinite alternate,terminal-pulse var(--pulse-duration,8s) ease-in-out var(--drift-delay,0s) infinite alternate; animation-play-state:paused; }
.terminal-fragment span { display:block; min-height:1.5em; }
.terminal-typing::after { content:'▍'; display:inline-block; margin-left:2px; color:#dfcd9f; animation:terminal-caret 1s steps(1) infinite; animation-play-state:paused; }
.terminal-light[data-active="true"] .terminal-fragment,.terminal-light[data-active="true"] .terminal-typing::after { animation-play-state:running; }
/* Retain the last painted background while the browser scrolls the content. */
.terminal-light[data-scrolling="true"],.terminal-light[data-scrolling="true"] .terminal-fragment,.terminal-light[data-scrolling="true"] .terminal-typing::after { animation-play-state:paused; }
@keyframes terminal-drift { from { transform:translate3d(calc(var(--drift-x) * -.5),calc(var(--drift-y) * -.5),0) rotate(var(--fragment-angle)); } to { transform:translate3d(var(--drift-x),var(--drift-y),0) rotate(calc(var(--fragment-angle) * -.5)); } }
@keyframes terminal-pulse { from { opacity:.45; } to { opacity:.95; } }
@keyframes terminal-caret { 0%,55% { opacity:.8; } 56%,100% { opacity:0; } }
.terminal-command { color:#dfcd9f; }
.terminal-comment { color:#827751; }
.terminal-success { color:#9eaf8c; }
.terminal-keyword { color:#b5ae86; }
.terminal-string { color:#c6ad78; }
@media(hover:none),(pointer:coarse) { .terminal-glow { display:none; } }




.hero { display:grid; grid-template-columns:var(--card-width) max-content; justify-content:center; align-items:center; gap:var(--hero-gap); min-height:100svh; padding:76px 0 98px; }
@media(min-width:741px) {
  .hero--copy-first { grid-template-columns:max-content var(--card-width); }
}
.author-stage { width:100%; perspective:1100px; transform-style:preserve-3d; }
.author { --rest-x:1.5deg; --rest-y:-3deg; --tilt-x:0deg; --tilt-y:0deg; --lift:0px; position:relative; width:100%; padding:11px 11px 22px; border:0; border-radius:29px; transform:translateY(var(--lift)) rotateX(calc(var(--rest-x) + var(--tilt-x))) rotateY(calc(var(--rest-y) + var(--tilt-y))); transform-style:preserve-3d; }
.author::before { content:''; position:absolute; inset:0; border-radius:inherit; background:#0b0b0be6; backdrop-filter:blur(28px) saturate(0); -webkit-backdrop-filter:blur(28px) saturate(0); box-shadow:inset 0 -6px 20px #0003; filter:blur(2px); transform:translateZ(0); pointer-events:none; }
.author-depth { position:absolute; inset:0; border-radius:inherit; background:#08080880; box-shadow:0 28px 65px -18px #000b; filter:blur(4px); transform:translateZ(-8px); pointer-events:none; }
.author-glare { position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:var(--glare-opacity,0); transform:translateZ(1px); }
/* Hollow masks keep the reflection on the rim, clear of the photo and text. */
.author-glare::before,.author-glare::after { content:''; position:absolute; inset:0; border-radius:inherit; padding:1.25px; background:radial-gradient(ellipse 115px 155px at var(--glare-x,50%) var(--glare-y,0%),#fff7e8 0%,#fff0d8b3 22%,#f3d3a047 48%,transparent 78%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.author-glare::before { padding:3px; filter:blur(2px); opacity:.6; }
.portrait { position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:19px; background:#171717; transform:translateZ(14px); box-shadow:0 5px 16px #0004; }
.portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 29%; filter:saturate(.8); }
.portrait::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 52%,#0005); pointer-events:none; }
.author-description { display:grid; gap:18px; margin:0; padding:23px 12px 0; list-style:none; transform:translateZ(20px); }
.author-description li { display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start; }
.author-marker { display:block; width:18px; height:18px; margin-top:2px; animation:marker-spin 12s linear infinite; }
@keyframes marker-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.author-description p { margin:0; }
.author-description strong { display:block; color:#f1f1f1; font-size:18px; line-height:1.55; font-weight:700; }
.author-description p>span { display:block; margin-top:4px; color:#aaa; font-size:18px; line-height:1.65; }
.hero-copy { width:max-content; padding:1px 0 0; }
.hero-details { container-type:inline-size; }
/* The heading sets the text column width, keeping the visible outer margins equal. */
h1 { font-size:min(44px,calc((100vw - var(--page-inset) * 2 - var(--card-width) - var(--hero-gap)) / 13.95)); line-height:1.04; font-weight:750; letter-spacing:-.035em; margin:0 0 26px; }
.hero-ai-phrase,.hero-sales { white-space:nowrap; }
.hero-sales-mark { padding-bottom:.14em; background:url('assets/sales-underline.svg?v=44') 0 100% / 100% .55em no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.hero-ai { display:inline-block; font-family:'Orange Marker',Manrope,sans-serif; font-size:1.34em; font-weight:400; line-height:.7; letter-spacing:0; color:var(--accent); transform:rotate(-3deg); }
.hero-description { color:#b3b3b3; font-size:20px; line-height:1.5; font-weight:500; }
.hero-description p { margin:0; }
.hero-description p+p { margin-top:17px; }
.hero-description .hero-experience { margin-top:8px; color:#EAFF00; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; max-width:600px; margin-top:29px; }
.button-primary { position:relative; display:inline-flex; flex:1 1 260px; align-items:center; justify-content:center; width:360px; max-width:360px; min-height:67px; padding:17px 26px; border:0; border-radius:22px; color:#f1f1f1; background:transparent; font-size:19px; line-height:1.3; font-weight:750; text-align:center; transition:color .2s,transform .2s; }
.button-primary:hover { color:#fff; transform:translateY(-2px); }
.button-primary:active { transform:translateY(1px); }
.button-primary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.button-sketch { position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; pointer-events:none; }
.button-primary>span { position:relative; z-index:1; }
.button-stroke { fill:none; stroke:var(--accent); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:0; animation:button-outline 1s ease-out .15s both; }
.button-stroke-second { stroke-width:.8; stroke-opacity:.38; animation-duration:.7s; animation-delay:.65s; }
.button-paint-stroke { fill:none; stroke:#c74d28; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; animation:button-paint var(--paint-duration,.7s) cubic-bezier(.3,.1,.35,1) var(--paint-delay,2.5s) both; }
@keyframes button-outline { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes button-paint { 0% { stroke-dashoffset:1; opacity:0; } 3% { opacity:1; } 100% { stroke-dashoffset:0; opacity:1; } }
.button-secondary { position:relative; display:inline-flex; flex:1 1 224px; align-items:center; justify-content:center; gap:10px; width:224px; max-width:224px; min-height:58px; padding:16px 20px; border:0; border-radius:22px; color:#f1f1f1; font-size:19px; font-weight:650; line-height:1.3; white-space:nowrap; transition:color .2s,transform .2s; }
.button-secondary::before { content:''; position:absolute; inset:0; border-radius:inherit; background:#0b0b0be6; backdrop-filter:blur(28px) saturate(0); -webkit-backdrop-filter:blur(28px) saturate(0); box-shadow:inset 0 -6px 20px #0003,0 12px 28px -12px #000b; filter:blur(1.5px); pointer-events:none; }
.button-secondary>span,.telegram-icon { position:relative; }
.telegram-icon { flex:none; width:22px; height:22px; }
.button-secondary:hover { color:#fff; transform:translateY(-2px); }
.button-secondary:active { transform:translateY(1px); }
@container(max-width:500px) { .hero-actions .button { flex-basis:100%; max-width:360px; } }
@media(min-width:1500px) {
  .page { --page-inset:70px; --card-width:420px; --hero-gap:147px; } .hero { padding-block:90px; } }
@media(max-width:1150px) {
  .page { --page-inset:42px; --card-width:350px; --hero-gap:67.5px; } .hero { padding-block:64px; }  }
@media(max-width:950px) {
  .page { --page-inset:30px; --card-width:300px; --hero-gap:48px; } .hero { padding-block:52px; } .hero-actions { margin-top:23px; } .author { border-radius:25px; padding:9px 9px 20px; } .portrait { border-radius:17px; }
}
@media(max-width:740px) {
  .page { padding:0 24px; } .hero { grid-template-columns:235px minmax(0,1fr); gap:30px; }  }
@media(max-width:740px) {
  .page { padding:0 23px; } .hero { min-height:0; grid-template-columns:1fr; gap:39px; padding:40px 0 35px; } .hero-copy { width:auto; min-width:0; grid-column:1; grid-row:1; } .author-stage { grid-column:1; grid-row:2; max-width:420px; justify-self:center; } .author { --rest-x:0deg; --rest-y:0deg; padding:10px 10px 18px; border-radius:27px; } .portrait { border-radius:18px; } .hero-actions { margin-top:26px; }
}
@media(max-width:740px) {
  h1 { font-size:clamp(24px,7.7vw,40px); line-height:1.06; margin-bottom:22px; } .hero-sales { white-space:normal; }
}
@media(max-width:360px) {
  .page { padding:0 19px; } .hero { padding-top:36px; gap:31px; }  
}
/* Keep the mobile atmosphere subtle enough for the centered copy to stay clear. */
@media(max-width:740px) {
  body { background:#080b09; }
  .terminal-ambient { opacity:.42; }
  .terminal-code { opacity:.2; }
  .grain { opacity:.14; }
  .hero-copy { width:100%; max-width:420px; margin-inline:auto; text-align:center; }
  .hero-copy h1 { font-size:clamp(27px,7.25vw,40px); line-height:1.16; text-wrap:balance; }
  .hero-description { max-width:34ch; margin-inline:auto; color:#c4c8c0; font-size:17px; line-height:1.6; text-wrap:balance; }
  .hero-description br { display:none; }
  .hero-description .hero-experience { margin-top:16px; font-size:16px; line-height:1.5; }
  .hero-actions { flex-direction:column; justify-content:center; margin-inline:auto; }
  .hero-actions .button { flex:none; width:100%; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } .author { transform:none!important; } .author-marker,.terminal-light,.terminal-fragment,.terminal-typing::after,.button-stroke,.button-paint-stroke { animation:none; } .button-primary:hover,.button-primary:active,.button-secondary:hover,.button-secondary:active { transform:none; } }
@media print,(forced-colors:active) { .grain,.terminal-light,.author-glare { display:none; } }