/* ============ СВІТ КОМПАНІЙ — styles v2 ============ */
:root{
  --bg:#0E1030; --surface:#191C4A; --surface2:#232760;
  --ink:#F5F6FF; --muted:#9FA4D8; --gold:#FFCC33; --gold-dark:#B8860B;
  --ok:#3DDC84; --bad:#FF5A5A;
  --r:20px; --pad:16px;
  --display:'Unbounded',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;
  padding-bottom:env(safe-area-inset-bottom);}
button{font-family:inherit;border:0;cursor:pointer;background:none;color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);line-height:1.15}
p{margin:.5em 0}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}

/* ---------- loader ---------- */
.loader{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.loader-logo{font-family:var(--display);font-weight:900;font-size:34px;text-align:center;letter-spacing:.02em;
  background:linear-gradient(135deg,#FFCC33,#FF7A59 60%,#B388FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.loader-bar{width:180px;height:6px;border-radius:6px;background:var(--surface);overflow:hidden}
.loader-bar span{display:block;height:100%;width:40%;border-radius:6px;background:var(--gold);animation:load 1s infinite}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}

/* ---------- header ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) var(--pad) 10px;
  background:rgba(14,16,48,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.topbar .brand{font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:.03em}
.topbar .spacer{flex:1}
.chip-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;
  background:var(--surface);font-weight:800;font-size:14px}
.chip-btn.gold{background:var(--gold);color:#221a00}
.back-btn{font-size:15px;font-weight:800;padding:8px 12px;border-radius:999px;background:var(--surface)}

/* ---------- catalog ---------- */
.catalog{padding:8px var(--pad) 40px;max-width:760px;margin:0 auto}
.hero-title{font-size:30px;font-weight:900;margin:14px 0 4px}
.hero-sub{color:var(--muted);font-weight:600;margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
.tile{position:relative;border-radius:var(--r);aspect-ratio:1/1.06;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;transform:translateZ(0);transition:transform .15s}
.tile:active{transform:scale(.96)}
.tile .mark{height:64px;display:flex;align-items:center;justify-content:center}
.tile .mark svg{height:100%;width:auto;display:block}
.tile .tname{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.02em}
.tile .tread{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.28);border-radius:999px;
  font:700 11px var(--mono);padding:4px 8px}
.tile.done::after{content:"🏆";position:absolute;top:8px;left:8px;font-size:16px}
.coming{border:2px dashed var(--surface2);border-radius:var(--r);aspect-ratio:1/1.06;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;color:var(--muted);font-weight:700;font-size:13px;text-align:center;padding:10px}
.coming .plus{font-size:28px}

/* ---------- card view (company page) ---------- */
.card-view{--c1:#333;--c2:#666;--ctext:#fff;--cfont:var(--display);
  min-height:100vh;background:var(--cbg,var(--bg))}
.card-hero{position:relative;overflow:hidden;padding:18px var(--pad) 22px;
  background:linear-gradient(160deg,var(--c1),var(--c2));color:var(--ctext);border-radius:0 0 28px 28px}
.card-hero>*{position:relative;z-index:2}
.card-hero .mark{height:76px;margin:6px 0 10px}
.card-hero .mark svg{height:100%;width:auto}
.card-hero h1{font-family:var(--cfont);font-size:34px;font-weight:900;letter-spacing:.01em}
.card-hero .tagline{font-weight:700;opacity:.92;margin-top:6px;font-size:16px}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.stat{background:rgba(255,255,255,.14);border-radius:14px;padding:10px 12px;backdrop-filter:blur(4px)}
.card-view.light .stat{background:rgba(0,0,0,.06)}
.stat .v{font:700 15px var(--mono)}
.stat .l{font-size:12px;font-weight:700;opacity:.8;margin-top:2px}

/* hero-фото за логотипом (slot: hero) */
.hero-photo{position:absolute;inset:0;z-index:1;cursor:zoom-in}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block;opacity:.42;filter:saturate(1.05)}
.card-hero.has-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.62))}
.card-view.light .card-hero.has-photo::after{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.7))}

