:root {
    --tc-white: rgba(255,255,255,0.96);
    --tc-soft:  rgba(255,255,255,0.72);
    --tc-muted: rgba(255,255,255,0.42);
    --tc-faint: rgba(255,255,255,0.16);
    --tc-blue:  #4b8cff;
    --tc-ease:  cubic-bezier(.2,.8,.2,1);
  }

  html {
    margin: 0; padding: 0;
    background: #040507;
    scroll-behavior: auto;
  }

  body {
    margin: 0; padding: 0;
    background: #040507;
    overflow-x: hidden;
  }

  body.tcLocked { overflow: hidden; height: 100vh; }

  #tcExperience {
    position: relative;
    width: 100%;
    min-height: 100vh;
    color: #fff;
    background: #040507;
    isolation: isolate;
    overflow-x: clip;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
                 "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif;
  }

  #tcCanvas {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100vw;
    height: 100svh;
    background:
      radial-gradient(circle at 50% 0%,  rgba(60,90,160,0.22), transparent 42%),
      radial-gradient(circle at 50% 70%, rgba(30,40,80,0.14),  transparent 38%),
      linear-gradient(180deg, #0a0e18 0%, #030406 100%);
  }

  #tcExperience::before,
  #tcExperience::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
  }

  #tcExperience::before {
    z-index: 2;
    background:
      radial-gradient(circle at 50% 42%, rgba(92,138,255,0.05), transparent 24%),
      linear-gradient(90deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.04) 44%, rgba(0,0,0,0.26) 100%);
  }

  #tcExperience::after {
    z-index: 3;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 28%, rgba(0,0,0,0.44) 100%),
      radial-gradient(circle at 50% 54%, transparent 34%, rgba(0,0,0,0.18) 100%);
  }

  .tcIntro {
    position: fixed; inset: 0; z-index: 80;
    min-height: 100svh;
    background: rgba(4,5,7,0.56);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: opacity 0.75s var(--tc-ease), visibility 0.75s var(--tc-ease);
  }
  .tcIntro.hide { opacity: 0; visibility: hidden; pointer-events: none; }

  .tcLoaderCircle {
    position: fixed;
    left: clamp(24px,4vw,58px);
    bottom: clamp(24px,4.5vh,54px);
    width: 82px; height: 82px;
    opacity: 0.95;
    filter: drop-shadow(0 0 18px rgba(255,122,0,0.18));
  }
  .tcLoaderSvg {
    width: 82px; height: 82px;
    display: block;
    transform: rotate(-90deg);
  }
  .tcLoaderTrack   { fill:none; stroke:rgba(255,255,255,0.10); stroke-width:4; }
  .tcLoaderProgress{
    fill:none; stroke:url(#tcLoaderGradient); stroke-width:5;
    stroke-linecap:round; stroke-dasharray:289.03; stroke-dashoffset:289.03;
    transition:stroke-dashoffset 0.22s ease;
  }

  .tcBrand {
    position: fixed; z-index: 35;
    left: clamp(28px,4.4vw,78px);
    top:  clamp(26px,4.6vh,58px);
    font-size: clamp(14px,1.25vw,23px);
    line-height: 1; font-weight: 700;
    letter-spacing: 0.38em;
    color: var(--tc-white);
    white-space: nowrap;
    text-shadow: 0 0 28px rgba(255,255,255,0.10);
    opacity: 0; transform: translateY(-8px);
    transition: opacity 0.65s var(--tc-ease), transform 0.65s var(--tc-ease);
  }
  .tcBrand.show { opacity:1; transform:translateY(0); }

  .tcMenu {
    position: fixed; z-index: 34;
    left: 50%;
    top: clamp(24px,4.25vh,54px);
    width: min(740px, calc(100vw - 56px));
    display: grid;
    grid-template-columns: repeat(5,1fr);
    align-items: start;
    transform: translateX(-50%) translateY(-10px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.65s var(--tc-ease), transform 0.65s var(--tc-ease);
  }
  .tcMenu.show { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }

  .tcMenuTrack,
  .tcMenuProgress {
    position:absolute; left:10%; right:10%; top:5px;
    height:1px; border-radius:999px;
  }
  .tcMenuTrack    { background:rgba(255,255,255,0.18); }
  .tcMenuProgress {
    right:auto; width:0;
    background:linear-gradient(90deg,rgba(255,255,255,.50),rgba(255,255,255,.98));
    box-shadow:0 0 18px rgba(255,255,255,0.18),0 0 36px rgba(75,140,255,0.20);
  }

  .tcMenu a {
    position:relative; display:grid; justify-items:center; gap:14px;
    text-decoration:none;
    color:rgba(255,255,255,0.40);
    font-size:clamp(8px,0.62vw,11px); font-weight:600;
    line-height:1; letter-spacing:0.18em; text-transform:uppercase;
    opacity:.68;
    transition:color .28s ease,opacity .28s ease,transform .28s ease;
  }
  .tcMenu a::before {
    content:""; width:10px; height:10px; border-radius:50%;
    background:rgba(255,255,255,0.44);
    transform:scale(0.72);
    transition:transform .28s ease,background .28s ease,box-shadow .28s ease;
  }
  .tcMenu a.seen   { color:rgba(255,255,255,0.60); opacity:.84; }
  .tcMenu a.active { color:rgba(255,255,255,0.98); opacity:1; }
  .tcMenu a.active::before {
    background:#fff; transform:scale(1.28);
    box-shadow:0 0 0 9px rgba(255,255,255,0.08),
               0 0 28px rgba(75,140,255,0.44),
               0 0 60px rgba(255,255,255,0.16);
  }

  .tcCopy {
    position:fixed; z-index:30;
    left:clamp(40px,5vw,92px); top:31vh;
    width:clamp(310px,28vw,520px);
    background:transparent; pointer-events:auto;
    opacity:0; transform:translate3d(-16px,14px,0);
    transition:
      opacity .62s var(--tc-ease), transform .62s var(--tc-ease),
      left .75s var(--tc-ease), right .75s var(--tc-ease),
      top .75s var(--tc-ease), bottom .75s var(--tc-ease),
      width .75s var(--tc-ease);
  }
  .tcCopy.show { opacity:1; transform:translate3d(0,0,0); }

  .tcKicker {
    position:relative; margin-bottom:clamp(20px,2vw,30px);
    padding-left:74px;
    color:rgba(255,255,255,0.62);
    font-size:clamp(10px,.78vw,12px); font-weight:600;
    line-height:1.2; letter-spacing:0.18em; text-transform:uppercase;
  }
  .tcKicker::before {
    content:""; position:absolute; left:0; top:50%;
    width:54px; height:1px;
    background:linear-gradient(90deg,rgba(75,140,255,.96),rgba(255,255,255,.38));
    box-shadow:0 0 18px rgba(75,140,255,.28);
  }

  .tcCopy h1 {
    margin:0; color:rgba(255,255,255,0.98);
    font-size:clamp(52px,5vw,92px); font-weight:800;
    letter-spacing:-0.07em; line-height:0.92; text-wrap:balance;
    text-shadow:0 18px 70px rgba(0,0,0,0.44),0 0 24px rgba(255,255,255,0.06);
  }

  .tcCopy p {
    max-width:430px; margin:clamp(24px,2.6vw,38px) 0 0;
    color:rgba(255,255,255,0.76);
    font-size:clamp(14px,1vw,18px); font-weight:400;
    line-height:1.72; letter-spacing:0.005em;
    text-shadow:0 10px 30px rgba(0,0,0,0.40);
  }

  .tcButton {
    position:relative; margin-top:clamp(28px,2.8vw,44px);
    display:inline-flex; align-items:center; gap:18px;
    padding:0 0 9px; border:0;
    border-bottom:1px solid rgba(255,255,255,0.36);
    background:transparent; color:rgba(255,255,255,0.94);
    cursor:pointer; font:inherit; font-size:13px; font-weight:700;
    line-height:1; letter-spacing:0.18em; text-transform:uppercase;
    transition:color .28s ease,border-color .28s ease,transform .28s ease;
  }
  .tcButton:hover { color:#fff; border-color:var(--tc-blue); transform:translateX(2px); }
  .tcButton span  { font-size:22px; line-height:0; font-weight:300; }

  /* vh first as a fallback for older browsers, svh second to override it where
     supported. This stops the page height from jumping when a mobile browser's
     address bar shows/hides mid-scroll, which used to make the car judder. */
  .tcStory { position:relative; z-index:5; height:500vh; height:500svh; }
  .tcStep  { height:100vh; height:100svh; }

  @media (min-width:1181px){
    .tcCopy[data-section="0"] { left:clamp(42px,5vw,92px);   right:auto;              top:34vh; width:clamp(340px,30vw,560px); }
    .tcCopy[data-section="1"] { left:auto; right:clamp(46px,5vw,94px);                top:28vh; width:clamp(330px,27vw,500px); }
    .tcCopy[data-section="2"] { left:clamp(42px,4.4vw,86px); right:auto;             top:28vh; width:clamp(320px,26vw,480px); }
    .tcCopy[data-section="3"] { left:auto; right:clamp(44px,5vw,98px);                top:36vh; width:clamp(330px,27vw,500px); }
    .tcCopy[data-section="4"] { left:clamp(42px,4.8vw,92px); right:auto;             top:30vh; width:clamp(340px,28vw,520px); }
  }

  @media (min-width:901px) and (max-width:1180px){
    .tcBrand { left:7vw; top:5.8vh; font-size:17px; }
    .tcMenu  { top:11.5vh; width:min(650px,calc(100vw - 110px)); }
    .tcCopy  { left:8vw; right:8vw; top:auto; bottom:7vh; width:auto; transform:translate3d(0,18px,0); }
    .tcCopy.show { transform:translate3d(0,0,0); }
    .tcCopy[data-section="0"] { left:8vw;  right:10vw; bottom:7vh; }
    .tcCopy[data-section="1"] { left:10vw; right:7vw;  bottom:6vh; }
    .tcCopy[data-section="2"] { left:7vw;  right:12vw; bottom:7vh; }
    .tcCopy[data-section="3"] { left:11vw; right:7vw;  bottom:6vh; }
    .tcCopy[data-section="4"] { left:8vw;  right:9vw;  bottom:7vh; }
    .tcCopy h1 { font-size:clamp(58px,8.2vw,86px); }
    .tcCopy p  { max-width:520px; font-size:17px; }
  }

  @media (max-width:900px){
    .tcBrand { left:25px; top:max(24px,env(safe-area-inset-top)); font-size:15px; letter-spacing:.34em; }
    .tcMenu  { top:max(76px,calc(env(safe-area-inset-top) + 58px)); width:calc(100vw - 30px); }
    .tcMenu a { gap:11px; font-size:clamp(6px,1.75vw,8px); letter-spacing:.08em; }
    .tcMenu a::before { width:8px; height:8px; }
    .tcCopy { left:22px; right:22px; top:auto; bottom:max(28px,env(safe-area-inset-bottom)); width:auto; transform:translate3d(0,18px,0); }
    .tcCopy.show { transform:translate3d(0,0,0); }
    .tcCopy[data-section="0"] { bottom:max(28px,env(safe-area-inset-bottom)); }
    .tcCopy[data-section="1"] { bottom:max(44px,calc(env(safe-area-inset-bottom) + 14px)); }
    .tcCopy[data-section="2"] { bottom:max(30px,env(safe-area-inset-bottom)); }
    .tcCopy[data-section="3"] { bottom:max(48px,calc(env(safe-area-inset-bottom) + 18px)); }
    .tcCopy[data-section="4"] { bottom:max(34px,calc(env(safe-area-inset-bottom) + 8px)); }
    .tcKicker { margin-bottom:18px; padding-left:54px; font-size:9px; letter-spacing:.14em; }
    .tcKicker::before { width:40px; }
    .tcCopy h1 { font-size:clamp(42px,13vw,62px); letter-spacing:-0.065em; }
    .tcCopy p  { max-width:88%; margin-top:20px; font-size:13.5px; line-height:1.65; }
    .tcButton  { margin-top:24px; font-size:11px; letter-spacing:.15em; }
    .tcLoaderCircle { width:74px; height:74px; left:18px; bottom:18px; }
    .tcLoaderSvg    { width:74px; height:74px; }
  }

  @media (max-width:420px){
    .tcBrand { left:20px; font-size:14px; letter-spacing:.30em; }
    .tcMenu  { width:calc(100vw - 18px); top:max(68px,calc(env(safe-area-inset-top) + 52px)); }
    .tcMenu a { font-size:6.2px; letter-spacing:.055em; }
    .tcCopy  { left:16px; right:16px; }
    .tcCopy p { max-width:100%; }
  }