/* T&N Office Hero v2.0
   Namespaced component: .tnhero
   PC / Tablet / Smartphone individually optimized
*/
.tnhero{
  position:relative;
  overflow:hidden;
  padding:138px 0 88px;
  color:#f7f3eb;
  background:
    radial-gradient(circle at 18% 8%,rgba(214,176,105,.17),transparent 30%),
    radial-gradient(circle at 82% 34%,rgba(167,128,67,.12),transparent 34%),
    linear-gradient(145deg,#08090c 0%,#11141a 52%,#1a1713 100%);
  isolation:isolate;
}
.tnhero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:84px 84px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 92%);
}
.tnhero__ambient{
  position:absolute;
  inset:auto -22vw -45vw auto;
  z-index:-1;
  width:78vw;
  height:78vw;
  border:1px solid rgba(222,193,137,.08);
  border-radius:50%;
  box-shadow:
    0 0 0 10vw rgba(222,193,137,.025),
    0 0 0 21vw rgba(222,193,137,.017);
}
.tnhero__inner{position:relative}
.tnhero__message{
  max-width:1050px;
  margin-bottom:54px;
}
.tnhero__eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 24px;
  color:#aaa298;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.tnhero__eyebrow span:first-child{color:#d7b77c}
.tnhero__eyebrow span+span::before{
  content:"";
  display:inline-block;
  width:38px;
  height:1px;
  margin:0 14px 3px 0;
  background:rgba(215,183,124,.46);
}
.tnhero__title{
  margin:0;
  max-width:1000px;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(3.25rem,5.2vw,6rem);
  font-weight:500;
  line-height:1.07;
  letter-spacing:-.04em;
}
.tnhero__title span{display:block}
.tnhero__title span:last-child{
  margin-top:.07em;
  color:transparent;
  background:linear-gradient(110deg,#f1ddb5 0%,#b98d46 48%,#eed19b 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.tnhero__lead{
  margin:28px 0 0;
  max-width:810px;
  color:#c8c1b7;
  font-size:clamp(.98rem,1.25vw,1.1rem);
  line-height:1.9;
}
.tnhero__lead span{display:block}
.tnhero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:31px;
}
.tnhero__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-height:52px;
  padding:0 25px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:.88rem;
  font-weight:800;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.tnhero__button:hover{transform:translateY(-2px)}
.tnhero__button--primary{
  color:#17130d;
  background:linear-gradient(135deg,#e0c18a,#ac7f39);
  box-shadow:0 15px 36px rgba(171,126,56,.22);
}
.tnhero__button--secondary{
  color:#f6f0e7;
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.045);
}
.tnhero__button--secondary:hover{border-color:rgba(222,193,137,.55)}

