/* ==========================================================================
   TimrX homepage responsive rebuild
   Base: 320px+. Enhancements: 390, 600, 768, 1024, 1280, 1600, 1920.
   This file is loaded only by index.html and intentionally scopes to homepage
   surfaces so Hub billing, workspace and standalone routes remain untouched.
   ========================================================================== */

:root{
  --page-gutter:clamp(16px,5vw,22px);
  --content-width:1120px;
  --content-width-wide:1480px;
  --section-space:clamp(46px,12vw,72px);
  --section-space-compact:clamp(34px,9vw,56px);
  --header-height:calc(var(--header,66px) + env(safe-area-inset-top,0px));
  --z-header:1000;
  --z-docked-command:1010;
  --z-chat:1200;
  --z-modal:1300;
  --z-cookie:1400;
  --focus-ring:0 0 0 3px rgba(85,214,232,.28);
}

html,
body{
  min-width:320px;
  overflow-x:clip;
}

.shell{
  width:min(100%,calc(var(--content-width-wide) + var(--page-gutter) * 2));
  padding-inline:var(--page-gutter);
}

main > .section-pad{
  padding-block:var(--section-space);
}

main > .section-pad.demo-section,
main > .section-pad.info-landing{
  padding-block:var(--section-space-compact);
}

.section-heading{
  max-width:760px;
  margin-bottom:clamp(24px,7vw,38px);
}

.section-heading h2,
.tools-layout h2,
.pricing-card h2,
.final-cta h2,
.info-landing h2{
  max-width:11.5ch;
  text-wrap:balance;
}

.section-heading p,
.tools-layout p,
.pricing-card p,
.final-cta p,
.info-landing p,
.platform-intro > p{
  max-width:62ch;
}

img,
video,
canvas,
model-viewer{
  max-width:100%;
}

a,
button,
summary,
.demo-chip,
.resource-tab,
.feature-link,
.tool-links a{
  touch-action:manipulation;
}

.button,
.feature-link,
.tool-links a,
.resource-tab,
.demo-chip,
.faq-list summary{
  min-height:44px;
}

.button:focus-visible,
.prompt-ask:focus-visible,
.prompt-generate:focus-visible,
.faq-list summary:focus-visible,
.chat-close:focus-visible,
.chat-send:focus-visible,
.chat-inputbar textarea:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:4px;
}

/* Header and mobile navigation ------------------------------------------- */
.site-header{
  z-index:var(--z-header);
  height:var(--header-height);
  padding-top:env(safe-area-inset-top,0px);
}


.nav-shell{
  gap:14px;
}

.brand img{
  width:38px;
  height:38px;
}

/* Hero -------------------------------------------------------------------- */
.hero-minimal{
  min-height:auto;
  padding-top:calc(var(--header-height) + clamp(8px,2vw,16px));
  padding-bottom:clamp(16px,3vw,28px);
}

main > .section-pad.hero-guided.hero-minimal{
  padding-top:calc(var(--header-height) + clamp(8px,2vw,16px));
  padding-bottom:clamp(16px,3vw,28px);
}

.hero-minimal-shell{
  min-height:min(760px,calc(100svh - var(--header-height)));
  justify-content:center;
  gap:clamp(16px,5vw,28px);
}

.hero-minimal-copy{
  display:grid;
  justify-items:center;
  width:100%;
  max-width:min(100%,1120px);
  text-align:center;
}

.hero-minimal-copy .eyebrow{
  justify-self:center;
  margin-bottom:12px;
  padding:7px 11px;
  font-size:9px;
  letter-spacing:.17em;
}

.hero-minimal-copy h1{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  justify-self:center;
  gap:0 .22em;
  width:min(100%,1120px);
  min-height:1.12em;
  padding:8px 10px;
  border-radius:18px;
  font-size:clamp(30px,9.2vw,36px);
  line-height:1;
  letter-spacing:-.035em;
  white-space:nowrap;
  text-wrap:nowrap;
  text-align:center;
}

.hero-minimal-copy h1 .typed-phrase-wrap{
  display:inline-flex;
  min-width:0;
  justify-content:center;
  white-space:nowrap;
  text-align:center;
}

.hero-minimal-copy p{
  justify-self:center;
  width:min(32rem,calc(100vw - 32px));
  max-width:32rem;
  margin:8px auto 0;
  padding:10px 12px;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  font-size:13px;
  line-height:1.48;
  text-align:center;
}

.hero-minimal-copy p.is-typed{
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}

.hero-minimal-copy p[data-hero-subcopy]{
  position:relative;
  display:block;
  width:min(32rem,calc(100vw - 32px));
  height:auto;
  min-height:2.95em;
  max-width:32rem;
  margin:8px auto 0;
  padding:0;
  overflow:hidden;
  clip:auto;
  clip-path:none;
  white-space:normal;
  border:0;
}

