@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

body:has(.trt-home){overflow:hidden}

.trt-home{
  position:fixed;inset:0;z-index:99999;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;align-items:center;justify-content:safe center;
  background:#0a0d18;color:#eef1f8;text-align:center;
  padding:clamp(20px,5vh,56px) clamp(18px,5vw,32px);
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased
}
body.admin-bar .trt-home{top:32px}
.trt-home::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 52% at 50% 26%, rgba(99,102,241,.38), transparent 70%),
    radial-gradient(42% 42% at 82% 88%, rgba(52,211,153,.15), transparent 72%),
    radial-gradient(38% 38% at 12% 82%, rgba(129,140,248,.12), transparent 70%)
}
.trt-home *{box-sizing:border-box}

.th-inner{position:relative;max-width:660px;width:100%;flex:0 0 auto;animation:thrise .7s ease both}
@keyframes thrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.th-badge{
  display:inline-block;font-size:clamp(12px,3.4vw,14px);letter-spacing:.04em;color:#aab3ff;font-weight:600;
  margin-bottom:clamp(14px,3vh,22px);border:1px solid rgba(165,176,255,.26);border-radius:999px;
  padding:6px 15px;background:rgba(99,102,241,.09);max-width:100%
}
.th-title{
  font-family:"Space Grotesk",sans-serif;font-size:clamp(40px,11vw,88px);font-weight:700;margin:0;
  letter-spacing:-.035em;line-height:1;
  background:linear-gradient(180deg,#ffffff,#c7cdfb);-webkit-background-clip:text;background-clip:text;color:transparent
}
.th-tag{font-size:clamp(16px,3.6vw,23px);color:#cbd0ea;margin:clamp(12px,2vh,16px) 0 clamp(22px,4vh,38px);font-weight:500}

.th-cadence{display:flex;gap:clamp(4px,1.4vw,7px);justify-content:center;margin:0 auto clamp(20px,3.5vh,32px);width:100%;max-width:440px}
.th-seg{flex:1;height:clamp(22px,4.2vh,36px);border-radius:6px;background:rgba(255,255,255,.07);animation:thfill 3.6s ease-in-out infinite}
@keyframes thfill{
  0%{background:rgba(255,255,255,.07);box-shadow:none}
  12%,78%{background:linear-gradient(180deg,#4ade80,#22c55e);box-shadow:0 0 18px rgba(52,211,153,.55)}
  100%{background:rgba(255,255,255,.07);box-shadow:none}
}

.th-sub{font-size:clamp(14px,3.4vw,15.5px);color:#9aa3c6;line-height:1.6;margin:0 auto clamp(24px,4vh,38px);max-width:480px}

.th-cta{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#fff;font-weight:700;
  font-size:clamp(15px,3.6vw,16px);padding:14px clamp(24px,6vw,32px);border-radius:14px;
  background:linear-gradient(180deg,#6366f1,#4f46e5);box-shadow:0 12px 32px rgba(79,70,229,.45);
  transition:transform .15s ease,box-shadow .15s ease
}
.th-cta:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(79,70,229,.6)}
.th-foot{margin-top:clamp(22px,4vh,36px);font-size:12.5px;color:#5c6590;letter-spacing:.04em}

@media (max-height:560px){
  .th-cadence{max-width:360px}
  .th-sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  .th-seg,.th-inner{animation:none}
  .th-seg{background:linear-gradient(180deg,#4ade80,#22c55e)}
}