.tnhero__split{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr);
  gap:20px;
  align-items:stretch;
}
.tnhero__panel{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(226,205,165,.22);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  box-shadow:0 34px 82px rgba(0,0,0,.28);
  backdrop-filter:blur(18px);
}
.tnhero__panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 34%);
}
.tnhero__panel--website{padding:30px}
.tnhero__panel--series{padding:30px}
.tnhero__panel-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.tnhero__panel-kicker{
  margin:0 0 9px;
  color:#c6a66c;
  font-size:.63rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.tnhero__panel h2{
  margin:0;
  color:#f6f0e7;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(1.45rem,2vw,2.25rem);
  font-weight:500;
  line-height:1.42;
}
.tnhero__status{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  color:#182018;
  background:#d6c695;
  font-size:.62rem;
  font-weight:900;
}
.tnhero__status--future{
  color:#d8cfbf;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}

.tnhero__devices{
  position:relative;
  min-height:342px;
  margin-top:28px;
}
.tnhero__desktop{
  position:absolute;
  inset:0 56px 18px 0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:#101217;
  box-shadow:0 25px 60px rgba(0,0,0,.32);
}
.tnhero__browserbar{
  height:36px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.tnhero__browserbar i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#67635d;
}
.tnhero__browserbar i:first-child{background:#b88c4a}
.tnhero__browserbar span{
  margin-left:9px;
  color:#78746d;
  font-size:.52rem;
  letter-spacing:.08em;
}
.tnhero__screen{
  min-height:270px;
  display:grid;
  grid-template-columns:1.18fr .82fr;
  align-items:center;
  gap:20px;
  padding:28px;
  background:
    radial-gradient(circle at 83% 25%,rgba(185,141,70,.25),transparent 31%),
    linear-gradient(132deg,#171a20,#242017);
}
.tnhero__screen-copy small{
  color:#bd9759;
  font-size:.52rem;
  letter-spacing:.15em;
}
.tnhero__screen-copy strong{
  display:block;
  margin:15px 0 24px;
  font-family:Georgia,"Yu Mincho",serif;
  font-size:clamp(1.25rem,2vw,2.1rem);
  font-weight:500;
  line-height:1.42;
}
.tnhero__screen-copy b{
  display:block;
  width:73%;
  height:4px;
  margin-top:9px;
  background:rgba(255,255,255,.16);
}
.tnhero__screen-copy b:last-child{width:48%}
.tnhero__screen-mark{
  aspect-ratio:1;
  width:min(100%,150px);
  margin:auto;
  display:grid;
  place-items:center;
  border:1px solid rgba(226,193,131,.32);
  border-radius:50%;
  color:#17130d;
  background:
    radial-gradient(circle,#dfc28c 0 31%,transparent 32%),
    radial-gradient(circle,transparent 0 51%,rgba(219,183,116,.19) 52% 53%,transparent 54%);
  font-family:Georgia,serif;
  font-weight:900;
}
.tnhero__tablet,.tnhero__phone{
  position:absolute;
  right:0;
  bottom:0;
  overflow:hidden;
  border:3px solid #24262b;
  background:#111318;
  box-shadow:0 18px 45px rgba(0,0,0,.42);
}
.tnhero__tablet{
  width:150px;
  height:205px;
  border-radius:16px;
}
.tnhero__phone{
  right:126px;
  width:82px;
  height:168px;
  border-radius:18px;
}
.tnhero__mini-screen{
  height:100%;
  padding:16px 11px;
  background:linear-gradient(145deg,#1b1e24,#2a241b);
}
.tnhero__mini-screen span{
  display:block;
  width:40%;
  height:3px;
  background:#c7a363;
}
.tnhero__mini-screen strong{
  display:block;
  margin:18px 0;
  color:#d8bd85;
  font-family:Georgia,serif;
  font-size:.75rem;
}
.tnhero__mini-screen i{
  display:block;
  height:4px;
  margin-top:8px;
  background:rgba(255,255,255,.15);
}
.tnhero__mini-screen i:last-child{width:65%}
.tnhero__features{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:0;
  margin:22px 0 0;
  list-style:none;
}
.tnhero__features li{
  padding:15px 16px;
  border-top:1px solid rgba(255,255,255,.09);
  border-right:1px solid rgba(255,255,255,.09);
}
.tnhero__features li:last-child{border-right:0}
.tnhero__features strong{
  display:block;
  color:#e3c68e;
  font-family:Georgia,serif;
  font-size:.92rem;
}
.tnhero__features span{
  display:block;
  margin-top:5px;
  color:#918b82;
  font-size:.66rem;
  line-height:1.5;
}

.tnhero__product-list{
  position:relative;
  z-index:2;
  display:grid;
  gap:10px;
  margin-top:28px;
}
.tnhero__product{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:13px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.tnhero__product--active{
  border-color:rgba(213,177,107,.35);
  background:linear-gradient(135deg,rgba(191,144,68,.16),rgba(255,255,255,.03));
}
.tnhero__product-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#d9bd86;
  background:#181b20;
  font-family:Georgia,serif;
  font-weight:900;
}
.tnhero__product strong{
  display:block;
  color:#eee8df;
  font-size:.83rem;
}
.tnhero__product small{
  display:block;
  margin-top:3px;
  color:#8f8980;
  font-size:.62rem;
}
.tnhero__product b{
  color:#8f8980;
  font-size:.57rem;
  font-weight:900;
}
.tnhero__product--active b{color:#d8bd85}
.tnhero__series-note{
  position:relative;
  z-index:2;
  margin:20px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.09);
  color:#9e978d;
  font-size:.75rem;
  line-height:1.75;
}

/* Tablet */
@media (min-width:768px) and (max-width:1199px){
  .tnhero{padding:116px 0 74px}
  .tnhero__message{margin-bottom:44px}
  .tnhero__title{font-size:clamp(3.4rem,7.5vw,5.3rem)}
  .tnhero__split{grid-template-columns:1fr}
  .tnhero__panel--website,.tnhero__panel--series{padding:27px}
  .tnhero__devices{min-height:360px}
  .tnhero__desktop{inset:0 88px 18px 0}
  .tnhero__tablet{width:166px;height:220px}
  .tnhero__phone{right:140px;width:90px;height:180px}
}

/* Smartphone */
@media (max-width:767px){
  .tnhero{padding:94px 0 58px}
  .tnhero .container{width:min(var(--max),calc(100% - 28px))}
  .tnhero__message{margin-bottom:34px}
  .tnhero__eyebrow{
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:18px;
    font-size:.58rem;
    letter-spacing:.12em;
  }
  .tnhero__eyebrow span+span::before{width:18px;margin-right:7px}
  .tnhero__title{
    font-size:clamp(2.3rem,11.2vw,3.35rem);
    line-height:1.12;
    letter-spacing:-.035em;
  }
  .tnhero__lead{
    margin-top:21px;
    font-size:.9rem;
    line-height:1.82;
  }
  .tnhero__lead span{display:inline}
  .tnhero__lead span+span::before{content:" "}
  .tnhero__actions{display:grid;grid-template-columns:1fr;gap:11px;margin-top:25px}
  .tnhero__button{width:100%;min-height:50px;padding:0 16px}
  .tnhero__split{grid-template-columns:1fr;gap:15px}
  .tnhero__panel{border-radius:21px}
  .tnhero__panel--website,.tnhero__panel--series{padding:20px}
  .tnhero__panel-head{gap:10px}
  .tnhero__panel h2{font-size:1.35rem}
  .tnhero__status{padding:6px 8px;font-size:.54rem}
  .tnhero__devices{min-height:255px;margin-top:22px}
  .tnhero__desktop{inset:0 35px 14px 0;border-radius:13px}
  .tnhero__browserbar{height:29px;padding:0 8px}
  .tnhero__browserbar i{width:5px;height:5px}
  .tnhero__browserbar span{font-size:.42rem}
  .tnhero__screen{min-height:190px;padding:17px;gap:8px}
  .tnhero__screen-copy small{font-size:.4rem}
  .tnhero__screen-copy strong{font-size:1rem;margin:10px 0 15px}
  .tnhero__screen-copy b{height:3px;margin-top:6px}
  .tnhero__screen-mark{max-width:82px;font-size:.7rem}
  .tnhero__tablet{width:88px;height:132px;border-radius:10px;border-width:2px}
  .tnhero__phone{right:75px;width:51px;height:106px;border-radius:12px;border-width:2px}
  .tnhero__mini-screen{padding:10px 7px}
  .tnhero__mini-screen strong{margin:11px 0;font-size:.48rem}
  .tnhero__features{grid-template-columns:1fr;margin-top:17px}
  .tnhero__features li{
    display:grid;
    grid-template-columns:75px 1fr;
    align-items:center;
    gap:8px;
    padding:11px 0;
    border-right:0;
  }
  .tnhero__features span{margin-top:0}
  .tnhero__product{grid-template-columns:34px minmax(0,1fr) auto;padding:11px;gap:9px}
  .tnhero__product-icon{width:34px;height:34px;border-radius:9px;font-size:.75rem}
  .tnhero__product strong{font-size:.75rem}
  .tnhero__product small{font-size:.58rem}
}

@media (max-width:390px){
  .tnhero__title{font-size:clamp(2.15rem,10.8vw,2.9rem)}
  .tnhero__panel--website,.tnhero__panel--series{padding:17px}
  .tnhero__devices{min-height:238px}
}

@media (prefers-reduced-motion:reduce){
  .tnhero__button{transition:none}
}

.tnhero-reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .75s ease,transform .75s ease;
}
.tnhero-reveal.is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .tnhero-reveal{opacity:1;transform:none;transition:none}
}


/* =========================================================
   T&N Office Hero v2.1 — Polish / Design Review candidate
   ========================================================= */

.tnhero__brandmark{
  position:absolute;
  right:1.5%;
  top:64px;
  z-index:-1;
  color:rgba(224,193,138,.035);
  font-family:Georgia,"Yu Mincho",serif;
  font-size:clamp(12rem,22vw,25rem);
  font-weight:800;
  letter-spacing:-.08em;
  line-height:.8;
  user-select:none;
  pointer-events:none;
}

.tnhero__message{
  position:relative;
}

.tnhero__message::after{
  content:"";
  display:block;
  width:min(100%,920px);
  height:1px;
  margin-top:39px;
  background:linear-gradient(90deg,rgba(221,190,132,.44),rgba(255,255,255,.06),transparent);
}

.tnhero__split{
  align-items:stretch;
}

.tnhero__panel{
  min-height:100%;
  transition:
    transform .38s cubic-bezier(.2,.8,.2,1),
    border-color .38s ease,
    box-shadow .38s ease;
}

@media (hover:hover) and (pointer:fine){
  .tnhero__panel:hover{
    transform:translateY(-5px);
    border-color:rgba(226,205,165,.38);
    box-shadow:0 42px 96px rgba(0,0,0,.36);
  }
}

.tnhero__panel--website,
.tnhero__panel--series{
  display:flex;
  flex-direction:column;
}

.tnhero__devices{
  flex:1 0 auto;
}

.tnhero__quality-badges{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.tnhero__quality-badges span{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:0 11px;
  border:1px solid rgba(219,183,116,.23);
  border-radius:999px;
  color:#cfb47e;
  background:rgba(184,139,69,.075);
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.055em;
}

.tnhero__features{
  margin-top:auto;
  padding-top:12px;
}

.tnhero__product-list{
  flex:1 0 auto;
}

.tnhero__product{
  position:relative;
  overflow:hidden;
  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease;
}

.tnhero__product::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 15%,rgba(255,255,255,.045) 45%,transparent 75%);
  transform:translateX(-120%);
  transition:transform .6s ease;
  pointer-events:none;
}

@media (hover:hover) and (pointer:fine){
  .tnhero__product:hover{
    transform:translateX(4px);
    border-color:rgba(213,177,107,.28);
    background:rgba(255,255,255,.045);
  }
  .tnhero__product:hover::after{
    transform:translateX(120%);
  }
}

.tnhero__product--active{
  box-shadow:inset 3px 0 0 #c39a57;
}

.tnhero__series-note{
  margin-top:auto;
}

.tnhero__button{
  position:relative;
  overflow:hidden;
}

.tnhero__button::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.24) 45%,transparent 72%);
  transform:translateX(-135%);
  transition:transform .65s ease;
}