.hero-command-wrap{
  width:100%;
  max-width:580px;
  gap:10px;
  margin-bottom:0;
}

.hero-command,
.hero-promptbar{
  max-width:100%;
}

.hero-promptbar,
body.hero-command-docked .hero-promptbar{
  min-height:58px;
  padding:6px 6px 6px 14px;
  border-radius:22px;
  gap:6px;
}

.hero-promptbar input{
  font-size:16px;
}

.hero-promptbar input:focus,
.hero-promptbar input:focus-visible{
  outline:0;
  box-shadow:none;
}

.prompt-ask{
  display:none;
}

.prompt-generate,
body.hero-command-docked .prompt-generate{
  width:48px;
  min-width:48px;
  height:48px;
  padding:0;
}

.prompt-generate span,
body.hero-command-docked .prompt-generate span{
  display:none;
}

.hero-trust-line{
  max-width:330px;
  gap:7px 10px;
  margin-inline:auto;
  font-size:10px;
  line-height:1.35;
}

.hero-trust-line li{
  white-space:normal;
}

body.hero-command-docked .hero-command{
  position:static;
}

/* Main sections ----------------------------------------------------------- */
.proof-head,
.insight-head{
  display:grid;
  gap:18px;
}

.proof-head{
  max-width:none;
}

.proof-head > div{
  max-width:none;
}

.proof-head h2{
  max-width:none;
}

.proof-actions,
.comm-cta-centered,
.platform-actions{
  justify-content:flex-start;
}

.proof-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.proof-grid .ls-card{
  display:flex;
  min-height:auto;
  border-radius:16px;
}

.proof-grid .ls-card:nth-child(n+5){
  display:none;
}

.ls-card-media{
  aspect-ratio:1 / .88;
}

.ls-card-topline{
  inset:8px 8px auto;
}

.ls-card-badge,
.ls-card-time{
  max-width:82px;
  padding:4px 7px;
  font-size:8px;
  line-height:1.15;
  white-space:normal;
}

.ls-card-info{
  flex:0 0 auto;
  gap:8px;
  min-height:0;
  padding:11px;
}

