.hero{
  padding:72px 0 var(--section-pad-y);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:56px;
  align-items:start;
}

/* ---- Left: copy + scanner ---- */
.hero-copy{
  position:relative;
}
/* A very soft depth glow behind the headline — barely visible, just
   enough to lift the text off the flat page background. */
.hero-copy::before{
  content:"";
  position:absolute;
  top:-60px;left:-80px;
  width:420px;height:420px;
  background:radial-gradient(circle, rgba(49,87,255,.07), transparent 70%);
  filter:blur(10px);
  pointer-events:none;
  z-index:0;
}
.hero-copy > *{
  position:relative;
  z-index:1;
}
.social-proof-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:var(--radius-pill);
  background:var(--surface-alt);
  border:1px solid var(--border);
  color:var(--text-secondary);
  font-size:0.9rem;
  margin-bottom:26px;
  transition:border-color .12s ease, background-color .12s ease;
}
.social-proof-pill:hover{
  border-color:var(--border-strong);
  background:#eef0f6;
}
.social-proof-pill .dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--success);
  flex-shrink:0;
}
.social-proof-pill strong{color:var(--text-primary);}
.social-proof-pill svg{width:14px;height:14px;flex-shrink:0;color:var(--text-tertiary);}

.hero-copy .eyebrow{
  margin-bottom:22px;
}
.hero-copy h1{
  font-family:var(--font-sans);
  /* Capped so the nowrap lead line still fits inside the copy column. */
  font-size:clamp(1.9rem, 3.1vw, 2.75rem);
  line-height:1.18;
  font-weight:800;
  letter-spacing:-0.03em;
  margin-bottom:22px;
}
/* The one clear anchor: bigger and bolder than everything else in the
   hero, so it reads first without a fight from the line under it. */
.hero-copy h1 .line-lead{
  display:block;
  font-size:1.32em;
  line-height:1.08;
  white-space:nowrap;
}
/* A genuinely light subtitle, not a second headline: smaller, lighter
   weight, a softened tint of the brand color, and looser tracking so
   it visibly steps back from the line above it. */
.hero-copy h1 .line-accent{
  display:block;
  margin-top:14px;
  font-size:0.62em;
  font-weight:500;
  line-height:1.45;
  letter-spacing:-0.005em;
  color:#7b84c4;
}
.hero-sub{
  font-size:1.05rem;
  font-weight:400;
  color:var(--text-secondary);
  max-width:600px;
  margin-bottom:26px;
}

.domain-scanner{
  max-width:600px;
  margin-top:-8px;
}
.domain-scanner .field-row{
  padding:8px;
}
.domain-scanner .field-row input{
  font-size:1.05rem;
}
.domain-scanner button{flex-shrink:0;}
.domain-scanner .btn-primary{
  background:var(--navy);
  font-size:1rem;
}
.domain-scanner .btn-primary:hover{background:#152352;}
.domain-scanner .helper-text{
  font-size:0.95rem;
}

.trust-points{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:20px;
}
.trust-points li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.86rem;
  color:var(--text-secondary);
  font-weight:500;
}
.trust-points svg{
  width:15px;height:15px;
  color:var(--success-text);
  flex-shrink:0;
}

/* scan result (revealed after submit) */
.scan-inline-result{
  margin-top:20px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  background:var(--brand-primary-soft);
  border:1px solid rgba(49,87,255,0.18);
  font-size:0.86rem;
  color:var(--text-primary);
  display:flex;
  align-items:center;
  gap:10px;
}
.scan-inline-result svg{width:16px;height:16px;color:var(--brand-primary);flex-shrink:0;}
.scan-inline-result.error{
  background:var(--danger-bg);
  border-color:var(--danger-border);
  color:var(--danger);
}
.scan-inline-result.error svg{color:var(--danger);}

