:root{
  --bg:#ffffff;
  --text:#0c0f14;
  --muted:rgba(12,15,20,.62);
  --hairline:rgba(12,15,20,.10);
  --surface:rgba(255,255,255,.72);
  --blue1:#2a67ff;
  --blue2:#35b7ff;
  --p:0;
  --pEase:0;
  --cp:0;
  --cpEase:0;
  --shadowSm:0 10px 30px rgba(12,15,20,.08);
  --shadowMd:0 22px 60px rgba(12,15,20,.12);
  --rSm:14px;
  --rMd:22px;
  --container:1120px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
}

.bgNoise{
  display:none;
}

a{color:inherit; text-decoration:none}
strong{font-weight:720}

.container{width:min(var(--container), calc(100% - 48px)); margin:0 auto}
.section{padding:20px 0 88px; border-top:1px solid var(--hairline)}
.section--first{border-top:none}

/* ------------------------------------------------------------------
   Hard reset for section alignment (non-hero):
   Use one deterministic spacing system for every block.
------------------------------------------------------------------- */
section.section[data-section]:not([data-section="hero"]):not([data-section="car"]):not([data-section="creative"]),
footer.section[data-section]{
  padding-top:24px !important;
  padding-bottom:48px !important;
}

section.section[data-section]:not([data-section="hero"]) .container,
footer.section[data-section] .container{
  display:flex;
  flex-direction:column;
  gap:14px;
}

section.section[data-section]:not([data-section="hero"]) .sectionHeader,
footer.section[data-section] .sectionHeader{
  margin:0;
  gap:14px;
}

section.section[data-section]:not([data-section="hero"]) .grid,
footer.section[data-section] .grid,
footer.section[data-section] .footerGrid{
  margin-top:0 !important;
}

/* -------- Scroll-driven motion base (scrub) -------- */
section[data-section], footer[data-section]{
  --p: 0;
  --pEase: 0;
  --heroSpin: 0;
  --heroSpinRotate: 0;
}

/* When scroll-engine is running, don't wait for reveal */
@media (prefers-reduced-motion: no-preference){
  section[data-section] .reveal,
  footer[data-section] .reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Home section uses repeatable reveal motion */
@media (prefers-reduced-motion: no-preference){
  section[data-section="home"] .sectionHeader.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 1.15s cubic-bezier(.2,.8,.2,1), transform 1.15s cubic-bezier(.2,.8,.2,1);
    will-change:opacity, transform;
  }
  section[data-section="home"] .sectionHeader.reveal.is-in{
    opacity:1;
    transform:translateY(0);
  }
  section[data-section="home"] .smartHomeStage.reveal{
    opacity:0;
    transform:translateX(-88px);
    transition:opacity 1.28s cubic-bezier(.2,.8,.2,1), transform 1.28s cubic-bezier(.2,.8,.2,1);
    will-change:opacity, transform;
  }
  section[data-section="home"] .smartHomeChat.reveal{
    opacity:0;
    transform:translateX(88px);
    transition:opacity 1.28s cubic-bezier(.2,.8,.2,1), transform 1.28s cubic-bezier(.2,.8,.2,1);
    will-change:opacity, transform;
  }
  section[data-section="home"] .smartHomeStage.reveal.is-in,
  section[data-section="home"] .smartHomeChat.reveal.is-in{
    opacity:1;
    transform:translateX(0);
  }
}

/* Theme accents per section (cards inherit) */
section[data-theme="car"]{ --a1:#2a67ff; --a2:#35b7ff; }
section[data-theme="medical"]{ --a1:#3b82f6; --a2:#22c55e; }
section[data-theme="creative"]{ --a1:#7c3aed; --a2:#06b6d4; }
section[data-theme="home"]{ --a1:#0ea5e9; --a2:#a3e635; }
section[data-theme="industry"]{ --a1:#111827; --a2:#2a67ff; }
footer[data-theme="footer"]{ --a1:#2a67ff; --a2:#35b7ff; }

/* -------- Card-level motion + skin -------- */
[data-card]{
  --cp: 0;
  --cpEase: 0;
  position: relative;
}

.card[data-card],
.visualCard[data-card],
.dataCard[data-card]{
  transform: scale(calc(0.992 + var(--cpEase) * 0.008));
  opacity: calc(0.2 + var(--cpEase) * 0.8);
  filter: none;
}

.card[data-card]::before,
.visualCard[data-card]::before,
.dataCard[data-card]::before{
  display:none;
}

.card[data-card]{ box-shadow: none; }
.visualCard[data-card]{ box-shadow: 0 26px 70px rgba(12,15,20,.14); }
.dataCard[data-card]{ overflow:hidden; }
.dataCard[data-card]::after{
  display:none;
}

/* ------------------------------------------------------------------
   Reset non-home/non-car colored background blocks (stable layout)
   Keep hero + car effects, neutralize others for consistent alignment.
------------------------------------------------------------------- */
section[data-theme="medical"] [data-card]::before,
section[data-theme="medical"] [data-card]::after,
section[data-theme="creative"] [data-card]::before,
section[data-theme="creative"] [data-card]::after,
section[data-theme="home"] [data-card]::before,
section[data-theme="home"] [data-card]::after,
section[data-theme="industry"] [data-card]::before,
section[data-theme="industry"] [data-card]::after,
footer[data-theme="footer"] [data-card]::before,
footer[data-theme="footer"] [data-card]::after{
  display:none;
}

section[data-theme="medical"] .visualCard,
section[data-theme="creative"] .visualCard,
section[data-theme="home"] .visualCard,
section[data-theme="industry"] .visualCard{
  background: rgba(255,255,255,.66);
  box-shadow: var(--shadowSm);
}

section[data-theme="medical"] .visualGlow,
section[data-theme="creative"] .visualGlow,
section[data-theme="home"] .visualGlow,
section[data-theme="industry"] .visualGlow{
  opacity:.22;
  filter: blur(14px);
}

/* Consistent top alignment for the sections user marked */
section[data-theme="medical"],
section[data-theme="creative"],
section[data-theme="home"],
section[data-theme="industry"],
footer[data-theme="footer"]{
  padding-top: 20px;
}

/* Card-specific “personalities” */
section[data-theme="car"] .visualCard--car[data-card] .carLine{
  transform: scaleX(calc(0.12 + var(--cpEase) * 0.88));
}

/* Car header text: progressive fade-in and rise */
section[data-section="car"] .sectionHeader .kicker{
  opacity: calc(0.1 + var(--pEase) * 0.9);
  transform: translateY(calc((1 - var(--pEase)) * 14px));
}
section[data-section="car"] .sectionHeader .h2{
  opacity: calc(0.08 + var(--pEase) * 0.92);
  transform: translateY(calc((1 - var(--pEase)) * 18px));
}
section[data-section="car"] .sectionHeader .lede{
  opacity: calc(0.08 + var(--pEase) * 0.92);
  transform: translateY(calc((1 - var(--pEase)) * 22px));
}

/* Car main card entrance: clearer fade/slide/scale */
section[data-section="car"] .card[data-card="carBrief"]{
  opacity: calc(0.06 + var(--cpEase) * 0.94);
  transform:
    translateY(calc((1 - var(--cpEase)) * 26px))
    scale(calc(0.985 + var(--cpEase) * 0.015));
}
section[data-theme="medical"] .visualCard--medical[data-card] .chip{
  transform: translateY(calc((1 - var(--cpEase)) * 10px));
}
section[data-theme="creative"] .visualCard--creative[data-card] .file{
  transform: scaleX(calc(0.86 + var(--cpEase) * 0.20));
  opacity: calc(0.55 + var(--cpEase) * 0.45);
}
section[data-theme="home"] .visualCard--home[data-card] .device{
  transform: translateY(calc((1 - var(--cpEase)) * 8px));
  opacity: calc(0.35 + var(--cpEase) * 0.65);
}
section[data-theme="industry"] .visualCard--industry[data-card] .layer:nth-child(1){
  transform: translateY(calc((1 - var(--cpEase)) * 18px));
}
section[data-theme="industry"] .visualCard--industry[data-card] .layer:nth-child(2){
  transform: translateY(calc((1 - var(--cpEase)) * 12px));
}
section[data-theme="industry"] .visualCard--industry[data-card] .layer:nth-child(3){
  transform: translateY(calc((1 - var(--cpEase)) * 6px));
}

.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:20;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--hairline);
}
.topbar .container{
  width:100%;
  max-width:none;
  margin:0;
}
.topbarInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 50px;
}
.brand{display:flex; align-items:center; gap:10px}
.brandDot{
  width:10px; height:10px; border-radius:999px;
  background:linear-gradient(90deg,var(--blue1),var(--blue2));
  box-shadow:0 10px 30px rgba(42,103,255,.22);
}
.brandName{font-weight:750; letter-spacing:-.01em}
.brandSub{color:var(--muted); font-size:13px}
.brandIcon{
  width:32px;
  height:32px;
  display:block;
  filter: grayscale(1) brightness(.55);
  opacity:.88;
  cursor:pointer;
  transition:filter .18s ease, opacity .18s ease, transform .18s ease;
}
.brandIcon:hover{
  opacity:1;
}
.brandIcon.is-direct-on{
  filter:none;
  opacity:1;
}

.modeModalOverlay{
  position:fixed;
  inset:0;
  background:rgba(12,15,20,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:60;
  opacity:1;
  transition:opacity .22s ease;
}
.modeModalOverlay.is-hidden{
  opacity:0;
  pointer-events:none;
}
.modeModalCard{
  width:min(560px, calc(100% - 24px));
  background:#fff;
  border:1px solid rgba(67,82,105,.16);
  border-radius:18px;
  box-shadow:0 26px 80px rgba(12,15,20,.18);
  padding:16px;
  transform:translateY(0) scale(1);
  transition:transform .22s ease, opacity .22s ease;
}
.modeModalOverlay.is-hidden .modeModalCard{
  transform:translateY(10px) scale(.98);
}
.modeModalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.modeModalTitle{
  font-size:20px;
  font-weight:760;
  letter-spacing:-.01em;
}
.modeModalClose{
  appearance:none;
  border:1px solid rgba(67,82,105,.2);
  width:32px;
  height:32px;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.modeModalActions{
  display:flex;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.modeBackendHint{
  margin-top:10px;
  font-size:13px;
  color:rgba(12,15,20,.62);
  border:1px solid rgba(67,82,105,.16);
  background:rgba(255,255,255,.72);
  border-radius:12px;
  padding:8px 10px;
}
.modeBackendHint.is-offline{
  color:#92400e;
  border-color:rgba(217,119,6,.30);
  background:rgba(251,191,36,.12);
}
.modeBackendHint.is-online{
  color:#166534;
  border-color:rgba(22,163,74,.30);
  background:rgba(34,197,94,.10);
}
.brandWordmark{
  height:22px;
  width:auto;
  display:block;
}
.nav{display:flex; gap:12px; color:var(--muted); font-size:13px}
.nav a{
  padding:8px 12px;
  border-radius:6px;
  border:1px solid transparent;
  background:transparent;
  color:rgba(15,23,42,.78);
  box-shadow:none;
  transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.nav a:hover{
  color:#0f172a;
  border-color:rgba(15,23,42,.46);
  background:rgba(255,255,255,.9);
  box-shadow:0 8px 18px rgba(15,23,42,.14);
  transform:translateY(-1px);
}
.nav a:active{
  transform:translateY(0) scale(.98);
  box-shadow:0 3px 8px rgba(15,23,42,.10);
}
.nav a.is-active{
  color:#0b1220;
  border-color:rgba(15,23,42,.62);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,245,249,.92));
  box-shadow:0 10px 24px rgba(15,23,42,.16);
}
.mobileMenuBtn,
.mobileMenuOverlay{
  display:none;
}
.mobileMenuBtn{
  appearance:none;
  border:1px solid rgba(67,82,105,.2);
  background:#fff;
  width:42px;
  height:42px;
  border-radius:12px;
  padding:9px 8px;
  cursor:pointer;
  flex-direction:column;
  justify-content:space-between;
}
.mobileMenuBtn span{
  display:block;
  width:100%;
  height:2px;
  border-radius:999px;
  background:#111827;
}
.mobileMenuOverlay{
  position:fixed;
  inset:0;
  z-index:54;
  pointer-events:none;
}
.mobileMenuBackdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(12,15,20,.28);
  opacity:0;
  transition:opacity .24s ease;
}
.mobileMenuPanel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:min(82vw, 330px);
  background:#fff;
  border-left:1px solid var(--hairline);
  box-shadow:0 20px 60px rgba(12,15,20,.16);
  padding:76px 14px 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.mobileMenuHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:20px;
}
.mobileMenuBrand{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:12px;
}
.mobileMenuBrand .brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.mobileMenuBrand .brandIcon{
  width:44px;
  height:44px;
}
.mobileMenuBrand .brandWordmark{
  height:30px;
  width:auto;
}
.mobileMenuTitleBox{
  border:0;
  border-radius:12px;
  background:transparent;
  color:#0f172a;
  font-size:18px;
  font-weight:860;
  letter-spacing:.04em;
  text-align:left;
  padding:4px 2px 2px;
  box-shadow:none;
}
.mobileMenuClose{
  appearance:none;
  border:1px solid rgba(67,82,105,.18);
  background:#fff;
  color:#111827;
  width:34px;
  height:34px;
  border-radius:10px;
  align-self:auto;
  margin-bottom:0;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.mobileMenuLink{
  display:flex;
  align-items:center;
  gap:100px;
  padding:17px 16px 17px 18px;
  min-height:54px;
  border-radius:12px;
  border:1px solid rgba(67,82,105,.16);
  color:#334155;
  text-decoration:none;
  font-size:15px;
  font-weight:650;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.mobileMenuIcon{
  width:20px;
  height:20px;
  flex:none;
  display:block;
  opacity:.95;
  transition:filter .2s ease, transform .2s ease, opacity .2s ease;
}
.mobileMenuLink:hover,
.mobileMenuLink:focus-visible{
  color:#0f172a;
  border-color:rgba(99,102,241,.36);
  box-shadow:0 10px 24px rgba(15,23,42,.10);
  transform:translateY(-1px);
  outline:none;
}
.mobileMenuLink:active{
  transform:translateY(0) scale(.99);
  box-shadow:0 6px 14px rgba(15,23,42,.08);
}

/* Mobile menu: map colors to each section theme */
.mobileMenuPanel .mobileMenuLink[href="#heroHome"]{
  background:linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.86));
  border-color:rgba(100,116,139,.20);
  color:rgba(30,41,59,.92);
}
.mobileMenuPanel .mobileMenuLink[href="#heroHome"] .mobileMenuIcon{
  filter:brightness(0) saturate(100%) invert(23%) sepia(14%) saturate(756%) hue-rotate(182deg) brightness(94%) contrast(89%);
}
.mobileMenuPanel .mobileMenuLink[href="#car"]{
  background:linear-gradient(180deg, rgba(250,245,255,.98), rgba(243,232,255,.82));
  border-color:rgba(124,58,237,.24);
  color:rgba(109,40,217,.95);
}
.mobileMenuPanel .mobileMenuLink[href="#car"] .mobileMenuIcon{
  filter:brightness(0) saturate(100%) invert(32%) sepia(77%) saturate(1200%) hue-rotate(245deg) brightness(93%) contrast(93%);
}
.mobileMenuPanel .mobileMenuLink[href="#medical"]{
  background:linear-gradient(180deg, rgba(236,253,245,.98), rgba(220,252,231,.80));
  border-color:rgba(34,197,94,.22);
  color:rgba(21,128,61,.95);
}
.mobileMenuPanel .mobileMenuLink[href="#medical"] .mobileMenuIcon{
  filter:brightness(0) saturate(100%) invert(38%) sepia(67%) saturate(552%) hue-rotate(95deg) brightness(91%) contrast(92%);
}
.mobileMenuPanel .mobileMenuLink[href="#creative"]{
  background:linear-gradient(180deg, rgba(255,247,237,.98), rgba(254,215,170,.70));
  border-color:rgba(251,146,60,.24);
  color:rgba(154,52,18,.95);
}
.mobileMenuPanel .mobileMenuLink[href="#creative"] .mobileMenuIcon{
  filter:brightness(0) saturate(100%) invert(33%) sepia(45%) saturate(1380%) hue-rotate(353deg) brightness(97%) contrast(90%);
}
.mobileMenuPanel .mobileMenuLink[href="#home"]{
  background:linear-gradient(180deg, rgba(239,246,255,.98), rgba(219,234,254,.78));
  border-color:rgba(42,103,255,.24);
  color:rgba(30,64,175,.95);
}
.mobileMenuPanel .mobileMenuLink[href="#home"] .mobileMenuIcon{
  filter:brightness(0) saturate(100%) invert(24%) sepia(68%) saturate(1465%) hue-rotate(213deg) brightness(92%) contrast(91%);
}
.mobileMenuPanel .mobileMenuLink[href="#industry"]{
  background:linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.86));
  border-color:rgba(100,116,139,.20);
  color:rgba(30,41,59,.92);
}
.mobileMenuPanel .mobileMenuLink[href="#industry"] .mobileMenuIcon{
  filter:brightness(0) saturate(100%) invert(16%) sepia(13%) saturate(961%) hue-rotate(182deg) brightness(92%) contrast(95%);
}
.mobileMenuPanel .mobileMenuLink[href="#footer"]{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  border-color:rgba(148,163,184,.24);
  color:rgba(51,65,85,.92);
}
.mobileMenuPanel .mobileMenuLink[href="#footer"] .mobileMenuIcon{
  filter:brightness(0) saturate(100%) invert(24%) sepia(13%) saturate(778%) hue-rotate(179deg) brightness(96%) contrast(90%);
}
.mobileMenuOverlay.is-open{
  display:block;
  pointer-events:auto;
}
.mobileMenuOverlay.is-prep{
  display:block;
  pointer-events:none;
}
.mobileMenuOverlay.is-open .mobileMenuBackdrop{
  opacity:1;
}
.mobileMenuOverlay.is-open .mobileMenuPanel{
  transform:translateX(0);
}

.hero{
  position:relative;
  /* desktop: make hero adapt to viewport height */
  min-height: 100svh;
  display:flex;
  /* don't squeeze content into a small center box */
  align-items:stretch;
  padding: clamp(96px, 14svh, 170px) 0 clamp(70px, 10svh, 140px);
}

.heroGridBg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* Hero watermark (Qwen mark) */
.heroMark{
  position:fixed;
  left:50%;
  top:50%;
  pointer-events:none;
  border:0;
  padding:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
  width:min(72vw, 980px);
  height:auto;
  transform: translate(calc(-50% + 350px), -50%);
  transition: transform 420ms cubic-bezier(.22,.8,.22,1);
}
.heroMarkSvg{
  width:100%;
  height:auto;
  opacity: calc(.62 * var(--heroFooterFade, 1));
  /* force icon to render darker even if source looks gray */
  filter: brightness(0) contrast(1.25);
  transform-origin: 50% 50%;
  margin-left: 0;
  transition: transform 80ms linear;
}
.hero .container{position:relative; z-index:1}

/* Keep fixed hero mark between section backgrounds and content */
section.section[data-section],
footer.section[data-section]{
  position:relative;
  isolation:isolate;
}
section.section[data-section] > .container,
footer.section[data-section] > .container{
  position:relative;
  z-index:2;
}

/* Do not let solid white section backgrounds block the fixed mark */
section.section[data-section]:not([data-section="hero"]),
footer.section[data-section]{
  background:transparent !important;
}

/* Scroll-driven rotation for the Qwen mark (global; mark is moved to <body>) */
.heroMarkSvg{
  /* initial is upright; starts spinning only after scroll */
  transform:
    translateY(calc(var(--heroSpin) * 5px))
    rotate(calc(var(--heroSpinRotate) * 1deg))
    scale(calc(1 + var(--heroSpin) * 0.03));
  opacity: calc(.62 * var(--heroFooterFade, 1));
}

/* Dev section: the mark rises, fades in, and shrinks into a clickable badge */
/* Dev-specific logo/input/chat overrides removed */
.heroGrid{display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center}
.kickerRow{display:flex; gap:10px; flex-wrap:wrap}
.kickerPill{
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  border:1px solid var(--hairline);
  box-shadow:var(--shadowSm);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.kickerPill--muted{background:rgba(255,255,255,.40); color:var(--muted); box-shadow:none}

.heroCopyCorner{
  position:absolute;
  left: clamp(28px, 5vw, 64px);
  bottom: calc(clamp(28px, 6vh, 72px) + 50px);
  width: min(620px, calc(100% - 56px));
  display:flex;
  flex-direction:column;
  gap: clamp(14px, 2.2vh, 24px);
  z-index:2;
}
.heroCopyCorner > *{
  margin:0;
}

.h1{font-size:clamp(34px, 5.6vw, 62px); line-height:1.02; letter-spacing:-.03em}
.heroLogo{
  width:min(420px, 92%);
  height:auto;
  display:block;
}
.slogan{font-size:20px; color:rgba(12,15,20,.86); letter-spacing:-.01em}
.lede{font-size:16px; line-height:1.78; color:var(--muted); max-width:46em}

.ctaRow{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:2px}
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  padding:12px 14px;
  border-radius:999px;
  font-weight:720;
  letter-spacing:-.01em;
  color:#fff;
  background:linear-gradient(90deg,var(--blue1),var(--blue2));
  box-shadow:0 12px 40px rgba(42,103,255,.24);
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 18px 56px rgba(42,103,255,.28)}
.btn:active{transform:translateY(0); opacity:.92}
.btn--ghost{
  color:var(--text);
  background:rgba(255,255,255,.72);
  border:1px solid var(--hairline);
  box-shadow:none;
}
.btn--ghost:hover{box-shadow:var(--shadowSm)}


.sectionHeader{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  align-items:start;
}

/* Medical header block on top-right */
section[data-section="medical"] .sectionHeader{
  grid-template-columns:.85fr 1.15fr;
}
section[data-section="medical"] .sectionHeader > div:first-child{
  grid-column:2;
  justify-self:end;
  text-align:right;
  width:100%;
  max-width:none;
  /* Scroll-scrub: enter from right, leave back to right */
  transform:translate3d(calc(200px + (1 - clamp(0, calc(var(--p) * 2.25), 1)) * 340px), 0, 0);
  transition:none;
}
section[data-section="medical"] .sectionHeader > p.lede{
  grid-column:1;
  justify-self:start;
}
.kicker{
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.h2{
  margin:10px 0 0;
  font-size:clamp(28px, 4.4vw, 44px);
  line-height:1.05;
  letter-spacing:-.02em;
}

.grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:28px;
  margin-top:10px;
  align-items:stretch;
}

.card{
  background:#fff;
  border:none;
  border-radius:var(--rMd);
  box-shadow:none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  width: calc(100% + 300px);
  min-height: calc(100% + 50px);
  margin-top: -20px;
}
.cardInner{padding:22px 22px}
.divider{height:1px; background:var(--hairline); margin:18px 0}
.muted{color:var(--muted)}

.para{margin:10px 0 0; font-size:17px; line-height:1.78; color:var(--muted)}
.paraStrong{margin:0; font-size:17px; line-height:1.75}
.quote{color:rgba(12,15,20,.86); font-weight:720}
.kickerSmall{font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}

.pillRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.pill{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.55);
  font-size:13px;
  color:var(--muted);
}

