/* ============ Hero Demo: vertical chooser + mock iPhone call + widget ============ */

.hd{position:relative}
.hd-shell{background:var(--surface); border:1px solid var(--border-2); border-radius:var(--radius-lg); box-shadow:var(--sh-3); overflow:hidden}
.hd-bar{display:flex; align-items:center; gap:10px; padding:13px 17px; border-bottom:1px solid var(--border); background:var(--surface-2)}
.hd-bar .live{margin-left:auto}
.hd-back{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink-3); background:none; border:0; cursor:pointer; padding:4px 8px; border-radius:8px; transition:.15s}
.hd-back:hover{color:var(--ink); background:var(--surface-3)}
.hd-back svg{transform:rotate(180deg)}
.hd-title{font-size:13px; font-weight:600; color:var(--ink-2); display:flex; align-items:center; gap:8px}

/* try-it ribbon */
.hd-try{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-700)}
.hd-try .pip{width:7px;height:7px;border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent); animation:pip 1.8s infinite}

/* ---------- chooser ---------- */
.hd-choose{padding:26px 24px 28px}
.hd-choose-h{text-align:center; margin-bottom:20px}
.hd-choose-h .k{font-size:19px; font-weight:700; letter-spacing:-.02em}
.hd-choose-h .s{font-size:13.5px; color:var(--ink-3); margin-top:6px; line-height:1.45; max-width:40ch; margin-inline:auto}
.hd-verts{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.hd-vert{display:flex; align-items:center; gap:13px; padding:15px 16px; border-radius:14px; border:1px solid var(--border-2); background:var(--surface-2); cursor:pointer; transition:.16s; text-align:left}
.hd-vert:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--sh-2); background:var(--surface)}
.hd-vert .vi{width:42px;height:42px;border-radius:12px; display:grid; place-items:center; color:#fff; flex-shrink:0; box-shadow:var(--sh-1)}
.hd-vert .vk{font-size:15px; font-weight:700; letter-spacing:-.01em; line-height:1.1}
.hd-vert .vs{font-size:11.5px; color:var(--ink-3); margin-top:3px}
.hd-vert .va{margin-left:auto; color:var(--ink-4); opacity:0; transition:.16s}
.hd-vert:hover .va{opacity:1; color:var(--accent); transform:translateX(2px)}
.hd-brand-row{margin-top:16px; display:flex; gap:10px; align-items:center; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:6px 6px 6px 14px}
.hd-brand-row .lbl{font-size:12.5px; color:var(--ink-3); white-space:nowrap}
.hd-brand-row input{flex:1; border:0; background:none; font-family:inherit; font-size:14px; color:var(--ink); outline:none; min-width:0}
.hd-brand-row input::placeholder{color:var(--ink-4)}
.hd-choose-foot{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px; font-size:12px; color:var(--ink-4)}

/* ---------- stage (phone / widget) ---------- */
.hd-stage{padding:22px; background:var(--bg-2); position:relative; min-height:520px}
.hd-modes{display:inline-flex; padding:4px; gap:3px; background:var(--surface-3); border:1px solid var(--border); border-radius:12px; margin:0 auto 18px; display:flex; width:max-content}
.hd-mode{border:0; background:none; padding:9px 18px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--ink-3); transition:.16s; display:flex; align-items:center; gap:8px; cursor:pointer}
.hd-mode.on{background:var(--surface); color:var(--ink); box-shadow:var(--sh-1)}
.hd-mode.on.call{color:var(--success)}
.hd-modes-wrap{display:flex; justify-content:center}
.hd-mode-hint{text-align:center; font-size:12px; color:var(--ink-4); margin:-8px 0 16px}