.spinner{
  width:14px;height:14px;
  border:2px solid rgba(49,87,255,0.25);
  border-top-color:var(--brand-primary);
  border-radius:50%;
  animation:spin .7s linear infinite;
  flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- Right: Talk to Sekorti ---- */
.talk-panel{
  background:var(--navy);
  border-radius:var(--radius-lg);
  padding:22px 24px 25px;
  color:#fff;
  box-shadow:
    18px 44px 80px -30px rgba(8,14,36,.55),
    0 22px 46px -24px rgba(8,14,36,.3),
    0 0 100px 8px rgba(70,110,255,.14),
    0 0 42px 2px rgba(93,131,255,.2);
  position:relative;
  overflow:hidden;
  /* Stretch to the copy column and stop level with the scanner button's
     border, so the two sides stay aligned at any viewport width. */
  align-self:stretch;
  margin-top:-10px;
  margin-bottom:9px;
  display:flex;
  flex-direction:column;
}
.talk-panel-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.talk-panel .panel-sub{
  margin-bottom:6px;
  text-align:center;
  color:var(--text-on-navy-dim);
  font-size:0.82rem;
  line-height:1.5;
}

.orb-stage{
  position:relative;
  height:224px;
  display:flex;
  align-items:center;
  justify-content:center;
  /* auto margins here + on the CTA row centre the orb/button group in the
     space left below the caption, which stays pinned to the top. */
  margin:auto 0 2px;
}

/* ============================================================
   The Sekorti Core — glow > sonar pulses > two tilted scanning
   rings > radar sweep > orbiting telemetry particles > a solid
   core at the center.
   ============================================================ */
.sek-orb{
  position:relative;
  width:220px;height:220px;
}

.sek-glow{
  position:absolute;inset:-22%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(109,93,252,.45), rgba(49,87,255,.12) 55%, transparent 72%);
  filter:blur(10px);
  animation:sekGlowPulse 8.3s ease-in-out infinite;
}

/* Sonar pings expanding outward */
.sek-pulse{
  position:absolute;inset:18%;
  border-radius:50%;
  border:1px solid rgba(122,217,255,.55);
  animation:sekPulseOut 6s ease-out infinite;
}
.sek-pulse.p2{animation-delay:3s;}

/* Tilted rotating rings: a static tilt wrapper + an inner spinner
   painted with a conic gradient and masked into a ring, so the
   bright arc travels around an already-tilted ellipse. */
.sek-ring-tilt{
  position:absolute;inset:0;
  border-radius:50%;
}
.sek-ring-tilt.rt1{transform:rotate(-20deg) scaleY(0.4);}
.sek-ring-tilt.rt2{inset:9%;transform:rotate(35deg) scaleY(0.52);}