/* Visual placeholder cards */
.heroVisual{position:relative}
.heroIcon{
  position:relative;
  border-radius:var(--rMd);
  border:1px solid var(--hairline);
  background: rgba(255,255,255,.62);
  box-shadow:var(--shadowMd);
  min-height:360px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.heroIcon::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(420px 260px at 30% 20%, rgba(53,183,255,.16), transparent 60%),
    radial-gradient(420px 260px at 80% 35%, rgba(42,103,255,.12), transparent 60%);
  filter: blur(10px);
  opacity:.9;
}
.heroIconSvg{
  width:min(42%, 240px);
  height:auto;
  opacity:.22;
  position:relative;
  z-index:1;
}
.heroIcon .visualLabel{
  position:absolute;
  left:18px;
  bottom:16px;
  z-index:2;
}

.visualCard{
  position:relative;
  border-radius:var(--rMd);
  border:1px solid var(--hairline);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadowSm);
  min-height:320px;
}
.visualCard--hero{min-height:360px}
.visualGlow{
  display:none !important;
}
.visualGrid{
  display:none !important;
}
.visualNodes{display:none !important}
.node{
  position:absolute; width:8px; height:8px; border-radius:999px;
  background:rgba(12,15,20,.12);
  box-shadow:0 0 0 6px rgba(53,183,255,.10);
  animation:pulse 2.4s ease-in-out infinite;
}
.visualNodes .node:nth-child(1){left:14%; top:22%}
.visualNodes .node:nth-child(2){left:34%; top:40%; animation-delay:.14s}
.visualNodes .node:nth-child(3){left:56%; top:24%; animation-delay:.28s}
.visualNodes .node:nth-child(4){left:78%; top:36%; animation-delay:.42s}
.visualNodes .node:nth-child(5){left:22%; top:68%; animation-delay:.56s}
.visualNodes .node:nth-child(6){left:44%; top:74%; animation-delay:.70s}
.visualNodes .node:nth-child(7){left:66%; top:62%; animation-delay:.84s}
.visualNodes .node:nth-child(8){left:86%; top:70%; animation-delay:.98s}

.visualSweep{display:none !important}
.sweep{
  position:absolute; left:-20%; top:20%;
  width:140%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(53,183,255,.55), transparent);
  opacity:.55;
  transform:rotate(-18deg);
  animation:sweep 3.4s ease-in-out infinite;
}
.visualSweep .sweep:nth-child(2){top:38%; transform:rotate(-8deg); animation-delay:.16s}
.visualSweep .sweep:nth-child(3){top:56%; transform:rotate(0deg); animation-delay:.32s}
.visualSweep .sweep:nth-child(4){top:72%; transform:rotate(10deg); animation-delay:.48s}

/* ------------------------------------------------------------------
   HERO ONLY: restore colored background blocks
   (all other sections remain plain / no color blocks)
------------------------------------------------------------------- */
section[data-section="hero"]{
  background:#fff !important;
}

section[data-section="hero"] .heroGridBg.visualGrid{
  display:none !important;
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.34;
  mask-image:none;
  -webkit-mask-image:none;
  background-size:34px 34px;
  background-image:
    linear-gradient(to right, rgba(42,103,255,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(53,183,255,.14) 1px, transparent 1px);
}

/* subtle hero-only glow (white base + local color, not full-color fill) */
section[data-section="hero"]::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1000px 520px at 12% 10%, rgba(42,103,255,.10), transparent 62%),
    radial-gradient(860px 520px at 78% 18%, rgba(124,58,237,.08), transparent 66%),
    radial-gradient(820px 520px at 46% 76%, rgba(53,183,255,.07), transparent 68%);
}

/* CAR section: same subtle background style as hero (no grid lines) */
section[data-section="car"]{
  position:relative;
  background:#fff;
  padding-bottom: calc(48px + 200px) !important;
}
section[data-section="car"]::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(980px 520px at 14% 12%, rgba(42,103,255,.10), transparent 62%),
    radial-gradient(860px 520px at 84% 18%, rgba(124,58,237,.08), transparent 66%),
    radial-gradient(820px 520px at 52% 78%, rgba(53,183,255,.07), transparent 68%);
}

section[data-section="car"] .container{
  position:relative;
  z-index:1;
}

/* MEDICAL section: unique premium tint (teal/green) */
section[data-section="medical"]{
  position:relative;
  background:#fff;
}
section[data-section="medical"]::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(980px 520px at 16% 14%, rgba(34,197,94,.10), transparent 62%),
    radial-gradient(860px 520px at 84% 18%, rgba(59,130,246,.08), transparent 66%),
    radial-gradient(820px 520px at 52% 78%, rgba(20,184,166,.07), transparent 68%);
}
section[data-section="medical"] .container{
  position:relative;
  z-index:1;
}

/* CREATIVE section: unique premium tint (purple/cyan) */
section[data-section="creative"]{
  position:relative;
  background:#fff;
  padding-bottom: 148px !important;
  min-height: calc(100svh - 100px);
}
section[data-section="creative"] .sectionHeader{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
}
section[data-section="creative"] .sectionHeader > div:first-child{
  max-width:980px;
  margin:0 auto;
  justify-self:center;
}
section[data-section="creative"] .sectionHeader .lede{
  max-width:58ch;
  margin-left:auto;
  margin-right:auto;
}
section[data-section="creative"] .creativeRailWrap{
  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow:hidden;
  padding:8px 0 2px;
  position:relative;
  box-sizing:border-box;
}
section[data-section="creative"] .creativeRailWrap.is-expanded{
  overflow:visible;
  padding-top:0;
  /* Keep a safe gutter on both sides when zoom/viewport shrinks */
  --creativeGutter: clamp(10px, calc((1587px - 100vw) * 0.12 + 10px), 80px);
  width:100%;
  margin-left:0;
  padding-left:var(--creativeGutter);
  padding-right:var(--creativeGutter);
}
section[data-section="creative"] .creativeRail{
  display:grid;
  grid-template-columns:repeat(4, 365px);
  gap:20px;
  align-items:start;
  justify-content:center;
  /* Only move from right to origin; never overshoot left */
  transform:translate3d(calc((1 - clamp(0, var(--creativeRailProgress, 0), 1)) * var(--creativeRailStartX, 420px)), 0, 0);
  will-change:transform;
}
section[data-section="creative"] .creativeTile{
  min-width:0;
}
section[data-section="creative"] .creativeTileMedia{
  width:365px;
  height:534px;
  border-radius:0;
  border:1px solid rgba(67,82,105,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(248,250,252,.95)),
    radial-gradient(380px 260px at 20% 10%, rgba(124,58,237,.10), transparent 62%),
    radial-gradient(380px 260px at 86% 72%, rgba(6,182,212,.10), transparent 64%);
  box-shadow:0 22px 52px rgba(12,15,20,.18);
  overflow:hidden;
  position:relative;
  transform:translate3d(0,0,0);
  transition:transform .18s ease, box-shadow .18s ease;
  will-change:transform;
}
section[data-section="creative"] .creativeTileMedia:hover,
section[data-section="creative"] .creativeTileMedia:focus-visible{
  transform:translate3d(0,-3px,0);
  box-shadow:0 26px 64px rgba(12,15,20,.22);
}
section[data-section="creative"] .creativeTileMedia::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:
    linear-gradient(45deg,
      transparent 44%,
      rgba(255,255,255,.00) 48%,
      rgba(255,255,255,.78) 50%,
      rgba(255,255,255,.00) 52%,
      transparent 56%);
  transform:translate3d(-70%, -70%, 0);
  opacity:0;
  mix-blend-mode:screen;
  pointer-events:none;
  animation:creativeShine 5s ease-in-out 1;
  animation-play-state:paused;
  z-index:3;
}
section[data-section="creative"] .creativeTileMedia.is-shining::before{
  animation-play-state:running;
}
section[data-section="creative"] .creativeTileMedia::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(12,15,20,.08));
  pointer-events:none;
  z-index:2;
}
section[data-section="creative"] .creativeTileImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  position:relative;
  z-index:1;
}
/* Flip card */
section[data-section="creative"] .creativeFlip{
  width:100%;
  height:100%;
  position:relative;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.2,.8,.2,1);
}
section[data-section="creative"] .creativeFace{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
section[data-section="creative"] .creativeFace.is-front{
  display:block;
}
section[data-section="creative"] .creativeFrontMeta{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:10px 10px;
  border-radius:12px;
  border:0;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
  z-index:3;
  max-width:72%;
}
section[data-section="creative"] .creativeFrontKicker{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  text-shadow:0 6px 18px rgba(2,6,23,.55);
}
section[data-section="creative"] .creativeFrontTitle{
  margin-top:6px;
  font-size:20px;
  font-weight:860;
  letter-spacing:-.01em;
  color:rgba(255,255,255,.98);
  text-shadow:0 8px 22px rgba(2,6,23,.62);
}
section[data-section="creative"] .creativeFrontHint{
  margin-top:6px;
  font-size:13px;
  color:rgba(226,232,240,.92);
  text-shadow:0 6px 18px rgba(2,6,23,.55);
}
section[data-section="creative"] .creativeFace.is-back{
  transform:rotateY(180deg);
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:18px 16px;
  overflow:hidden;
  position:relative;
  width:100%;
  height:100%;
}
section[data-section="creative"] .creativeFace.is-back::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(15,23,42,.08) 0%, rgba(15,23,42,.18) 52%, rgba(15,23,42,.70) 100%);
  z-index:1;
}
section[data-section="creative"] .creativeTileImg--back{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  z-index:0;
}
section[data-section="creative"] .creativeBackKicker{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(241,245,249,.92);
  position:relative;
  z-index:2;
  text-shadow:0 2px 8px rgba(2,6,23,.30);
}
section[data-section="creative"] .creativeBackTitle{
  margin-top:8px;
  font-size:22px;
  font-weight:820;
  letter-spacing:-.01em;
  color:rgba(255,255,255,.98);
  position:relative;
  z-index:2;
  text-shadow:0 4px 14px rgba(2,6,23,.38);
}
section[data-section="creative"] .creativeBackHint{
  margin-top:8px;
  font-size:13px;
  color:rgba(226,232,240,.92);
  position:relative;
  z-index:2;
  text-shadow:0 2px 8px rgba(2,6,23,.30);
}

/* Expanded layout */
section[data-section="creative"] .creativeRailWrap.is-expanded{
  display:grid;
  /* Do NOT change column widths; keep fixed like the cards/studio */
  grid-template-columns:365px 1200px;
  gap:22px;
  align-items:start;
  transform:none;
  justify-content:center;
}
section[data-section="creative"] .creativeRailWrap.is-expanded .creativeRail{
  grid-template-columns:365px;
  justify-content:start;
  transform:translate3d(0,0,0) !important;
}
section[data-section="creative"] .creativeRailWrap.is-expanded .creativeTile{
  transition:opacity .28s ease, transform .28s ease;
}
section[data-section="creative"] .creativeRailWrap.is-expanded .creativeTile:not(.is-active){
  display:none;
}
section[data-section="creative"] .creativeTile.is-active .creativeFlip{
  transform:rotateY(180deg);
}

/* Studio panel */
section[data-section="creative"] .creativeStudio{
  border:1px solid rgba(67,82,105,.16);
  background:rgba(255,255,255,.86);
  border-radius:18px;
  box-shadow:0 22px 60px rgba(12,15,20,.10);
  padding:14px 14px;
  min-height: calc(534px + 72px);
  width:1200px;
  opacity:0;
  transform:translate3d(22px, 0, 0);
  pointer-events:none;
  transition:opacity .36s ease, transform .42s cubic-bezier(.2,.8,.2,1);
  /* Do not take layout height when collapsed */
  position:absolute;
  right:0;
  top:0;
  height:0;
  overflow:hidden;
}
section[data-section="creative"] .creativeRailWrap.is-expanded .creativeStudio{
  opacity:1;
  transform:translate3d(0,0,0);
  pointer-events:auto;
  position:relative;
  right:auto;
  top:auto;
  height:auto;
  overflow:visible;
}
section[data-section="creative"] .creativeStudioHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
section[data-section="creative"] .creativeStudioTitle{
  font-size:20px;
  font-weight:840;
  letter-spacing:-.01em;
  color:rgba(15,23,42,.92);
}
section[data-section="creative"] .creativeStudioSub{
  font-size:13px;
  color:rgba(12,15,20,.58);
}
section[data-section="creative"] .creativeStudioBody{
  margin-top:12px;
  display:none;
  flex-direction:column;
  gap:12px;
}
section[data-section="creative"] .creativeStudio.is-poster-mode .creativeStudioBody{
  display:flex;
}

/* Video studio (new layout, not poster-like) */
section[data-section="creative"] .videoStudio{
  display:none;
  border:1px solid rgba(67,82,105,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.78));
  border-radius:16px;
  padding:12px 12px;
  box-shadow:0 20px 50px rgba(12,15,20,.08);
}
section[data-section="creative"] .creativeStudio.is-video-mode .creativeStudioBody{
  display:flex;
}
section[data-section="creative"] .creativeStudio.is-video-mode .videoStudio{
  display:block;
}
section[data-section="creative"] .creativeStudio.is-video-mode .posterCases,
section[data-section="creative"] .creativeStudio.is-video-mode .posterPromptPanel,
section[data-section="creative"] .creativeStudio.is-video-mode .posterFlow{
  display:none !important;
}
section[data-section="creative"] .creativeStudio.is-copy-mode .creativeStudioBody{
  display:flex;
}
section[data-section="creative"] .creativeStudio.is-copy-mode .copyStudio{
  display:block;
}
section[data-section="creative"] .creativeStudio.is-copy-mode .videoStudio,
section[data-section="creative"] .creativeStudio.is-copy-mode .posterCases,
section[data-section="creative"] .creativeStudio.is-copy-mode .posterPromptPanel,
section[data-section="creative"] .creativeStudio.is-copy-mode .posterFlow{
  display:none !important;
}
section[data-section="creative"] .creativeStudio.is-office-mode .creativeStudioBody{
  display:flex;
}
section[data-section="creative"] .creativeStudio.is-office-mode .officeStudio{
  display:block;
}
section[data-section="creative"] .creativeStudio.is-office-mode .videoStudio,
section[data-section="creative"] .creativeStudio.is-office-mode .copyStudio,
section[data-section="creative"] .creativeStudio.is-office-mode .posterCases,
section[data-section="creative"] .creativeStudio.is-office-mode .posterPromptPanel,
section[data-section="creative"] .creativeStudio.is-office-mode .posterFlow{
  display:none !important;
}

section[data-section="creative"] .videoStudioTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
section[data-section="creative"] .videoStudioMeta{
  font-size:12px;
  color:rgba(15,23,42,.52);
  white-space:nowrap;
}

section[data-section="creative"] .videoMode{
  display:inline-flex;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(67,82,105,.14);
  border-radius:999px;
  padding:4px;
  gap:4px;
}
section[data-section="creative"] .videoModeBtn{
  border:0;
  background:transparent;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:760;
  color:rgba(15,23,42,.72);
  cursor:pointer;
  transition:all .2s ease;
}
section[data-section="creative"] .videoModeBtn.is-active{
  background:linear-gradient(180deg, rgba(255,237,213,.95), rgba(254,215,170,.72));
  color:rgba(120,53,15,.95);
  box-shadow:0 10px 24px rgba(245,158,11,.16);
}

section[data-section="creative"] .videoStudioGrid{
  margin-top:12px;
  display:grid;
  grid-template-columns:minmax(380px, 480px) minmax(0, 1fr);
  gap:14px;
  align-items:start;
}
section[data-section="creative"] .videoCtrl{
  display:flex;
  flex-direction:column;
  gap:12px;
}
section[data-section="creative"] .videoCtrlBlock{
  border:1px solid rgba(67,82,105,.14);
  border-radius:14px;
  background:rgba(255,255,255,.86);
  padding:12px;
}
section[data-section="creative"] .videoCtrlTitle{
  font-size:13px;
  font-weight:820;
  color:rgba(15,23,42,.86);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

section[data-section="creative"] .videoCaseList{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
section[data-section="creative"] .videoCaseCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  background:#fff;
  padding:10px 10px;
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
section[data-section="creative"] .videoCaseCard:hover{
  transform:translateY(-1px);
  border-color:rgba(67,82,105,.26);
  box-shadow:0 14px 34px rgba(12,15,20,.08);
}
section[data-section="creative"] .videoCaseCard.is-active{
  border-color:rgba(217,119,6,.34);
  box-shadow:0 16px 40px rgba(245,158,11,.14);
}
section[data-section="creative"] .videoCaseLeft{
  display:flex;
  flex-direction:column;
  gap:2px;
}
section[data-section="creative"] .videoCaseTitle{
  font-size:13px;
  font-weight:780;
  color:rgba(15,23,42,.86);
}
section[data-section="creative"] .videoCaseTag{
  font-size:12px;
  color:rgba(15,23,42,.52);
}
section[data-section="creative"] .videoCaseBadge{
  font-size:12px;
  font-weight:720;
  color:rgba(120,53,15,.9);
  background:rgba(255,237,213,.92);
  border:1px solid rgba(217,119,6,.2);
  padding:4px 8px;
  border-radius:999px;
  flex:none;
}

section[data-section="creative"] .videoPromptShort{
  margin-top:10px;
  font-size:13px;
  line-height:1.55;
  color:rgba(15,23,42,.74);
  background:linear-gradient(180deg, rgba(241,245,249,.55), rgba(241,245,249,.30));
  border:1px dashed rgba(67,82,105,.22);
  border-radius:12px;
  padding:10px 10px;
  white-space:pre-wrap;
}
section[data-section="creative"] .videoPromptLong{
  margin-top:10px;
  border-radius:12px;
  border:1px solid rgba(67,82,105,.14);
  background:#fff;
  padding:10px 10px;
  position:relative;
  overflow:hidden;
  min-height:110px;
}
section[data-section="creative"] .videoPromptLongText{
  position:relative;
  z-index:2;
  font-size:13px;
  line-height:1.55;
  color:rgba(15,23,42,.72);
  white-space:pre-wrap;
  max-height:180px;
  overflow:auto;
  padding-right:6px;
}
section[data-section="creative"] .videoShimmer{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0;
  background:linear-gradient(90deg, transparent, rgba(245,158,11,.14), transparent);
  transform:translateX(-120%);
}
section[data-section="creative"] .videoPromptLong.is-loading .videoShimmer{
  opacity:1;
  animation:creativeTitleSweep 1.35s cubic-bezier(.2,.8,.2,1) infinite;
}

section[data-section="creative"] .videoTimeline{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:8px;
}
section[data-section="creative"] .videoNode{
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  background:#fff;
  padding:10px 10px;
  min-height:52px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  transition:all .2s ease;
}
section[data-section="creative"] .videoNodeTitle{
  font-size:12px;
  font-weight:820;
  color:rgba(15,23,42,.68);
}
section[data-section="creative"] .videoNodeState{
  font-size:12px;
  color:rgba(15,23,42,.44);
}
section[data-section="creative"] .videoNode.is-active{
  border-color:rgba(217,119,6,.32);
  background:rgba(255,237,213,.70);
}
section[data-section="creative"] .videoNode.is-done{
  border-color:rgba(202,138,4,.28);
  background:rgba(254,215,170,.42);
}

section[data-section="creative"] .videoMiniLogs{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:none;
  overflow:visible;
  padding-right:0;
}
section[data-section="creative"] .videoMiniLog{
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  background:rgba(255,255,255,.92);
  padding:8px 10px;
  font-size:12px;
  line-height:1.45;
  color:rgba(15,23,42,.64);
  position:relative;
  overflow:hidden;
  flex:0 0 auto;
  min-height:40px;
}
section[data-section="creative"] .videoMiniLog.is-live::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(245,158,11,.16), transparent);
  animation:taskLoad 1.9s linear infinite;
}