/* ---------- iPhone ---------- */
.iphone{width:300px; margin:0 auto; border-radius:46px; background:#0c0e16; padding:11px; box-shadow:0 2px 6px rgba(0,0,0,.2), 0 30px 60px -20px rgba(20,27,41,.5), inset 0 0 0 2px #2a2d3a; position:relative}
.iphone-screen{border-radius:36px; overflow:hidden; background:#0b1020; position:relative; height:600px; display:flex; flex-direction:column}
.iphone-island{position:absolute; top:11px; left:50%; transform:translateX(-50%); width:92px; height:27px; background:#000; border-radius:100px; z-index:20}
.ios-status{display:flex; align-items:center; justify-content:space-between; padding:13px 24px 0; color:#fff; font-size:13px; font-weight:600; z-index:10; position:relative}
.ios-status .r{display:flex; align-items:center; gap:6px}
.ios-status svg{display:block}

/* call backdrop */
.call-bg{position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 42%,#0b1020) 0%, #131a36 58%, #0b1020 100%);}

.call-screen{position:relative; z-index:5; flex:1; display:flex; flex-direction:column; align-items:center; padding:14px 20px 24px; color:#fff}
.call-top{text-align:center; margin-top:18px}
.call-avatar{width:92px;height:92px;border-radius:50%; margin:0 auto 16px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:30px; font-family:var(--mono); box-shadow:0 8px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.18); position:relative}
.call-avatar.ringing::after{content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid rgba(255,255,255,.3); animation:ringpulse 1.4s ease-out infinite}
@keyframes ringpulse{0%{transform:scale(.92); opacity:.8}100%{transform:scale(1.25); opacity:0}}
.call-name{font-size:23px; font-weight:600; letter-spacing:-.01em}
.call-sub{font-size:14px; color:rgba(255,255,255,.7); margin-top:5px; display:flex; align-items:center; justify-content:center; gap:7px}
.call-sub .call-timer{font-variant-numeric:tabular-nums; font-family:var(--mono)}
.call-session{margin-top:7px; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:rgba(255,255,255,.6); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); padding:3px 9px; border-radius:100px}

/* live captions */
.call-cap{flex:1; width:100%; min-height:0; margin-top:18px; display:flex; flex-direction:column; gap:9px; overflow-y:auto; justify-content:flex-start; padding-bottom:8px}
.call-cap::-webkit-scrollbar{width:0}
.cap-b{flex-shrink:0; max-width:86%; padding:10px 13px; border-radius:15px; font-size:13.5px; line-height:1.4; animation:capin .4s cubic-bezier(.2,.7,.2,1)}
@keyframes capin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.cap-b.jess{align-self:flex-start; background:rgba(255,255,255,.14); color:#fff; border-bottom-left-radius:5px; backdrop-filter:blur(6px)}
.cap-b.me{align-self:flex-end; background:#fff; color:#13183a; font-weight:500; border-bottom-right-radius:5px}
.cap-typing{align-self:flex-start; display:flex; gap:4px; padding:12px 14px; background:rgba(255,255,255,.14); border-radius:15px; border-bottom-left-radius:5px}
.cap-typing i{width:6px;height:6px;border-radius:50%; background:rgba(255,255,255,.7); animation:typ 1.2s infinite}
.cap-typing i:nth-child(2){animation-delay:.18s} .cap-typing i:nth-child(3){animation-delay:.36s}
@keyframes typ{0%,60%,100%{opacity:.3; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}

/* yes/no answer buttons */
.call-answers{display:flex; gap:9px; width:100%; margin-top:12px; animation:capin .4s}
.ans-btn{flex:1; padding:13px; border-radius:14px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); color:#fff; font-size:14.5px; font-weight:600; cursor:pointer; transition:.15s; backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; gap:8px}
.ans-btn:hover{background:rgba(255,255,255,.2); transform:translateY(-1px)}
.ans-btn.yes{background:#fff; color:#13183a; border-color:#fff}
.ans-btn.yes:hover{background:#eef0ff}

/* controls */
.call-ctrls{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; width:100%; max-width:230px; margin:14px auto 0}
.cc{display:flex; flex-direction:column; align-items:center; gap:6px}
.cc-btn{width:58px;height:58px;border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.14); color:#fff; border:0; cursor:pointer; transition:.15s; backdrop-filter:blur(6px)}
.cc-btn:hover{background:rgba(255,255,255,.24)}
.cc-btn.on{background:#fff; color:#13183a}
.cc-btn.end{background:#ff3b30} .cc-btn.end:hover{background:#e02d23}
.cc-btn.call{background:#34c759; width:66px;height:66px} .cc-btn.call:hover{background:#28a847}
.cc-lab{font-size:11px; color:rgba(255,255,255,.66)}

/* pre-call (idle) */
.call-idle{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:20px}
.call-idle .hint{font-size:13px; color:rgba(255,255,255,.6); margin-top:24px; text-align:center; max-width:24ch; line-height:1.4}
.call-cta-big{margin-top:8px}

/* SMS / iMessage screen */
.ios-msg{position:absolute; inset:0; background:#0b1020; z-index:30; display:flex; flex-direction:column; animation:msgin .45s cubic-bezier(.2,.7,.2,1)}
@keyframes msgin{from{transform:translateY(100%)}to{transform:none}}
.ios-msg-top{padding:40px 16px 12px; text-align:center; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(20,26,54,.6); backdrop-filter:blur(10px)}
.ios-msg-top .av{width:50px;height:50px;border-radius:50%; margin:0 auto 6px; display:grid; place-items:center; color:#fff; font-weight:700; font-family:var(--mono); font-size:16px}
.ios-msg-top .nm{color:#fff; font-size:14px; font-weight:600}
.ios-msg-top .meta{color:rgba(255,255,255,.5); font-size:11px; margin-top:2px}
.ios-msg-body{flex:1; padding:18px 14px; display:flex; flex-direction:column; gap:8px; overflow-y:auto}
.sms-time{text-align:center; font-size:10.5px; color:rgba(255,255,255,.4); margin:4px 0 6px; font-weight:600}
.sms-b{max-width:82%; align-self:flex-start; background:#26324f; color:#fff; padding:11px 14px; border-radius:18px; border-bottom-left-radius:5px; font-size:13.5px; line-height:1.45; animation:capin .4s}
.sms-b.offer{background:linear-gradient(150deg,#2b3a6b,#3a4ea8)}
.sms-b .ttl{font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:7px}
.sms-b .ln{display:block; opacity:.92}
.sms-b .cta{display:inline-block; margin-top:9px; font-size:12.5px; color:#aeb8ff; font-weight:600}
.ios-msg-input{padding:10px 14px 16px; border-top:1px solid rgba(255,255,255,.08); display:flex; gap:8px; align-items:center}
.ios-msg-input .fld{flex:1; height:34px; border-radius:100px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06)}
.ios-msg-close{display:flex; align-items:center; justify-content:center; gap:7px; margin:0 auto; padding:9px 16px; border-radius:100px; background:rgba(255,255,255,.12); color:#fff; border:0; font-size:12.5px; font-weight:600; cursor:pointer}

/* widget mode wrap */
.hd-widget-wrap{display:flex; justify-content:center}

/* integration slot note */
.hd-slot{margin-top:14px; text-align:center; font-size:11.5px; color:var(--ink-4); display:flex; align-items:center; justify-content:center; gap:7px}
.hd-slot code{font-family:var(--mono); font-size:11px; color:var(--accent-700); background:var(--accent-soft); padding:2px 7px; border-radius:6px; border:1px solid var(--accent-line)}

@media(max-width:980px){
  .hd-stage{min-height:0}
}

/* ============ iOS two-up stage (hero) ============ */
.ios-stage{position:relative; padding:6px 20px 72px; display:flex; flex-direction:column; align-items:center; overflow:hidden}
.ios-stage::before{content:""; position:absolute; left:50%; top:30px; transform:translateX(-50%); width:min(820px,92%); height:560px; z-index:0; pointer-events:none;
  background:
    radial-gradient(420px 280px at 28% 18%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 62%),
    radial-gradient(420px 300px at 78% 70%, color-mix(in srgb,#7b5fe0 16%,transparent), transparent 62%);
  filter:blur(14px); opacity:.7;}

.ios-stage-cap{position:relative; z-index:2; margin-bottom:16px}
.ios-eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-700)}
.ios-eyebrow .pip{width:7px;height:7px;border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent); animation:pip 1.8s infinite}

/* frosted-glass segmented tabs */
.ios-tabsbar{position:relative; z-index:3; margin-bottom:26px}
.ios-tabs{display:inline-flex; gap:4px; padding:5px; border-radius:100px;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 10px 34px rgba(20,27,41,.14), inset 0 1px 0 rgba(255,255,255,.8);}
.ios-tab{display:inline-flex; align-items:center; gap:8px; padding:11px 26px; border-radius:100px;
  font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink-2); cursor:pointer;
  border:0; background:transparent; transition:.22s cubic-bezier(.4,0,.2,1)}
.ios-tab:hover{color:var(--ink)}
.ios-tab.on{background:#fff; color:var(--ink); box-shadow:0 2px 9px rgba(20,27,41,.14)}
.ios-tab svg{opacity:.85}
.ios-tab.on svg{color:var(--accent); opacity:1}

/* two equal modules */
.ios-modules{position:relative; z-index:1; display:flex; justify-content:center; align-items:flex-start}
.ios-mod{min-width:0; transition:width .5s cubic-bezier(.4,0,.2,1), opacity .35s ease, transform .5s cubic-bezier(.4,0,.2,1); width:324px; flex:0 0 auto}
.ios-mod.is-phone{margin-right:60px}
.ios-mod.is-widget{margin-left:60px}
.ios-mod-inner{width:324px; display:flex; justify-content:center}
/* phone tab now hosts the standalone Nika-AI call film (iframe) — let it fill the column */
.ios-mod.is-phone .ios-mod-inner{width:100%}
.ios-modules.v-call .ios-mod.is-phone{width:100%; max-width:840px}
.phone-film{width:100%; height:clamp(580px,70vh,720px); border:0; display:block; background:transparent; border-radius:0}
/* clean white backdrop under the phone block (no colored glow) */
.ios-stage::before{display:none}
/* play / pause / replay control lifted to the tab-bar level (drives the iframe film) */
.ios-playbtn{position:absolute; right:calc(100% + 14px); top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center; cursor:pointer; padding:0;
  background:oklch(99% .003 263 / .72); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid oklch(86% .012 263 / .9); box-shadow:0 8px 20px -10px oklch(45% .06 263 / .45), inset 0 1px 0 oklch(100% 0 0 / .85);
  color:oklch(40% .03 263); transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .2s}
.ios-playbtn svg{width:18px; height:18px}
.ios-playbtn:hover{transform:translateY(-50%) scale(1.06)}
.ios-playbtn:active{transform:translateY(-50%) scale(.92)}
@media(max-width:560px){ .ios-playbtn{right:auto; left:14px} }
/* focus states — display:none reliably hides (and stops the widget's infinite
   animations) instead of a width transition that the animating subtree restarts */
.ios-modules.v-call .ios-mod.is-widget,
.ios-modules.v-widget .ios-mod.is-phone{display:none}
.ios-modules.v-call .ios-mod.is-phone,
.ios-modules.v-widget .ios-mod.is-widget{margin:0; animation:iosFocus .42s cubic-bezier(.2,.7,.2,1)}
@keyframes iosFocus{from{opacity:.35; transform:scale(.96)}to{opacity:1; transform:none}}

/* widget matched to iPhone footprint */
.ios-mod.is-widget .widget{width:324px; height:622px; border-radius:34px}
/* RU v2 phone + widget run as standalone iframes — give both columns the same
   wide footprint so the slide-right (phone) and the widget aren't clipped */
.ios-modules.v-call, .ios-modules.v-widget{justify-content:flex-start}
.ios-modules.v-call .ios-mod.is-phone,
.ios-modules.v-widget .ios-mod.is-widget{width:100% !important; max-width:750px}
.ios-mod.is-widget .ios-mod-inner{width:100%}
.ios-mod.is-widget .phone-film{height:clamp(620px,76vh,820px)}

/* Jess avatar photo */
.call-avatar.jess-ava{background-size:cover; background-position:center top; background-repeat:no-repeat}

@media(max-width:760px){
  .ios-modules{flex-direction:column; align-items:center}
  .ios-mod{width:324px !important}
  .ios-modules.v-call .ios-mod.is-phone{width:100% !important; max-width:420px}
  .phone-film{height:78vh; min-height:520px}
  .ios-mod.is-phone,.ios-mod.is-widget{margin:0 0 18px}
  .ios-modules.v-call .ios-mod.is-widget,
  .ios-modules.v-widget .ios-mod.is-phone{height:0; width:324px !important; margin:0; opacity:0}
}

/* ============ Frosted-glass segmented controls — site-wide ============ */
.seg, .ck-toggle, .uc2-tabs{
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 10px 34px rgba(20,27,41,.12), inset 0 1px 0 rgba(255,255,255,.8);
  border-radius:100px; padding:5px;
}
.seg-btn{border-radius:100px; transition:.22s cubic-bezier(.4,0,.2,1)}
.seg-btn.on, .seg-btn.on.safe, .seg-btn.on.danger{background:#fff; box-shadow:0 2px 9px rgba(20,27,41,.14)}
/* win over more-specific container rules (e.g. .rev-bar .seg) for the pill radius */
.seg.seg, .ck-toggle.ck-toggle, .uc2-tabs.uc2-tabs{border-radius:100px}
/* text-only tabs: drop the leading icon */
.ios-tab svg, .seg-btn svg{display:none}
.ios-tab, .seg-btn{gap:0}