.ls-card-info strong{
  display:-webkit-box;
  min-height:2.7em;
  overflow:hidden;
  font-size:13px;
  line-height:1.32;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.ls-card-excerpt{
  display:none;
}

.ls-card-bottom{
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  margin-top:4px;
  padding-top:9px;
}

.ls-card-author{
  max-width:100%;
  font-size:10px;
}

.ls-card-avatar{
  width:20px;
  height:20px;
  font-size:8px;
}

.ls-card-stats{
  width:100%;
  gap:6px;
  justify-content:space-between;
  font-size:10px;
}

.ls-card-stats span{
  min-width:0;
  padding:4px 7px;
}

.home-community-resources{
  margin-top:30px;
}

.resource-tabs{
  justify-content:flex-start;
  gap:10px;
  overflow-x:auto;
  padding-bottom:4px;
  scroll-snap-type:x proximity;
}

.resource-tab{
  flex:0 0 auto;
  scroll-snap-align:start;
}

@media(max-width:359px){
  .proof-grid{
    grid-template-columns:1fr;
  }
  .ls-card-media{
    aspect-ratio:16 / 10;
  }
  .ls-card-bottom{
    flex-direction:row;
    align-items:center;
  }
}

.comm-quick-links,
.info-landing-links,
.platform-cards,
.feature-grid,
.insight-grid{
  grid-template-columns:1fr;
}

.quick-link-card{
  grid-template-columns:auto minmax(0,1fr);
}

.ql-cta{
  grid-column:2;
}

.feature-card{
  grid-template-columns:minmax(0,1fr) auto;
  padding:20px;
  border-radius:18px;
}

.feature-card__icon{
  width:52px;
  height:52px;
  border-radius:14px;
}

.feature-card h3,
.feature-card p{
  max-width:none;
}

.feature-points{
  gap:6px;
}

.demo-how-grid,
.demo-main,
.pricing-card,
.platform-layout,
.info-landing-layout,
.faq-layout,
.tools-layout{
  grid-template-columns:1fr;
}

.demo-panel--interactive,
.demo-panel--workflow{
  padding:18px;
  border-radius:20px;
}

.demo-copy-rail,
.demo-prompt-area,
.demo-visual,
.demo-result,
.demo-examples{
  min-width:0;
  max-width:100%;
}

.demo-prompt-text,
.demo-section code,
.resource-modal code,
.snippet-code code{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.demo-result{
  height:clamp(260px,72vw,340px);
}

.demo-examples{
  width:100%;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}

.demo-chip{
  flex:0 0 auto;
  max-width:min(240px,calc(100vw - var(--page-gutter) * 2 - 40px));
  white-space:normal;
  scroll-snap-align:start;
}

.tools-layout{
  gap:28px;
}

.tool-links{
  grid-template-columns:1fr;
}

.tool-links a{
  align-items:center;
  padding-block:15px;
}

.pricing-card{
  gap:30px;
}

.pricing-card h2 br{
  display:none;
}

.pricing-card .button,
.final-cta .button,
.platform-actions .button{
  width:100%;
}

.platform-scope{
  padding:18px;
  border-radius:20px;
}

.platform-scope-head{
  align-items:flex-start;
  flex-direction:column;
}

.platform-card:first-child{
  grid-column:auto;
}

.platform-modes ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.insight-head-right{
  align-items:flex-start;
  text-align:left;
}

.insight-stats{
  width:100%;
  justify-content:space-between;
}

.insight-stats > div{
  padding-inline:12px;
}

.faq-layout .section-heading{
  position:static;
}

.faq-list summary{
  align-items:center;
  padding-block:18px;
  font-size:15px;
  line-height:1.35;
}

.faq-list summary span{
  flex:0 0 auto;
}

.faq-list p{
  padding-right:0;
}

.final-cta{
  padding-block:var(--section-space-compact);
}

.final-cta .hero-actions{
  display:grid;
  gap:10px;
}

.hero-actions--center{
  justify-content:center;
}

.footer-grid{
  grid-template-columns:1fr;
  gap:28px;
}

.footer-grid > div{
  grid-column:auto;
}

.footer-grid nav{
  min-width:0;
}

.footer-bottom{
  flex-direction:column;
  gap:12px;
}

/* Floating UI and modals -------------------------------------------------- */
.chat-toggle{
  right:calc(16px + env(safe-area-inset-right,0px));
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  z-index:var(--z-chat);
  width:54px;
  height:54px;
}

.chat-panel{
  z-index:calc(var(--z-chat) + 20);
  width:100vw;
  height:100dvh;
  border-radius:0;
}

.chat-backdrop{
  z-index:calc(var(--z-chat) + 10);
}

.chat-layout{
  grid-template-columns:1fr;
}

.chat-aside{
  display:none;
}

.chat-inputbar{
  padding:12px max(12px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left));
}

.chat-inputbar textarea{
  font-size:16px;
}

.resource-modal,
.generation-modal{
  z-index:var(--z-modal);
  padding:10px;
}

.resource-modal-card,
.generation-modal-panel{
  width:100%;
  max-height:calc(100dvh - 20px);
  border-radius:20px;
}

.resource-modal-header,
.resource-modal-body{
  padding-inline:18px;
}

.generation-model{
  min-height:260px;
}

/* Large mobile ------------------------------------------------------------ */
@media(min-width:390px){
  :root{
    --page-gutter:clamp(18px,5vw,24px);
  }
  .hero-minimal-copy h1{
    font-size:clamp(34px,8.8vw,42px);
  }
  .ls-card-info{
    padding:13px;
  }
  .ls-card-excerpt{
    display:none;
  }
  .platform-modes ul{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Small tablet ------------------------------------------------------------ */
@media(min-width:600px){
  :root{
    --page-gutter:clamp(24px,5vw,34px);
    --section-space:clamp(64px,9vw,92px);
    --section-space-compact:clamp(50px,7vw,74px);
  }
  .hero-minimal-copy h1{
    min-height:1.18em;
    font-size:clamp(40px,6.5vw,54px);
  }
  .hero-minimal-copy h1 .typed-phrase-wrap{
    display:inline-flex;
    white-space:nowrap;
  }
  .prompt-ask{
    display:inline-flex;
    width:auto;
    height:46px;
    padding:0 14px;
  }
  .prompt-ask span{
    display:inline;
  }
  .prompt-generate,
  body.hero-command-docked .prompt-generate{
    width:auto;
    min-width:126px;
    padding:0 20px;
  }
  .prompt-generate span,
  body.hero-command-docked .prompt-generate span{
    display:inline;
  }
  .feature-grid,
  .proof-grid,
  .comm-quick-links,
  .insight-grid,
  .info-landing-links{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .proof-grid .ls-card:nth-child(n+7){
    display:flex;
  }
  .demo-main{
    grid-template-columns:minmax(220px,.48fr) minmax(0,1fr);
  }
  .pricing-card .button,
  .final-cta .button,
  .platform-actions .button{
    width:auto;
  }
  .footer-grid{
    grid-template-columns:1.2fr 1fr 1fr;
  }
  .footer-grid > div{
    grid-column:1 / -1;
  }
}

@media(max-width:599px){
  .hero-minimal-copy h1{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:center;
    width:100%;
    min-height:2.08em;
    padding-inline:4px;
    font-size:clamp(30px,8.6vw,37px);
    line-height:1.02;
    white-space:normal;
    text-wrap:balance;
  }
  .hero-minimal-copy h1 .typed-phrase-wrap{
    display:inline-flex;
    align-items:baseline;
    justify-content:center;
    max-width:100%;
    white-space:nowrap;
    text-align:center;
  }
  .hero-minimal-copy p[data-hero-subcopy]{
    width:min(330px,calc(100vw - 36px));
    min-height:3.9em;
    margin-top:6px;
    font-size:12.5px;
    line-height:1.45;
  }
  .hero-card-deck{
    margin-top:0;
  }
}

/* Tablet ------------------------------------------------------------------ */
@media(min-width:768px){
  .desktop-nav,
  .desktop-cta{
    display:none;
  }
  .hero-minimal-copy p[data-hero-subcopy]{
    position:relative;
    display:block;
    width:min(680px,calc(100vw - 48px));
    height:auto;
    max-width:min(680px,calc(100vw - 48px));
    margin:8px auto 0;
    padding:9px 12px;
    overflow:hidden;
    clip:auto;
    clip-path:none;
    white-space:normal;
  }
  .proof-head,
  .insight-head{
    align-items:end;
  }
  .insight-head{
    grid-template-columns:minmax(0,1fr) auto;
  }
  .proof-actions{
    justify-content:flex-start;
  }
  .proof-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .proof-grid .ls-card:nth-child(n+8){
    display:none;
  }
  .feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .demo-how-grid{
    grid-template-columns:1fr;
  }
  .tools-layout,
  .platform-layout,
  .info-landing-layout,
  .faq-layout{
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  }
  .tool-links{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .pricing-card{
    grid-template-columns:minmax(0,1fr) minmax(280px,.82fr);
  }
  .platform-cards{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .platform-card:first-child{
    grid-column:1 / -1;
  }
  .chat-panel{
    width:min(920px,calc(100vw - 40px));
    height:min(720px,calc(100dvh - 40px));
    border-radius:24px;
  }
  .footer-grid{
    grid-template-columns:1.2fr repeat(4,minmax(100px,auto));
  }
  .footer-grid > div{
    grid-column:auto;
  }
}

/* Small laptop ------------------------------------------------------------ */
@media(min-width:1024px){
  :root{
    --page-gutter:clamp(30px,4vw,48px);
    --section-space:clamp(78px,7vw,112px);
    --section-space-compact:clamp(58px,5.5vw,86px);
  }
  .desktop-nav,
  .desktop-cta{
    display:flex;
  }
  .desktop-nav{
    gap:clamp(14px,1.7vw,28px);
  }
  .hero-minimal-shell{
    min-height:calc(min(960px,100svh) - var(--header));
  }
  .hero-minimal-copy h1{
    width:min(100%,1460px);
    min-height:1.12em;
    padding:clamp(6px,1vw,12px) clamp(14px,2vw,28px);
    font-size:clamp(50px,5.25vw,76px);
    white-space:nowrap;
  }
  .hero-minimal-copy h1 .typed-phrase-wrap{
    display:inline-flex;
    white-space:nowrap;
  }
  .hero-command-wrap{
    width:min(100%,1080px);
    max-width:1080px;
    margin-inline:auto;
  }
  .hero-command{
    width:100%;
  }
  .proof-head{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
  }
  .proof-head h2{
    white-space:nowrap;
    text-wrap:nowrap;
  }
  .proof-actions{
    justify-content:flex-end;
  }
  .proof-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  .proof-grid .ls-card:nth-child(n){
    display:flex;
  }
  .feature-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .demo-how-grid{
    grid-template-columns:minmax(0,1.45fr) minmax(320px,.85fr);
  }
  .footer-bottom{
    flex-direction:row;
  }
}

/* Desktop ----------------------------------------------------------------- */
@media(min-width:1280px){
  .shell{
    width:min(100%,calc(var(--content-width-wide) + var(--page-gutter) * 2));
  }
  .section-heading h2,
  .tools-layout h2,
  .pricing-card h2,
  .final-cta h2,
  .info-landing h2{
    max-width:none;
  }
  .hero-minimal-copy h1{
    width:min(100%,1500px);
    font-size:clamp(56px,4.7vw,80px);
  }
}

/* Large and wide desktop -------------------------------------------------- */
@media(min-width:1600px){
  :root{
    --page-gutter:56px;
  }
  .hero-minimal-copy h1{
    width:min(100%,1460px);
    font-size:clamp(64px,4.45vw,90px);
    white-space:nowrap;
  }
  .hero-minimal-copy h1 .typed-phrase-wrap{
    display:inline-flex;
    white-space:nowrap;
  }
  .hero-command-wrap{
    width:min(100%,1120px);
    max-width:1120px;
  }
}

@media(min-width:1920px){
  :root{
    --content-width-wide:1620px;
  }
  .hero-minimal-copy h1{
    font-size:clamp(70px,4.2vw,96px);
  }
}

/* Landscape phones and short tablets ------------------------------------- */
@media(max-height:520px) and (orientation:landscape){
  .site-header{
    height:58px;
  }
  .hero-minimal{
    padding-top:72px;
  }
  .hero-minimal-shell{
    min-height:auto;
    gap:12px;
  }
  .hero-minimal-copy .eyebrow,
  .hero-trust-line{
    display:none;
  }
  .hero-minimal-copy h1{
    min-height:1.1em;
    font-size:clamp(30px,8vw,52px);
  }
  .hero-minimal-copy p{
    max-width:48rem;
    font-size:13px;
  }
  .hero-command-wrap{
    max-width:720px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto;
  }
  .hero-minimal::before,
  .hero-minimal-copy h1 em,
  .typed-cursor,
  .proof-live i,
  .demo-prompt-cursor,
  .chat-message.typing span{
    animation:none;
  }
  .button,
  .feature-card,
  .demo-chip,
  .resource-modal,
  .generation-modal-panel,
  .chat-panel{
    transition:none;
  }
}

/* Hero capability surface ------------------------------------------------- */
.hero-minimal{
  background:#05070a;
}

.hero-minimal::before{
  background:
    radial-gradient(circle at 18% 18%,rgba(35,164,188,.18),transparent 28%),
    radial-gradient(circle at 78% 20%,rgba(124,96,190,.16),transparent 28%),
    radial-gradient(circle at 52% 78%,rgba(139,180,124,.11),transparent 34%);
}

.hero-minimal::after{
  background:
    linear-gradient(180deg,rgba(5,7,10,.08) 0,rgba(5,7,10,.54) 57%,#05070a 100%),
    radial-gradient(ellipse at 50% 42%,rgba(0,0,0,.08),rgba(0,0,0,.5) 72%);
}

.hero-card-deck{
  position:relative;
  z-index:4;
  width:min(100%,1680px);
  margin:4px auto 0;
}

.hero-card-deck::after{
  content:"";
  position:absolute;
  top:6px;
  right:0;
  bottom:18px;
  z-index:5;
  width:74px;
  background:linear-gradient(90deg,transparent,rgba(5,7,10,.82));
  opacity:0;
  pointer-events:none;
}

.hero-card-deck.has-overflow::after{
  opacity:1;
}

.hero-product-surface{
  display:flex;
  align-items:stretch;
  gap:22px;
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  padding:8px 6px 20px;
  scroll-behavior:smooth;
  scroll-padding-inline:4px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.hero-product-surface::-webkit-scrollbar{
  display:none;
}

.hero-product-surface:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:5px;
  border-radius:22px;
}

.hero-cap-card{
  position:relative;
  display:flex;
  min-width:0;
  min-height:340px;
  flex:0 0 clamp(300px,21vw,365px);
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;
  overflow:hidden;
  padding:22px;
  border:1px solid rgba(244,241,234,.1);
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.024)),
    rgba(13,15,19,.76);
  color:#f4f1ea;
  text-align:left;
  text-decoration:none;
  scroll-snap-align:start;
  box-shadow:0 22px 68px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px) saturate(116%);
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}

.hero-cap-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(circle at 18% 14%,var(--cap-a,rgba(142,223,237,.2)),transparent 36%),
    radial-gradient(circle at 84% 88%,var(--cap-b,rgba(167,139,250,.16)),transparent 42%);
  opacity:.78;
  pointer-events:none;
}

.hero-cap-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(5,7,10,.03) 18%,rgba(5,7,10,.42) 58%,rgba(5,7,10,.88) 100%);
  pointer-events:none;
}

.hero-cap-card:hover,
.hero-cap-card:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(244,241,234,.2);
  background:
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.032)),
    rgba(15,18,22,.82);
  box-shadow:0 28px 80px rgba(0,0,0,.46),0 0 42px rgba(116,196,255,.08),inset 0 1px 0 rgba(255,255,255,.1);
}

