/* TALANTATOPIA site. Self-hosted fonts (OFL), no third parties. */
@font-face{font-family:"Unbounded";src:url(/fonts/unbounded-latin-wght-normal.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Unbounded";src:url(/fonts/unbounded-cyrillic-wght-normal.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Nunito";src:url(/fonts/nunito-latin-wght-normal.woff2) format("woff2");font-weight:200 1000;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";src:url(/fonts/nunito-cyrillic-wght-normal.woff2) format("woff2");font-weight:200 1000;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --paper:#f4ead7;--paper-2:#ecdcbd;--paper-3:#e2cba0;
  --sage:#8fa58a;--sage-d:#4f6352;--sage-dd:#334237;
  --brick:#a8533f;--brick-d:#8e4536;
  --ochre:#c9974a;--gold:#b8954a;--gold-l:#e3c47e;
  --teal:#8dbdb6;--teal-d:#5f948d;
  --ink:#2f3a33;--ink-2:#55605a;
  --r:22px;--shadow:0 18px 40px -18px rgba(66,52,30,.45);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --wrap:min(1160px,100% - 32px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 Nunito,system-ui,sans-serif;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .22 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;height:auto;display:block}
a{color:var(--brick-d);text-underline-offset:3px}
a:hover{color:var(--brick)}
:focus-visible{outline:3px solid var(--teal-d);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:Unbounded,Nunito,sans-serif;line-height:1.08;letter-spacing:-.02em;margin:0 0 .5em;color:var(--sage-dd)}
h1{font-size:clamp(2.3rem,7.4vw,5.4rem);font-weight:800}
h2{font-size:clamp(1.7rem,4.6vw,3.1rem);font-weight:700}
h3{font-size:1.2rem;font-weight:600}
p{margin:0 0 1em}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:10px;z-index:200}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header */
.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(244,234,215,.78);border-bottom:1px solid rgba(79,99,82,.12)}
.top .wrap{display:flex;align-items:center;gap:16px;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--sage-dd);font:800 1rem/1 Unbounded,sans-serif;letter-spacing:.02em}
.logo img{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 2px var(--gold-l)}
.nav{margin-left:auto;display:flex;gap:6px;align-items:center}
.nav a{text-decoration:none;color:var(--ink);font-weight:700;padding:8px 12px;border-radius:999px;font-size:.95rem}
.nav a:hover,.nav a[aria-current=page]{background:rgba(143,165,138,.22);color:var(--sage-dd)}
.lang{display:inline-flex;border:2px solid var(--sage-d);border-radius:999px;overflow:hidden;margin-left:6px}
.lang a{padding:5px 11px!important;border-radius:0!important;font:700 .8rem/1.2 Unbounded,sans-serif!important;color:var(--sage-d)!important}
.lang a[aria-current=true]{background:var(--sage-d)!important;color:var(--paper)!important}
@media (max-width:760px){.nav .hide-m{display:none}}
@media (max-width:440px){.logo span{display:none}}

/* buttons */
.btn{--bg:var(--brick);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 26px;border-radius:999px;border:0;
  background:var(--bg);color:#fff8ec;font:700 1rem/1.1 Unbounded,sans-serif;text-decoration:none;cursor:pointer;
  box-shadow:0 6px 0 var(--brick-d),0 16px 30px -12px rgba(142,69,54,.6);transition:transform .25s var(--ease-spring),box-shadow .25s}