section[data-section="creative"] .videoPreview{
  border:1px solid rgba(67,82,105,.14);
  border-radius:16px;
  background:rgba(255,255,255,.86);
  padding:12px;
  position:relative;
}
section[data-section="creative"] .videoPreviewCover{
  position:absolute;
  inset:12px;
  border-radius:14px;
  border:1px dashed rgba(217,119,6,.26);
  background:
    radial-gradient(680px 420px at 18% 22%, rgba(251,146,60,.16), transparent 64%),
    radial-gradient(680px 420px at 82% 72%, rgba(245,158,11,.12), transparent 66%),
    rgba(255,255,255,.82);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:16px;
  gap:6px;
  z-index:3;
  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .26s ease, transform .32s cubic-bezier(.2,.8,.2,1);
}
section[data-section="creative"] .videoPreviewCoverKicker{
  font-size:12px;
  font-weight:800;
  color:rgba(120,53,15,.86);
}
section[data-section="creative"] .videoPreviewCoverTitle{
  font-size:14px;
  font-weight:860;
  color:rgba(15,23,42,.86);
}
section[data-section="creative"] .videoPreviewCoverBar{
  width:100%;
  height:10px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  overflow:hidden;
  position:relative;
  margin-top:6px;
}
section[data-section="creative"] .videoPreviewCoverBar i{
  position:absolute;
  inset:0;
  width:40%;
  background:linear-gradient(90deg, transparent, rgba(245,158,11,.42), transparent);
  transform:translateX(-120%);
  animation:taskLoad 1.8s linear infinite;
}
section[data-section="creative"] .videoPreview.is-loading .videoPreviewCover{
  opacity:1;
  transform:translateY(0);
}
section[data-section="creative"] .videoCompareHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
section[data-section="creative"] .videoCompareTitle{
  font-size:13px;
  font-weight:840;
  color:rgba(15,23,42,.86);
}
section[data-section="creative"] .videoCompareHint{
  font-size:12px;
  color:rgba(15,23,42,.50);
}
section[data-section="creative"] .videoCompareGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

section[data-section="creative"] .videoBottomLogs{
  margin-top:12px;
  border:1px solid rgba(67,82,105,.14);
  border-radius:14px;
  background:rgba(255,255,255,.86);
  padding:10px;
}
section[data-section="creative"] .videoBottomLogsTitle{
  font-size:12px;
  font-weight:820;
  color:rgba(15,23,42,.72);
  margin-bottom:8px;
}
section[data-section="creative"] .videoPreview.is-loading .videoCompareGrid{
  opacity:.08;
  filter:blur(.2px);
}
section[data-section="creative"] .videoStudio.is-generate-mode .videoCompareGrid{
  grid-template-columns:1fr;
}
section[data-section="creative"] .videoStudio.is-generate-mode .videoPane--src{
  display:none;
}
section[data-section="creative"] .videoPaneLabel{
  font-size:12px;
  color:rgba(15,23,42,.56);
  margin-bottom:8px;
}
section[data-section="creative"] .videoPlayer{
  width:100%;
  height:440px;
  border-radius:14px;
  background:rgba(2,6,23,.92);
  border:1px solid rgba(67,82,105,.18);
  object-fit:cover;
}

/* Copy studio */
section[data-section="creative"] .copyStudio{
  display:none;
  border:1px solid rgba(67,82,105,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.82));
  border-radius:16px;
  padding:12px;
  box-shadow:0 20px 52px rgba(12,15,20,.09);
}
section[data-section="creative"] .copyStudioTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
section[data-section="creative"] .copyStudioMeta{
  font-size:12px;
  color:rgba(15,23,42,.52);
}
section[data-section="creative"] .copyPlatformTabs{
  display:inline-flex;
  border:1px solid rgba(67,82,105,.16);
  border-radius:999px;
  background:#fff;
  padding:4px;
  gap:4px;
}
section[data-section="creative"] .copyPlatformBtn{
  border:0;
  background:transparent;
  color:rgba(15,23,42,.72);
  font-size:13px;
  font-weight:760;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  transition:all .2s ease;
}
section[data-section="creative"] .copyPlatformBtn.is-active{
  background:linear-gradient(180deg, rgba(255,237,213,.95), rgba(254,215,170,.70));
  color:rgba(120,53,15,.95);
  box-shadow:0 10px 24px rgba(245,158,11,.16);
}
section[data-section="creative"] .copyStudioGrid{
  margin-top:12px;
  display:grid;
  grid-template-columns:minmax(380px, 430px) minmax(0, 1fr);
  gap:14px;
  align-items:start;
}
section[data-section="creative"] .copyCtrl{
  display:flex;
  flex-direction:column;
  gap:12px;
}
section[data-section="creative"] .copyCtrlBlock{
  border:1px solid rgba(67,82,105,.14);
  border-radius:14px;
  background:rgba(255,255,255,.9);
  padding:12px;
}
section[data-section="creative"] .copyCtrlTitle{
  font-size:13px;
  font-weight:820;
  color:rgba(15,23,42,.86);
}
section[data-section="creative"] .copyAudienceChips{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
section[data-section="creative"] .copyChip{
  border:1px solid rgba(67,82,105,.18);
  border-radius:999px;
  background:#fff;
  color:rgba(15,23,42,.7);
  font-size:12px;
  font-weight:700;
  padding:6px 10px;
  cursor:pointer;
  transition:all .2s ease;
}
section[data-section="creative"] .copyChip.is-active{
  border-color:rgba(217,119,6,.36);
  background:rgba(255,237,213,.75);
  color:rgba(120,53,15,.95);
}
section[data-section="creative"] .copyChip.copyChipAdd{
  border-color:rgba(217,119,6,.36);
  background:linear-gradient(180deg, rgba(255,237,213,.95), rgba(254,215,170,.70));
  color:rgba(120,53,15,.95);
  font-size:16px;
  font-weight:900;
  min-width:34px;
  padding:4px 10px;
  line-height:1;
}
section[data-section="creative"] .copyAudienceModal{
  position:fixed;
  inset:0;
  z-index:1600;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:opacity .2s ease;
}
section[data-section="creative"] .copyAudienceModal.is-hidden{
  opacity:0;
  pointer-events:none;
}
section[data-section="creative"] .copyAudienceModalCard{
  width:min(460px, calc(100% - 32px));
  border:1px solid rgba(67,82,105,.18);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9));
  box-shadow:0 24px 60px rgba(12,15,20,.18);
  padding:16px;
}
section[data-section="creative"] .copyAudienceModalTitle{
  font-size:18px;
  font-weight:850;
  color:rgba(15,23,42,.92);
}
section[data-section="creative"] .copyAudienceModalDesc{
  margin-top:6px;
  font-size:13px;
  color:rgba(15,23,42,.62);
}
section[data-section="creative"] .copyAudienceModalInput{
  margin-top:12px;
  width:100%;
  border:1px solid rgba(67,82,105,.2);
  border-radius:12px;
  background:#fff;
  color:rgba(15,23,42,.86);
  font-size:14px;
  padding:10px 12px;
  outline:none;
}
section[data-section="creative"] .copyAudienceModalInput:focus{
  border-color:rgba(217,119,6,.42);
  box-shadow:0 0 0 3px rgba(245,158,11,.12);
}
section[data-section="creative"] .copyAudienceModalActions{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
section[data-section="creative"] .copyAudienceModalActions .btn{
  background:linear-gradient(90deg, rgba(251,146,60,.9), rgba(253,186,116,.92));
  box-shadow:0 12px 40px rgba(251,146,60,.24);
}
section[data-section="creative"] .copyAudienceModalActions .btn:hover{
  box-shadow:0 18px 56px rgba(251,146,60,.28);
}
section[data-section="creative"] .copyInput{
  margin-top:10px;
  width:100%;
  resize:vertical;
  min-height:142px;
  border:1px solid rgba(67,82,105,.18);
  border-radius:12px;
  background:#fff;
  color:rgba(15,23,42,.86);
  font-size:13px;
  line-height:1.5;
  padding:10px;
  outline:none;
}
section[data-section="creative"] .copyInput:focus{
  border-color:rgba(217,119,6,.42);
  box-shadow:0 0 0 3px rgba(245,158,11,.12);
}
section[data-section="creative"] .copyActions{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:10px;
}
section[data-section="creative"] .copyGenerateBtn{
  min-width:140px;
  background:linear-gradient(90deg, rgba(251,146,60,.9), rgba(253,186,116,.92));
  box-shadow:0 12px 40px rgba(251,146,60,.24);
}
section[data-section="creative"] .copyGenerateBtn:hover{
  box-shadow:0 18px 56px rgba(251,146,60,.28);
}
section[data-section="creative"] .copyStatus{
  font-size:12px;
  color:rgba(15,23,42,.58);
}
section[data-section="creative"] .copyProgress{
  margin-top:10px;
  width:100%;
  height:10px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  overflow:hidden;
  position:relative;
}
section[data-section="creative"] .copyProgress i{
  position:absolute;
  inset:0;
  width:38%;
  background:linear-gradient(90deg, transparent, rgba(245,158,11,.42), transparent);
  transform:translateX(-120%);
  opacity:0;
}
section[data-section="creative"] .copyProgress.is-running i{
  opacity:1;
  animation:taskLoad 1.7s linear infinite;
}
section[data-section="creative"] .copyMiniLogs{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:140px;
  overflow:auto;
  padding-right:6px;
}
section[data-section="creative"] .copyMiniLog{
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  background:#fff;
  padding:8px 10px;
  font-size:12px;
  line-height:1.45;
  color:rgba(15,23,42,.66);
}
section[data-section="creative"] .copyResult{
  border:1px solid rgba(67,82,105,.14);
  border-radius:16px;
  background:rgba(255,255,255,.9);
  padding:12px;
  min-height:620px;
}
section[data-section="creative"] .copyResultTabs{
  display:flex;
  gap:8px;
}
section[data-section="creative"] .copyResultTab{
  border:1px solid rgba(67,82,105,.16);
  background:#fff;
  color:rgba(15,23,42,.74);
  border-radius:10px;
  padding:7px 12px;
  font-size:13px;
  font-weight:760;
  cursor:pointer;
}
section[data-section="creative"] .copyResultTab.is-active{
  border-color:rgba(217,119,6,.36);
  background:rgba(255,237,213,.72);
  color:rgba(120,53,15,.95);
}
section[data-section="creative"] .copyOutputWrap{
  margin-top:10px;
}
section[data-section="creative"] .copyOutputPanel{
  display:none;
}
section[data-section="creative"] .copyOutputPanel.is-active{
  display:block;
}
section[data-section="creative"] .copyOutputTitle{
  font-size:13px;
  font-weight:820;
  color:rgba(15,23,42,.84);
  margin-bottom:8px;
}
section[data-section="creative"] .copyOutputBody{
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  background:#fff;
  min-height:500px;
  max-height:620px;
  overflow:auto;
  padding:12px;
  font-size:14px;
  line-height:1.65;
  color:rgba(15,23,42,.78);
}
section[data-section="creative"] .copyOutputBody p{margin:0 0 10px}
section[data-section="creative"] .copyOutputBody h3,
section[data-section="creative"] .copyOutputBody h4{
  margin:12px 0 8px;
  font-size:15px;
  color:rgba(120,53,15,.95);
}
section[data-section="creative"] .copyOutputBody ul,
section[data-section="creative"] .copyOutputBody ol{
  margin:8px 0 10px 18px;
  padding:0;
}
section[data-section="creative"] .copyOutputBody li{margin:4px 0}
section[data-section="creative"] .copyOutputBody strong{color:rgba(15,23,42,.9)}
section[data-section="creative"] .copyOutputBody code{
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-size:12px;
  background:rgba(241,245,249,.84);
  border:1px solid rgba(67,82,105,.14);
  border-radius:6px;
  padding:1px 6px;
}
section[data-section="creative"] .copyPackCols{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
section[data-section="creative"] .copyPackBlock{
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  background:#fff;
  padding:10px;
}
section[data-section="creative"] .copyPackHead{
  font-size:12px;
  font-weight:800;
  color:rgba(120,53,15,.9);
  margin-bottom:8px;
}
section[data-section="creative"] .copyPackBody{
  font-size:12px;
  line-height:1.5;
  color:rgba(15,23,42,.7);
  white-space:pre-wrap;
}

/* Office studio */
section[data-section="creative"] .officeStudio{
  display:none;
  border:1px solid rgba(67,82,105,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.85));
  border-radius:16px;
  padding:12px;
  box-shadow:0 20px 52px rgba(12,15,20,.08);
}
section[data-section="creative"] .officeTopTabs{
  display:inline-flex;
  border:1px solid rgba(67,82,105,.16);
  border-radius:999px;
  background:#fff;
  padding:4px;
  gap:4px;
}
section[data-section="creative"] .officeModeBtn{
  border:0;
  background:transparent;
  color:rgba(15,23,42,.72);
  font-size:13px;
  font-weight:760;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  transition:all .2s ease;
}
section[data-section="creative"] .officeModeBtn.is-active{
  background:linear-gradient(180deg, rgba(255,237,213,.95), rgba(254,215,170,.72));
  color:rgba(120,53,15,.95);
  box-shadow:0 10px 24px rgba(245,158,11,.16);
}
section[data-section="creative"] .officeModeBtn.is-disabled,
section[data-section="creative"] .officeModeBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}
section[data-section="creative"] .officeStudioGrid{
  margin-top:12px;
  display:grid;
  grid-template-columns:minmax(280px, 340px) minmax(0, 1fr);
  gap:14px;
  align-items:start;
}
section[data-section="creative"] .creativeStudio.is-office-mode .officeStudioGrid{
  grid-template-columns:minmax(420px, 520px) minmax(0, 1fr);
}
section[data-section="creative"] .officeLeft{
  display:flex;
  flex-direction:column;
  gap:12px;
}
section[data-section="creative"] .officeHeadRow{
  border:1px solid rgba(67,82,105,.14);
  border-radius:14px;
  background:#fff;
  padding:10px 12px;
}
section[data-section="creative"] .officeTitle{
  font-size:14px;
  font-weight:840;
  color:rgba(15,23,42,.88);
}
section[data-section="creative"] .officeMeta{
  margin-top:4px;
  font-size:12px;
  color:rgba(15,23,42,.56);
}
section[data-section="creative"] .officePanel{
  display:none;
  border:1px solid rgba(67,82,105,.14);
  border-radius:14px;
  background:#fff;
  padding:10px;
}
section[data-section="creative"] .officePanel.is-active{
  display:block;
}
section[data-section="creative"] .officePanelTitle{
  font-size:13px;
  font-weight:820;
  color:rgba(15,23,42,.84);
  margin-bottom:8px;
}
section[data-section="creative"] .officeTimeline{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:420px;
  overflow:auto;
}
section[data-section="creative"] .officeNode{
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  background:rgba(248,250,252,.7);
  padding:10px;
  cursor:pointer;
}
section[data-section="creative"] .officeNodeHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
section[data-section="creative"] .officeNodeArrow{
  font-size:12px;
  color:rgba(15,23,42,.54);
  flex:none;
}
section[data-section="creative"] .officeNode.is-active{
  border-color:rgba(217,119,6,.34);
  background:rgba(255,237,213,.62);
}
section[data-section="creative"] .officeNodeTitle{
  font-size:13px;
  font-weight:760;
  color:rgba(15,23,42,.84);
}
section[data-section="creative"] .officeNodeSub{
  margin-top:4px;
  font-size:12px;
  color:rgba(15,23,42,.56);
}
section[data-section="creative"] .officeNodeDetail{
  margin-top:8px;
  border-top:1px dashed rgba(67,82,105,.16);
  padding-top:8px;
  font-size:12px;
  line-height:1.55;
  color:rgba(15,23,42,.7);
  white-space:pre-wrap;
}
section[data-section="creative"] .officeNode.is-collapsed .officeNodeDetail{
  display:none;
}
section[data-section="creative"] .officeChatBox{
  margin-top:10px;
  border-top:1px dashed rgba(67,82,105,.18);
  padding-top:10px;
  height:600px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
section[data-section="creative"] .officeChatHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
section[data-section="creative"] .officeChatTitle{
  font-size:12px;
  font-weight:800;
  color:rgba(15,23,42,.76);
}
section[data-section="creative"] .officeChatMessages{
  margin-top:8px;
  border:1px solid rgba(67,82,105,.14);
  border-radius:10px;
  background:rgba(248,250,252,.6);
  min-height:0;
  max-height:none;
  flex:1;
  overflow:auto;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
section[data-section="creative"] .officeChatMsg{
  font-size:12px;
  line-height:1.65;
  color:rgba(15,23,42,.78);
  border-radius:8px;
  padding:7px 8px;
  background:#fff;
  border:1px solid rgba(67,82,105,.12);
}
section[data-section="creative"] .officeChatMsg > p{
  margin:0 0 8px;
}
section[data-section="creative"] .officeChatMsg > p:last-child{
  margin-bottom:0;
}
section[data-section="creative"] .officeChatMsg h1,
section[data-section="creative"] .officeChatMsg h2,
section[data-section="creative"] .officeChatMsg h3,
section[data-section="creative"] .officeChatMsg h4{
  margin:8px 0 6px;
  line-height:1.45;
  color:rgba(15,23,42,.9);
}
section[data-section="creative"] .officeChatMsg h1{font-size:18px;font-weight:840}
section[data-section="creative"] .officeChatMsg h2{font-size:16px;font-weight:820}
section[data-section="creative"] .officeChatMsg h3{font-size:14px;font-weight:800}
section[data-section="creative"] .officeChatMsg h4{font-size:13px;font-weight:780}
section[data-section="creative"] .officeChatMsg ul,
section[data-section="creative"] .officeChatMsg ol{
  margin:6px 0 8px 18px;
  padding:0;
}
section[data-section="creative"] .officeChatMsg li{
  margin:3px 0;
}
section[data-section="creative"] .officeChatMsg strong{
  font-weight:800;
  color:rgba(15,23,42,.92);
}
section[data-section="creative"] .officeChatMsg code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;
  background:rgba(15,23,42,.06);
  border-radius:5px;
  padding:1px 4px;
}
section[data-section="creative"] .officeChatMsg .mdCode{
  margin:8px 0;
  background:rgba(2,6,23,.92);
  color:rgba(248,250,252,.96);
  border-radius:8px;
  padding:10px;
  overflow:auto;
}
section[data-section="creative"] .officeChatMsg .mdCode code{
  background:transparent;
  color:inherit;
  padding:0;
  border-radius:0;
  font-size:11px;
  line-height:1.55;
  white-space:pre;
}
section[data-section="creative"] .officeChatMsg blockquote{
  margin:8px 0;
  padding:6px 10px;
  border-left:3px solid rgba(251,146,60,.45);
  background:rgba(255,247,237,.8);
  color:rgba(124,45,18,.92);
  border-radius:0 6px 6px 0;
}
section[data-section="creative"] .officeChatMsg .mdHr{
  border:0;
  border-top:1px dashed rgba(67,82,105,.24);
  margin:10px 0;
}
section[data-section="creative"] .officeChatMsg .mdTableWrap{
  margin:8px 0;
  overflow:auto;
}
section[data-section="creative"] .officeChatMsg .mdTable{
  width:100%;
  border-collapse:collapse;
  min-width:280px;
  background:#fff;
  border:1px solid rgba(67,82,105,.14);
  border-radius:8px;
}
section[data-section="creative"] .officeChatMsg .mdTable th,
section[data-section="creative"] .officeChatMsg .mdTable td{
  border:1px solid rgba(67,82,105,.12);
  padding:6px 8px;
  text-align:left;
  vertical-align:top;
}
section[data-section="creative"] .officeChatMsg .mdTable th{
  background:rgba(241,245,249,.75);
  font-weight:800;
}
section[data-section="creative"] .officeChatMsg.is-user{
  align-self:flex-end;
  background:rgba(255,237,213,.6);
  border-color:rgba(217,119,6,.25);
  white-space:pre-wrap;
}
section[data-section="creative"] .officeChatComposer{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
  flex:none;
}
section[data-section="creative"] .officeChatInput{
  width:100%;
  border:1px solid rgba(67,82,105,.16);
  border-radius:10px;
  font-size:12px;
  line-height:1.5;
  color:rgba(15,23,42,.78);
  padding:8px 10px;
  resize:vertical;
  min-height:68px;
  background:#fff;
}
section[data-section="creative"] #officeChatAskBtn,
section[data-section="creative"] #officeWordChatAskBtn,
section[data-section="creative"] #officeExcelChatAskBtn{
  color:#9a3412;
  background:linear-gradient(180deg, rgba(255,247,237,.98), rgba(255,237,213,.92));
  border:1px solid rgba(251,146,60,.32);
  box-shadow:none;
}
section[data-section="creative"] #officeChatAskBtn:hover,
section[data-section="creative"] #officeWordChatAskBtn:hover,
section[data-section="creative"] #officeExcelChatAskBtn:hover{
  background:linear-gradient(180deg, rgba(255,237,213,.98), rgba(254,215,170,.92));
  transform:translateY(-1px);
}
section[data-section="creative"] .officeOutlineToolbar{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}
section[data-section="creative"] .officeTinyBtn{
  border:1px solid rgba(67,82,105,.16);
  border-radius:8px;
  background:#fff;
  color:rgba(15,23,42,.72);
  font-size:12px;
  padding:5px 8px;
  cursor:pointer;
}
section[data-section="creative"] .officeOutline{
  max-height:430px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
section[data-section="creative"] .officeOutlineItem{
  border:1px solid rgba(67,82,105,.14);
  border-radius:10px;
  background:rgba(248,250,252,.6);
}
section[data-section="creative"] .officeOutlineHead{
  padding:8px 10px;
  font-size:13px;
  font-weight:760;
  color:rgba(15,23,42,.82);
  cursor:pointer;
}
section[data-section="creative"] .officeOutlineBody{
  border-top:1px dashed rgba(67,82,105,.14);
  padding:8px 10px;
  font-size:12px;
  color:rgba(15,23,42,.68);
  line-height:1.55;
  white-space:pre-wrap;
}
section[data-section="creative"] .officeOutlineItem.is-collapsed .officeOutlineBody{
  display:none;
}
section[data-section="creative"] .officeFilters{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:420px;
  overflow:auto;
}
section[data-section="creative"] .officeExcelViewTabs{
  display:flex;
  flex-direction:column;
  gap:8px;
}
section[data-section="creative"] .officeExcelViewBtn{
  border:1px solid rgba(67,82,105,.16);
  border-radius:10px;
  background:#fff;
  color:rgba(15,23,42,.78);
  font-size:12px;
  font-weight:760;
  padding:8px 10px;
  text-align:left;
  cursor:pointer;
  transition:all .2s ease;
}
section[data-section="creative"] .officeExcelViewBtn:hover{
  border-color:rgba(245,158,11,.38);
  transform:translateY(-1px);
}
section[data-section="creative"] .officeExcelViewBtn.is-active{
  background:linear-gradient(180deg, rgba(255,237,213,.95), rgba(254,215,170,.72));
  border-color:rgba(245,158,11,.45);
  color:rgba(120,53,15,.95);
  box-shadow:0 10px 24px rgba(245,158,11,.12);
}
section[data-section="creative"] .officeFilterRow{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:8px;
  align-items:center;
}
section[data-section="creative"] .officeFilterLabel{
  font-size:12px;
  color:rgba(15,23,42,.6);
}
section[data-section="creative"] .officeFilterSelect{
  border:1px solid rgba(67,82,105,.16);
  border-radius:8px;
  font-size:12px;
  padding:6px 8px;
  color:rgba(15,23,42,.78);
  background:#fff;
}
section[data-section="creative"] .officeRight{
  display:flex;
  flex-direction:column;
  gap:12px;
}
section[data-section="creative"] .officeResultCard{
  display:none;
  border:1px solid rgba(67,82,105,.14);
  border-radius:14px;
  background:#fff;
  padding:12px;
  min-height:auto;
}
section[data-section="creative"] .officeResultCard.is-active{
  display:block;
}
section[data-section="creative"] .officeResultHead{
  font-size:13px;
  font-weight:820;
  color:rgba(15,23,42,.86);
  margin-bottom:8px;
}
section[data-section="creative"] .officeResultBody{
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  background:rgba(248,250,252,.55);
  min-height:500px;
  max-height:640px;
  overflow:auto;
  padding:12px;
  font-size:13px;
  line-height:1.6;
  color:rgba(15,23,42,.78);
  white-space:pre-wrap;
}
section[data-section="creative"] .officePptStage{
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  overflow:auto;
  background:#fff;
  height:auto;
  min-height:0;
  max-height:none;
}
section[data-section="creative"] .officePptFrame{
  width:100%;
  height:1200px;
  border:0;
  background:#fff;
  display:block;
}
section[data-section="creative"] .officeWordStage{
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  overflow:hidden;
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(254,240,220,.75), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
  box-shadow:0 14px 30px rgba(12,15,20,.08);
}
section[data-section="creative"] .officeWordFrame{
  width:100%;
  height:760px;
  border:0;
  background:#fff;
  display:block;
}
section[data-section="creative"] .officeKpiRow{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-bottom:10px;
}
section[data-section="creative"] .officeKpi{
  border:1px solid rgba(67,82,105,.14);
  border-radius:10px;
  background:rgba(248,250,252,.6);
  padding:8px 10px;
}
section[data-section="creative"] .officeKpiTitle{
  font-size:12px;
  color:rgba(15,23,42,.56);
}
section[data-section="creative"] .officeKpiValue{
  margin-top:4px;
  font-size:16px;
  font-weight:840;
  color:rgba(15,23,42,.9);
}
section[data-section="creative"] .officeChart{
  width:100%;
  height:auto;
  max-width:100%;
  display:block;
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  background:#fff;
}
section[data-section="creative"] .officeTableWrap{
  margin-top:10px;
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  overflow:auto;
  max-height:480px;
}
section[data-section="creative"] .officeTable{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
section[data-section="creative"] .officeTable th,
section[data-section="creative"] .officeTable td{
  border-bottom:1px solid rgba(67,82,105,.12);
  padding:7px 8px;
  text-align:left;
  color:rgba(15,23,42,.76);
  white-space:nowrap;
}
section[data-section="creative"] .officeTable th{
  position:sticky;
  top:0;
  background:#fff;
  z-index:1;
  font-weight:800;
}
section[data-section="creative"] .posterCases{
  display:flex;
  gap:10px;
}
section[data-section="creative"] .posterCaseBtn{
  appearance:none;
  border:1px solid rgba(67,82,105,.16);
  background:#fff;
  color:rgba(15,23,42,.78);
  border-radius:10px;
  padding:8px 12px;
  font-size:13px;
  font-weight:650;
  cursor:pointer;
  transition:all .2s ease;
}
section[data-section="creative"] .posterCaseBtn:hover{
  border-color:rgba(67,82,105,.3);
}
section[data-section="creative"] .posterCaseBtn.is-active{
  background:rgba(245, 200, 66, .18);
  border-color:rgba(217, 119, 6, .36);
  color:rgba(120, 53, 15, .96);
}
section[data-section="creative"] .posterPromptPanel{
  display:flex;
  flex-direction:column;
  gap:8px;
}
section[data-section="creative"] .posterPromptItem{
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  background:#fff;
  padding:10px 12px;
}
section[data-section="creative"] .posterPromptLabel{
  font-size:13px;
  font-weight:700;
  color:rgba(15,23,42,.84);
  cursor:pointer;
}
section[data-section="creative"] .posterPromptText{
  margin-top:7px;
  font-size:13px;
  line-height:1.52;
  color:rgba(15,23,42,.76);
  white-space:pre-wrap;
}
section[data-section="creative"] .posterPromptText--long{
  max-height:130px;
  overflow:auto;
  padding-right:6px;
}
section[data-section="creative"] .posterFlow{
  display:grid;
  grid-template-columns:minmax(360px, 1fr) minmax(300px, 430px);
  gap:12px;
}
section[data-section="creative"] .posterFlowAccordion{
  display:flex;
  flex-direction:column;
  gap:8px;
}
section[data-section="creative"] .posterStep{
  border:1px solid rgba(67,82,105,.14);
  border-radius:10px;
  background:#fff;
  padding:8px 10px 10px;
  font-size:13px;
  color:rgba(12,15,20,.68);
  transition:all .22s ease;
}
section[data-section="creative"] .posterStepHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:700;
}
section[data-section="creative"] .posterStepArrow{
  font-size:12px;
  color:rgba(15,23,42,.52);
}
section[data-section="creative"] .posterStep.is-active{
  border-color:rgba(217, 119, 6, .34);
  background:rgba(245, 200, 66, .14);
  color:rgba(120, 53, 15, .94);
}
section[data-section="creative"] .posterStep.is-done{
  border-color:rgba(202, 138, 4, .28);
  background:rgba(253, 224, 71, .14);
  color:rgba(113, 63, 18, .92);
}
section[data-section="creative"] .posterLog{
  border:1px solid rgba(67,82,105,.14);
  border-radius:10px;
  background:rgba(255,255,255,.92);
  padding:8px 10px;
  font-size:13px;
  line-height:1.45;
  color:rgba(15,23,42,.72);
  margin-top:8px;
}
section[data-section="creative"] .posterLog.is-live{
  position:relative;
  overflow:hidden;
}
section[data-section="creative"] .posterLog.is-live::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(245, 200, 66, .28), transparent);
  animation:taskLoad 1.8s linear infinite;
}
section[data-section="creative"] .posterResult{
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  background:#fff;
  padding:10px;
  height:100%;
  min-height:320px;
  display:flex;
  flex-direction:column;
}
section[data-section="creative"] .posterResultTitle{
  font-size:13px;
  font-weight:700;
  color:rgba(15,23,42,.84);
  margin-bottom:8px;
}
section[data-section="creative"] .posterResultBox{
  border:1px dashed rgba(67,82,105,.28);
  border-radius:10px;
  min-height:260px;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(241,245,249,.45);
  overflow:hidden;
  position:relative;
}
section[data-section="creative"] .posterResultPlaceholder{
  font-size:13px;
  color:rgba(15,23,42,.56);
}
section[data-section="creative"] .posterResultImage{
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}
section[data-section="creative"] .posterResultBox.has-image .posterResultImage{
  display:block;
}
section[data-section="creative"] .posterResultBox.has-image .posterResultPlaceholder{
  display:none;
}
section[data-section="creative"] .creativeStudioSteps{
  display:flex;
  flex-direction:column;
  gap:10px;
}
section[data-section="creative"] .creativeStudioLogs{
  max-height:300px;
  overflow:auto;
  padding-right:6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
section[data-section="creative"] .creativeStudioStep{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(67,82,105,.14);
  background:rgba(255,255,255,.82);
  color:rgba(12,15,20,.70);
  font-size:14px;
}
section[data-section="creative"] .creativeStudioDot{
  width:20px;
  height:20px;
  border-radius:999px;
  border:1px solid rgba(12,15,20,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:rgba(12,15,20,.62);
  flex:none;
}
section[data-section="creative"] .creativeStudioStep.is-done .creativeStudioDot{
  border-color:rgba(34,197,94,.32);
  color:rgba(20,83,45,.92);
}
section[data-section="creative"] .creativeStudioLog{
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  background:#fff;
  min-height:42px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  color:rgba(12,15,20,.66);
  font-size:14px;
  line-height:1.4;
  position:relative;
  overflow:hidden;
}
section[data-section="creative"] .creativeStudioLog::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(34,197,94,.18), transparent);
  opacity:0;
}
section[data-section="creative"] .creativeStudioLog.is-live::before{
  opacity:1;
  animation:taskLoad 1.6s linear infinite;
}