.hero-cap-card strong,
.hero-cap-card p,
.hero-cap-kicker,
.hero-cap-icon{
  position:relative;
  z-index:2;
  opacity:0;
  transform:translateY(10px);
  animation:heroCardTextIn .62s cubic-bezier(.22,1,.36,1) forwards;
}

.hero-cap-kicker,
.hero-cap-icon{
  animation-delay:1.02s;
}

.hero-cap-card strong{
  animation-delay:1.14s;
}

.hero-cap-card p{
  animation-delay:1.28s;
}

.hero-cap-card strong{
  max-width:15ch;
  font-family:"Space Grotesk",Inter,sans-serif;
  font-size:clamp(18px,1.2vw,22px);
  font-weight:760;
  line-height:1.08;
  letter-spacing:0;
}

.hero-cap-card p{
  max-width:29ch;
  margin:0;
  color:#c6beb2;
  font-size:12px;
  line-height:1.45;
}

.hero-cap-kicker{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  color:#ddd5ca;
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.hero-cap-kicker i{
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--cap-dot,#8edfed);
  box-shadow:0 0 16px var(--cap-dot,#8edfed);
}

.hero-cap-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-width:44px;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(244,241,234,.09);
  color:#f4f1ea;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  box-shadow:inset 0 0 0 1px rgba(244,241,234,.12);
}

.hero-card-media{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  overflow:hidden;
  opacity:.96;
  transition:opacity .26s ease,filter .26s ease;
}

.hero-card-media img,
.hero-card-media video,
.hero-card-media model-viewer{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-card-media model-viewer{
  --poster-color:transparent;
  background:radial-gradient(circle at 50% 45%,rgba(116,196,255,.14),transparent 56%);
}

.hero-video-stage video{
  opacity:.78;
  filter:saturate(.94) contrast(1.08) brightness(.84);
  transform:scale(1.04);
}

.hero-video-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(5,7,10,.05),rgba(5,7,10,.82)),
    radial-gradient(circle at 74% 14%,rgba(142,223,237,.24),transparent 30%);
  pointer-events:none;
}