.sections{padding:14px var(--pad) 60px;max-width:760px;margin:0 auto}
.sec{background:var(--panel,rgba(255,255,255,.05));border:1px solid var(--panel-br,rgba(255,255,255,.09));
  border-radius:18px;margin-bottom:12px;overflow:hidden}
.card-view.light .sec{--panel:rgba(0,0,0,.035);--panel-br:rgba(0,0,0,.08)}
.sec-head{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;text-align:left}
.sec-head .ico{font-size:22px;width:28px;text-align:center}
.sec-head .t{flex:1;font-family:var(--display);font-weight:700;font-size:15.5px}
.sec-head .pts{font:700 11px var(--mono);color:var(--gold);background:rgba(255,204,51,.12);
  padding:3px 8px;border-radius:999px}
.sec-head .pts.photo{color:#7CE0FF;background:rgba(124,224,255,.13)}
.card-view.light .sec-head .pts{background:rgba(184,134,11,.12);color:#7a5a00}
.card-view.light .sec-head .pts.photo{background:rgba(0,110,150,.12);color:#00566e}
.sec-head .arr{transition:transform .2s;font-size:13px;opacity:.6}
.sec.open .sec-head .arr{transform:rotate(180deg)}
.sec-body{display:none;padding:2px 16px 18px}
.sec.open .sec-body{display:block}
.sec-body p{margin:.55em 0}
.sec-note{font-size:13.5px;color:var(--muted);margin:6px 0 10px}
.card-view.light .sec-note{color:#555}
.sec-anchor{display:none}

/* timeline */
.tl{position:relative;margin:6px 0 0;padding-left:18px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:3px;border-radius:3px;
  background:linear-gradient(var(--c1),var(--c2))}
.tl-item{position:relative;padding:0 0 16px 14px}
.tl-item::before{content:"";position:absolute;left:-17px;top:6px;width:11px;height:11px;border-radius:50%;
  background:var(--c1);box-shadow:0 0 0 3px var(--bg)}
.card-view.light .tl-item::before{box-shadow:0 0 0 3px #fff}
.tl-item .y{font:700 13px var(--mono);color:var(--acc,var(--gold))}
.tl-item .tt{font-weight:800;margin:2px 0}
.tl-item .tx{font-size:14.5px;opacity:.88}

/* evolution */
.evo-scroll{display:flex;gap:10px;overflow-x:auto;padding:8px 2px 14px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch}
.evo-card{scroll-snap-align:start;flex:0 0 178px;background:var(--panel,rgba(255,255,255,.06));
  border:1px solid var(--panel-br,rgba(255,255,255,.1));border-radius:16px;padding:12px;position:relative;text-align:left}
.evo-card.sel{outline:3px solid var(--gold)}
.evo-card .vis{font-size:40px;height:56px;display:flex;align-items:center;justify-content:center}
.evo-card .vis svg{height:52px;width:auto}
.evo-card .vis-photo{height:104px;margin:-4px -4px 6px;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.2)}
.evo-card .vis-photo img{width:100%;height:100%;object-fit:cover;display:block}
.evo-card.has-photo{cursor:zoom-in}
.evo-card .y{font:700 12px var(--mono);color:var(--acc,var(--gold))}
.evo-card .n{font-weight:800;font-size:14px;margin:2px 0 6px}
.evo-card ul{margin:0;padding-left:16px;font-size:12.5px;opacity:.9}
.evo-card li{margin:2px 0}
.cmp-hint{font-size:13px;color:var(--muted);margin:0 0 4px}
.cmp-bar{display:flex;gap:8px;align-items:center;margin:4px 0 8px;flex-wrap:wrap}
.cmp-sheet{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);
  border-radius:22px 22px 0 0;padding:16px var(--pad) calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px rgba(0,0,0,.5);max-height:75vh;overflow:auto}
.cmp-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.cmp-col{background:var(--surface2);border-radius:14px;padding:12px}
.cmp-col .vis{font-size:34px;text-align:center;height:44px}
.cmp-col .vis svg{height:40px}
.cmp-col .vis-photo{height:110px;border-radius:12px;overflow:hidden;margin-bottom:6px}
.cmp-col .vis-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cmp-col .n{font-weight:800;font-size:14px;text-align:center}
.cmp-col .y{font:700 12px var(--mono);color:var(--gold);text-align:center}
.cmp-col ul{padding-left:16px;font-size:12.5px}

/* ---------- ГАЛЕРЕЇ (медіа-шар v2) ---------- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:4px 0 6px}
@media(min-width:560px){.gal{grid-template-columns:repeat(3,1fr)}}
.gal-founder{grid-template-columns:repeat(2,1fr);max-width:420px}
.ph{position:relative;margin:0;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.22);
  border:1px solid var(--panel-br,rgba(255,255,255,.1));cursor:zoom-in;aspect-ratio:4/3;
  display:flex;flex-direction:column;justify-content:flex-end}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  background:linear-gradient(120deg,rgba(255,255,255,.05),rgba(255,255,255,.12))}
.ph-cap{position:relative;z-index:2;font-size:11.5px;font-weight:700;line-height:1.3;padding:16px 8px 7px;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.78));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-cap b{font-family:var(--mono);color:var(--gold)}
.ph-zoom{position:absolute;top:6px;right:6px;z-index:2;font-size:12px;background:rgba(0,0,0,.45);
  border-radius:999px;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.ph-missing{display:none}

/* ---------- лайтбокс ---------- */
#lightbox-layer{position:fixed;inset:0;z-index:150;display:none;background:rgba(4,5,18,.95);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#lightbox-layer.show{display:flex;flex-direction:column;align-items:center;justify-content:center}
.lb-stage{flex:1;width:100%;display:flex;align-items:center;justify-content:center;padding:56px 12px 8px;min-height:0}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-cap{width:100%;max-width:760px;padding:10px 18px calc(22px + env(safe-area-inset-bottom));text-align:center}
.lb-t{font-family:var(--display);font-weight:700;font-size:15px}
.lb-credit{font-size:13px;color:var(--muted);margin-top:4px}
.lb-credit a{color:var(--gold);text-decoration:underline}
.lb-credit b{color:var(--ink)}
.lb-n{font:700 11px var(--mono);color:var(--muted);margin-top:6px}
.lb-close{position:absolute;top:calc(12px + env(safe-area-inset-top));right:14px;z-index:3;
  width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.12);font-size:18px;color:#fff}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:60px;
  border-radius:14px;background:rgba(255,255,255,.1);font-size:26px;color:#fff}
.lb-prev{left:6px} .lb-next{right:6px}

/* ---------- модалка ---------- */
#modal-layer{position:fixed;inset:0;z-index:140;display:none;background:rgba(4,5,18,.82);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#modal-layer.show{display:flex;align-items:flex-end;justify-content:center}
@media(min-width:700px){#modal-layer.show{align-items:center}}
.modal{width:100%;max-width:860px;max-height:92vh;display:flex;flex-direction:column;
  background:var(--surface);border-radius:22px 22px 0 0;overflow:hidden}
@media(min-width:700px){.modal{border-radius:22px}}
.modal-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--surface2)}
.modal-head b{flex:1;font-family:var(--display);font-size:15px}
.modal-body{flex:1;overflow:auto;padding:14px 16px calc(18px + env(safe-area-inset-bottom));min-height:0}

/* ---------- машина часу ---------- */
.tm-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px}
.tm-year{flex:0 0 auto;padding:7px 12px;border-radius:999px;background:var(--panel,rgba(255,255,255,.08));
  border:1px solid var(--panel-br,rgba(255,255,255,.12));font:700 13px var(--mono)}
.tm-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tm-range{flex:1;accent-color:var(--gold)}
.tm-step{width:34px;height:34px;border-radius:10px;background:var(--surface2);font-size:18px;font-weight:800}
.tm-label{font:700 15px var(--mono);color:var(--gold);min-width:52px;text-align:right}
.tm-frame{position:relative;height:min(60vh,520px);border-radius:14px;overflow:hidden;background:#fff}
.tm-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;background:#fff}
.tm-fallback{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;color:#444;font-size:14px;font-weight:600}
.tm-open{margin-top:12px;display:inline-flex;text-decoration:none}

/* ---------- відео ---------- */
.video-wrap{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- джерела ---------- */
.src-link{display:block;width:100%;text-align:left;margin:2px 0 10px;padding:12px 14px;border-radius:14px;
  background:var(--panel,rgba(255,255,255,.05));border:1px dashed var(--panel-br,rgba(255,255,255,.18));
  font-weight:700;font-size:13.5px;color:var(--muted);text-decoration:none}
.src-count{font:700 11px var(--mono);color:var(--gold);background:rgba(255,204,51,.12);
  padding:2px 8px;border-radius:999px;margin-left:6px}
.src-rows{margin-top:6px}
.src-row{border-left:3px solid var(--surface2);padding:3px 0 3px 10px;margin:9px 0}
.src-t{font-weight:700;font-size:14px}
.src-t b{font-family:var(--mono);color:var(--gold)}
.src-slot{font:600 10px var(--mono);color:var(--muted);background:var(--surface2);
  padding:2px 6px;border-radius:999px;margin-left:4px}
.src-m{font-size:12.5px;color:var(--muted)}
.src-m a{color:var(--gold)}

/* facts / success / risks */
.fact{display:flex;gap:10px;align-items:flex-start;background:var(--panel,rgba(255,255,255,.05));
  border-radius:14px;padding:10px 12px;margin:8px 0}
.fact .fi{font-size:20px}
.fact .ft{font-size:14.5px}
.kv{border-left:4px solid var(--c1);padding:2px 0 2px 12px;margin:12px 0}
.kv .kt{font-weight:800}
.kv .kx{font-size:14.5px;opacity:.9}
.risk{border-left:4px solid var(--bad)}
.bio-block{margin:12px 0}
.bio-block .bt{font-family:var(--display);font-size:13.5px;font-weight:700;color:var(--acc,var(--gold));
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.bio-block p{font-size:14.5px}

/* quiz */
.quiz-q{font-weight:800;font-size:16px;margin:6px 0 12px}
.quiz-progress{font:700 12px var(--mono);color:var(--muted);margin-bottom:6px}
.opt{display:block;width:100%;text-align:left;background:var(--panel,rgba(255,255,255,.07));
  border:1.5px solid var(--panel-br,rgba(255,255,255,.12));border-radius:14px;padding:12px 14px;margin:8px 0;
  font-weight:700;font-size:15px;transition:transform .1s}
.opt:active{transform:scale(.98)}
.opt.correct{background:rgba(61,220,132,.18);border-color:var(--ok)}
.opt.wrong{background:rgba(255,90,90,.16);border-color:var(--bad)}
.quiz-why{background:var(--panel,rgba(255,255,255,.06));border-radius:14px;padding:10px 12px;font-size:14px;margin-top:6px}
.quiz-next{margin-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;
  background:var(--gold);color:#221a00;font-weight:800;font-size:15px;text-decoration:none}
.btn.ghost{background:var(--surface2);color:var(--ink)}
.card-view.light .btn.ghost{background:rgba(0,0,0,.08);color:#111}
.quiz-result{text-align:center;padding:10px 0}
.quiz-result .big{font-family:var(--display);font-size:40px;font-weight:900}

/* future + idea */
.idea-box{margin-top:14px}
.idea-box textarea{width:100%;min-height:84px;border-radius:14px;border:1.5px solid var(--panel-br,rgba(255,255,255,.15));
  background:var(--panel,rgba(255,255,255,.06));color:inherit;font-family:var(--body);font-size:15px;padding:12px;resize:vertical}
.card-view.light .idea-box textarea{color:#111}

/* office */
.office{padding:10px var(--pad) 60px;max-width:760px;margin:0 auto}
.points-hero{background:linear-gradient(140deg,#2A2E77,#191C4A);border-radius:24px;padding:22px;text-align:center;margin:12px 0}
.points-hero .pv{font-family:var(--display);font-size:52px;font-weight:900;color:var(--gold)}
.points-hero .pl{color:var(--muted);font-weight:700}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.badge{background:var(--surface);border-radius:999px;padding:8px 12px;font-weight:700;font-size:13px}
.o-sec{background:var(--surface);border-radius:18px;padding:14px 16px;margin:12px 0}
.o-sec h3{font-size:15px;margin-bottom:8px}
.idea-item{border-left:3px solid var(--gold);padding:4px 0 4px 10px;margin:10px 0;font-size:14.5px}
.idea-item .im{font:600 11px var(--mono);color:var(--muted)}
.prof-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.prof-chip{padding:9px 14px;border-radius:999px;background:var(--surface2);font-weight:800}
.prof-chip.active{background:var(--gold);color:#221a00}
.rules{font-size:14px;color:var(--muted)}
.rules b{color:var(--ink)}

/* profile overlay */
.overlay{position:fixed;inset:0;z-index:80;background:rgba(10,11,34,.9);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:24px}
.dialog{background:var(--surface);border-radius:24px;padding:22px;max-width:360px;width:100%}
.dialog h2{font-size:20px;margin-bottom:6px}
.dialog p{color:var(--muted);font-size:14px}
.dialog input{width:100%;padding:12px 14px;border-radius:14px;border:1.5px solid var(--surface2);
  background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;margin:10px 0}

/* toast */
#toast-layer{position:fixed;top:calc(14px + env(safe-area-inset-top));left:0;right:0;z-index:190;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--gold);color:#221a00;font-weight:800;padding:10px 16px;border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.4);animation:pop-in .25s, fade-out .4s 1.8s forwards}
@keyframes pop-in{from{transform:translateY(-14px) scale(.9);opacity:0}}
@keyframes fade-out{to{transform:translateY(-10px);opacity:0}}

/* ---------- BRAND INTROS ---------- */
#intro-layer{position:fixed;inset:0;z-index:200;display:none}
#intro-layer.show{display:flex;align-items:center;justify-content:center;flex-direction:column}
.intro-tag{position:absolute;bottom:calc(56px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;
  font-weight:800;font-size:18px;opacity:0;animation:tag-in .5s .8s forwards}
@keyframes tag-in{to{opacity:1}}
.intro-skip{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;color:rgba(255,255,255,.6);
  font-weight:700;font-size:13px}

/* apple boot */
.in-apple{background:#000}
.in-apple .apple-mark{width:96px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.85}50%{opacity:1;filter:drop-shadow(0 0 14px rgba(255,255,255,.35))}}
.in-apple .boot{width:150px;height:4px;border-radius:4px;background:#222;margin-top:36px;overflow:hidden}
.in-apple .boot span{display:block;height:100%;width:0;background:#fff;animation:boot 1.9s ease-out forwards}
@keyframes boot{to{width:100%}}

/* netflix */
.in-netflix{background:#000}
.n-mark{position:relative;width:110px;height:150px;transform:scale(.6);opacity:0;animation:n-in .9s .1s forwards}
@keyframes n-in{to{transform:scale(1);opacity:1}}
.n-mark i{position:absolute;top:0;bottom:0;width:34px;background:#B00610;border-radius:3px}
.n-mark i:nth-child(1){left:0}
.n-mark i:nth-child(3){right:0}
.n-mark i:nth-child(2){left:38px;width:34px;background:#E50914;transform:skewX(21deg) scaleX(1.25);
  box-shadow:0 0 34px rgba(229,9,20,.8)}
.in-netflix .glow{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(229,9,20,.22),transparent 60%);
  opacity:0;animation:glow-in .7s .6s forwards}
@keyframes glow-in{to{opacity:1}}

/* mcdonalds */
.in-mcd{background:#DA291C}
.in-mcd .m-arches{width:130px;transform:translateY(60px) scale(.7);opacity:0;animation:m-rise .8s cubic-bezier(.2,1.4,.4,1) .1s forwards}
@keyframes m-rise{to{transform:translateY(0) scale(1);opacity:1}}
.in-mcd .intro-tag{color:#FFC72C;font-family:var(--display)}

/* coca-cola */
.in-cola{background:#F40009;overflow:hidden}
.in-cola .ribbon{width:220px;opacity:0;animation:rib .8s .15s forwards}
@keyframes rib{from{transform:translateX(-40px)}to{opacity:1;transform:none}}
.bubble{position:absolute;bottom:-30px;border-radius:50%;background:rgba(255,255,255,.35);animation:rise 2.6s linear infinite}
@keyframes rise{to{transform:translateY(-110vh)}}
.in-cola .intro-tag{color:#fff;font-family:'Snell Roundhand','Marck Script',cursive;font-size:26px}

/* tesla */
.in-tesla{background:#000}
.in-tesla .hline{position:absolute;top:50%;left:50%;height:2px;width:0;background:#E82127;
  box-shadow:0 0 18px rgba(232,33,39,.9);animation:hgrow .7s .1s forwards}
@keyframes hgrow{to{width:88vw;left:6vw}}
.in-tesla .t-mark{width:88px;opacity:0;transform:translateY(14px);animation:t-in .7s .5s forwards}
@keyframes t-in{to{opacity:1;transform:none}}

/* youtube */
.in-yt{background:#fff}
.in-yt .yt-btn{width:150px;transform:scale(.3);opacity:0;animation:yt-pop .55s cubic-bezier(.2,1.6,.4,1) .1s forwards}
@keyframes yt-pop{to{transform:scale(1);opacity:1}}
.in-yt .intro-tag{color:#0f0f0f}
.in-yt .intro-skip{color:rgba(0,0,0,.45)}

/* generic intro (для нових карток) */
.in-generic .g-logo{max-width:70vw;max-height:34vh;transform:scale(.7);opacity:0;animation:yt-pop .6s .1s forwards}

/* ============ v3: «нескінченна інформація» (розділи 3 і 4 контракту) ============ */

/* блок питань у кінці розділу */
.ask{margin-top:16px;padding-top:14px;border-top:1px solid var(--panel-br,rgba(255,255,255,.14))}
.card-view.light .ask{border-top-color:rgba(0,0,0,.12)}
.ask-row{display:flex;flex-wrap:wrap;gap:8px}
.ask-more{padding:10px 16px;font-size:14px}
.ask-form{display:flex;gap:8px;margin-top:10px}
.ask-input{flex:1;min-width:0;border-radius:999px;padding:11px 16px;font-family:var(--body);font-size:15px;
  border:1.5px solid var(--panel-br,rgba(255,255,255,.16));background:var(--panel,rgba(255,255,255,.06));color:inherit}
.card-view.light .ask-input{color:#111;background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.12)}
.ask-input::placeholder{color:var(--muted);opacity:.9}
.ask-go{padding:11px 16px;font-size:14px}

/* ланцюжок «а чому»: питання й відповіді нанизані на одну лінію */
.ask-out:not(:empty){margin-top:14px;display:flex;flex-direction:column;gap:14px}
.ask-item{position:relative;padding-left:16px}
.ask-item::before{content:"";position:absolute;left:3px;top:6px;bottom:2px;width:2px;border-radius:2px;
  background:var(--acc,var(--gold));opacity:.45}
.ask-item+.ask-item::after{content:"";position:absolute;left:3px;top:-14px;height:14px;width:2px;
  background:var(--acc,var(--gold));opacity:.2}
.ask-q{font:700 13px var(--mono);letter-spacing:.01em;color:var(--acc,var(--gold));margin-bottom:6px}
.card-view.light .ask-q{color:#111;opacity:.75}
.ask-a{font-size:15.5px;line-height:1.6}
.ask-a p{margin:.45em 0}
.ask-a h4{font:800 15px var(--display);margin:14px 0 4px}
.ask-a ul,.ask-a ol{margin:.4em 0;padding-left:1.15em}
.ask-a li{margin:.25em 0}
.ask-a.wait{color:var(--muted);font-style:italic}
.ask-a.wait::after{content:"·";animation:dots 1.1s steps(4,end) infinite}
@keyframes dots{0%{content:"·"}33%{content:"··"}66%{content:"···"}}
.ask-a.err{color:var(--bad);font-size:14.5px}
.ask-tag{font:700 11px var(--mono);color:var(--muted);margin-top:8px;letter-spacing:.02em}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{padding:8px 13px;border-radius:999px;font-weight:700;font-size:13.5px;
  background:var(--panel,rgba(255,255,255,.08));border:1px solid var(--panel-br,rgba(255,255,255,.14))}
.card-view.light .chip{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.1)}
.chip:active{transform:scale(.96)}

/* перемикач Дитина / Дорослий */
.mode-sw{display:inline-flex;gap:2px;margin-top:14px;padding:3px;border-radius:999px;
  background:rgba(0,0,0,.22);backdrop-filter:blur(6px)}
.card-view.light .mode-sw{background:rgba(0,0,0,.08)}
.mode-sw button{padding:7px 14px;border-radius:999px;font-weight:800;font-size:13px;color:inherit;opacity:.7}
.mode-sw button.on{background:var(--ctext,#fff);color:var(--c1,#111);opacity:1}
.card-view.light .mode-sw button.on{background:#111;color:#fff}

/* дорослий шар: інший регістр — монотипні заголовки, тонкі лінійки */
.adult-panel{margin:14px var(--pad) 0;padding:16px 18px;border-radius:18px;
  background:var(--panel,rgba(255,255,255,.06));border:1px solid var(--panel-br,rgba(255,255,255,.16))}
.card-view.light .adult-panel{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1)}
.ap-head{font:700 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.ap-sub{font-size:13px;color:var(--muted);margin:6px 0 12px}
.card-view.light .ap-sub{color:#555}
.ap-body h4{font:700 12.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  margin:16px 0 6px;padding-top:10px;border-top:1px solid var(--panel-br,rgba(255,255,255,.12));opacity:.85}
.ap-body h4:first-child{margin-top:0;padding-top:0;border-top:0}
.ap-body{font-size:15px}
.ap-body ol{padding-left:1.2em}
.ap-note{font-size:12.5px;color:var(--muted);margin-top:10px}
.flowline{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;margin:10px 0 2px;
  padding-bottom:6px;-webkit-overflow-scrolling:touch}
.flowline .flow{flex:none;padding:7px 12px;border-radius:10px;font:700 12.5px var(--mono);
  background:var(--acc,var(--gold));color:#0b0b0b;opacity:.92}
.flowline i{flex:none;font-style:normal;opacity:.5;font-size:13px}

/* лічильник витрат у Моєму офісі */
.meter{height:8px;border-radius:8px;background:var(--surface2);overflow:hidden;margin:4px 0 10px}
.meter span{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--ok),var(--gold))}

/* екран «Що ми вже дізналися» */
.learn-search{width:100%;border-radius:999px;padding:12px 18px;margin:6px 0 4px;font-family:var(--body);font-size:15px;
  border:1.5px solid var(--surface2);background:var(--surface);color:var(--ink)}
.learn-search::placeholder{color:var(--muted)}
.learn-row{border-top:1px solid rgba(255,255,255,.07)}
.learn-row:first-of-type{border-top:0}
.learn-q{display:block;width:100%;text-align:left;padding:11px 0;font-weight:700;font-size:14.5px;line-height:1.45}
.learn-q::before{content:"›";display:inline-block;width:16px;color:var(--gold);font-weight:900;transition:transform .15s}
.learn-row.open .learn-q::before{transform:rotate(90deg)}
.learn-badge{font:700 10px var(--mono);background:var(--surface2);border-radius:999px;padding:2px 7px;vertical-align:middle}
.learn-a{display:none;font-size:15px;color:var(--ink);padding:0 0 12px 16px;border-left:2px solid var(--surface2)}
.learn-row.open .learn-a{display:block}
.learn-a h4{font:800 14px var(--display);margin:12px 0 4px}
.learn-a .chip{margin-top:10px}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
}