@keyframes creativeShine{
  /* Hold, then slow sweep from top-left to bottom-right */
  0%,68%{opacity:0; transform:translate3d(-70%, -70%, 0);}
  72%{opacity:1; transform:translate3d(-70%, -70%, 0);}
  95%{opacity:1; transform:translate3d(70%, 70%, 0);}
  100%{opacity:0; transform:translate3d(70%, 70%, 0);}
}
section[data-section="creative"] .creativeTileCaption{
  margin-top:15px;
  color:rgba(12,15,20,.62);
  text-align:left;
  font-size:16px;
  line-height:1.5;
  padding:0;
  min-height:auto;
}
/* Creative header special entrance */
section[data-section="creative"] .sectionHeader.reveal{
  opacity:0;
  transform:translate3d(0, 38px, 0) scale(.96) rotate(-1.6deg);
  filter:blur(1px);
  transition:
    opacity 1.88s cubic-bezier(.18,.86,.22,1),
    transform 1.95s cubic-bezier(.16,.84,.22,1),
    filter 1.95s cubic-bezier(.16,.84,.22,1);
}
section[data-section="creative"] .sectionHeader.reveal.is-in{
  opacity:1;
  transform:translate3d(0, 0, 0) scale(1) rotate(0);
  filter:blur(0);
}
section[data-section="creative"] .sectionHeader.reveal > div:first-child{
  position:relative;
  overflow:hidden;
}
section[data-section="creative"] .sectionHeader.reveal > div:first-child::after{
  content:"";
  position:absolute;
  inset:-8% -36%;
  background:linear-gradient(95deg, transparent 30%, rgba(255,255,255,.58) 48%, transparent 66%);
  transform:translateX(-120%);
  pointer-events:none;
  opacity:0;
}
section[data-section="creative"] .sectionHeader.reveal.is-in > div:first-child::after{
  opacity:1;
  animation:creativeTitleSweep 2.05s cubic-bezier(.2,.8,.2,1) .06s 1 both;
}
section[data-section="creative"]::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(980px 520px at 14% 14%, rgba(251,146,60,.16), transparent 62%),
    radial-gradient(860px 520px at 86% 18%, rgba(245,158,11,.12), transparent 66%),
    radial-gradient(820px 520px at 52% 78%, rgba(253,186,116,.12), transparent 68%);
}
section[data-section="creative"] .container{
  position:relative;
  z-index:1;
}

/* HOME section: unique premium tint (sky/lime) */
section[data-section="home"]{
  position:relative;
  background:#fff;
  /* Match CAR section height rhythm */
  padding-bottom: calc(48px + 200px) !important;
}
section[data-section="home"]::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(980px 520px at 16% 14%, rgba(14,165,233,.10), transparent 62%),
    radial-gradient(860px 520px at 84% 20%, rgba(163,230,53,.09), transparent 66%),
    radial-gradient(820px 520px at 52% 78%, rgba(34,211,238,.07), transparent 68%);
}
section[data-section="home"] .container{
  position:relative;
  z-index:1;
  width:min(calc(var(--container) + 200px), calc(100% - 32px));
}
section[data-section="home"] .grid{
  grid-template-columns:1fr;
}
section[data-section="home"] .smartHomeGrid{
  display:grid;
  grid-template-columns:minmax(0, 2.4fr) minmax(340px, 1fr);
  gap:14px;
  align-items:stretch;
}
section[data-section="home"] .smartHomeStage,
section[data-section="home"] .smartHomeChat{
  border:1px solid rgba(67,82,105,.14);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 34px rgba(12,15,20,.08);
  padding:12px;
}
section[data-section="home"] .smartHomeStageHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
  min-height:50px;
}

.smartHomeTerminalBtn{
  display:none;
  border:1px solid rgba(15,23,42,.22);
  background:#fff;
  color:rgba(2,6,23,.92);
  font-size:12px;
  font-weight:820;
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  box-shadow:none;
  white-space:nowrap;
}
.smartHomeTerminalBtn:hover{transform:translateY(-1px)}