.hero-video-stage.is-swapping,
.hero-model-stage.is-swapping{
  opacity:.7;
  filter:blur(2px);
}

.hero-media-dots{
  position:absolute;
  right:18px;
  top:18px;
  z-index:2;
  display:inline-flex;
  gap:5px;
}

.hero-media-dots i{
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(244,241,234,.32);
}

.hero-media-dots i:first-child,
.hero-media-dots i.is-active{
  background:#8edfed;
  box-shadow:0 0 12px rgba(142,223,237,.72);
}

.hero-model-stage{
  background:radial-gradient(circle at 50% 34%,rgba(142,223,237,.14),transparent 48%),#090b0f;
}

.hero-model-stage::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:20%;
  z-index:1;
  width:56%;
  height:16%;
  border:1px solid rgba(142,223,237,.26);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(142,223,237,.18),transparent 66%);
  box-shadow:0 0 30px rgba(142,223,237,.14),inset 0 0 18px rgba(142,223,237,.08);
  transform:translateX(-50%) rotateX(62deg);
  animation:heroModelTurntable 5.8s linear infinite;
}

.hero-model-stage model-viewer{
  position:absolute;
  inset:-8% -10% 2%;
  width:120%;
  height:106%;
  opacity:.9;
  filter:saturate(1.18) contrast(1.16) brightness(1.12) drop-shadow(0 20px 42px rgba(142,223,237,.18));
}