.sek-ring-spin{
  position:absolute;inset:0;
  border-radius:50%;
  -webkit-mask-image:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask-image:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.sek-ring-spin.rs1{
  background:conic-gradient(from 0deg,
    transparent 0deg, transparent 250deg,
    rgba(122,217,255,.95) 300deg, rgba(122,217,255,0) 360deg);
  animation:sekSpin 11.7s linear infinite;
}
.sek-ring-spin.rs2{
  background:conic-gradient(from 0deg,
    transparent 0deg, transparent 230deg,
    #6d5dfc 300deg, rgba(109,93,252,0) 360deg);
  animation:sekSpin 9.2s linear infinite reverse;
}

/* Radar sweep across the sphere's face */
.sek-sweep{
  position:absolute;inset:14%;
  border-radius:50%;
  background:conic-gradient(from 0deg, rgba(122,217,255,.4), transparent 22%);
  mix-blend-mode:screen;
  animation:sekSpin 5.3s linear infinite;
}

/* Orbiting telemetry particles */
.sek-orbit{
  position:absolute;
  border-radius:50%;
}
.sek-orbit .sek-dot{
  position:absolute;top:0;left:50%;
  width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;
  background:#dff1ff;
  box-shadow:0 0 10px 3px rgba(122,217,255,.9);
}
.sek-orbit.o1{inset:2%;animation:sekSpin 7.5s linear infinite;}
.sek-orbit.o2{inset:10%;animation:sekSpin 10.8s linear infinite reverse;}
.sek-orbit.o3{inset:-6%;animation:sekSpin 15s linear infinite;}
.sek-orbit.o2 .sek-dot{background:#c9beff;box-shadow:0 0 10px 3px rgba(157,138,255,.9);}
.sek-orbit.o3 .sek-dot{
  width:5px;height:5px;margin-left:-2.5px;
  background:#7cf5e0;
  box-shadow:0 0 10px 3px rgba(124,245,224,.85);
}

/* The core: a saturated, charged sphere — cooler and brighter than a
   pale pearl, with a crisp rim so it reads as active, not decorative. */
.sek-core{
  position:absolute;inset:33%;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 32% 26%, #d8f6ff 0%, #7fd3ff 24%, #3f96ff 54%, #2f5fe0 82%, #223fb0 100%);
  box-shadow:
    0 10px 24px -6px rgba(20,10,60,.5),
    0 0 26px 3px rgba(93,197,255,.45),
    inset 0 2px 6px rgba(255,255,255,.75),
    inset 0 -8px 14px rgba(15,40,120,.45),
    inset 0 0 0 1px rgba(214,244,255,.3);
  animation:sekCoreMorph 12s ease-in-out infinite;
}

@keyframes sekSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes sekGlowPulse{0%,100%{opacity:.75;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}
@keyframes sekCoreMorph{
  0%,100%{border-radius:50%;transform:rotate(0deg);}
  25%{border-radius:46% 54% 60% 40% / 50% 46% 54% 50%;transform:rotate(90deg);}
  50%{border-radius:60% 40% 44% 56% / 44% 58% 42% 56%;transform:rotate(180deg);}
  75%{border-radius:42% 58% 50% 50% / 58% 42% 58% 42%;transform:rotate(270deg);}
}
@keyframes sekPulseOut{
  0%{transform:scale(0.75);opacity:.7;}
  70%{opacity:.15;}
  100%{transform:scale(1.55);opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .sek-glow,.sek-pulse,.sek-ring-spin,.sek-sweep,.sek-orbit,.sek-core{animation:none;}
}

.talk-chat-input{
  display:none;
  margin-bottom:14px;
}
.talk-chat-input.open{display:flex;}
.talk-chat-input .field-row{
  background:rgba(255,255,255,0.06);
  border-color:var(--border-on-navy);
}
.talk-chat-input input{color:#fff;}
.talk-chat-input input::placeholder{color:var(--text-on-navy-dim);}
.talk-chat-input button:disabled{opacity:.5;cursor:not-allowed;}

.voice-note{
  font-size:0.74rem;
  color:var(--text-on-navy-dim);
  margin:-8px 0 14px;
  display:flex;
  align-items:center;
  gap:6px;
}
.voice-note svg{width:12px;height:12px;}

/* ---- Panel footer: "or" divider + domain scanner ---- */
.panel-scan{
  margin-top:21px;
}
.panel-or{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  font-size:0.78rem;
  color:var(--text-on-navy-dim);
  margin-bottom:12px;
}
.panel-or::before,
.panel-or::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border-on-navy);
}
.panel-scan .field-row{
  background:rgba(255,255,255,0.04);
  border-color:var(--border-on-navy);
  padding:4px;
}
.panel-scan .field-icon{
  color:rgba(168,179,209,.5);
  padding-left:8px;
}
.panel-scan .field-icon svg{width:15px;height:15px;}
.panel-scan input{
  color:#e7ecff;
  font-size:0.85rem;
  padding:8px 6px;
}
.panel-scan input::placeholder{color:rgba(168,179,209,.55);}
/* Same navy as the scanner button on the light side, with a hairline
   border so it still reads against the panel. */
.panel-scan-btn{
  flex-shrink:0;
  gap:7px;
  padding:8px 14px;
  border-radius:8px;
  background:var(--navy);
  border:1px solid rgba(148,180,255,.28);
  color:rgba(255,255,255,.9);
  font-size:0.81rem;
  font-weight:600;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.panel-scan-btn svg{width:13px;height:13px;}
.panel-scan-btn:hover{
  background:#152352;
  border-color:rgba(148,180,255,.5);
  color:#fff;
}
.panel-scan-note{
  margin-top:10px;
  text-align:center;
  font-size:0.76rem;
  color:var(--text-on-navy-dim);
}
.panel-scan .scan-inline-result{
  margin-top:12px;
  background:rgba(255,255,255,0.06);
  border-color:var(--border-on-navy);
  color:#fff;
}

.talk-reply{
  display:none;
  padding:14px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border-on-navy);
  font-size:0.85rem;
  color:var(--text-on-navy-dim);
  margin-bottom:14px;
  line-height:1.55;
}
.talk-reply.open{display:block;}
.talk-reply strong{color:#fff;display:block;margin-bottom:6px;font-size:0.85rem;}

.talk-caption{
  text-align:center;
  font-size:0.74rem;
  color:var(--text-on-navy-dim);
  padding-top:8px;
  border-top:1px solid var(--border-on-navy);
}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .talk-panel{max-width:520px;}
  /* Columns stack here, so there's no panel beside the headline left to
     clear — let the first line wrap instead of forcing an overflow. */
  .hero-copy h1 .line-lead{white-space:normal;}
}

@media (max-width: 560px){
  .domain-scanner .field-row{flex-wrap:wrap;}
  .domain-scanner .field-row input{flex-basis:100%;}
  .domain-scanner .field-row .btn{width:100%;margin-top:6px;}
}

.talk-play:focus-visible,
.talk-speak:focus-visible,
.talk-mic:focus-visible,
.talk-send:focus-visible,
.voice-note-ok:focus-visible{outline:2px solid #7fd3ff;outline-offset:2px;}

.voice-note span{flex:1;}
.voice-note-ok{
  flex-shrink:0;
  padding:3px 12px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border-on-navy);
  background:rgba(255,255,255,.08);
  color:#fff;font-size:0.74rem;font-weight:600;cursor:pointer;
}
.voice-note-ok:hover{background:rgba(255,255,255,.16);}

.talk-composer button:disabled{opacity:.5;cursor:not-allowed;}

.talk-play{
  align-self:center;
  margin:-4px 0 14px;
  padding:7px 16px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border-on-navy);
  background:rgba(255,255,255,.08);
  color:#fff;font-size:0.82rem;font-weight:600;cursor:pointer;
}
.talk-play:hover{background:rgba(255,255,255,.16);}

/* ============================================================
   Voice-agent layout (#talkPanel only).
   ============================================================ */
#talkPanel{--mic:0;}

#talkPanel[data-state="error"] .talk-status{color:#ffb4ad;}
.talk-dots,.talk-wave{display:none;}
.talk-status[data-deco="dots"] .talk-dots{display:inline-flex;gap:3px;}
.talk-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;animation:talkDot 1.2s ease-in-out infinite;}
.talk-dots i:nth-child(2){animation-delay:.2s;}
.talk-dots i:nth-child(3){animation-delay:.4s;}
@keyframes talkDot{0%,80%,100%{opacity:.25;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}
#talkPanel .talk-status[data-deco="wave"] .talk-wave{display:inline-flex;align-items:center;gap:3px;height:18px;}
.talk-wave i{
  width:3px;height:18px;border-radius:2px;background:#7cf5e0;
  transform:scaleY(calc(.2 + var(--mic) * var(--k, .8)));
  transition:transform .08s linear;
}
.talk-wave i:nth-child(1),.talk-wave i:nth-child(7){--k:.4;}
.talk-wave i:nth-child(2),.talk-wave i:nth-child(6){--k:.65;}
.talk-wave i:nth-child(3),.talk-wave i:nth-child(5){--k:.85;}
.talk-wave i:nth-child(4){--k:1;}


.talk-speak[aria-pressed="false"] .speak-wave{display:none;}
.talk-speak[aria-pressed="true"] .speak-off{display:none;}
.talk-speak[aria-pressed="true"]{color:#7fd3ff;}
/* Answer bubble: capped height, scrolls for long answers. */

.talk-reply.is-thinking .talk-reply-text{
  display:block;height:6px;margin-top:10px;border-radius:3px;
  background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(124,245,224,.35),rgba(255,255,255,.08));
  background-size:200% 100%;animation:talkShimmer 1.4s linear infinite;
}
@keyframes talkShimmer{from{background-position:200% 0;}to{background-position:-200% 0;}}


/* ============================================================
   Compact voice-agent layout: orb, one composer row, slim text.
   ============================================================ */
#talkPanel{padding:16px 18px 18px;}
#talkPanel .panel-sub{margin-bottom:0;font-size:0.8rem;line-height:1.35;}
#talkPanel .sek-orb{width:208px;height:208px;}

/* Status: overlays the foot of the orb stage, so it reserves no height and
   nothing moves when it appears. Faded out when idle. */
.talk-statusbar{position:relative;height:0;margin:0;}
.talk-status{
  position:absolute;left:0;right:0;bottom:4px;z-index:1;opacity:0;pointer-events:none;
  transition:opacity 220ms var(--orb-ease), color 400ms var(--orb-ease);
  margin:0;padding:0 6px;text-align:center;
  font-size:0.78rem;line-height:1.3;color:#fff;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;
  text-shadow:0 1px 6px rgba(8,14,36,.9);
}

.talk-composer{display:flex;align-items:center;gap:8px;margin-top:8px;}
.talk-composer .field-row{
  flex:1;min-width:0;
  background:rgba(255,255,255,.06);
  border-color:var(--border-on-navy);
  border-radius:var(--radius-pill);
  padding:2px 4px 2px 14px;
  gap:2px;
}
.talk-composer input{color:#fff;font-size:0.88rem;padding:9px 4px;}
.talk-composer input::placeholder{color:var(--text-on-navy-dim);}

/* Round mic button; becomes a round Stop button while a question is active. */
.talk-mic{
  position:relative;flex-shrink:0;
  width:44px;height:44px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  border:1px solid rgba(255,255,255,.14);color:#fff;cursor:pointer;
  box-shadow:0 6px 18px -6px rgba(74,92,255,.65);
  transition:filter .15s ease;
}
.talk-mic:hover{filter:brightness(1.1);}

.talk-speak{
  flex-shrink:0;width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:50%;cursor:pointer;
  color:var(--text-on-navy-dim);
}
.talk-speak:hover{color:#fff;}
.talk-speak svg{width:18px;height:18px;}
.talk-composer .talk-send{
  flex-shrink:0;width:38px;height:38px;padding:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border-on-navy);
}
.talk-composer .talk-send svg{width:16px;height:16px;}

#talkPanel .voice-note{margin:8px 0 0;}

/* One compact line for the question. */
.talk-you{
  margin:8px 0 0;font-size:0.8rem;line-height:1.4;color:#fff;
  display:flex;gap:8px;align-items:baseline;min-width:0;
}
.talk-you[hidden]{display:none;}
.talk-you-label{flex-shrink:0;font-size:0.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-on-navy-dim);}
.talk-you-text{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.talk-you.is-empty .talk-you-text{color:var(--text-on-navy-dim);font-style:italic;}

/* Typed answer box: small type, capped height, scrolls inside. */
#talkPanel .talk-reply{
  margin:6px 0 0;padding:10px 12px;
  font-size:0.8rem;line-height:1.5;
  max-height:104px;overflow-y:auto;
}
#talkPanel .talk-reply strong{margin-bottom:3px;font-size:0.76rem;}
.talk-play{margin:8px 0 0;align-self:center;}

/* ============================================================
   Orb motion system (#talkPanel). Tune the look from here:
   palettes per state + fade timings. Speeds are in js (ORB_*).
   ============================================================ */
@property --c-glow-a{syntax:"<color>";inherits:true;initial-value:rgba(109,93,252,.45);}
@property --c-glow-b{syntax:"<color>";inherits:true;initial-value:rgba(49,87,255,.12);}
@property --c-core-1{syntax:"<color>";inherits:true;initial-value:#d8f6ff;}
@property --c-core-2{syntax:"<color>";inherits:true;initial-value:#7fd3ff;}
@property --c-core-3{syntax:"<color>";inherits:true;initial-value:#3f96ff;}
@property --c-core-4{syntax:"<color>";inherits:true;initial-value:#2f5fe0;}
@property --c-core-5{syntax:"<color>";inherits:true;initial-value:#223fb0;}
@property --c-ring-1{syntax:"<color>";inherits:true;initial-value:rgba(122,217,255,.95);}
@property --c-ring-2{syntax:"<color>";inherits:true;initial-value:#6d5dfc;}
@property --c-pulse{syntax:"<color>";inherits:true;initial-value:rgba(122,217,255,.55);}
@property --c-dot-1{syntax:"<color>";inherits:true;initial-value:#dff1ff;}
@property --c-dot-2{syntax:"<color>";inherits:true;initial-value:#c9beff;}
@property --c-dot-3{syntax:"<color>";inherits:true;initial-value:#7cf5e0;}
@property --c-accent{syntax:"<color>";inherits:true;initial-value:rgba(122,217,255,.7);}
@property --ring-on{syntax:"<number>";inherits:true;initial-value:0;}
@property --ring-gain{syntax:"<number>";inherits:true;initial-value:0;}

#talkPanel{
  /* timings */
  --orb-fade:800ms;                              /* palette + tilt blend */
  --orb-ease:cubic-bezier(.45,0,.55,1);          /* ease-in-out */
  --orb-swell:800ms;                             /* swell when entering a state */
  --orb-settle:1100ms;                           /* settle back to idle */
  /* IDLE: calm blue (also the base every state blends back to) */
  --c-glow-a:rgba(109,93,252,.45); --c-glow-b:rgba(49,87,255,.12);
  --c-core-1:#d8f6ff; --c-core-2:#7fd3ff; --c-core-3:#3f96ff; --c-core-4:#2f5fe0; --c-core-5:#223fb0;
  --c-ring-1:rgba(122,217,255,.95); --c-ring-2:#6d5dfc; --c-pulse:rgba(122,217,255,.55);
  --c-dot-1:#dff1ff; --c-dot-2:#c9beff; --c-dot-3:#7cf5e0; --c-accent:rgba(122,217,255,.7);
  --swell:1; --ring-on:0;
  --t1r:-20deg; --t1s:.4; --t2r:35deg; --t2s:.52;
  transition:
    --c-glow-a var(--orb-fade) var(--orb-ease), --c-glow-b var(--orb-fade) var(--orb-ease),
    --c-core-1 var(--orb-fade) var(--orb-ease), --c-core-2 var(--orb-fade) var(--orb-ease),
    --c-core-3 var(--orb-fade) var(--orb-ease), --c-core-4 var(--orb-fade) var(--orb-ease),
    --c-core-5 var(--orb-fade) var(--orb-ease),
    --c-ring-1 var(--orb-fade) var(--orb-ease), --c-ring-2 var(--orb-fade) var(--orb-ease),
    --c-pulse var(--orb-fade) var(--orb-ease),
    --c-dot-1 var(--orb-fade) var(--orb-ease), --c-dot-2 var(--orb-fade) var(--orb-ease),
    --c-dot-3 var(--orb-fade) var(--orb-ease), --c-accent var(--orb-fade) var(--orb-ease),
    --ring-on 500ms var(--orb-ease);
}
/* LISTENING: brighter cyan / teal, rings open up, gentle swell */
#talkPanel:not(.orb-fallback)[data-state="listening"]{
  --c-glow-a:rgba(40,220,200,.5); --c-glow-b:rgba(30,150,255,.14);
  --c-core-1:#e0fffb; --c-core-2:#79f2e0; --c-core-3:#26b8d8; --c-core-4:#1f7fd0; --c-core-5:#16539f;
  --c-ring-1:rgba(124,245,224,.95); --c-ring-2:#2fd1c0; --c-pulse:rgba(124,245,224,.6);
  --c-dot-1:#e6fffb; --c-dot-2:#9ff6ea; --c-dot-3:#7cf5e0; --c-accent:rgba(124,245,224,.8);
}
/* THINKING: violet / indigo, rings tighten */
#talkPanel:not(.orb-fallback)[data-state="thinking"]{
  --c-glow-a:rgba(140,90,255,.55); --c-glow-b:rgba(90,70,240,.16);
  --c-core-1:#efe6ff; --c-core-2:#b79cff; --c-core-3:#7c62f0; --c-core-4:#5a45d6; --c-core-5:#3a2c9c;
  --c-ring-1:rgba(190,160,255,.95); --c-ring-2:#8d6bff; --c-pulse:rgba(180,150,255,.55);
  --c-dot-1:#f0e8ff; --c-dot-2:#c9beff; --c-dot-3:#a58bff; --c-accent:rgba(190,160,255,.8);
}
/* TALKING: warm blue-white */
#talkPanel:not(.orb-fallback)[data-state="speaking"]{
  --c-glow-a:rgba(150,200,255,.55); --c-glow-b:rgba(120,170,255,.16);
  --c-core-1:#ffffff; --c-core-2:#d6ecff; --c-core-3:#8fc4ff; --c-core-4:#5a95ee; --c-core-5:#3a62c4;
  --c-ring-1:rgba(220,238,255,.95); --c-ring-2:#9cc2ff; --c-pulse:rgba(210,232,255,.6);
  --c-dot-1:#ffffff; --c-dot-2:#e4f0ff; --c-dot-3:#bcd9ff; --c-accent:rgba(220,238,255,.85);
}
/* ERROR: soft amber / red */
#talkPanel:not(.orb-fallback)[data-state="error"]{
  --c-glow-a:rgba(255,130,100,.45); --c-glow-b:rgba(255,170,80,.12);
  --c-core-1:#fff0e0; --c-core-2:#ffb98a; --c-core-3:#ff7a5c; --c-core-4:#d4483f; --c-core-5:#8f2630;
  --c-ring-1:rgba(255,170,130,.9); --c-ring-2:#ff6b5e; --c-pulse:rgba(255,150,130,.5);
  --c-dot-1:#fff0e6; --c-dot-2:#ffc7b8; --c-dot-3:#ffd08a; --c-accent:rgba(255,160,130,.8);
}
/* Swell + ring tilt per state (plain transform transitions, no @property needed) */
#talkPanel[data-state="listening"]{--swell:1.04; --ring-on:1; --t1r:-12deg; --t1s:.52; --t2r:26deg; --t2s:.62;}
#talkPanel[data-state="thinking"]{--swell:1; --t1r:-34deg; --t1s:.33; --t2r:50deg; --t2s:.43;}
#talkPanel[data-state="speaking"]{--swell:1.06; --t1r:-8deg; --t1s:.56; --t2r:20deg; --t2s:.66;}
#talkPanel[data-state="error"]{--swell:.97;}

/* Stage: breathing room above and below so glow/pulses/rings never touch the subtitle, status or composer. */
#talkPanel .orb-stage{
  height:auto;margin:0;padding:22px 0 24px;
  pointer-events:none;position:relative;z-index:0;
}
.talk-composer{position:relative;z-index:2;}
.sek-swell{
  transform:scale(var(--swell));
  transition:transform var(--orb-swell) var(--orb-ease);
  will-change:transform;
}
#talkPanel[data-state="idle"] .sek-swell{transition-duration:var(--orb-settle);}
/* Audio level (--lvl, smoothed in JS) scales the whole orb a touch and lights the aura. */
#talkPanel .sek-orb{transform:scale(calc(1 + var(--lvl, 0) * .05));}
.sek-aura{
  position:absolute;inset:-14%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, var(--c-glow-a), transparent 68%);
  opacity:calc(var(--lvl, 0) * .9);
  transform:scale(calc(.9 + var(--lvl, 0) * .22));
}

/* Palette-driven orb parts */
#talkPanel .sek-glow{background:radial-gradient(circle, var(--c-glow-a), var(--c-glow-b) 55%, transparent 72%);}
#talkPanel .sek-pulse{border-color:var(--c-pulse);}
#talkPanel .sek-ring-spin.rs1{background:conic-gradient(from 0deg, transparent 0deg, transparent 250deg, var(--c-ring-1) 300deg, transparent 360deg);}
#talkPanel .sek-ring-spin.rs2{background:conic-gradient(from 0deg, transparent 0deg, transparent 230deg, var(--c-ring-2) 300deg, transparent 360deg);}
#talkPanel .sek-sweep{background:conic-gradient(from 0deg, var(--c-pulse), transparent 22%);}
#talkPanel .sek-orbit .sek-dot{background:currentColor;box-shadow:0 0 10px 3px color-mix(in srgb, currentColor 85%, transparent);}
#talkPanel .sek-orbit.o1{color:var(--c-dot-1);}
#talkPanel .sek-orbit.o2{color:var(--c-dot-2);}
#talkPanel .sek-orbit.o3{color:var(--c-dot-3);}
#talkPanel .sek-core{
  background:radial-gradient(circle at 32% 26%, var(--c-core-1) 0%, var(--c-core-2) 24%, var(--c-core-3) 54%, var(--c-core-4) 82%, var(--c-core-5) 100%);
  box-shadow:
    0 10px 24px -6px rgba(20,10,60,.5),
    0 0 26px 3px color-mix(in srgb, var(--c-core-2) 45%, transparent),
    inset 0 2px 6px rgba(255,255,255,.75),
    inset 0 -8px 14px color-mix(in srgb, var(--c-core-5) 60%, transparent),
    inset 0 0 0 1px rgba(214,244,255,.3);
}
/* Ring tilt blends between states */
#talkPanel .sek-ring-tilt{transition:transform var(--orb-fade) var(--orb-ease);}
#talkPanel .sek-ring-tilt.rt1{transform:rotate(var(--t1r)) scaleY(var(--t1s));}
#talkPanel .sek-ring-tilt.rt2{transform:rotate(var(--t2r)) scaleY(var(--t2s));}

/* Mic level ring around the orb */
.sek-levelring{
  position:absolute;left:50%;top:50%;
  width:208px;height:208px;margin:-104px 0 0 -104px;
  border-radius:50%;border:2px solid var(--c-accent);
  pointer-events:none;
  opacity:calc(var(--ring-on) * (.2 + var(--mic, 0) * .8));
  transform:scale(calc(.9 + var(--mic, 0) * .22));
}
.talk-wave i{transition:none;}

/* Fallback for browsers without @property: stacked tint layers cross-fade by opacity. */
.sek-tint{display:none;}
#talkPanel.orb-fallback .sek-tint{
  display:block;position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity var(--orb-fade) var(--orb-ease);
}
.sek-tint::before,.sek-tint::after{content:"";position:absolute;border-radius:50%;}
.sek-tint::before{inset:-22%;filter:blur(10px);mix-blend-mode:screen;background:radial-gradient(circle, color-mix(in srgb, var(--tint) 55%, transparent), transparent 70%);}
.sek-tint::after{inset:33%;background:var(--tint);mix-blend-mode:color;opacity:.7;}
.sek-tint[data-for="listening"]{--tint:#26d6c4;}
.sek-tint[data-for="thinking"]{--tint:#8d6bff;}
.sek-tint[data-for="speaking"]{--tint:#bcd9ff;}
.sek-tint[data-for="error"]{--tint:#ff7a5c;}
#talkPanel[data-state="listening"] .sek-tint[data-for="listening"],
#talkPanel[data-state="thinking"] .sek-tint[data-for="thinking"],
#talkPanel[data-state="speaking"] .sek-tint[data-for="speaking"],
#talkPanel[data-state="error"] .sek-tint[data-for="error"]{opacity:1;}

/* Status text colour fades with the state */
.talk-status.on{opacity:1;}

/* Mic <-> Stop button: icons morph, ring and fill fade */
.talk-mic{--ring-gain:0;transition:filter .15s ease, box-shadow 400ms var(--orb-ease), --ring-gain 300ms var(--orb-ease);}
.talk-mic::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#2c3860;opacity:0;transition:opacity 400ms var(--orb-ease);
}
.talk-mic svg{
  position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  transition:opacity 220ms var(--orb-ease), transform 220ms var(--orb-ease);
}
.talk-mic .ico-stop{opacity:0;transform:scale(.55) rotate(-60deg);}
.talk-mic[data-mode="stop"]{--ring-gain:1;box-shadow:none;}
.talk-mic[data-mode="stop"]::before{opacity:1;}
.talk-mic[data-mode="stop"] .ico-mic{opacity:0;transform:scale(.55) rotate(60deg);}
.talk-mic[data-mode="stop"] .ico-stop{opacity:1;transform:none;}
.talk-mic::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--c-accent);pointer-events:none;
  opacity:0;animation:talkRing 1.6s ease-out infinite;
}
@keyframes talkRing{0%{transform:scale(.9);opacity:calc(.9 * var(--ring-gain));}100%{transform:scale(1.25);opacity:0;}}

@media (max-width: 560px){
  #talkPanel{padding:14px 14px 16px;}
  #talkPanel .orb-stage{padding:16px 0 18px;}
  #talkPanel .sek-orb{width:176px;height:176px;}
  .sek-levelring{width:176px;height:176px;margin:-88px 0 0 -88px;}
  .talk-statusbar .talk-status{bottom:2px;}
  .talk-composer{gap:6px;}
  .talk-speak{width:40px;height:40px;}
  .talk-composer .talk-send{width:40px;height:40px;}
}

/* Reduced motion: colours still blend; no orbiting, pulsing, swell or ring pulse. */
@media (prefers-reduced-motion: reduce){
  #talkPanel .sek-glow,#talkPanel .sek-pulse,#talkPanel .sek-ring-spin,#talkPanel .sek-sweep,
  #talkPanel .sek-orbit,#talkPanel .sek-core{animation:none;}
  .sek-swell,#talkPanel .sek-orb,.sek-aura,.sek-levelring{transform:none;will-change:auto;}
  .sek-aura{opacity:0;}
  #talkPanel[data-state="listening"] .sek-levelring{opacity:.6;}
  #talkPanel .sek-ring-tilt{transition:none;}
  .talk-wave i{transform:none;height:10px;}
  .talk-dots i{animation:none;opacity:.7;}
  .talk-mic::after{animation:none;opacity:calc(.6 * var(--ring-gain));transform:none;}
  .talk-mic svg{transition:opacity 220ms var(--orb-ease);transform:none;}
  .talk-mic .ico-stop,.talk-mic[data-mode="stop"] .ico-mic{transform:none;}
  .talk-reply.is-thinking .talk-reply-text{animation:none;background:rgba(255,255,255,.14);}
}

/* Talk to Sekorti: the single call to action in the talk panel. */
.talk-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  max-width:260px;
  margin:18px auto 4px;
  padding:14px 26px;
  border:none;
  border-radius:var(--radius-pill);
  background:var(--brand-gradient);
  color:#fff;
  font-size:1rem;
  font-weight:700;
  letter-spacing:-0.01em;
  cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(47,62,158,0.7);
  transition:transform .15s ease, box-shadow .15s ease;
}
.talk-cta svg{width:20px;height:20px;flex-shrink:0;}
.talk-cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(47,62,158,0.8);}
.talk-cta:focus-visible{outline:2px solid #fff;outline-offset:3px;}

.talk-composer[hidden]{display:none;}

/* Stop button: shown in place of Talk to Sekorti while Sekorti is listening, thinking or speaking. */
.talk-stop{
  display:none;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:18px auto 4px;
  padding:0;
  border:none;
  border-radius:50%;
  background:var(--danger);
  color:#fff;
  cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(226,83,93,0.75);
  transition:transform .15s ease;
}
.talk-stop svg{width:24px;height:24px;}
.talk-stop:hover{transform:scale(1.05);}
.talk-stop:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.talk-panel.is-active .talk-stop{display:flex;}
.talk-panel.is-active .talk-cta{display:none;}