.smartHomeDrawer{
  position:fixed;
  inset:0;
  z-index:1260;
  display:flex;
  justify-content:flex-start;
  opacity:1;
  transition:opacity .24s ease;
}
.smartHomeDrawer.is-prep{
  opacity:0;
  pointer-events:none;
}
.smartHomeDrawer.is-hidden{
  opacity:0;
  pointer-events:none;
}
.smartHomeDrawerBackdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(248,250,252,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity:1;
  transition:opacity .24s ease;
}
.smartHomeDrawerPanel{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  height:100svh;
  width:min(96vw, 520px);
  background:#fff;
  border-right:1px solid rgba(67,82,105,.16);
  box-shadow:0 20px 80px rgba(12,15,20,.2);
  padding:14px 14px 18px;
  transform:translateX(0);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.smartHomeDrawer.is-prep .smartHomeDrawerPanel{
  transform:translateX(-100%);
}
.smartHomeDrawer.is-hidden .smartHomeDrawerPanel{
  transform:translateX(-100%);
}
.smartHomeDrawer.is-prep .smartHomeDrawerBackdrop{
  opacity:0;
}
.smartHomeDrawer.is-hidden .smartHomeDrawerBackdrop{
  opacity:0;
}
.smartHomeDrawerHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.smartHomeDrawerTitle{
  font-size:15px;
  font-weight:860;
  color:rgba(15,23,42,.92);
}
.smartHomeDrawerClose{
  appearance:none;
  border:1px solid rgba(67,82,105,.18);
  background:#fff;
  width:34px;
  height:34px;
  border-radius:10px;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.smartHomeDrawerBody{
  flex:1;
  min-height:0;
  overflow:hidden;
}

/* In drawer, smartHomeChat is outside section[data-section="home"].
   Re-apply the same styles with drawer-scoped selectors. */
.smartHomeDrawerPanel .smartHomeChat{
  border:1px solid rgba(67,82,105,.14);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 34px rgba(12,15,20,.08);
  padding:12px;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
}
.smartHomeDrawerPanel .smartHomeChatHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.smartHomeDrawerPanel .smartHomeMessages{
  margin-top:10px;
  flex:1;
  min-height:0;
  height:auto;
  max-height:none;
  border:1px solid rgba(67,82,105,.14);
  border-radius:10px;
  background:rgba(248,250,252,.65);
  padding:8px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.smartHomeDrawerPanel .smartHomeMsg{
  border:1px solid rgba(67,82,105,.12);
  border-radius:8px;
  background:#fff;
  color:rgba(15,23,42,.82);
  font-size:12px;
  line-height:1.55;
  padding:7px 8px;
  white-space:pre-wrap;
}
.smartHomeDrawerPanel .smartHomeMsg.is-user{
  align-self:flex-end;
  background:rgba(219,234,254,.78);
  border-color:rgba(59,130,246,.26);
}
.smartHomeDrawerPanel .smartHomeQuickCases{
  margin-top:10px;
}
.smartHomeDrawerPanel .smartHomeComposer{
  margin-top:10px;
}

/* Drawer: reuse quick cases + composer styles as desktop */
.smartHomeDrawerPanel .smartHomeQuickCases{
  margin-top:8px;
  display:grid;
  gap:7px;
}
.smartHomeDrawerPanel .smartHomeCaseBtn{
  width:100%;
  text-align:left;
  border:1px solid rgba(59,130,246,.20);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(239,246,255,.9), rgba(219,234,254,.6));
  color:rgba(30,64,175,.94);
  font-size:12px;
  line-height:1.45;
  padding:7px 10px;
  cursor:pointer;
  transition:all .18s ease;
}
.smartHomeDrawerPanel .smartHomeCaseBtn:hover{
  border-color:rgba(59,130,246,.36);
  background:linear-gradient(180deg, rgba(219,234,254,.98), rgba(191,219,254,.72));
  transform:translateY(-1px);
}
.smartHomeDrawerPanel .smartHomeCaseBtn:active{
  transform:translateY(0);
}
.smartHomeDrawerPanel .smartHomeComposer{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  border:1px solid rgba(67,82,105,.16);
  border-radius:10px;
  background:#fff;
  padding:8px;
}
.smartHomeDrawerPanel .smartHomeInput{
  width:100%;
  border:0;
  border-radius:8px;
  background:transparent;
  color:rgba(15,23,42,.84);
  font-size:12px;
  line-height:1.5;
  padding:6px 8px;
  resize:vertical;
  min-height:74px;
  outline:none;
}
.smartHomeDrawerPanel .smartHomeActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.smartHomeDrawerPanel .smartHomeActions .btn{
  width:100%;
  justify-content:center;
}
.smartHomeDrawerPanel #smartHomeSendBtn{
  color:rgba(30,64,175,.92);
  background:linear-gradient(180deg, rgba(239,246,255,.98), rgba(219,234,254,.92));
  border:1px solid rgba(59,130,246,.28);
  box-shadow:none;
}
.smartHomeDrawerPanel #smartHomeSendBtn:hover{
  background:linear-gradient(180deg, rgba(219,234,254,.98), rgba(191,219,254,.92));
  transform:translateY(-1px);
}
section[data-section="home"] .smartHomeDevices{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  position:relative;
}
section[data-section="home"] .smartHomeLinkLines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color:rgba(56,189,248,.85);
  overflow:visible;
  pointer-events:none;
  z-index:3;
}
section[data-section="home"] .smartHomeCable{
  fill:none;
  stroke:url(#smartHomeCableGrad);
  stroke-width:0.62;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:url(#smartHomeCableGlow);
  opacity:0;
  stroke-dasharray:120;
  stroke-dashoffset:120;
}
section[data-section="home"] .smartHomeCable.is-active{
  opacity:.95;
  animation:smartHomeCableDraw .72s cubic-bezier(.22,.8,.22,1) forwards;
}
section[data-section="home"] .smartHomeCable.is-retract{
  opacity:.95;
  animation:smartHomeCableRetract .52s cubic-bezier(.3,.05,.28,1) forwards;
}
@keyframes smartHomeCableDraw{
  0%{
    stroke-dashoffset:120;
    opacity:.25;
  }
  100%{
    stroke-dashoffset:0;
    opacity:.95;
  }
}
@keyframes smartHomeCableRetract{
  0%{
    stroke-dashoffset:0;
    opacity:.95;
  }
  100%{
    stroke-dashoffset:120;
    opacity:0;
  }
}
section[data-section="home"] .smartHomeDevice{
  border:1px solid rgba(67,82,105,.14);
  border-radius:10px;
  background:#fff;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:266px;
  transition:all .2s ease;
  position:relative;
  z-index:2;
}
section[data-section="home"] .smartHomeDevice.smartHomeDevicePlaceholder{
  border:0;
  background:transparent;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:4;
}
section[data-section="home"] .smartHomePlaceholderMedia{
  width:100%;
  height:100%;
  min-height:210px;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
section[data-section="home"] .smartHomePlaceholderLogo{
  width:min(74%, 260px);
  max-height:180px;
  height:auto;
  display:block;
  transform-origin:center;
  will-change:transform;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
  outline:none;
}
section[data-section="home"] .smartHomePlaceholderLogo:focus,
section[data-section="home"] .smartHomePlaceholderLogo:active{
  outline:none;
  box-shadow:none;
  background:transparent;
}
section[data-section="home"] .smartHomeDevice.is-on{
  border-color:rgba(34,197,94,.36);
  box-shadow:0 10px 24px rgba(34,197,94,.12);
  background:linear-gradient(180deg, rgba(240,253,244,.92), rgba(255,255,255,.98));
}
section[data-section="home"] .smartHomeDeviceMedia{
  border:1px solid rgba(67,82,105,.12);
  border-radius:8px;
  background:rgba(248,250,252,.8);
  overflow:hidden;
  height:228px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
}
section[data-section="home"] .smartHomeSvgHost svg{
  width:100%;
  height:100%;
  display:block;
}
section[data-section="home"] .smartHomeDeviceMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
section[data-section="home"] .smartHomeDeviceName{
  font-size:12px;
  font-weight:760;
  color:rgba(15,23,42,.9);
}
section[data-section="home"] .smartHomeDeviceState{
  display:inline-flex;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(100,116,139,.22);
  color:rgba(71,85,105,.9);
  background:rgba(248,250,252,.85);
}
section[data-section="home"] .smartHomeDevice.is-on .smartHomeDeviceState{
  border-color:rgba(34,197,94,.32);
  color:rgba(22,101,52,.92);
  background:rgba(220,252,231,.95);
}
section[data-section="home"] .smartHomeChat{
  background:#fff;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:560px;
}
section[data-section="home"] .smartHomeChatHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
section[data-section="home"] .smartHomeMessages{
  margin-top:10px;
  flex:none;
  height:555px;
  min-height:555px;
  max-height:555px;
  border:1px solid rgba(67,82,105,.14);
  border-radius:10px;
  background:rgba(248,250,252,.65);
  padding:8px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.55) transparent;
}
section[data-section="home"] .smartHomeMessages::-webkit-scrollbar{
  width:6px;
}
section[data-section="home"] .smartHomeMessages::-webkit-scrollbar-track{
  background:transparent;
}
section[data-section="home"] .smartHomeMessages::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.48);
  border-radius:999px;
}
section[data-section="home"] .smartHomeMessages::-webkit-scrollbar-thumb:hover{
  background:rgba(100,116,139,.58);
}
section[data-section="home"] .smartHomeMsg{
  border:1px solid rgba(67,82,105,.12);
  border-radius:8px;
  background:#fff;
  color:rgba(15,23,42,.82);
  font-size:12px;
  line-height:1.55;
  padding:7px 8px;
  white-space:pre-wrap;
  animation:smartHomeMsgPop .24s cubic-bezier(.2,.8,.2,1);
  transform-origin:left bottom;
}
section[data-section="home"] .smartHomeMsg.is-loading{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:32px;
  border:0;
  background:transparent;
  box-shadow:none;
  padding:2px 0 2px 4px;
}
section[data-section="home"] .smartHomeThinkingIcon{
  width:22px;
  height:22px;
  display:block;
  animation:smartHomeThinkingSpin 1.1s linear infinite;
  transform-origin:center;
}
@keyframes smartHomeThinkingSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
section[data-section="home"] .smartHomeMsg.is-user{
  align-self:flex-end;
  background:rgba(219,234,254,.78);
  border-color:rgba(59,130,246,.26);
}
section[data-section="home"] .smartHomeMsg.is-tool{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px;
  border-radius:8px;
  min-width:170px;
  background:linear-gradient(180deg, rgba(240,249,255,.98), rgba(224,231,255,.80));
  border:1px solid rgba(59,130,246,.24);
  color:rgba(30,64,175,.94);
  box-shadow:0 6px 14px rgba(59,130,246,.08);
  white-space:nowrap;
  max-width:100%;
}
section[data-section="home"] .smartHomeToolIcon{
  width:15px;
  height:15px;
  display:block;
  flex:none;
}
section[data-section="home"] .smartHomeToolText{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
section[data-section="home"] .smartHomeMsg.is-tool strong{
  font-weight:850;
}
section[data-section="home"] .smartHomeMsg.is-tool.tool-light{
  border-color:rgba(14,165,233,.32);
  background:linear-gradient(180deg, rgba(236,254,255,.98), rgba(224,242,254,.82));
  color:rgba(12,74,110,.95);
}
section[data-section="home"] .smartHomeMsg.is-tool.tool-tv{
  border-color:rgba(79,70,229,.30);
  background:linear-gradient(180deg, rgba(238,242,255,.98), rgba(224,231,255,.82));
  color:rgba(49,46,129,.95);
}
section[data-section="home"] .smartHomeMsg.is-tool.tool-curtain{
  border-color:rgba(14,116,144,.30);
  background:linear-gradient(180deg, rgba(236,254,255,.98), rgba(207,250,254,.80));
  color:rgba(22,78,99,.95);
}
section[data-section="home"] .smartHomeMsg.is-tool.tool-door{
  border-color:rgba(71,85,105,.28);
  background:linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.84));
  color:rgba(30,41,59,.94);
}
section[data-section="home"] .smartHomeMsg.is-tool.tool-ac{
  border-color:rgba(37,99,235,.30);
  background:linear-gradient(180deg, rgba(239,246,255,.98), rgba(219,234,254,.82));
  color:rgba(30,64,175,.95);
}
section[data-section="home"] .smartHomeMsg.is-tool.tool-airPurifier{
  border-color:rgba(16,185,129,.30);
  background:linear-gradient(180deg, rgba(236,253,245,.98), rgba(209,250,229,.82));
  color:rgba(6,95,70,.95);
}
section[data-section="home"] .smartHomeMsg.is-tool.tool-robot{
  border-color:rgba(59,130,246,.30);
  background:linear-gradient(180deg, rgba(239,246,255,.98), rgba(219,234,254,.82));
  color:rgba(30,64,175,.95);
}
section[data-section="home"] .smartHomeMsg.is-tool.tool-waterHeater{
  border-color:rgba(249,115,22,.30);
  background:linear-gradient(180deg, rgba(255,247,237,.98), rgba(254,215,170,.80));
  color:rgba(124,45,18,.95);
}
section[data-section="home"] .smartHomeQuickCases{
  margin-top:8px;
  display:grid;
  gap:7px;
}
section[data-section="home"] .smartHomeCaseBtn{
  width:100%;
  text-align:left;
  border:1px solid rgba(59,130,246,.20);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(239,246,255,.9), rgba(219,234,254,.6));
  color:rgba(30,64,175,.94);
  font-size:12px;
  line-height:1.45;
  padding:7px 10px;
  cursor:pointer;
  transition:all .18s ease;
}
section[data-section="home"] .smartHomeCaseBtn:hover{
  border-color:rgba(59,130,246,.36);
  background:linear-gradient(180deg, rgba(219,234,254,.98), rgba(191,219,254,.72));
  transform:translateY(-1px);
}
section[data-section="home"] .smartHomeCaseBtn:active{
  transform:translateY(0);
}
@keyframes smartHomeMsgPop{
  from{
    opacity:0;
    transform:translateY(8px) scale(.97);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
section[data-section="home"] .smartHomeComposer{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  border:1px solid rgba(67,82,105,.16);
  border-radius:10px;
  background:#fff;
  padding:8px;
}
section[data-section="home"] .smartHomeInput{
  width:100%;
  border:0;
  border-radius:8px;
  background:transparent;
  color:rgba(15,23,42,.84);
  font-size:12px;
  line-height:1.5;
  padding:6px 8px;
  resize:vertical;
  min-height:74px;
  outline:none;
}
section[data-section="home"] .smartHomeActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
section[data-section="home"] .smartHomeActions .btn{
  width:100%;
  justify-content:center;
}
section[data-section="home"] #smartHomeSendBtn{
  color:rgba(30,64,175,.92);
  background:linear-gradient(180deg, rgba(239,246,255,.98), rgba(219,234,254,.92));
  border:1px solid rgba(59,130,246,.28);
  box-shadow:none;
}
section[data-section="home"] #smartHomeSendBtn:hover{
  background:linear-gradient(180deg, rgba(219,234,254,.98), rgba(191,219,254,.92));
  transform:translateY(-1px);
}
@media (max-width: 1220px){
  section[data-section="home"] .smartHomeGrid{
    grid-template-columns:1fr;
  }
  section[data-section="home"] .smartHomeLinkLines{
    display:none;
  }
  section[data-section="home"] .smartHomeDevices{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  section[data-section="home"] .smartHomeDeviceMedia{
    height:142px;
  }
  section[data-section="home"] .smartHomeChat{
    min-height:520px;
  }
}

/* INDUSTRY section: unique premium tint (ink/blue, more restrained) */
section[data-section="industry"]{
  position:relative;
  background:#fff;
}
section[data-section="industry"]::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(980px 520px at 16% 14%, rgba(17,24,39,.07), transparent 62%),
    radial-gradient(860px 520px at 86% 18%, rgba(42,103,255,.09), transparent 66%),
    radial-gradient(820px 520px at 54% 80%, rgba(99,102,241,.06), transparent 68%);
}
section[data-section="industry"] .container{
  position:relative;
  z-index:1;
}