.hero-model-poster{
  position:absolute;
  inset:2% -4% 6%;
  z-index:0;
  object-fit:contain;
  opacity:.92;
  filter:saturate(1.34) contrast(1.58) brightness(2.25) drop-shadow(0 20px 42px rgba(142,223,237,.22));
  mix-blend-mode:screen;
  transform:scale(1.16);
}

.hero-model-hologram{
  position:absolute;
  z-index:1;
  display:block;
  border:1px solid rgba(142,223,237,.26);
  background:
    linear-gradient(45deg,transparent 46%,rgba(142,223,237,.42) 47%,rgba(142,223,237,.42) 49%,transparent 50%),
    linear-gradient(-45deg,transparent 46%,rgba(168,207,131,.26) 47%,rgba(168,207,131,.26) 49%,transparent 50%),
    radial-gradient(circle at 50% 38%,rgba(142,223,237,.28),rgba(142,223,237,.05) 52%,transparent 70%);
  box-shadow:0 18px 44px rgba(0,0,0,.28),0 0 34px rgba(142,223,237,.18),inset 0 0 28px rgba(142,223,237,.08);
  opacity:.78;
  transform-style:preserve-3d;
  animation:heroModelHolo 8s ease-in-out infinite;
}

.hero-model-hologram--one{
  left:42%;
  top:17%;
  width:28%;
  height:48%;
  border-radius:42% 34% 46% 38%;
  clip-path:polygon(48% 0,76% 12%,92% 42%,82% 82%,52% 100%,20% 86%,8% 44%,22% 12%);
}