@media (hover:hover) and (pointer:fine){
  .tnhero__button:hover::before{
    transform:translateX(135%);
  }
}

.tnhero__button > *{
  position:relative;
  z-index:1;
}

.tnhero__desktop{
  transform:translateZ(0);
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}

.tnhero__tablet,
.tnhero__phone{
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}

@media (hover:hover) and (pointer:fine){
  .tnhero__panel--website:hover .tnhero__desktop{
    transform:translateY(-3px);
  }
  .tnhero__panel--website:hover .tnhero__tablet{
    transform:translate(3px,-4px);
  }
  .tnhero__panel--website:hover .tnhero__phone{
    transform:translate(-2px,-6px);
  }
}

/* Refined reveal order */
.tnhero-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .72s cubic-bezier(.2,.8,.2,1),
    transform .72s cubic-bezier(.2,.8,.2,1);
}
.tnhero__panel.tnhero-reveal:nth-child(2){
  transition-delay:.11s;
}
.tnhero-reveal.is-visible{
  opacity:1;
  transform:none;
}

/* Desktop balance */
@media (min-width:1200px){
  .tnhero__split{
    grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);
  }
  .tnhero__panel--website,
  .tnhero__panel--series{
    min-height:650px;
  }
}

/* Tablet */
@media (min-width:768px) and (max-width:1199px){
  .tnhero__brandmark{
    top:90px;
    right:-3%;
    font-size:clamp(11rem,31vw,18rem);
  }
  .tnhero__panel--website,
  .tnhero__panel--series{
    min-height:auto;
  }
}