section[data-section="industry"] .devStudioGrid{
  position:relative;
  grid-template-columns:minmax(0, 1fr) 330px;
  gap:0;
  align-items:stretch;
  margin-top:0;
  padding-top:30px;
}
section[data-section="industry"] .sectionHeader.reveal{
  opacity:0;
  transform:translate3d(-140px, 0, 0);
  filter:blur(5px);
  transition:
    opacity 1.65s cubic-bezier(.22,.8,.22,1),
    transform 1.65s cubic-bezier(.22,.8,.22,1),
    filter 1.25s cubic-bezier(.22,.8,.22,1);
  will-change:opacity, transform, filter;
}
section[data-section="industry"] .sectionHeader.reveal.is-in{
  opacity:1;
  transform:translate3d(0, 0, 0);
  filter:blur(0);
}
section[data-section="industry"] .devStudioMain.reveal{
  opacity:0;
  transform:translate3d(-180px, 0, 0);
  filter:blur(4px);
  transition:
    opacity 1.9s cubic-bezier(.22,.8,.22,1),
    transform 1.9s cubic-bezier(.22,.8,.22,1),
    filter 1.4s cubic-bezier(.22,.8,.22,1);
  will-change:opacity, transform, filter;
}
section[data-section="industry"] .devStudioMain.reveal.is-in{
  opacity:1;
  transform:translate3d(0, 0, 0);
  filter:blur(0);
}
section[data-section="industry"] .devChatDock.reveal{
  opacity:0;
  transform:translate3d(180px, 0, 0);
  filter:blur(4px);
  transition:
    opacity 1.9s cubic-bezier(.22,.8,.22,1),
    transform 1.9s cubic-bezier(.22,.8,.22,1),
    filter 1.4s cubic-bezier(.22,.8,.22,1);
  transition-delay:.18s;
  will-change:opacity, transform, filter;
}
section[data-section="industry"] .devChatDock.reveal.is-in{
  opacity:1;
  transform:translate3d(0, 0, 0);
  filter:blur(0);
}
section[data-section="industry"] .sectionHeader{
  margin-bottom:0;
}
section[data-section="industry"] .sectionHeader .lede{
  margin:20px 0 0;
}
section[data-section="industry"] .devStudioMain{
  min-width:0;
  min-height:100%;
}
section[data-section="industry"] .devStudioShell{
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px 0 0 24px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,248,252,.92));
  box-shadow:0 26px 70px rgba(15,23,42,.10);
  backdrop-filter:blur(14px);
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
}
section[data-section="industry"] .devStudioHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px 12px;
}
section[data-section="industry"] .devStudioHeadRight{
  display:flex;
  align-items:center;
  gap:8px;
}
section[data-section="industry"] .devPreviewToggle{
  border:1px solid rgba(15,23,42,.14);
  border-radius:8px;
  background:#fff;
  color:#0f172a;
  font-size:12px;
  line-height:1;
  padding:6px 10px;
  cursor:pointer;
}
section[data-section="industry"] .devPreviewToggle:hover{
  background:#f8fafc;
}
section[data-section="industry"] .devPreviewToggle.is-active{
  background:#0f172a;
  color:#fff;
  border-color:#0f172a;
}
section[data-section="industry"] .devStudioTitle{
  font-size:18px;
  font-weight:700;
  color:rgba(2,6,23,.92);
}
section[data-section="industry"] .devCodeViewport{
  margin:0 12px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:linear-gradient(180deg, #ffffff, #f8fafc);
  height:520px;
  min-height:520px;
  max-height:520px;
  display:grid;
  grid-template-columns:28px minmax(0, 1fr);
  overflow:hidden;
  flex:none;
}
section[data-section="industry"] .devCodeGutter{
  padding:14px 2px;
  font:500 12px/1.7 "JetBrains Mono","Consolas","Menlo",monospace;
  color:rgba(100,116,139,.78);
  background:rgba(241,245,249,.95);
  text-align:right;
  user-select:none;
  white-space:pre;
  overflow:hidden;
}
section[data-section="industry"] .devCodePre{
  margin:0;
  padding:14px 16px;
  overflow:auto;
  height:100%;
}
section[data-section="industry"] .devCodeInner{
  font:500 13px/1.7 "JetBrains Mono","Consolas","Menlo",monospace;
  color:#475569;
  white-space:pre-wrap;
  word-break:break-word;
}
section[data-section="industry"] .devCodeQuoteIcon{
  height:20px;
  width:auto;
  display:inline-block;
  vertical-align:middle;
  transform: translateY(0px);
}
section[data-section="industry"] .devStudioComposer{
  display:flex;
  gap:0;
  padding:10px 4px 4px;
  width:100%;
  position:relative;
}
section[data-section="industry"] .devStudioInput{
  flex:1;
  min-height:48px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  background:rgba(255,255,255,.94);
  padding:0 46px 0 14px;
  font-size:14px;
  outline:none;
  width:100%;
}
section[data-section="industry"] .devStudioSend{
  width:32px;
  min-width:32px;
  height:32px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#0f172a;
  display:grid;
  place-items:center;
  cursor:pointer;
  margin-left:0;
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(calc(-50% + 3px));
  z-index:2;
}
section[data-section="industry"] .devStudioSend:hover{
  background:transparent;
}
section[data-section="industry"] .devSendLogo{
  width:28px;
  height:28px;
  display:block;
}
section[data-section="industry"] .devStudioSend.is-streaming .devSendLogo{
  animation:devSendLogoSpin var(--dev-spin-dur, 1s) linear infinite;
}
@keyframes devSendLogoSpin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
section[data-section="industry"] .devStudioFoot{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  padding:6px 14px 14px;
}
section[data-section="industry"] .devStudioFoot .tiny{
  margin-left:0;
}
section[data-section="industry"] .devCaseList{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}
section[data-section="industry"] .devCaseBtn{
  border:1px solid rgba(15,23,42,.12);
  border-radius:8px;
  background:#fff;
  color:rgba(15,23,42,.86);
  padding:8px 10px;
  font-size:12px;
  text-align:left;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
section[data-section="industry"] .devCaseBtn:hover{
  background:#f8fafc;
  border-color:rgba(30,64,175,.28);
  transform:translateY(-1px);
}
section[data-section="industry"] .devCaseBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

section[data-section="industry"] .devChatDock{
  position:relative;
  border:1px solid rgba(15,23,42,.08);
  border-left:0;
  border-radius:0 24px 24px 0;
  background:linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow:0 26px 70px rgba(15,23,42,.10);
  overflow:hidden;
  min-height:100%;
  display:flex;
  flex-direction:column;
}

/* Dev chat drawer (mobile) */
.devChatOpenBtn{
  display:none;
  border:1px solid rgba(15,23,42,.22);
  background:#fff;
  color:rgba(2,6,23,.92);
  font-size:12px;
  font-weight:820;
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  box-shadow:none;
}
.devChatOpenBtn:hover{transform:translateY(-1px)}
.devChatDrawer{
  position:fixed;
  inset:0;
  z-index:1260;
  display:flex;
  justify-content:flex-end;
  opacity:1;
  transition:opacity .24s ease;
}
.devChatDrawer.is-prep{
  opacity:0;
  pointer-events:none;
}
.devChatDrawer.is-hidden{
  opacity:0;
  pointer-events:none;
}
.devChatDrawerBackdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(248,250,252,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity:1;
  transition:opacity .24s ease;
}
.devChatDrawerPanel{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  height:100svh;
  width:min(96vw, 520px);
  background:#fff;
  border-left:1px solid rgba(67,82,105,.16);
  box-shadow:0 20px 80px rgba(12,15,20,.2);
  padding:14px 14px 18px;
  transform:translateX(0);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.devChatDrawer.is-prep .devChatDrawerPanel{
  transform:translateX(100%);
}
.devChatDrawer.is-hidden .devChatDrawerPanel{
  transform:translateX(100%);
}
.devChatDrawer.is-prep .devChatDrawerBackdrop{
  opacity:0;
}
.devChatDrawer.is-hidden .devChatDrawerBackdrop{
  opacity:0;
}
.devChatDrawerHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.devChatDrawerTitle{
  font-size:15px;
  font-weight:860;
  color:rgba(15,23,42,.92);
}
.devChatDrawerClose{
  appearance:none;
  border:1px solid rgba(67,82,105,.18);
  background:#fff;
  width:34px;
  height:34px;
  border-radius:10px;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.devChatDrawerBody{
  flex:1;
  min-height:0;
  overflow:hidden;
  padding-right:2px;
}

/* In drawer, devChatDock is outside section[data-section="industry"].
   Re-apply the same styles with drawer-scoped selectors. */
.devChatDrawerPanel .devChatDock{
  position:relative;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
  min-height:100%;
  display:flex;
  flex-direction:column;
  height:100%;
}
.devChatDrawerPanel .devChatToggle{
  width:100%;
  border:0;
  border-bottom:1px solid rgba(15,23,42,.08);
  background:rgba(248,250,252,.92);
  padding:10px 12px;
  font-size:12px;
  color:rgba(15,23,42,.72);
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.devChatDrawerPanel #devChatToggleBtn{
  display:none !important;
}
.devChatDrawerPanel .devChatPanel{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:10px;
  background:linear-gradient(180deg, #ffffff, #f8fafc);
  flex:1;
  min-height:0;
  position:relative;
}
.devChatDrawerPanel .devChatMessages{
  min-height:0;
  max-height:none;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  height:auto;
}
.devChatDrawerPanel .devChatPanel .devStudioComposer{
  margin-top:auto;
  padding-top:10px;
}

/* Drawer: reuse the same input/send styles as desktop */
.devChatDrawerPanel .devStudioComposer{
  display:flex;
  gap:0;
  padding:10px 4px 4px;
  width:100%;
  position:relative;
}
.devChatDrawerPanel .devStudioInput{
  flex:1;
  min-height:48px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  background:rgba(255,255,255,.94);
  padding:0 46px 0 14px;
  font-size:14px;
  outline:none;
  width:100%;
}
.devChatDrawerPanel .devStudioSend{
  width:32px;
  min-width:32px;
  height:32px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#0f172a;
  display:grid;
  place-items:center;
  cursor:pointer;
  margin-left:0;
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(calc(-50% + 3px));
  z-index:2;
}
.devChatDrawerPanel .devStudioSend:hover{
  background:transparent;
}
.devChatDrawerPanel .devSendLogo{
  width:28px;
  height:28px;
  display:block;
}
.devChatDrawerPanel .devStudioSend.is-streaming .devSendLogo{
  animation:devSendLogoSpin var(--dev-spin-dur, 1s) linear infinite;
}

/* Drawer: reuse bubble styles as desktop */
.devChatDrawerPanel .devBubble{
  border-radius:12px;
  padding:8px 10px;
  font-size:12px;
  line-height:1.6;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
}
.devChatDrawerPanel .devBubble.is-tool{
  align-self:flex-start;
  border-radius:10px;
  padding:8px 10px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.10);
  color:rgba(15,23,42,.82);
  font-size:11.5px;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}
.devChatDrawerPanel .devBubble.is-user{
  align-self:flex-end;
  background:rgba(241,245,249,.98);
}
section[data-section="industry"] .devChatToggle{
  width:100%;
  border:0;
  border-bottom:1px solid rgba(15,23,42,.08);
  background:rgba(248,250,252,.92);
  padding:10px 12px;
  font-size:12px;
  color:rgba(15,23,42,.72);
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
section[data-section="industry"] .devChatPanel{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:10px;
  background:linear-gradient(180deg, #ffffff, #f8fafc);
  flex:1;
  min-height:0;
  position:relative;
}
section[data-section="industry"] .devChatDock.is-collapsed .devChatPanel{
  display:none;
}
section[data-section="industry"] .devChatMessages{
  min-height:0;
  max-height:none;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  height:520px;
  max-height:520px;
  flex:none;
  scrollbar-width:thin;
  scrollbar-color: rgba(148,163,184,.55) transparent;
}

/* Keep the input pinned at the bottom of the chat panel */
section[data-section="industry"] .devChatPanel .devStudioComposer{
  margin-top:auto;
  padding-top:10px;
}
section[data-section="industry"] .devChatMessages::-webkit-scrollbar{
  width:6px;
}
section[data-section="industry"] .devChatMessages::-webkit-scrollbar-track{
  background:transparent;
}
section[data-section="industry"] .devChatMessages::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.55);
  border-radius:999px;
}
section[data-section="industry"] .devChatMessages::-webkit-scrollbar-thumb:hover{
  background:rgba(100,116,139,.65);
}
section[data-section="industry"] .devBubble{
  border-radius:12px;
  padding:8px 10px;
  font-size:12px;
  line-height:1.6;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
}
section[data-section="industry"] .devBubble.is-tool{
  align-self:flex-start;
  border-radius:10px;
  padding:8px 10px;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.10);
  color:rgba(15,23,42,.82);
  font-size:11.5px;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}
section[data-section="industry"] .devToolIcon{
  width:16px;
  height:16px;
  flex:none;
  opacity:.88;
  filter: saturate(.9) contrast(1.05);
}
section[data-section="industry"] .devToolText{
  line-height:1.45;
}
section[data-section="industry"] .devBubble.is-user{
  align-self:flex-end;
  background:rgba(241,245,249,.98);
}
section[data-section="industry"] .devPreviewMini{
  position:relative;
  margin:0 12px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 40px rgba(15,23,42,.12);
  overflow:hidden;
  display:none;
}
section[data-section="industry"] .devPreviewMini.is-visible{
  display:block;
}
section[data-section="industry"] .devStudioShell.is-previewing .devCodeViewport{
  display:none;
}
section[data-section="industry"] .devStudioShell.is-previewing .devPreviewMini{
  display:block;
}
section[data-section="industry"] .devPreviewHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  border-bottom:1px solid rgba(15,23,42,.08);
}
section[data-section="industry"] .devPreviewHeadActions{
  display:flex;
  align-items:center;
  gap:8px;
}
section[data-section="industry"] .devPreviewOpen{
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  color:#0f172a;
  border-radius:8px;
  font-size:12px;
  line-height:1;
  padding:5px 10px;
  cursor:pointer;
}
section[data-section="industry"] .devPreviewOpen:hover{
  background:#f8fafc;
}
section[data-section="industry"] .devPreviewClose{
  border:0;
  background:transparent;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  color:rgba(15,23,42,.62);
}
section[data-section="industry"] .devPreviewFrame{
  display:none;
  width:100%;
  height:520px;
  border:0;
  background:#fff;
}
section[data-section="industry"] .devPreviewMini.has-content .devPreviewFrame{
  display:block;
}
section[data-section="industry"] .devPreviewPlaceholder{
  padding:14px 12px;
  font-size:12px;
  color:rgba(71,85,105,.88);
}
section[data-section="industry"] .devPreviewMini.has-content .devPreviewPlaceholder{
  display:none;
}

@media (max-width: 1100px){
  section[data-section="industry"] .devStudioGrid{
    grid-template-columns:minmax(0, 1fr);
    gap:12px;
  }
  section[data-section="industry"] .devStudioShell{
    border-radius:24px;
  }
  section[data-section="industry"] .devChatDock{
    border-left:1px solid rgba(15,23,42,.08);
    border-radius:24px;
  }
  section[data-section="industry"] .devChatMessages{
    min-height:220px;
    max-height:320px;
  }
  section[data-section="industry"] .devCaseList{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* FOOTER section: unique premium tint (blue/violet closure) */
footer[data-section="footer"]{
  position:relative;
  background:#fff !important;
  min-height: 100svh;
  display:flex;
  align-items:center;
}
footer[data-section="footer"]::before{
  content:none;
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(980px 520px at 14% 14%, rgba(42,103,255,.10), transparent 62%),
    radial-gradient(860px 520px at 86% 18%, rgba(124,58,237,.08), transparent 66%),
    radial-gradient(820px 520px at 52% 78%, rgba(53,183,255,.07), transparent 68%);
}
footer[data-section="footer"] .container{
  position:relative;
  z-index:1;
}
footer[data-section="footer"] .h2{
  font-size: clamp(42px, 6.8vw, 88px);
  line-height: 1.02;
}
footer[data-section="footer"] .footerHeroTitle{
  display:block;
}
footer[data-section="footer"] .footerHeroTitle .h2{
  margin:0;
}
footer[data-section="footer"] .footerHeroIcon{
  width:clamp(260px, 28vw, 460px);
  height:auto;
  position:absolute;
  top:-150px;
  right:0;
  opacity:.95;
  transform:none;
}

.visualLabel{position:absolute; left:18px; bottom:16px}
.visualTitle{font-weight:760; letter-spacing:-.01em}
.visualSub{color:var(--muted); font-size:13px; margin-top:2px}

/* Data cards */
.dataRow{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.dataCard{
  border:1px solid var(--hairline);
  border-radius:18px;
  background:rgba(255,255,255,.65);
  padding:14px 14px;
}
.dataValue{margin-top:8px; font-size:22px; font-weight:760; letter-spacing:-.02em}
.dataNote{margin-top:2px; font-size:13px; color:var(--muted)}

/* Car interaction */
.caseQuiz{display:flex; flex-direction:column; gap:10px}
.caseOptions{display:flex; flex-direction:column; gap:10px}
.caseOption{
  display:flex;
  gap:10px;
  align-items:flex-start;
  border:1px solid var(--hairline);
  border-radius:10px;
  background:#fff;
  padding:10px 12px;
  font-size:16px;
  line-height:1.55;
  cursor:pointer;
  transition:all .2s ease;
}
.caseOption:hover,
.caseOption:has(input[type="radio"]:checked){
  border-color:#8b5cf6;
  background:rgba(139,92,246,.08);
  box-shadow:0 4px 12px rgba(139,92,246,.15);
  transform:translateY(-2px);
}
.caseOption:hover input[type="radio"],
.caseOption:has(input[type="radio"]:checked) input[type="radio"]{
  accent-color:#8b5cf6;
}
.caseOption input{margin-top:3px}
.caseActions{display:flex; gap:10px; margin-top:2px}
.caseRun{display:flex; flex-direction:column; gap:10px}
.is-hidden{display:none !important}
.btnMini{
  padding:10px 12px;
  font-size:13px;
}
#carRunPanel .caseActions{
  margin-top:12px;
}
.card[data-card="medHubCard"] .caseActions{
  margin-top:10px;
}
#medAnalyzeBtn{
  color:#14532d;
  background:linear-gradient(180deg, rgba(236,253,245,.96), rgba(220,252,231,.92));
  border:1px solid rgba(34,197,94,.30);
  box-shadow:none;
}
#medAnalyzeBtn:hover{
  background:linear-gradient(180deg, rgba(220,252,231,.98), rgba(190,242,215,.95));
  transform:translateY(-1px);
}

.carWorkflow{
  border:1px solid rgba(67,82,105,.16);
  border-radius:18px;
  background:rgba(255,255,255,.86);
  box-shadow:0 12px 36px rgba(12,15,20,.08);
  overflow:hidden;
}
.wfTopbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(67,82,105,.12);
  background:linear-gradient(180deg, rgba(245,248,255,.95), rgba(255,255,255,.86));
}
.wfElapsed{
  font-size:12px;
  color:rgba(12,15,20,.62);
  padding:4px 8px;
  border-radius:999px;
  background:rgba(12,15,20,.04);
}
.wfStudio{
  font-size:12px;
  color:rgba(12,15,20,.72);
}
.wfMain{
  display:grid;
  grid-template-columns:300px 1fr;
  min-height:460px;
  align-items:stretch;
}
.workflowSteps{
  border-right:1px solid rgba(67,82,105,.12);
  padding:16px 12px;
  background:rgba(251,253,255,.92);
  height:100%;
  max-height:none;
  overflow:visible;
}
.wfStep{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:rgba(12,15,20,.42);
  transition:color .2s ease;
}
.wfStepIndex{
  width:34px;
  height:34px;
  border-radius:999px;
  border:2px solid rgba(12,15,20,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  background:#fff;
  flex:none;
}
.wfStepLabel{
  margin-top:2px;
  font-size:15px;
  line-height:1.4;
  font-weight:600;
}
.wfStepLine{
  width:2px;
  height:26px;
  margin:4px 0 4px 16px;
  background:rgba(12,15,20,.10);
  transition:background .2s ease;
}
.wfStep.is-active{
  color:var(--text);
}
.wfStep.is-active .wfStepIndex{
  border-color:#7c5cff;
  box-shadow:0 0 0 4px rgba(124,92,255,.13);
}
.wfStep.is-done{
  color:rgba(12,15,20,.76);
}
.wfStep.is-done .wfStepIndex{
  border-color:#a7b2c8;
  color:transparent;
  position:relative;
}
.wfStep.is-done .wfStepIndex::after{
  content:"✓";
  position:absolute;
  inset:0;
  color:#475569;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wfStepLine.is-done{
  background:linear-gradient(180deg, #8b7cff, #c3b7ff);
}
.workflowConsole{
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.wfTitle{
  margin:0;
  font-size:40px;
  line-height:1.15;
  letter-spacing:-.02em;
}
.wfLogs{
  display:flex;
  flex-direction:column;
  gap:8px;
  height:auto;
  overflow:visible;
  padding-right:2px;
  transition:height .22s ease;
}
.wfAccordion{
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}
.wfAccordionTrigger{
  width:100%;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  cursor:pointer;
  text-align:left;
}
.wfAccordionDot{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(12,15,20,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:rgba(12,15,20,.72);
  flex:none;
}
.wfAccordionTitle{
  font-size:14px;
  color:rgba(12,15,20,.76);
  font-weight:600;
}
.wfAccordionArrow{
  margin-left:auto;
  color:rgba(12,15,20,.48);
  transition:transform .2s ease;
}
.wfAccordion.is-open .wfAccordionArrow{
  transform:rotate(180deg);
}
.wfAccordion.is-done .wfAccordionDot{
  border-color:#a7b2c8;
  color:#475569;
}
.wfAccordionBody{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0 10px;
}
.wfAccordion.is-open .wfAccordionBody{
  padding:0 10px 10px;
}
.wfLogItem{
  border:1px solid rgba(67,82,105,.14);
  border-radius:12px;
  background:#fff;
  min-height:42px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  color:rgba(12,15,20,.66);
  font-size:14px;
  line-height:1.4;
  position:relative;
  overflow:hidden;
}
.wfLogItem.is-live::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(124,92,255,.22), transparent);
  animation:taskLoad 1.8s linear infinite;
}
section[data-section="medical"] #medOutLogs .wfLogItem.is-live::after{
  background:linear-gradient(90deg, transparent, rgba(34,197,94,.22), transparent);
}
.wfLogItem.is-final{
  border-color:#7c5cff;
  box-shadow:0 0 0 1px rgba(124,92,255,.2) inset;
}
.wfLogIcon{
  margin-right:8px;
  color:rgba(71,85,105,.92);
}
.previewInline{
  margin-top:12px;
}
.previewInline .cardInner{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.previewTitle{
  font-size:22px;
  font-weight:760;
  letter-spacing:-.01em;
  margin-top:-2px;
}
.previewFrameWrap{
  position:relative;
  border:1px solid rgba(67,82,105,.14);
  border-radius:14px;
  background:#fff;
  min-height:640px;
  overflow:hidden;
}
.previewFrame{
  width:100%;
  height:640px;
  border:0;
  display:block;
  background:#fff;
}
.previewPlaceholder{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  color:rgba(12,15,20,.56);
  font-size:14px;
  line-height:1.6;
  background:linear-gradient(180deg, rgba(250,252,255,.95), rgba(255,255,255,.98));
}
.previewFrameWrap.is-empty .previewFrame{
  visibility:hidden;
}
.previewFrameWrap:not(.is-empty) .previewPlaceholder{
  display:none;
}
#carConfirmBtn{
  background:#fff;
  border:1px solid #c4b5fd;
  color:#6d28d9;
  box-shadow:none;
}
#carConfirmBtn:hover{
  background:#f5f5f5;
  transform:translateY(-1px);
}
.tag{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.55);
  font-size:13px;
  color:var(--muted);
  transition:transform .18s ease, opacity .18s ease;
}
.tag.is-off{opacity:.45; transform:scale(.98)}

.carTimeline{
  position:absolute; left:18px; right:18px; top:26px;
  display:flex; align-items:center; gap:10px;
}
.carNode{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.62);
  color:var(--muted);
  font-size:13px;
  transition:all .22s ease;
}
.carNode.is-active{color:var(--text); box-shadow:var(--shadowSm)}
.carLine{flex:1; height:1px; background:rgba(12,15,20,.10)}