.hero-model-hologram--two{
  right:12%;
  top:24%;
  width:18%;
  height:26%;
  border-color:rgba(199,155,255,.26);
  background:
    linear-gradient(0deg,transparent 47%,rgba(199,155,255,.36) 48%,rgba(199,155,255,.36) 50%,transparent 51%),
    linear-gradient(90deg,transparent 47%,rgba(142,223,237,.32) 48%,rgba(142,223,237,.32) 50%,transparent 51%),
    radial-gradient(circle at 50% 50%,rgba(199,155,255,.18),transparent 68%);
  clip-path:polygon(50% 0,100% 28%,84% 100%,16% 100%,0 28%);
  animation-delay:-2.4s;
}

.hero-model-hologram--three{
  left:18%;
  top:29%;
  width:17%;
  height:22%;
  border-color:rgba(168,207,131,.26);
  background:
    linear-gradient(45deg,transparent 45%,rgba(168,207,131,.34) 46%,rgba(168,207,131,.34) 50%,transparent 51%),
    radial-gradient(circle at 50% 45%,rgba(168,207,131,.2),transparent 68%);
  clip-path:polygon(50% 0,94% 22%,88% 74%,50% 100%,12% 74%,6% 22%);
  animation-delay:-4.8s;
}

.hero-model-grid{
  position:absolute;
  inset:0;
  z-index:1;
  background-image:
    linear-gradient(rgba(142,223,237,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(142,223,237,.08) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 80%,transparent);
  animation:heroGridDrift 9s linear infinite;
}

.hero-media-chip{
  position:absolute;
  right:18px;
  top:18px;
  z-index:2;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(5,7,10,.62);
  color:#dceff2;
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(244,241,234,.12);
}

.hero-image-stage{
  background:#0a0d12;
}

.hero-image-stage img{
  position:absolute;
  inset:0;
  opacity:0;
  filter:saturate(.92) contrast(1.04) brightness(.78);
  transform:scale(1.05);
  transition:opacity .7s ease,transform 5.2s ease;
}

.hero-image-stage img.is-active{
  opacity:.74;
  transform:scale(1);
}

.hero-image-frame{
  position:absolute;
  inset:14px;
  z-index:1;
  border:1px solid rgba(244,241,234,.15);
  border-radius:15px;
  box-shadow:0 0 40px rgba(116,196,255,.08),inset 0 0 0 1px rgba(5,7,10,.24);
}

/* ---- live canvas scenes: print prep · remesh · export -------------------
   markup: .hero-card-media.hero-scene[data-scene] > canvas.fxc-stage + .fxc-hud
   driven by js/hero-feature-scenes.js (IntersectionObserver-paused, DPR-aware,
   static composed frame under prefers-reduced-motion) */
.hero-scene{
  background:
    radial-gradient(circle at 18% 18%,var(--cap-a,rgba(142,223,237,.16)),transparent 38%),
    radial-gradient(circle at 86% 86%,var(--cap-b,rgba(167,139,250,.12)),transparent 44%),
    #0b0e12;
}

.hero-scene::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(244,241,234,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,241,234,.03) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(180deg,#000,transparent 86%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 86%);
}

.hero-scene .fxc-stage{
  position:absolute;
  top:0;
  left:0;
  display:block;
  width:100%;
  height:72%;
  mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);
}

.fxc-hud{
  position:absolute;
  left:14px;
  top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  pointer-events:none;
}

.hud-chip{
  padding:5px 10px;
  border:1px solid rgba(244,241,234,.12);
  border-radius:999px;
  background:rgba(9,12,13,.72);
  color:#c8d0d0;
  font-size:10px;
  font-weight:650;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:color .3s ease,border-color .3s ease;
}

.hud-chip b{
  color:#7fc8c2;
  font-variant-numeric:tabular-nums;
}