.btn:hover{color:#fff;transform:translateY(-3px)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--brick-d)}
.btn.alt{--bg:transparent;color:var(--sage-dd);box-shadow:inset 0 0 0 2.5px var(--sage-d)}
.btn.alt:hover{background:rgba(143,165,138,.2);color:var(--sage-dd)}
.btn[aria-disabled=true]{--bg:#a9a294;box-shadow:0 6px 0 #8a8476;cursor:not-allowed}
.btns{display:flex;flex-wrap:wrap;gap:14px}

/* hero */
.hero{position:relative;min-height:calc(100svh - 64px);display:grid;align-items:center;overflow:hidden;
  background:radial-gradient(120% 80% at 70% 70%,#f8efdc 0%,var(--paper) 45%,var(--paper-2) 100%)}
.hero .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:center;padding:40px 0 28px}
.kicker{display:inline-flex;align-items:center;gap:8px;font:700 .78rem/1 Unbounded,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);margin-bottom:18px}
.kicker::before{content:"";width:28px;height:2px;background:currentColor}
.hero h1 .live{color:var(--brick);display:inline-block;position:relative}
.hero h1 .live::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.14em;background:var(--gold-l);z-index:-1;border-radius:4px;transform-origin:left;transform:scaleX(0);animation:underline 1s 1.6s var(--ease-out) forwards}
@keyframes underline{to{transform:scaleX(1)}}
.lead{font-size:clamp(1.08rem,1.6vw,1.3rem);color:var(--ink-2);max-width:34ch;margin-bottom:28px}
.hero .w-line{display:block;overflow:hidden;padding-bottom:.06em}
.hero .w-line>span{display:inline-block;transform:translateY(105%);animation:rise .9s var(--ease-out) forwards}
.hero .w-line:nth-child(2)>span{animation-delay:.12s}.hero .w-line:nth-child(3)>span{animation-delay:.24s}
@keyframes rise{to{transform:none}}
.fade-in{opacity:0;animation:fade .8s .5s var(--ease-out) forwards}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* stage: book + phone + pigs */
.stage{position:relative;aspect-ratio:1/1;width:100%;max-width:620px;justify-self:center;perspective:1200px}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.book{position:absolute;left:4%;right:4%;bottom:6%;height:30%;transform:rotateX(58deg);transform-style:preserve-3d;transform-origin:50% 100%}
.book::before{content:"";position:absolute;inset:-4% -3% -8%;background:var(--brick-d);border-radius:14px;box-shadow:0 40px 50px -20px rgba(60,40,20,.55)}
.page{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#f7efde,#efe2c6);overflow:hidden}
.page.l{left:0;border-radius:10px 2px 2px 10px;background:linear-gradient(90deg,#f7efde 80%,#e2d2b0)}
.page.r{right:0;border-radius:2px 10px 10px 2px;background:linear-gradient(270deg,#f7efde 80%,#e2d2b0)}
.page i{position:absolute;left:14%;right:14%;height:5%;background:rgba(85,96,90,.18);border-radius:4px}
.page i:nth-child(1){top:16%}.page i:nth-child(2){top:30%;right:28%}.page i:nth-child(3){top:44%}.page i:nth-child(4){top:58%;right:40%}
.qr-mini{position:absolute;right:16%;bottom:14%;width:22%;aspect-ratio:1;background:
  conic-gradient(from 90deg at 30% 30%,var(--ink) 25%,transparent 0) 0 0/33% 33%;opacity:.55;border-radius:3px}
.glow{position:absolute;left:18%;right:18%;bottom:14%;height:26%;border-radius:50%;background:radial-gradient(closest-side,rgba(227,196,126,.95),rgba(141,189,182,.35) 60%,transparent);filter:blur(6px);opacity:0;animation:glow 1.2s 1.3s ease-out forwards}
@keyframes glow{to{opacity:1}}
.pigs{position:absolute;inset:0;z-index:3}
.pig{position:absolute;bottom:22%;width:29%;transform-origin:50% 100%;opacity:0;
  animation:pop 1.1s var(--ease-spring) forwards,idle 4.2s 2.6s ease-in-out infinite;filter:drop-shadow(0 14px 10px rgba(60,40,20,.28))}
.pig.p1{left:0;animation-delay:1.55s,2.7s}
.pig.p2{left:28%;bottom:25%;width:29%;z-index:2;animation-delay:1.4s,2.6s}
.pig.p3{left:56%;animation-delay:1.7s,2.85s}
@keyframes pop{0%{opacity:0;transform:translateY(40%) scale(.4,.15)}35%{opacity:1}60%{transform:translateY(-6%) scale(.96,1.08)}100%{opacity:1;transform:none}}
@keyframes idle{0%,100%{transform:none}50%{transform:translateY(-2.5%) scale(1.01,.99)}}
.phone{position:absolute;right:-3%;top:4%;width:21%;aspect-ratio:9/18;border-radius:22px;background:var(--sage-dd);padding:6px;z-index:5;
  box-shadow:var(--shadow);transform:rotate(9deg) translateY(-30px);opacity:0;animation:phone 1s .3s var(--ease-out) forwards,float 6s 1.4s ease-in-out infinite}
.phone .scr{position:relative;width:100%;height:100%;border-radius:17px;overflow:hidden;background:linear-gradient(160deg,#cfe1dd,#9cc4be)}
.phone .scr img{position:absolute;inset:auto 0 0;width:100%;}
.phone .beam{position:absolute;left:0;right:0;height:30%;top:-30%;background:linear-gradient(transparent,rgba(255,248,220,.75),transparent);animation:scan 2.2s .9s ease-in-out infinite}
.phone .notch{position:absolute;top:5px;left:50%;width:30%;height:5px;border-radius:5px;background:rgba(0,0,0,.25);transform:translateX(-50%);z-index:2}
@keyframes phone{to{opacity:1;transform:rotate(9deg)}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes scan{0%{top:-30%}100%{top:100%}}
.ray{position:absolute;right:10%;top:34%;width:30%;height:36%;z-index:2;pointer-events:none;opacity:0;animation:fade .6s 1s forwards}
.ray path{stroke:var(--teal-d);stroke-width:2;stroke-dasharray:6 8;fill:none;animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-28}}
.scroll-cue{position:absolute;left:50%;bottom:14px;translate:-50% 0;width:26px;height:42px;border:2.5px solid var(--sage-d);border-radius:14px;opacity:.6}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;background:var(--sage-d);translate:-50% 0;animation:cue 1.6s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;padding-top:28px;gap:4px}
  .stage{max-width:460px;order:-1;margin-top:-10px}
  .hero h1{font-size:clamp(2.1rem,10vw,3.4rem)}
  .scroll-cue{display:none}
}

/* sections */
section{position:relative}
.band{padding:clamp(64px,10vw,130px) 0}
.band.sage{background:var(--sage-d);color:#f3ecdc}
.band.sage h2,.band.sage h3{color:#fff6e4}
.band.gold{background:linear-gradient(180deg,var(--paper-2),var(--paper-3))}
.eyebrow{font:700 .78rem/1 Unbounded,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brick);margin-bottom:14px}
.band.sage .eyebrow{color:var(--gold-l)}
.wave{position:absolute;top:-1px;left:0;display:block;width:100%;height:60px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;counter-reset:s}
.step{position:relative;background:rgba(255,250,238,.08);border:1.5px solid rgba(255,246,228,.22);border-radius:var(--r);padding:28px 24px 24px}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--gold-l);color:var(--sage-dd);font:800 1.4rem/1 Unbounded,sans-serif;margin-bottom:18px}
.step svg{position:absolute;right:18px;top:22px;width:56px;height:56px;opacity:.9}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.card{position:relative;border-radius:28px;padding:22px 18px 0;overflow:hidden;text-align:center;isolation:isolate;transition:transform .5s var(--ease-spring)}
.card::before{content:"";position:absolute;inset:auto 0 0;height:72%;border-radius:28px 28px 0 0;z-index:-1}
.card.c1::before{background:var(--ochre)}.card.c2::before{background:var(--brick)}.card.c3::before{background:var(--teal-d)}
.card img{width:78%;margin:14px auto 0;transition:transform .6s var(--ease-spring)}
.card:hover{transform:translateY(-6px) rotate(-1deg)}
.card:hover img{transform:translateY(-10px) scale(1.04) rotate(2deg)}
.card h3{margin:0}
@media (max-width:760px){.trio{grid-template-columns:1fr;max-width:360px;margin-inline:auto}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.ticks{list-style:none;padding:0;margin:0 0 24px}
.ticks li{position:relative;padding-left:38px;margin-bottom:14px}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' stroke='%23fff' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.dad{position:relative;max-width:440px;margin-inline:auto}
.dad .bubble{position:absolute;background:#fffaf0;border-radius:18px;padding:10px 14px;font-weight:800;box-shadow:var(--shadow);font-size:.95rem;color:var(--sage-dd)}
.dad .b1{left:-4%;top:12%}.dad .b2{right:-2%;top:38%;background:var(--gold-l)}.dad .b3{left:4%;bottom:12%;background:var(--teal)}
.dad img{border-radius:50%;box-shadow:0 0 0 10px var(--paper),0 0 0 12px var(--gold),var(--shadow)}
.promise{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.promise div{background:rgba(255,250,238,.6);border-radius:18px;padding:18px;font-weight:700;border:1.5px solid rgba(79,99,82,.18)}
.promise b{display:block;font:800 1.5rem/1.1 Unbounded,sans-serif;color:var(--brick);margin-bottom:4px}
@media (max-width:760px){.promise{grid-template-columns:1fr 1fr}}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}

/* prose pages */
.page-head{padding:56px 0 24px}
.prose{max-width:720px;padding-bottom:80px}
.prose h2{font-size:1.5rem;margin-top:1.6em}
.prose li{margin-bottom:.5em}
.note{background:var(--paper-2);border-left:5px solid var(--ochre);border-radius:12px;padding:14px 18px;margin:0 0 24px;font-weight:600}
.panel{background:#fffaf0;border-radius:28px;padding:clamp(22px,4vw,40px);box-shadow:var(--shadow);border:1.5px solid rgba(79,99,82,.12)}

/* b1 */
.b1{padding:28px 0 72px}
.b1-hero{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin-bottom:26px}
.b1-hero img{width:120px;border-radius:50%;box-shadow:0 0 0 6px var(--gold-l);animation:pop 1s var(--ease-spring) both}
.b1-hero h1{font-size:clamp(1.8rem,6.6vw,3rem);margin:0}
.variant[hidden]{display:none}
.variant{margin-bottom:28px}
.variant .btn{width:100%;max-width:420px;font-size:1.1rem;min-height:62px}
.pstep{display:grid;grid-template-columns:44px 1fr;gap:14px;margin-bottom:16px;align-items:start}
.pstep span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--sage-d);color:#fff6e4;font:800 1.1rem/1 Unbounded,sans-serif}
.qrbox{display:inline-block;background:#fff;padding:16px;border-radius:20px;box-shadow:var(--shadow);margin:8px 0 12px}
.qrbox canvas{display:block;width:220px;height:220px;image-rendering:pixelated}
.small{font-size:.92rem;color:var(--ink-2)}

/* footer */
.foot{background:var(--sage-dd);color:#e9e0cc;padding:48px 0 36px;font-size:.95rem}
.foot a{color:#f3e2b6}
.foot .small{color:#cfc6b1}
.foot .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:flex-start}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot .tag{font:800 1rem/1.2 Unbounded,sans-serif;color:#fff6e4;margin-bottom:6px}

/* 404 */
.lost{min-height:70vh;display:grid;place-items:center;text-align:center;padding:40px 0}
.lost img{width:220px;margin:0 auto 10px;animation:idle 3s ease-in-out infinite;transform-origin:50% 100%}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

@media (max-width:560px){.b1-hero{grid-template-columns:1fr;gap:14px}.b1-hero img{width:96px}}
#soon{margin:14px 0 0}