/* Medical tabs */
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{
  appearance:none;
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.55);
  color:var(--muted);
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  transition:all .18s ease;
}
.tab.is-active{color:var(--text); background:rgba(255,255,255,.80); box-shadow:var(--shadowSm)}
.panelTitle{
  margin-top:10px;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.01em;
  background:linear-gradient(90deg, #334155, #0f172a);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transition:all .28s ease;
}
.panelTitle.is-connecting{
  background-image:linear-gradient(90deg, #2563eb, #22d3ee, #3b82f6);
  background-size:220% 100%;
  animation:medTitleFlow 1.7s linear infinite;
}
.panelTitle.is-streaming{
  background-image:linear-gradient(90deg, #7c3aed, #ec4899, #8b5cf6);
  background-size:240% 100%;
  animation:medTitleFlow 1.25s linear infinite, medTitlePulse 1.35s ease-in-out infinite;
}
.panelTitle.is-done{
  background-image:linear-gradient(90deg, #16a34a, #14b8a6, #059669);
  background-size:180% 100%;
  animation:medTitleGlow 1.9s ease-in-out infinite;
}

.medicalFlow{
  position:absolute; left:18px; right:18px; top:26px;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.chip{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.55);
  color:var(--muted);
  font-size:13px;
}
.chip--solid{
  background:linear-gradient(90deg,var(--blue1),var(--blue2));
  color:#fff;
  border-color:transparent;
}
.arrow{
  width:22px; height:1px;
  background:rgba(12,15,20,.14);
  position:relative;
}
.arrow::after{
  content:"";
  position:absolute; right:-2px; top:50%;
  width:6px; height:6px;
  border-right:1px solid rgba(12,15,20,.22);
  border-top:1px solid rgba(12,15,20,.22);
  transform:translateY(-50%) rotate(45deg);
}

/* Creative slider */
.slider{margin-top:12px}
.slider input{width:100%}
.sliderMeta{display:flex; justify-content:space-between; color:var(--muted); font-size:13px; margin-top:8px}
.assets{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.asset{
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.55);
  color:var(--muted);
  transition:all .22s ease;
}
.asset.is-on{color:var(--text); box-shadow:var(--shadowSm); background:rgba(255,255,255,.80)}

.folder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.folderTop{
  width:220px; height:34px;
  border-radius:16px 16px 10px 10px;
  background:rgba(255,255,255,.55);
  border:1px solid var(--hairline);
  transform:translateY(-28px);
}
.folderBody{
  width:260px; height:160px;
  border-radius:18px;
  background:rgba(255,255,255,.70);
  border:1px solid var(--hairline);
  box-shadow:var(--shadowSm);
  position:absolute;
  transform:translateY(10px);
  overflow:hidden;
}
.file{
  height:10px; border-radius:999px;
  background:rgba(12,15,20,.10);
  margin:18px 18px 0;
  animation:fileGrow 2.6s ease-in-out infinite;
}
.file:nth-child(2){width:66%; animation-delay:.18s}
.file:nth-child(3){width:52%; animation-delay:.36s}
.file:nth-child(1){width:78%}

/* Home scene interaction */
.homeScene{
  position:absolute; inset:0;
  display:grid;
  place-content:center;
  grid-template-columns:repeat(2, 110px);
  gap:12px;
}
.device{
  border-radius:18px;
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.55);
  color:var(--muted);
  height:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:720;
  letter-spacing:-.01em;
  transition:all .22s ease;
}
.device.is-on{
  background:linear-gradient(90deg,var(--blue1),var(--blue2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 18px 60px rgba(42,103,255,.22);
}

/* Industry roles */
.roleRow{display:flex; gap:8px; flex-wrap:wrap}
.role{
  appearance:none;
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.55);
  color:var(--muted);
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
  transition:all .18s ease;
}
.role.is-active{color:var(--text); background:rgba(255,255,255,.80); box-shadow:var(--shadowSm)}
.flow{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.flowStep{
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.55);
  color:var(--muted);
  transition:all .22s ease;
}
.flowStep.is-on{color:var(--text); box-shadow:var(--shadowSm); background:rgba(255,255,255,.80)}

.stack{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:26px;
}
.layer{
  padding:14px 14px;
  border-radius:18px;
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.55);
  color:var(--muted);
}
.layer--solid{
  background:linear-gradient(90deg,var(--blue1),var(--blue2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 18px 60px rgba(42,103,255,.22);
}

.footerGrid{display:grid; grid-template-columns:1.05fr .95fr; gap:28px; margin-top:12px}
footer[data-section="footer"] [data-anim="footerCopy"]{
  width: calc(100% + 800px);
  max-width: none;
  transform: translateX(-150px);
  position:relative;
  margin-top:200px;
  padding-bottom: 18px;
}
.footerLinksPanel{
  margin-top:200px;
  border:none;
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(249,250,251,.90));
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:6px 14px;
  padding:18px 18px 16px;
}
.footerLinkCol{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.footerLinkTitle{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.4;
  font-weight:760;
  color:#111827;
}
.footerLinkItem{
  display:block;
  width:100%;
  padding:4px 0;
  font-size:15px;
  line-height:1.5;
  color:#6b7280;
  text-decoration:none;
  transition:color .2s ease;
}
.footerLinkItem:hover,
.footerLinkItem:focus-visible{
  color:#111827;
}
.footerLinkItem:focus-visible{
  outline:2px solid rgba(59,130,246,.35);
  outline-offset:2px;
  border-radius:4px;
}
.qrBox{margin-top:12px; display:flex; justify-content:center}
.qr{padding:12px; border-radius:18px; border:1px solid var(--hairline); background:rgba(255,255,255,.70); box-shadow:var(--shadowSm)}
.linkRow{display:flex; gap:10px; align-items:center; margin-top:10px}
.input{
  width:100%;
  border-radius:14px;
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.65);
  padding:12px 12px;
  color:var(--text);
}
.textArea{
  width:100%;
  border-radius:14px;
  border:1px solid var(--hairline);
  background:rgba(255,255,255,.65);
  padding:12px 12px;
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.6;
  resize:vertical;
}
.medSymptomBox .textArea{
  border-radius:14px 14px 0 0;
  border-bottom:0;
  resize:none;
}
.medSymptomActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:10px;
  border:1px solid var(--hairline);
  border-top:0;
  border-radius:0 0 14px 14px;
  background:rgba(255,255,255,.65);
}
.medSymptomActions .btn{
  width:100%;
  justify-content:center;
}
.textArea:focus{
  outline:none;
  border-color:rgba(34,197,94,.42);
  box-shadow:0 0 0 3px rgba(34,197,94,.14);
}

/* Medical interaction layout */
section[data-section="medical"] .medHub{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:stretch;
  position:relative;
  left:0;
  overflow:visible;
}
.card[data-card="medHubCard"]{
  width:1400px;
  max-width:none;
  margin:0 auto;
  position:relative;
  left:calc(-70px - (1 - clamp(0, calc(var(--p) * 1.7), 1)) * 420px);
  min-height: calc(100% + 200px);
  overflow:visible;
  transition:none;
}
.card[data-card="medHubCard"] .kickerSmall,
.card[data-card="medHubCard"] .dropZoneTitle,
.card[data-card="medHubCard"] .dropZoneSub,
.card[data-card="medHubCard"] .textArea,
.card[data-card="medHubCard"] .panelTitle,
.card[data-card="medHubCard"] .para,
.card[data-card="medHubCard"] .pill,
.card[data-card="medHubCard"] .tiny{
  font-size: 16px;
}
.card[data-card="medHubCard"] .kickerSmall{
  font-size: 15px;
}
#medOutBody{
  color:var(--text);
}
#medOutBody p{
  margin:8px 0;
}
#medOutBody ul,
#medOutBody ol{
  margin:8px 0 12px;
  padding-left:22px;
}
#medOutBody li{
  margin:4px 0;
}
#medOutBody strong{
  font-weight:780;
}
#medOutBody code{
  background:rgba(15,23,42,.08);
  border-radius:6px;
  padding:1px 6px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.92em;
}
.medMdHeading{
  margin:14px 0 8px;
  font-size:17px;
  font-weight:780;
  color:#0f172a;
}
.medPane{
  min-width:0;
  position:relative;
  z-index:2;
}
.medPulseBgDecor{
  position:absolute;
  left:-250px;
  top:-292px;
  width:600px;
  max-width:none;
  opacity:.38;
  pointer-events:none;
  z-index:0;
}
.dropZone{
  display:block;
  border:1px dashed rgba(67,82,105,.26);
  border-radius:16px;
  background:rgba(255,255,255,.70);
  padding:19px;
  cursor:pointer;
  transition:all .18s ease;
  position:relative;
  overflow:hidden;
}
.dropZoneDecor{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  opacity:.72;
  filter:grayscale(10%);
  pointer-events:none;
}
.dropZone:hover .dropZoneDecor{
  opacity:.92;
  transform:translateY(-50%) scale(1.02);
}
.dropZone:hover{
  border-color:rgba(42,103,255,.46);
  box-shadow:0 10px 30px rgba(42,103,255,.12);
  transform:translateY(-1px);
}
.dropZoneInput{display:none}
.dropZoneHint{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.dropZoneTitle{
  font-weight:760;
  letter-spacing:-.01em;
}
.dropZoneSub{
  font-size:13px;
  color:var(--muted);
}
.dropZonePreview{
  width:100%;
  height:auto;
  border-radius:12px;
  margin-top:10px;
  border:1px solid rgba(67,82,105,.12);
}
.medCaseAccordion{
  margin-top:12px;
  border:1px solid rgba(67,82,105,.18);
  background:rgba(255,255,255,.72);
  border-radius:14px;
  overflow:hidden;
}
.medCaseSummary{
  list-style:none;
  cursor:pointer;
  padding:16px 12px;
  font-weight:700;
  color:#14532d;
  background:linear-gradient(180deg, rgba(236,253,245,.96), rgba(220,252,231,.92));
  border-bottom:1px solid rgba(34,197,94,.20);
}
.medCaseSummary::-webkit-details-marker{display:none}
.medCaseSummary::after{
  content:"▾";
  float:right;
  color:rgba(15,23,42,.60);
  transition:transform .2s ease;
}
.medCaseAccordion[open] .medCaseSummary::after{
  transform:rotate(180deg);
}
.medCaseList{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
}
.medCaseItem{
  display:grid;
  grid-template-columns:1fr 120px;
  gap:12px;
  border:1px solid rgba(67,82,105,.14);
  background:rgba(255,255,255,.86);
  border-radius:12px;
  padding:10px;
  align-items:center;
}
.medCaseTitle{
  font-size:14px;
  font-weight:760;
  margin-bottom:4px;
}
.medCaseText p{
  margin:0;
  color:rgba(12,15,20,.72);
  line-height:1.58;
  font-size:13px;
}
.medCaseUseBtn{
  margin-top:10px;
  color:#14532d;
  background:linear-gradient(180deg, rgba(236,253,245,.96), rgba(220,252,231,.92));
  border:1px solid rgba(34,197,94,.30);
  box-shadow:none;
}
.medCaseUseBtn:hover{
  background:linear-gradient(180deg, rgba(220,252,231,.98), rgba(190,242,215,.95));
  transform:translateY(-1px);
}
.medCaseImageWrap{
  width:120px;
  height:78px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(67,82,105,.14);
  background:rgba(245,248,255,.95);
}
.medCaseImage{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.medLogs{
  gap:10px;
}
section[data-section="medical"] .medPanel{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(67,82,105,.12);
  border-radius:18px;
  padding:14px 14px;
}
section[data-section="medical"] .pill{
  border-color:rgba(67,82,105,.16);
  background:rgba(255,255,255,.86);
  color:rgba(15,23,42,.78);
  box-shadow:0 10px 22px rgba(12,15,20,.06);
  border-radius:12px;
  cursor:pointer;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
section[data-section="medical"] .pill:hover{
  transform:translateY(-1px);
  border-color:rgba(42,103,255,.22);
  box-shadow:0 14px 30px rgba(42,103,255,.10);
}
section[data-section="medical"] .pill.is-active{
  border-color:rgba(34,197,94,.28);
  background:linear-gradient(180deg, rgba(236,253,245,.96), rgba(220,252,231,.90));
  color:rgba(15,23,42,.92);
  box-shadow:0 16px 40px rgba(22,163,74,.14);
}
section[data-section="medical"] .panel.medPopPanel{
  margin-top:14px;
  background:linear-gradient(180deg, rgba(240,253,250,.68), rgba(236,253,245,.52)) !important;
  border:1px solid rgba(34,197,94,.16) !important;
  border-radius:18px;
  padding:14px 14px;
  box-shadow:0 22px 60px rgba(22,163,74,.09);
  max-height:540px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.medPopTitle{
  margin-top:0;
}
.card[data-card="medHubCard"] .panelTitle.medPopTitle{
  font-size:22px;
  line-height:1.2;
}
.medPopBody{
  margin-top:10px;
  color:rgba(15,23,42,.78);
  font-size:14px;
  line-height:1.75;
  overflow:auto;
  padding-right:6px;
}
.medPopFlow{
  position:relative;
}
.medPopHero{
  width:100%;
  height:220px;
  border-radius:14px;
  border:1px solid rgba(34,197,94,.18);
  background:rgba(255,255,255,.72);
  overflow:hidden;
}
.medPopHero--float{
  float:right;
  width:240px;
  height:220px;
  margin:0 0 12px 14px;
}
.medPopClear{clear:both}
.medPopHeroImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width: 980px){
  .medPopHero--float{
    float:none;
    width:100%;
    height:160px;
    margin:0 0 12px;
  }
}
.medPopBody p{margin:8px 0}
.medPopBody ul,.medPopBody ol{margin:8px 0 12px; padding-left:20px}
.medPopBody li{margin:4px 0}
.medPopBody strong{font-weight:780}
.tiny{font-size:12px; line-height:1.65}

/* Medical: mobile upload modal */
.medUploadModal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  opacity:1;
  transition:opacity .22s ease;
}
.medUploadModal.is-hidden{
  opacity:0;
  pointer-events:none;
}
.medUploadBackdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(248,250,252,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.medUploadCard{
  position:relative;
  width:min(560px, calc(100% - 24px));
  max-height:min(78vh, 680px);
  border:1px solid rgba(67,82,105,.16);
  border-radius:18px;
  background:#fff;
  box-shadow:0 28px 90px rgba(12,15,20,.22);
  padding:14px;
  overflow:auto;
  transform: translateY(-10px) scale(1);
  opacity:1;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.medUploadModal.is-hidden .medUploadCard{
  transform: translateY(calc(-10px + 16px)) scale(.98);
  opacity:0;
}
.medUploadModal.is-hidden .medUploadBackdrop{
  opacity:0;
}
.medUploadBackdrop{
  transition:opacity .22s ease;
}
.medUploadHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.medUploadTitle{
  font-size:16px;
  font-weight:860;
  color:rgba(15,23,42,.92);
}
.medUploadClose{
  appearance:none;
  border:1px solid rgba(67,82,105,.18);
  background:#fff;
  width:34px;
  height:34px;
  border-radius:10px;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.medUploadRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.medUploadOpenBtn{
  display:none;
  flex:none;
}
.medPopOpenBtn{
  display:none;
}
.medPopDrawer{
  position:fixed;
  inset:0;
  z-index:1250;
  display:flex;
  justify-content:flex-end;
  opacity:1;
  transition:opacity .24s ease;
}
.medPopDrawer.is-prep{
  opacity:0;
  pointer-events:none;
}
.medPopDrawer.is-hidden{
  opacity:0;
  pointer-events:none;
}
.medPopDrawerBackdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(248,250,252,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity:1;
  transition:opacity .24s ease;
}
.medPopDrawerPanel{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  height:100svh;
  width:min(96vw, 520px);
  background:#fff;
  border-left:1px solid rgba(67,82,105,.16);
  box-shadow:0 20px 80px rgba(12,15,20,.2);
  padding:14px 14px 18px;
  transform:translateX(0);
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.medPopDrawer.is-prep .medPopDrawerPanel{
  transform:translateX(100%);
}
.medPopDrawer.is-hidden .medPopDrawerPanel{
  transform:translateX(100%);
}
.medPopDrawer.is-prep .medPopDrawerBackdrop{
  opacity:0;
}
.medPopDrawer.is-hidden .medPopDrawerBackdrop{
  opacity:0;
}
.medPopDrawerHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.medPopDrawerTitle{
  font-size:15px;
  font-weight:860;
  color:rgba(15,23,42,.92);
}
.medPopDrawerClose{
  appearance:none;
  border:1px solid rgba(67,82,105,.18);
  background:#fff;
  width:34px;
  height:34px;
  border-radius:10px;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.medPopDrawerBody{
  flex:1;
  min-height:0;
  overflow:auto;
  padding-right:2px;
}

/* Reveal animation */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .70s cubic-bezier(.2,.8,.2,1), transform .70s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .visualGlow,.node,.sweep,.file{animation:none!important}
  .reveal{transition:none}
  section[data-section="home"] .sectionHeader.reveal,
  section[data-section="home"] .smartHomeStage.reveal,
  section[data-section="home"] .smartHomeChat.reveal{
    opacity:1;
    transform:none;
  }
  .wfLogItem.is-live::after{animation:none!important}
}

@keyframes slowSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1); opacity:.75}50%{transform:scale(1.22); opacity:1}}
@keyframes sweep{0%,100%{opacity:.20}50%{opacity:.65}}
@keyframes fileGrow{0%,100%{transform:scaleX(.92); opacity:.70}50%{transform:scaleX(1.03); opacity:1}}
@keyframes taskLoad{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes medTitleFlow{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}
@keyframes medTitlePulse{
  0%,100%{filter:drop-shadow(0 0 0 rgba(139,92,246,.00))}
  50%{filter:drop-shadow(0 0 8px rgba(236,72,153,.35))}
}
@keyframes medTitleGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(20,184,166,.00))}
  50%{filter:drop-shadow(0 0 9px rgba(16,185,129,.30))}
}

/* Footer entry: slide in from left with stagger */
@keyframes footerInLeft{
  0%{opacity:0; transform:translateX(-56px); filter:blur(8px)}
  100%{opacity:1; transform:translateX(0); filter:blur(0)}
}

@keyframes footerIconInRightSpin{
  0%{opacity:0; transform:translateX(220px) rotate(220deg) scale(.90); filter:blur(12px)}
  65%{opacity:1; transform:translateX(-6px) rotate(18deg) scale(1.02); filter:blur(2px)}
  100%{opacity:1; transform:translateX(0) rotate(0deg) scale(1); filter:blur(0)}
}

@keyframes footerNavFloatUp{
  0%{opacity:0; transform:translateY(28px); filter:blur(10px)}
  100%{opacity:1; transform:translateY(0); filter:blur(0)}
}

footer[data-section="footer"] [data-anim="footerCopy"] .footerHeroTitle,
footer[data-section="footer"] [data-anim="footerCopy"] .lede,
footer[data-section="footer"] [data-anim="footerCopy"] .tiny{
  opacity:0;
  transform:translateX(-56px);
  filter:blur(8px);
  will-change:transform, opacity, filter;
}
footer[data-section="footer"] [data-anim="footerCopy"] .footerHeroIcon{
  opacity:0;
  transform:translateX(220px) rotate(220deg) scale(.90);
  filter:blur(12px);
  transform-origin:50% 50%;
  will-change:transform, opacity, filter;
}
footer[data-section="footer"] [data-anim="footerCopy"] .footerLinksPanel{
  opacity:0;
  transform:translateY(28px);
  filter:blur(10px);
  will-change:transform, opacity, filter;
}
footer[data-section="footer"] [data-anim="footerCopy"].is-in .footerHeroTitle{
  animation:footerInLeft 1.15s cubic-bezier(.16,.84,.18,1) both;
}
footer[data-section="footer"] [data-anim="footerCopy"].is-in .lede{
  animation:footerInLeft 1.15s cubic-bezier(.16,.84,.18,1) both;
  animation-delay:.5s;
}
footer[data-section="footer"] [data-anim="footerCopy"].is-in .tiny{
  animation:footerInLeft 1.15s cubic-bezier(.16,.84,.18,1) both;
  animation-delay:1s;
}
footer[data-section="footer"] [data-anim="footerCopy"].is-in .footerHeroIcon{
  animation:footerIconInRightSpin 1.35s cubic-bezier(.16,.84,.18,1) both;
  animation-delay:.85s;
}
footer[data-section="footer"] [data-anim="footerCopy"].is-in .footerLinksPanel{
  animation:footerNavFloatUp 1.05s cubic-bezier(.16,.84,.18,1) both;
  animation-delay:1.25s;
}
footer[data-section="footer"] [data-anim="footerCopy"]:not(.is-in) .footerHeroTitle,
footer[data-section="footer"] [data-anim="footerCopy"]:not(.is-in) .lede,
footer[data-section="footer"] [data-anim="footerCopy"]:not(.is-in) .tiny{
  animation:none !important;
}
footer[data-section="footer"] [data-anim="footerCopy"]:not(.is-in) .footerHeroIcon{
  animation:none !important;
}
footer[data-section="footer"] [data-anim="footerCopy"]:not(.is-in) .footerLinksPanel{
  animation:none !important;
}
@keyframes creativeTitleSweep{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(120%)}
}