.hud-chip.ok{color:#a8c87f;border-color:rgba(168,200,127,.35)}
.hud-chip.warn{color:#d98a8a;border-color:rgba(217,138,138,.35)}

@keyframes heroGridDrift{to{background-position:28px 28px}}
@keyframes heroCardTextIn{to{opacity:1;transform:translateY(0)}}
@keyframes heroModelTurntable{to{transform:translateX(-50%) rotateX(62deg) rotateZ(360deg)}}
@keyframes heroModelHolo{0%,100%{transform:rotateY(-18deg) rotateX(8deg) translateY(0)}50%{transform:rotateY(18deg) rotateX(-5deg) translateY(-8px)}}

.hero-cap-card--feature{
  min-height:390px;
  flex-basis:clamp(380px,28vw,480px);
  padding:24px;
}

.hero-cap-card--feature strong{
  max-width:13ch;
  font-size:clamp(24px,1.8vw,32px);
}

.hero-cap-card--feature p{
  max-width:31ch;
  color:#ddd5ca;
  font-size:12.5px;
}

.hero-cap-card--video{
  --cap-a:rgba(88,180,206,.22);
  --cap-b:rgba(176,143,224,.16);
  --cap-dot:#8edfed;
  min-height:420px;
  flex-basis:clamp(460px,34vw,590px);
  padding:26px;
}

.hero-cap-card--model{
  --cap-a:rgba(147,189,130,.18);
  --cap-b:rgba(88,180,206,.13);
  --cap-dot:#a8cf83;
}

.hero-cap-card--image{
  --cap-a:rgba(116,196,255,.2);
  --cap-b:rgba(167,139,250,.13);
}

.hero-cap-card--print{
  --cap-a:rgba(177,204,133,.2);
  --cap-b:rgba(221,173,104,.11);
}

.hero-cap-card--refine{
  --cap-a:rgba(201,153,231,.17);
  --cap-b:rgba(87,199,181,.12);
}

.hero-cap-card--export{
  --cap-a:rgba(231,213,169,.14);
  --cap-b:rgba(96,170,206,.13);
}

.hero-card-arrow{
  position:absolute;
  top:50%;
  z-index:6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border:1px solid rgba(244,241,234,.13);
  border-radius:999px;
  background:rgba(9,11,15,.82);
  color:#f4f1ea;
  font:900 18px/1 Inter,system-ui,sans-serif;
  box-shadow:0 18px 48px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.08);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(-50%);
  transition:opacity .2s ease,transform .2s ease,background .2s ease,color .2s ease;
}

.hero-card-arrow--prev{
  left:-10px;
}

.hero-card-arrow--next{
  right:-10px;
}

.hero-card-deck.has-overflow .hero-card-arrow{
  opacity:1;
  pointer-events:auto;
}

.hero-card-arrow:hover,
.hero-card-arrow:focus-visible{
  background:#f4f1ea;
  color:#101217;
  transform:translateY(-50%) scale(1.04);
}

.hero-card-deck.has-overflow .hero-card-arrow:disabled,
.hero-card-arrow:disabled{
  opacity:0;
  cursor:default;
  pointer-events:none;
}

.hero-command-wrap{
  z-index:90;
  margin-top:4px;
}

.assistant-answer{
  z-index:120;
}

@media(max-width:767px){
  .hero-card-deck{
    width:calc(100vw - 24px);
    max-width:none;
    margin-inline:calc(50% - 50vw + 12px);
  }
  .hero-product-surface{
    gap:12px;
    padding:4px 0 12px;
    scroll-padding-inline:0;
  }
  .hero-cap-card{
    flex:0 0 min(78vw,310px);
    min-height:230px;
    padding:18px;
    border-radius:18px;
  }
  .hero-cap-card--feature{
    flex-basis:min(82vw,340px);
    min-height:260px;
  }
  .hero-cap-card--video{
    flex-basis:min(86vw,360px);
    min-height:290px;
  }
  .hero-cap-card strong,
  .hero-cap-card--feature strong{
    max-width:14ch;
    font-size:20px;
  }
  .hero-cap-card--feature strong{
    font-size:24px;
  }
  .hero-cap-card p,
  .hero-cap-card--feature p{
    max-width:27ch;
    font-size:12px;
  }
  .hero-card-media img{
    opacity:.56;
  }
  .hero-card-arrow{
    top:42px;
    width:40px;
    height:40px;
    font-size:16px;
  }
  .hero-card-arrow--prev{
    left:4px;
  }
  .hero-card-arrow--next{
    right:4px;
  }
}

@media(max-height:760px) and (min-width:1024px){
  .hero-cap-card{
    min-height:270px;
    flex-basis:clamp(280px,20vw,330px);
    padding:20px;
  }
  .hero-cap-card--feature{
    min-height:300px;
    flex-basis:clamp(340px,26vw,420px);
    padding:22px;
  }
  .hero-cap-card--video{
    min-height:330px;
    flex-basis:clamp(420px,32vw,520px);
  }
  .hero-cap-card strong{
    font-size:clamp(17px,1.15vw,21px);
  }
  .hero-cap-card--feature strong{
    font-size:clamp(22px,1.65vw,29px);
  }
  .hero-cap-card p,
  .hero-cap-card--feature p{
    font-size:12px;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .hero-card-deck{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-product-surface{
    scroll-behavior:auto;
  }
  .hero-cap-card,
  .hero-card-arrow{
    transition:none;
  }
  .hero-cap-card strong,
  .hero-cap-card p,
  .hero-cap-kicker,
  .hero-cap-icon{
    opacity:1;
    transform:none;
    animation:none;
  }
  .hero-model-grid,
  .hero-model-stage::after,
  .hero-model-hologram{
    animation:none;
  }
}