/* Smartphone */
@media (max-width:767px){
  .tnhero__brandmark{
    right:-12%;
    top:118px;
    font-size:clamp(9rem,49vw,14rem);
  }
  .tnhero__message::after{
    margin-top:30px;
  }
  .tnhero__quality-badges{
    gap:6px;
    margin-top:14px;
  }
  .tnhero__quality-badges span{
    min-height:26px;
    padding:0 9px;
    font-size:.52rem;
  }
  .tnhero__panel{
    transition:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .tnhero__panel,
  .tnhero__product,
  .tnhero__button,
  .tnhero__desktop,
  .tnhero__tablet,
  .tnhero__phone,
  .tnhero-reveal{
    transition:none !important;
  }
  .tnhero__product::after,
  .tnhero__button::before{
    display:none;
  }
}


/* =========================================================
   T&N Office Hero v2.2 — Mobile animation reliability
   ========================================================= */

/* Keep content visible without JavaScript. */
.tnhero__message,
.tnhero__panel{
  opacity:1;
  transform:none;
}

/* Apply hidden start state only after JavaScript is confirmed active. */
.tnhero--js .tnhero__message,
.tnhero--js .tnhero__panel{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .72s cubic-bezier(.2,.8,.2,1),
    transform .72s cubic-bezier(.2,.8,.2,1);
}

.tnhero--js .tnhero__panel{
  transform:translateY(30px) scale(.988);
}

.tnhero--js .tnhero__message.is-visible,
.tnhero--js .tnhero__panel.is-visible{
  opacity:1;
  transform:none;
}

@media (max-width:767px){
  .tnhero--js .tnhero__message{
    transform:translateY(18px);
    transition-duration:.62s;
  }

  .tnhero--js .tnhero__panel{
    transform:translateY(24px) scale(.992);
    transition-duration:.68s;
  }

  .tnhero--js .tnhero__panel:nth-child(2){
    transition-delay:.04s;
  }
}

@media (prefers-reduced-motion:reduce){
  .tnhero--js .tnhero__message,
  .tnhero--js .tnhero__panel{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* =========================================================
   TNOW-001 Hero v2.3 — Release Candidate polish
   ========================================================= */

/* Header balance: make navigation quieter so the Hero leads. */
@media (min-width:1024px){
  .site-nav a{
    font-size:.82rem;
    letter-spacing:.035em;
  }
  .site-nav{
    gap:22px;
  }
}

/* Wider, calmer desktop composition. */
@media (min-width:1280px){
  .tnhero .container{
    width:min(1240px,calc(100% - 64px));
  }
  .tnhero__message{
    max-width:1100px;
  }
  .tnhero__title{
    max-width:1080px;
  }
}

@media (min-width:1600px){
  .tnhero .container{
    width:min(1320px,calc(100% - 96px));
  }
}

/* Background refinement. */
.tnhero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 86% 16%,rgba(226,191,125,.08),transparent 22%),
    linear-gradient(118deg,transparent 0 68%,rgba(213,178,111,.035) 68.2% 68.35%,transparent 68.55%),
    linear-gradient(62deg,transparent 0 78%,rgba(213,178,111,.028) 78.2% 78.35%,transparent 78.55%);
}

.tnhero__panel{
  border-color:rgba(226,205,165,.26);
}

.tnhero__panel-head{
  padding-bottom:4px;
}

/* Website mockup enhancement. */
.tnhero__screen-ui{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:22px;
}

.tnhero__screen-ui span{
  display:block;
  min-height:34px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.015));
}