@media (max-width: 980px){
  html,body{
    overflow-x:hidden;
  }
  .container{
    width:min(var(--container), calc(100% - 28px));
  }

  .heroGrid,.sectionHeader,.grid,.footerGrid{grid-template-columns:1fr}
  .section{padding:28px 0 56px}
  .hero{padding:74px 0 56px}
  .nav{display:none}
  .assets,.flow{grid-template-columns:1fr}
  .dataRow{grid-template-columns:1fr}
  .wfMain{grid-template-columns:1fr}
  .workflowSteps{border-right:none; border-bottom:1px solid rgba(67,82,105,.12)}
  .wfTitle{font-size:30px}
  .previewFrameWrap{min-height:520px}
  .previewFrame{height:520px}
  section[data-section="medical"] .medHub{grid-template-columns:1fr; left:0}
  section[data-section="creative"] .creativeRail{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px}
  section[data-section="creative"] .creativeRailWrap{width:100%; margin-left:0}
  section[data-section="creative"] .creativeRail{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; justify-content:stretch}
  section[data-section="creative"] .creativeTileMedia{width:100%; height:auto; aspect-ratio:16 / 12}
  .medPulseBgDecor{display:none}
  .dropZoneDecor{display:none}
  .medCaseItem{grid-template-columns:1fr}
  .medCaseImageWrap{width:100%; height:140px}
  section[data-section="car"] .card[data-card="carBrief"]{
    width:100%;
    max-width:100%;
    margin:0;
  }
  .footerLinksPanel{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  /* Hard stop: prevent desktop fixed widths from causing horizontal scroll */
  .card,
  .cardInner,
  [data-card],
  .previewFrameWrap,
  .previewFrame,
  .carWorkflow{
    max-width:100% !important;
  }

  /* Home (Smart Home): stack panels + tighten grid */
  section[data-section="home"] .container{
    width:calc(100% - 28px);
  }
  section[data-section="home"] .smartHomeGrid{
    grid-template-columns:1fr;
  }
  section[data-section="home"] .smartHomeDevices{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  section[data-section="home"] .smartHomeLinkLines{
    display:none;
  }
  section[data-section="home"] .smartHomeDevice{
    min-height:unset;
  }
  section[data-section="home"] .smartHomeDeviceMedia{
    min-height:160px;
    aspect-ratio: 16 / 11;
  }
  section[data-section="home"] .smartHomeMessages{
    max-height: clamp(320px, 42vh, 520px);
  }
  section[data-section="home"] .smartHomeChat{
    display:flex;
    flex-direction:column;
  }
  /* Mobile: hide smartHomeChat in-page, use left drawer instead */
  section[data-section="home"] .smartHomeChat{
    display:none !important;
  }
  section[data-section="home"] .smartHomeTerminalBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  section[data-section="home"] .smartHomeComposer{
    margin-top:auto;
  }
}

@media (max-width: 640px){
  .container{
    width:calc(100% - 20px);
  }
  .footerLinksPanel{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px 12px;
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
  }

  section[data-section="home"] .smartHomeDevices{
    grid-template-columns:1fr;
  }
  section[data-section="home"] .smartHomeDeviceMedia{
    min-height:190px;
    aspect-ratio: 16 / 10;
  }
}

/* Force car section extra height (+200px) */
section.section[data-section="car"]{
  padding-bottom: 148px !important;
  min-height: calc(100svh - 100px);
  display:flex;
  align-items:center;
}

section.section[data-section="home"]{
  padding-bottom: 148px !important;
  min-height: calc(100svh - 100px);
  display:flex;
  align-items:center;
}

section.section[data-section="medical"]{
  padding-bottom: 148px !important;
  min-height: calc(100svh - 100px);
  display:flex;
  align-items:center;
}

section.section[data-section="industry"]{
  padding-bottom: 148px !important;
  min-height: calc(100svh - 100px);
  display:flex;
  align-items:center;
}

section.section[data-section="industry"] > .container{
  transform: none;
}

section.section[data-section="car"] > .container{
  width:calc(100% - 100px);
  max-width:none;
  margin:0 50px !important;
}
section.section[data-section="car"] .grid{
  grid-template-columns:1fr;
}
section.section[data-section="car"] .card[data-card="carBrief"]{
  width:calc(100% - 200px);
  max-width:calc(100% - 200px);
  margin:0;
  position:relative;
  left:0;
}

section.section[data-section="car"] .sectionHeader{
  margin-top:50px;
  transform:none;
}

/* -------------------------------------------------
   Mobile redesign overrides (do not affect desktop)
-------------------------------------------------- */
@media (max-width: 980px){
  html,body{
    overflow-x:hidden;
  }
  .container{
    width:calc(100% - 28px) !important;
    max-width:100% !important;
    margin:0 auto !important;
  }

  /* Home mobile: no entrance animations for the two panels */
  section[data-section="home"] .smartHomeStage.reveal,
  section[data-section="home"] .smartHomeChat.reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
    will-change:auto !important;
  }

  /* Industry mobile: no entrance animations for the two panels */
  section[data-section="industry"] .devStudioMain.reveal,
  section[data-section="industry"] .devChatDock.reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
    will-change:auto !important;
  }

  .topbarInner{
    padding:10px 14px;
  }
  .brandWordmark{
    height:18px;
  }
  .nav{
    display:none !important;
  }
  .mobileMenuBtn{
    display:flex;
  }

  .hero{
    min-height:100svh;
    padding:88px 0 48px;
    display:flex;
    align-items:flex-end;
  }
  .heroMark{
    position:fixed !important;
    left:50%;
    top:calc(52% - 100px);
    width:min(58vw, 360px);
    transform:translate(-50%, -50%);
    opacity:1;
    z-index:1;
  }
  .heroMarkSvg{
    opacity: calc(.5 * var(--heroFooterFade, 1));
    filter: brightness(0) contrast(1.35);
  }
  .heroCopyCorner{
    max-width:100%;
    position:relative;
    z-index:2;
    margin-top:auto;
    transform:none;
  }
  .heroCopyCorner.reveal,
  .heroCopyCorner.reveal.is-in{
    transform:translateY(120px) !important;
  }
  .heroCopyCorner .h1{
    font-size:clamp(30px, 8.6vw, 46px);
    line-height:1.08;
  }

  section.section[data-section="car"],
  section.section[data-section="home"],
  section.section[data-section="medical"],
  section.section[data-section="industry"]{
    min-height:auto;
    display:block;
    align-items:initial;
    padding-bottom:68px !important;
  }

  section.section[data-section="car"] > .container{
    width:calc(100% - 28px) !important;
    max-width:100% !important;
    margin:0 auto !important;
  }
  section.section[data-section="car"] .sectionHeader{
    margin-top:50px;
    transform:none;
  }
  section.section[data-section="car"] .card[data-card="carBrief"]{
    width:calc(100% - 4px);
    max-width:calc(100% - 4px);
    margin-left:auto;
    margin-right:auto;
  }
  .carWorkflow{
    display:flex;
    flex-direction:column;
  }
  section.section[data-section="car"] .wfMain{
    grid-template-columns:minmax(132px, 34%) minmax(0, 1fr) !important;
    min-height:420px;
  }
  section.section[data-section="car"] .workflowSteps{
    border-right:1px solid rgba(67,82,105,.12) !important;
    border-bottom:0 !important;
    padding:12px 8px;
    overflow:auto;
    max-height:clamp(300px, 54vh, 460px);
  }
  section.section[data-section="car"] .wfStep{
    gap:8px;
  }
  section.section[data-section="car"] .wfStepIndex{
    width:28px;
    height:28px;
    font-size:12px;
  }
  section.section[data-section="car"] .wfStepLabel{
    font-size:11px;
    line-height:1.45;
  }
  .workflowConsole{
    min-height:0;
  }
  .wfLogs{
    display:block;
    height:clamp(300px, 42vh, 520px) !important;
    max-height:none !important;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .wfAccordion{
    flex:none;
    margin-bottom:10px;
  }
  .wfAccordion:last-child{
    margin-bottom:0;
  }
  .wfAccordionTrigger{
    align-items:flex-start;
    min-height:46px;
    padding:12px 12px;
  }
  .wfAccordionTitle{
    display:block;
    flex:1 1 auto;
    min-width:0;
    line-height:1.45;
    word-break:break-word;
  }
  .wfAccordionBody{
    gap:10px;
    padding:0 10px;
  }
  .wfAccordion.is-open .wfAccordionBody{
    padding:0 10px 12px;
  }
  .wfLogItem{
    min-height:50px;
    align-items:flex-start;
    padding:12px;
    line-height:1.5;
  }
  #carPreviewPanel{
    margin-top:8px;
  }
  .previewFrameWrap{
    min-height:300px !important;
  }
  .previewFrame{
    height:300px !important;
  }

  section[data-section="medical"] .medHub{
    grid-template-columns:1fr !important;
    gap:14px;
  }
  section[data-section="medical"] .sectionHeader{
    grid-template-columns:1fr !important;
    gap:12px;
  }
  @keyframes medMobileHeaderIn{
    0%{opacity:0; transform:translate3d(-22px, 0, 0); filter:blur(10px)}
    100%{opacity:1; transform:translate3d(0, 0, 0); filter:blur(0)}
  }
  @keyframes medMobileCardIn{
    0%{opacity:0; transform:translate3d(0, 18px, 0); filter:blur(8px)}
    100%{opacity:1; transform:translate3d(0, 0, 0); filter:blur(0)}
  }
  section[data-section="medical"] .sectionHeader > div:first-child{
    grid-column:auto !important;
    justify-self:start !important;
    text-align:left !important;
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
  }
  section[data-section="medical"] .sectionHeader > p.lede{
    grid-column:auto !important;
    justify-self:start !important;
  }
  section[data-section="medical"] .sectionHeader.reveal:not(.is-in) > div:first-child,
  section[data-section="medical"] .sectionHeader.reveal:not(.is-in) > p.lede{
    opacity:0;
    filter:blur(10px);
    transform:translate3d(-22px, 0, 0);
    will-change:transform, opacity, filter;
  }
  section[data-section="medical"] .sectionHeader.reveal.is-in > div:first-child{
    animation:medMobileHeaderIn .9s cubic-bezier(.16,.84,.18,1) both;
  }
  section[data-section="medical"] .sectionHeader.reveal.is-in > p.lede{
    animation:medMobileHeaderIn .9s cubic-bezier(.16,.84,.18,1) both;
    animation-delay:.18s;
  }
  section[data-section="medical"] .card[data-card="medHubCard"].reveal:not(.is-in){
    opacity:0;
    filter:blur(8px);
    transform:translate3d(0, 18px, 0);
    will-change:transform, opacity, filter;
  }
  section[data-section="medical"] .card[data-card="medHubCard"].reveal.is-in{
    animation:medMobileCardIn .9s cubic-bezier(.16,.84,.18,1) both;
    animation-delay:.28s;
  }
  .card[data-card="medHubCard"]{
    width:100% !important;
    max-width:100% !important;
    left:0 !important;
    min-height:auto !important;
  }
  section[data-section="medical"] .medPopPanel,
  section[data-section="medical"] .panel.medPopPanel{
    max-height:min(56vh, 520px);
  }

  section[data-section="creative"] .creativeRailWrap{
    width:100% !important;
    margin-left:0 !important;
    overflow:visible;
  }
  section[data-section="creative"] .creativeRail{
    width:100% !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    transform:none !important;
    justify-content:stretch !important;
  }
  section[data-section="creative"] .creativeStudio{
    width:100% !important;
    max-width:100% !important;
    position:relative;
    left:0 !important;
    margin-top:14px;
    min-height:auto !important;
    height:auto !important;
    right:auto !important;
    top:auto !important;
    overflow:visible !important;
  }
  section[data-section="creative"] .creativeRailWrap.is-expanded{
    grid-template-columns:1fr !important;
    gap:12px;
    justify-content:stretch;
  }
  section[data-section="creative"] .creativeRailWrap.is-expanded .creativeRail{
    grid-template-columns:1fr !important;
    justify-content:stretch;
  }
  section[data-section="creative"] .creativeStudioBody{
    gap:10px;
  }

  /* Creative 4 regions mobile/tablet compression */
  section[data-section="creative"] .videoStudioTop{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  section[data-section="creative"] .videoStudioMeta{
    white-space:normal;
  }
  section[data-section="creative"] .videoStudioGrid{
    grid-template-columns:1fr !important;
  }
  section[data-section="creative"] .videoTimeline{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  section[data-section="creative"] .videoCompareGrid{
    grid-template-columns:1fr !important;
    gap:10px;
  }
  section[data-section="creative"] .videoPlayer{
    min-height:200px;
  }
  section[data-section="creative"] .videoMiniLogs{
    max-height:180px;
    overflow:auto;
    padding-right:6px;
  }

  section[data-section="creative"] .copyStudioGrid{
    grid-template-columns:1fr !important;
  }
  section[data-section="creative"] .copyResult{
    min-height:auto;
  }
  section[data-section="creative"] .copyPackCols{
    grid-template-columns:1fr;
  }

  section[data-section="creative"] .officeStudioGrid,
  section[data-section="creative"] .creativeStudio.is-office-mode .officeStudioGrid{
    grid-template-columns:1fr !important;
  }
  /* Mobile: disable Excel tab entry */
  section[data-section="creative"] #officeModeTabs .officeModeBtn[data-mode="excel"]{
    display:none !important;
  }
  section[data-section="creative"] .officeRight{
    order:-1;
  }
  /* Excel view on mobile: show controls first, then results */
  section[data-section="creative"] .officeStudio[data-office-mode="excel"] .officeRight{
    order:0;
  }
  section[data-section="creative"] .officeStudio[data-office-mode="excel"] .officeLeft{
    order:-1;
  }
  section[data-section="creative"] .officeChatBox{
    height:460px;
  }
  /* Prevent iOS Safari auto-zoom (keep >=16px) */
  section[data-section="creative"] .officeChatInput{
    font-size:16px !important;
  }
  section[data-section="creative"] .officeChart{
    height:240px !important;
    width:100%;
  }

  /* Office Excel mobile: make tabs horizontal + table scroll */
  section[data-section="creative"] #officePanelExcel .officeFilters{
    max-height:none;
    overflow:visible;
  }
  section[data-section="creative"] #officePanelExcel .officeExcelViewTabs{
    flex-direction:row;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  section[data-section="creative"] #officePanelExcel .officeExcelViewBtn{
    flex:none;
    white-space:nowrap;
    padding:8px 12px;
  }
  section[data-section="creative"] #officeResultExcel .officeKpiRow{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  section[data-section="creative"] #officeResultExcel .officeTableWrap{
    max-height:52vh;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  section[data-section="creative"] #officeResultExcel .officeTable{
    min-width:760px;
  }

  section[data-section="creative"] .posterCases{
    flex-wrap:wrap;
  }
  section[data-section="creative"] .posterFlow{
    grid-template-columns:1fr !important;
  }
  section[data-section="creative"] .posterResult{
    min-height:260px;
  }

  section[data-section="home"] .smartHomeGrid{
    grid-template-columns:1fr !important;
    gap:12px;
  }
  section[data-section="home"] .smartHomeDevices{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  section[data-section="home"] .smartHomeLinkLines{
    display:none !important;
  }
  section[data-section="home"] .smartHomeMessages{
    max-height:clamp(320px, 42vh, 520px) !important;
  }

  section[data-section="industry"] .devStudioGrid{
    grid-template-columns:1fr !important;
    gap:12px;
    padding-top:12px;
  }
  /* Mobile: chat becomes a drawer */
  section[data-section="industry"] .devStudioHeadRight{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
  }
  section[data-section="industry"] .devStudioHeadRight .devChatOpenBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
  }
  section[data-section="industry"] #devChatDock{
    display:none;
  }
  .devChatDockInDrawer{
    display:flex !important;
    flex-direction:column;
    position:static !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:hidden !important;
    height:100% !important;
    min-height:0 !important;
  }
  .devChatDockInDrawer .devChatPanel{
    flex:1 !important;
    min-height:0 !important;
  }
  .devChatDockInDrawer .devChatMessages{
    flex:1 !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow:auto !important;
  }
  section[data-section="industry"] .devChatDock{
    max-width:100%;
    border-left:1px solid rgba(67,82,105,.14);
    border-radius:16px;
  }
  section[data-section="industry"] .devCodeViewport,
  section[data-section="industry"] .devPreviewMini,
  section[data-section="industry"] #devChatDock .devChatMessages{
    height:clamp(280px, 44vh, 460px) !important;
    min-height:unset !important;
    max-height:none !important;
  }

  /* Drawer: let messages fill the drawer height */
  .devChatDockInDrawer .devChatPanel{
    flex:1 !important;
    min-height:0 !important;
  }
  .devChatDockInDrawer .devChatMessages{
    height:auto !important;
    max-height:none !important;
    flex:1 !important;
    overflow:auto !important;
  }

  footer[data-section="footer"] [data-anim="footerCopy"]{
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
    margin-top:24px !important;
    display:flex;
    flex-direction:column;
  }
  footer[data-section="footer"] .footerHeroIcon{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    width:clamp(108px, 28vw, 152px) !important;
    order:-1;
    align-self:center;
    margin:0 0 10px;
  }
  .footerLinksPanel{
    margin-top:22px !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px 12px;
  }

  /* protect against accidental fixed desktop widths */
  .card,
  .cardInner,
  [data-card],
  .visualCard,
  .workflowSteps,
  .wfMain,
  .previewFrameWrap,
  .previewFrame{
    width:100%;
    max-width:100% !important;
  }
}

@media (max-width: 640px){
  .container{
    width:calc(100% - 20px) !important;
  }
  .topbarInner{
    padding:8px 10px;
  }
  /* Mobile: remove default tap highlight (blue overlay) */
  a, button, input, textarea, select, summary, label,
  [role="button"], [role="tab"], [tabindex]{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  .caseOption{
    -webkit-tap-highlight-color: transparent;
  }
  .brandIcon{
    width:26px;
    height:26px;
  }
  .mobileMenuBrand .brandIcon{
    width:48px;
    height:48px;
  }
  .mobileMenuBrand .brandWordmark{
    height:32px;
  }
  .mobileMenuPanel{
    width:min(88vw, 310px);
    padding-top:70px;
  }
  .mobileMenuLink{
    font-size:14px;
    padding:11px 12px;
  }

  section[data-section="creative"] .creativeRail{
    grid-template-columns:1fr !important;
  }
  section[data-section="creative"] .videoTimeline{
    grid-template-columns:1fr;
  }
  section[data-section="creative"] .videoMode{
    width:100%;
    justify-content:space-between;
  }
  section[data-section="creative"] .videoModeBtn{
    flex:1;
  }
  section[data-section="creative"] .officeChatBox{
    height:400px;
  }
  section[data-section="creative"] .officeChatInput{
    font-size:16px !important;
  }
  section[data-section="creative"] #officeResultExcel .officeKpiRow{
    grid-template-columns:1fr;
  }
  section[data-section="creative"] #officePanelExcel .officeExcelViewTabs{
    gap:6px;
  }
  section[data-section="creative"] #officePanelExcel .officeExcelViewBtn{
    padding:8px 10px;
    border-radius:999px;
  }
  section[data-section="creative"] #officeResultExcel .officeTableWrap{
    max-height:56vh;
  }
  section[data-section="creative"] .officeChart{
    height:210px !important;
  }
  section[data-section="home"] .smartHomeDevices{
    grid-template-columns:1fr !important;
  }
  section[data-section="industry"] .devStudioComposer{
    padding:10px;
  }
  .footerLinksPanel{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px 12px;
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
    margin-top:46px !important;
    background:#fff !important;
  }
  .footerHeroTitle{
    margin-top:16px;
  }
  .footerLinkCol{
    gap:4px;
  }
  .footerLinkTitle{
    margin-bottom:10px;
  }
  .footerLinkItem{
    padding:7px 0;
    line-height:1.6;
  }

  /* Medical title: ensure full visibility on small screens */
  section[data-section="medical"] .sectionHeader .h2{
    font-size:clamp(24px, 6.4vw, 32px);
    line-height:1.22;
    letter-spacing:-.01em;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:anywhere;
    max-width:100%;
  }
  section[data-section="medical"] .sectionHeader .lede{
    font-size:14px;
    line-height:1.72;
    max-width:100%;
  }

  /* Medical upload: collapse to button + modal */
  section[data-section="medical"] .medUploadOpenBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 12px;
    border-radius:10px;
    background:linear-gradient(180deg, rgba(236,253,245,.96), rgba(220,252,231,.90));
    border:1px solid rgba(34,197,94,.28);
    color:rgba(20,83,45,.92);
    box-shadow:none;
  }
  section[data-section="medical"] .medUploadOpenBtn:hover{
    background:linear-gradient(180deg, rgba(220,252,231,.98), rgba(190,242,215,.92));
    transform:translateY(-1px);
  }
  section[data-section="medical"] .medDropZoneHost{
    display:none;
  }
  section[data-section="medical"] .medUploadRow .kickerSmall{
    display:none !important;
  }
  section[data-section="medical"] .medUploadRow{
    justify-content:flex-end;
  }
  section[data-section="medical"] .medUploadRow{
    justify-content:space-between;
    align-items:center;
  }
  section[data-section="medical"] .medUploadRow .medKickerSupplement{
    display:block !important;
    font-size:12px;
    font-weight:820;
    color:rgba(15,23,42,.72);
  }
  section[data-section="medical"] .medKickerSupplementStandalone{
    display:none !important;
  }
  section[data-section="medical"] .medPopOpenBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    border-radius:10px;
    border:1px solid rgba(34,197,94,.28);
    background:linear-gradient(180deg, rgba(236,253,245,.96), rgba(220,252,231,.90));
    color:rgba(20,83,45,.92);
    margin-bottom:8px;
    box-shadow:none !important;
  }
  section[data-section="medical"] #medPopTabs,
  section[data-section="medical"] #medPopPanel{
    display:none !important;
  }
  /* Drawer (moved outside medical section): force-show + spacing + active green */
  #medPopDrawer .medPopDrawerBody{
    padding-top:20px !important;
  }
  #medPopDrawer .medPopDrawerBody #medPopTabs{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #medPopDrawer .medPopDrawerBody #medPopTabs::-webkit-scrollbar{height:0}
  #medPopDrawer .medPopDrawerBody #medPopPanel{
    display:block !important;
    margin-top:20px !important;
  }
  #medPopDrawer .medPopDrawerBody #medPopPanel{
    background:linear-gradient(180deg, rgba(240,253,250,.88), rgba(236,253,245,.72)) !important;
    border-color:rgba(34,197,94,.16) !important;
  }
  #medPopDrawer .medPopDrawerBody #medPopPanel .medPopBody{
    background:transparent !important;
  }
  #medPopDrawer .medPopDrawerBody #medPopTabs .pill{
    box-shadow:none !important;
  }
  #medPopDrawer .medPopDrawerBody #medPopTabs .pill.is-active{
    border-color:rgba(34,197,94,.34) !important;
    background:linear-gradient(180deg, rgba(236,253,245,.98), rgba(220,252,231,.92)) !important;
    color:rgba(20,83,45,.92) !important;
    box-shadow:0 14px 34px rgba(22,163,74,.16) !important;
  }
  section[data-section="medical"] .medPopDrawerBody #medPopPanel .medPopBody{
    overflow:auto;
    max-height:none;
  }
  section[data-section="medical"] .medPopDrawerBody #medPopPanel .medPopHero--float{
    float:none;
    width:100%;
    height:160px;
    margin:0 0 12px;
  }
  section[data-section="medical"] .medPopDrawerBody #medPopPanel .medPopHero{
    border-radius:14px;
  }

  /* Medical mobile: chat-like layout (top logs, bottom composer) */
  section[data-section="medical"] .medHub{
    display:flex !important;
    flex-direction:column;
    gap:10px;
  }
  /* Merge two panes into one flow on mobile */
  section[data-section="medical"] .medPane[data-card="medOutputCard"],
  section[data-section="medical"] .medPane[data-card="medInputCard"]{
    display:contents;
  }
  section[data-section="medical"] .medUploadRow{
    order:1;
  }
  section[data-section="medical"] .medPane[data-card="medOutputCard"] .medPanel{
    order:2;
  }
  section[data-section="medical"] .medSymptomBox{
    order:3;
  }
  section[data-section="medical"] .medCaseAccordion,
  section[data-section="medical"] .medPopOpenBtn{
    order:4;
  }
  /* Give the merged flow a chat-composer look */
  section[data-section="medical"] .medUploadRow,
  section[data-section="medical"] .medPane[data-card="medOutputCard"] .medPanel,
  section[data-section="medical"] .medSymptomBox,
  section[data-section="medical"] .medCaseAccordion,
  section[data-section="medical"] .medPopOpenBtn{
    border:1px solid rgba(67,82,105,.12);
    border-radius:14px;
    background:rgba(255,255,255,.95);
    padding:10px;
  }
  section[data-section="medical"] .medUploadRow{
    padding:8px 10px;
  }
  section[data-section="medical"] .medPane[data-card="medOutputCard"] > .kickerSmall:first-child{
    display:none !important;
  }
  section[data-section="medical"] .medPane[data-card="medOutputCard"] .medPanel{
    border-radius:14px;
    max-height:clamp(260px, 38vh, 420px);
    overflow:auto;
  }
  /* Hide process divider + logs on mobile */
  section[data-section="medical"] .medPane[data-card="medOutputCard"] .medPanel .divider,
  section[data-section="medical"] .medPane[data-card="medOutputCard"] .medPanel .kickerSmall,
  section[data-section="medical"] #medOutLogs{
    display:none !important;
  }
  section[data-section="medical"] .medPane[data-card="medInputCard"] .divider{
    display:none;
  }
  section[data-section="medical"] .medPane[data-card="medInputCard"] .kickerSmall{
    font-size:12px;
    margin:0;
  }
  section[data-section="medical"] .medPane[data-card="medInputCard"] .medCaseAccordion{
    margin-top:2px;
  }
  section[data-section="medical"] .medSymptomBox{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  section[data-section="medical"] .medSymptomBox .textArea{
    min-height:96px;
    max-height:140px;
    resize:none;
  }
  section[data-section="medical"] .medSymptomActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:0;
    border:0;
    background:transparent;
  }
  section[data-section="medical"] #medAnalyzeBtn,
  section[data-section="medical"] #medClearBtn{
    border-radius:10px;
  }
}

/* -------------------------------------------------
   Mobile safety-net (touch devices)
   Fix: avoid "desktop layout" when mobile browser zooms
-------------------------------------------------- */
@media (hover: none) and (pointer: coarse){
  section[data-section="creative"] .officeStudioGrid,
  section[data-section="creative"] .creativeStudio.is-office-mode .officeStudioGrid{
    grid-template-columns:1fr !important;
  }
  section[data-section="creative"] .officeChatInput{
    font-size:16px !important;
  }

  /* Excel: keep controls usable first */
  section[data-section="creative"] .officeStudio[data-office-mode="excel"] .officeRight{
    order:0;
  }
  section[data-section="creative"] .officeStudio[data-office-mode="excel"] .officeLeft{
    order:-1;
  }

  /* Excel tabs horizontal + scroll */
  section[data-section="creative"] #officePanelExcel .officeFilters{
    max-height:none;
    overflow:visible;
  }
  section[data-section="creative"] #officePanelExcel .officeExcelViewTabs{
    flex-direction:row;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  section[data-section="creative"] #officePanelExcel .officeExcelViewBtn{
    flex:none;
    white-space:nowrap;
  }

  /* Excel result: prevent squeeze, allow sideways scroll */
  section[data-section="creative"] #officeResultExcel .officeKpiRow{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  section[data-section="creative"] #officeResultExcel .officeTableWrap{
    max-height:56vh;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  section[data-section="creative"] #officeResultExcel .officeTable{
    min-width:760px;
  }
  section[data-section="creative"] .officeChart{
    height:240px !important;
    width:100%;
  }
}