.tnhero__desktop::after{
  content:"";
  position:absolute;
  right:8px;
  top:46px;
  width:3px;
  height:72px;
  border-radius:999px;
  background:linear-gradient(#c8a568 0 38%,rgba(255,255,255,.10) 38% 100%);
  opacity:.7;
}

/* Product progress accent. */
.tnhero__product b{
  display:grid;
  justify-items:end;
  gap:5px;
  min-width:44px;
}

.tnhero__product b i{
  display:block;
  width:34px;
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.10);
}

.tnhero__product b i::after{
  content:"";
  display:block;
  width:var(--progress,20%);
  height:100%;
  background:linear-gradient(90deg,#b88c49,#e0c18a);
}

/* Delicate panel separator glow. */
.tnhero__split{
  position:relative;
}

@media (min-width:1200px){
  .tnhero__split::before{
    content:"";
    position:absolute;
    left:50%;
    top:9%;
    bottom:9%;
    width:1px;
    transform:translateX(-50%);
    background:linear-gradient(transparent,rgba(224,193,138,.11),transparent);
    pointer-events:none;
  }
}

/* Mobile remains clean and stable. */
@media (max-width:767px){
  .tnhero::after{
    background:radial-gradient(circle at 88% 12%,rgba(226,191,125,.06),transparent 28%);
  }
  .tnhero__screen-ui{
    gap:5px;
    margin-top:14px;
  }
  .tnhero__screen-ui span{
    min-height:22px;
  }
  .tnhero__desktop::after{
    top:38px;
    height:48px;
  }
}

/* RC stability: no excessive animation. */
@media (prefers-reduced-motion:reduce){
  .tnhero__panel,
  .tnhero__product,
  .tnhero__button{
    transition:none !important;
  }
}