/* =====================================================================
   AKAKESH TECH: promotional site
   Concept: a horizon line. Plan above it (teal), time below it (amber).
   The page's accent journeys teal -> amber as you descend.
   ===================================================================== */

:root{
  /* base */
  --void:      #070B11;   /* deep blue-green near-black */
  --void-2:    #0A111A;
  --surface:   #0E1825;   /* lifted card */
  --surface-2: #122133;
  --hairline:  rgba(146,178,196,.14);
  --hairline-2:rgba(146,178,196,.08);

  /* brand: two products */
  --teal:      #0E8E80;   /* Horizon: plan */
  --teal-lit:  #2DD4BF;
  --amber:     #F5A524;   /* TimeTrack: time */
  --amber-lit: #FBBF24;

  /* text */
  --paper:     #EAF2F2;
  --mist:      #93A6B4;
  --mist-dim:  #5E7184;

  /* type */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* rhythm */
  --wrap: 1180px;
  --r: 16px;
  --r-lg: 22px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--body);
  background:var(--void);
  color:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

a{ color:inherit; text-decoration:none; }
strong{ font-weight:600; }
em{ font-style:normal; }

::selection{ background:var(--teal-lit); color:#04110F; }

/* ───────── ambient background ───────── */
.bg-grid,.bg-aurora,.bg-noise{ position:fixed; inset:0; z-index:-3; pointer-events:none; }
.bg-grid{
  background-image:
    linear-gradient(var(--hairline-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline-2) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  opacity:.55;
}
.bg-aurora{
  z-index:-2;
  background:
    radial-gradient(50% 40% at 18% 8%,  rgba(14,142,128,.28), transparent 70%),
    radial-gradient(48% 42% at 85% 22%, rgba(45,212,191,.14), transparent 72%),
    radial-gradient(55% 45% at 80% 95%, rgba(245,165,36,.20), transparent 72%),
    radial-gradient(45% 40% at 12% 88%, rgba(245,165,36,.10), transparent 72%);
  filter:blur(6px);
}
.bg-noise{
  z-index:-1; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

/* ───────── shared bits ───────── */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  color:var(--mist);
  display:inline-flex; align-items:center; gap:10px;
  text-transform:uppercase;
}
.eyebrow--center{ display:flex; justify-content:center; }
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--teal-lit);
  box-shadow:0 0 12px var(--teal-lit);
}
.t-teal{ color:var(--teal-lit); }
.t-amber{ color:var(--amber-lit); }
.t-grad{
  background:linear-gradient(100deg, var(--teal-lit), var(--amber-lit));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.arr{ display:inline-block; transition:transform .25s var(--ease); }

/* buttons */
.btn{
  --bg:var(--teal); --fg:#04110F;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:600; font-size:15px;
  padding:13px 22px; border-radius:999px;
  background:var(--bg); color:var(--fg);
  border:1px solid transparent;
  cursor:pointer; transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .2s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:hover .arr{ transform:translate(2px,-2px); }
.btn:focus-visible{ outline:2px solid var(--paper); outline-offset:3px; }
.btn--teal{ --bg:var(--teal-lit); box-shadow:0 8px 30px rgba(45,212,191,.28); }
.btn--teal:hover{ box-shadow:0 12px 40px rgba(45,212,191,.42); }
.btn--amber{ --bg:var(--amber-lit); --fg:#1A0F00; box-shadow:0 8px 30px rgba(245,165,36,.28); }
.btn--amber:hover{ box-shadow:0 12px 40px rgba(245,165,36,.42); }
.btn--ghost{ background:rgba(255,255,255,.05); color:var(--paper); border-color:var(--hairline); }
.btn--ghost:hover{ background:rgba(255,255,255,.09); }
.btn--line{ background:transparent; border-color:var(--hairline); color:var(--paper); }
.btn--line-teal:hover{ border-color:var(--teal-lit); color:var(--teal-lit); }
.btn--line-amber:hover{ border-color:var(--amber-lit); color:var(--amber-lit); }
.btn--sm{ padding:9px 16px; font-size:13.5px; }
.btn--lg{ padding:16px 28px; font-size:16.5px; }

/* ════════════════════ NAV ════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:16px clamp(20px,4vw,40px);
  transition:background .3s, border-color .3s, padding .3s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(7,11,17,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--hairline);
  padding-top:12px; padding-bottom:12px;
}
.brand{ display:inline-flex; align-items:center; gap:11px; }
.brand__mark{ display:inline-grid; place-items:center; }
.brand__sun{ fill:var(--amber-lit); }
.brand__line{ stroke:var(--teal-lit); stroke-width:2.4; stroke-linecap:round; }
.brand__text{
  font-family:var(--display); font-weight:700; font-size:16px;
  letter-spacing:.06em; color:var(--paper);
}
.brand__tech{ color:var(--mist); margin-left:3px; }

.nav__links{ display:flex; gap:30px; margin-inline:auto; }
.nav__links a{
  font-size:14.5px; color:var(--mist); position:relative; padding:4px 0;
  transition:color .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:linear-gradient(90deg,var(--teal-lit),var(--amber-lit));
  transition:width .25s var(--ease);
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; }

.nav__toggle{
  display:none; flex-direction:column; gap:5px; width:38px; height:38px;
  align-items:center; justify-content:center; background:none; border:none; cursor:pointer;
}
.nav__toggle span{ width:20px; height:2px; background:var(--paper); border-radius:2px; transition:.25s var(--ease); }
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.mobile-sheet{
  position:fixed; inset:0 0 auto 0; top:0; z-index:45;
  padding:88px 24px 28px; display:flex; flex-direction:column; gap:4px;
  background:rgba(8,13,20,.96); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--hairline);
  transform:translateY(-110%); transition:transform .4s var(--ease);
}
.mobile-sheet.is-open{ transform:translateY(0); }
.mobile-sheet a{ font-family:var(--display); font-size:19px; padding:13px 4px; color:var(--paper); border-bottom:1px solid var(--hairline-2); }
.mobile-sheet__apps{ display:flex; gap:10px; margin-top:18px; }
.mobile-sheet__apps .btn{ flex:1; justify-content:center; }

/* ════════════════════ HERO ════════════════════ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:140px 24px 0; text-align:center; isolation:isolate;
}
.hero__inner{ max-width:880px; margin-inline:auto; position:relative; z-index:3; }

.hero__title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.5rem,7vw,5.1rem);
  line-height:1.02; letter-spacing:-.03em;
  margin:22px 0 26px;
}
.reveal-line{ display:block; overflow:hidden; }
.reveal-line > span{ display:block; }
.hero__title--accent{ color:transparent; background:linear-gradient(120deg,var(--teal-lit) 10%, var(--amber-lit) 90%); -webkit-background-clip:text; background-clip:text; }

.hero__sub{
  max-width:620px; margin:0 auto 34px;
  font-size:clamp(1.02rem,2vw,1.22rem); color:var(--mist);
}
.hero__sub strong{ font-weight:600; }

.hero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.hero__meta{
  margin-top:30px; display:flex; gap:14px; justify-content:center; align-items:center;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--mist-dim);
  text-transform:uppercase; flex-wrap:wrap;
}
.hero__meta i{ width:4px; height:4px; border-radius:50%; background:var(--mist-dim); }

/* the horizon signature */
.horizon-stage{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.hz-sky{
  position:absolute; inset:0 0 50% 0;
  background:radial-gradient(120% 90% at 50% 100%, rgba(14,142,128,.16), transparent 70%);
}
.hz-ground{
  position:absolute; inset:50% 0 0 0;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(245,165,36,.18), transparent 60%),
    linear-gradient(180deg, transparent, var(--void) 78%);
}
.hz-ground::after{
  content:""; position:absolute; inset:0; top:1px;
  background-image:linear-gradient(90deg, var(--hairline-2) 1px, transparent 1px),
                   linear-gradient(var(--hairline-2) 1px, transparent 1px);
  background-size:54px 54px;
  transform:perspective(420px) rotateX(62deg); transform-origin:top;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);
          mask-image:linear-gradient(180deg,#000,transparent 60%);
  opacity:.5;
}
.hz-line{
  position:absolute; left:0; right:0; top:50%; height:1px;
  background:linear-gradient(90deg, transparent, var(--teal-lit) 30%, var(--amber-lit) 70%, transparent);
  box-shadow:0 0 24px 2px rgba(45,212,191,.4), 0 0 60px 6px rgba(245,165,36,.18);
}
.hz-sun{
  position:absolute; left:50%; top:50%; width:300px; height:300px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(251,191,36,.9) 0%, rgba(245,165,36,.5) 22%, rgba(45,212,191,.18) 46%, transparent 62%);
  filter:blur(2px);
  animation:sunpulse 7s ease-in-out infinite;
}
.hz-sun__glow{
  position:absolute; left:50%; top:50%; width:560px; height:560px; transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,165,36,.16), transparent 60%);
}
@keyframes sunpulse{ 0%,100%{ opacity:.85; } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.04); } }

/* floating chips */
.float-chip{
  position:absolute; z-index:2;
  display:flex; align-items:center; gap:10px;
  padding:11px 15px; border-radius:14px;
  background:rgba(14,24,37,.82); backdrop-filter:blur(10px);
  border:1px solid var(--hairline);
  font-size:13.5px; box-shadow:0 18px 50px rgba(0,0,0,.45);
  animation:floaty 6s ease-in-out infinite;
}
.float-chip__label{ font-weight:500; white-space:nowrap; }
.float-chip--task{ left:8%; top:30%; }
.float-chip--task .float-chip__pri{ width:9px; height:9px; border-radius:3px; background:var(--teal-lit); box-shadow:0 0 10px var(--teal-lit); }
.float-chip--task .float-chip__tick{ color:var(--teal-lit); font-weight:700; }
.float-chip--timer{ right:7%; bottom:24%; animation-delay:-3s; }
.float-chip--timer .float-chip__time{ font-family:var(--mono); font-weight:500; color:var(--amber-lit); font-size:13px; }
.float-chip__pulse{ width:9px; height:9px; border-radius:50%; background:var(--amber-lit); box-shadow:0 0 0 0 rgba(245,165,36,.6); animation:ping 2s ease-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(245,165,36,.55);} 70%,100%{ box-shadow:0 0 0 9px rgba(245,165,36,0);} }

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.25em; color:var(--mist-dim); text-transform:uppercase;
}
.scroll-hint i{ width:1px; height:34px; background:linear-gradient(var(--mist-dim), transparent); animation:scrolldrop 2s ease-in-out infinite; }
@keyframes scrolldrop{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ════════════════════ THE GAP ════════════════════ */
.gap{ padding:clamp(90px,15vh,170px) 0; text-align:center; }
.gap__statement{
  max-width:880px; margin:26px auto 0;
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.5rem,4.2vw,2.9rem); line-height:1.22; letter-spacing:-.02em;
  color:var(--mist);
}
.gap__statement em{ color:var(--paper); }
.gap__statement .t-grad{ display:inline; }
.gap__hand{ margin-top:40px; display:inline-flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; color:var(--mist-dim); }
.gap__hand-arrow{ font-size:20px; animation:floaty 2.4s ease-in-out infinite; }

/* ════════════════════ PRODUCTS ════════════════════ */
.product{ padding:clamp(70px,11vh,130px) 0; position:relative; }
.product__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,84px); align-items:center;
}
.product__copy .eyebrow__dot{ background:var(--teal-lit); box-shadow:0 0 12px var(--teal-lit); }
.product--amber .product__copy .eyebrow__dot{ background:var(--amber-lit); box-shadow:0 0 12px var(--amber-lit); }

.product__name{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.4rem,5vw,3.6rem); letter-spacing:-.02em; margin:14px 0 16px;
}
.product--teal .product__name{ color:var(--teal-lit); }
.product--amber .product__name{ color:var(--amber-lit); }
.product__tag{ color:var(--mist); font-size:clamp(1rem,1.6vw,1.12rem); max-width:46ch; margin-bottom:30px; }

.feat{ list-style:none; display:flex; flex-direction:column; gap:18px; margin-bottom:32px; }
.feat li{ display:flex; gap:14px; align-items:flex-start; }
.feat__ic{
  flex:none; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; font-size:15px;
  background:rgba(45,212,191,.1); color:var(--teal-lit); border:1px solid rgba(45,212,191,.22);
}
.product--amber .feat__ic{ background:rgba(245,165,36,.1); color:var(--amber-lit); border-color:rgba(245,165,36,.22); }
.feat li div{ font-size:14.8px; color:var(--mist); padding-top:4px; }
.feat li b{ color:var(--paper); font-weight:600; }
.product__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ── mockup frames ── */
.mock-wrap{ position:relative; }
.mock{
  position:relative; z-index:2;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--surface), var(--void-2));
  border:1px solid var(--hairline);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  transition:transform .5s var(--ease);
}
.mock-wrap:hover .mock{ transform:translateY(-6px) rotateX(2deg); }
.mock__bar{
  display:flex; align-items:center; gap:7px;
  padding:12px 16px; border-bottom:1px solid var(--hairline-2);
  background:rgba(255,255,255,.02);
}
.mock__bar i{ width:10px; height:10px; border-radius:50%; background:#2A3a4a; }
.mock__bar i:nth-child(1){ background:#3a4a5a; }
.mock__bar span{ margin-left:8px; font-family:var(--mono); font-size:11px; color:var(--mist-dim); }
.mock__body{ padding:18px; }

.mock-glow{ position:absolute; inset:-12% -8%; z-index:1; border-radius:40px; filter:blur(50px); opacity:.5; }
.mock-glow--teal{ background:radial-gradient(circle at 50% 50%, rgba(45,212,191,.35), transparent 65%); }
.mock-glow--amber{ background:radial-gradient(circle at 50% 50%, rgba(245,165,36,.32), transparent 65%); }

/* Horizon mockup internals */
.hz-app__head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:16px; }
.hz-app__hi{ font-family:var(--display); font-weight:700; font-size:21px; }
.hz-app__date{ font-size:12.5px; color:var(--mist-dim); margin-top:2px; }
.hz-app__count{ font-family:var(--mono); font-size:11px; color:var(--teal-lit); background:rgba(45,212,191,.12); padding:5px 10px; border-radius:999px; }

.hz-app__spine{ background:rgba(255,255,255,.025); border:1px solid var(--hairline-2); border-radius:14px; padding:13px 14px 9px; margin-bottom:16px; }
.spine-label{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--mist-dim); }
.spine-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:8px; height:60px; margin-top:10px; }
.spine-day{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.spine-bar{
  width:100%; max-width:20px; border-radius:5px;
  height:var(--h);
  background:linear-gradient(180deg, var(--teal-lit), var(--teal));
  box-shadow:0 0 12px rgba(45,212,191,.3);
  transform-origin:bottom; animation:growbar 1s var(--ease) both;
}
.spine-bar--soft{ background:linear-gradient(180deg, #2a4a48, #1d3331); box-shadow:none; }
.spine-day span{ font-size:10px; color:var(--mist-dim); }
@keyframes growbar{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

.hz-app__list{ display:flex; flex-direction:column; gap:7px; }
.task{
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-radius:12px;
  background:rgba(255,255,255,.02); border:1px solid var(--hairline-2);
}
.task--overdue{ background:rgba(245,99,99,.06); border-color:rgba(245,99,99,.18); }
.task__check{ width:17px; height:17px; border-radius:6px; border:1.6px solid var(--mist-dim); flex:none; display:grid; place-items:center; font-size:10px; color:var(--void); }
.task__check--on{ background:var(--teal-lit); border-color:var(--teal-lit); }
.task__pri{ width:7px; height:18px; border-radius:3px; flex:none; }
.task__pri--high{ background:#F56363; }
.task__pri--med{ background:var(--amber-lit); }
.task__pri--low{ background:var(--teal-lit); }
.task__title{ font-size:13.5px; flex:1; }
.task--done .task__title{ color:var(--mist-dim); text-decoration:line-through; }
.task__tag{ font-family:var(--mono); font-size:9.5px; color:#F56363; background:rgba(245,99,99,.12); padding:3px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.05em; }
.task__time{ font-family:var(--mono); font-size:11px; color:var(--mist-dim); }
.hz-app__add{ margin-top:11px; display:flex; align-items:center; gap:8px; padding:11px 13px; border-radius:12px; border:1px dashed var(--hairline); color:var(--mist-dim); font-size:13px; }
.hz-app__add span{ color:var(--teal-lit); font-size:15px; }

/* TimeTrack mockup internals */
.tt-app__timerrow{ display:flex; align-items:center; justify-content:space-between; padding:14px 15px; border-radius:14px; background:rgba(245,165,36,.07); border:1px solid rgba(245,165,36,.2); margin-bottom:14px; }
.tt-timer{ display:flex; align-items:center; gap:12px; }
.tt-timer__dot{ width:10px; height:10px; border-radius:50%; background:var(--amber-lit); box-shadow:0 0 0 0 rgba(245,165,36,.6); animation:ping 2s ease-out infinite; }
.tt-timer__label{ font-size:11.5px; color:var(--mist); }
.tt-timer__clock{ font-family:var(--mono); font-weight:700; font-size:25px; letter-spacing:.04em; color:var(--amber-lit); margin-top:1px; }
.tt-timer__stop{ font-family:var(--display); font-weight:600; font-size:13px; padding:8px 16px; border-radius:999px; background:var(--amber-lit); color:#1A0F00; border:none; cursor:pointer; }

.tt-chips{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tt-chips span{ font-family:var(--mono); font-size:11px; padding:6px 11px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--hairline-2); color:var(--mist); }
.tt-chips__cat{ margin-left:auto; color:var(--mist) !important; }

.tt-app__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:16px; }
.tt-stat{ background:rgba(255,255,255,.025); border:1px solid var(--hairline-2); border-radius:12px; padding:11px 12px; }
.tt-stat__v{ font-family:var(--display); font-weight:700; font-size:20px; color:var(--paper); }
.tt-stat__k{ font-size:10.5px; color:var(--mist-dim); margin-top:2px; }

.tt-app__charts{ display:flex; align-items:center; gap:18px; padding:14px; border-radius:14px; background:rgba(255,255,255,.02); border:1px solid var(--hairline-2); margin-bottom:14px; }
.tt-donut{ position:relative; width:104px; height:104px; flex:none; }
.donut-svg{ width:100%; height:100%; transform:rotate(-90deg); }
.donut-ring{ fill:none; stroke:rgba(255,255,255,.05); stroke-width:4; }
.donut-seg{ fill:none; stroke-width:4; stroke-linecap:round; }
.tt-donut__c{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.tt-donut__c b{ font-family:var(--display); font-weight:700; font-size:18px; }
.tt-donut__c span{ font-size:9.5px; color:var(--mist-dim); }
.tt-legend{ list-style:none; display:flex; flex-direction:column; gap:8px; flex:1; }
.tt-legend li{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--mist); }
.tt-legend li b{ margin-left:auto; color:var(--paper); font-family:var(--mono); font-size:11.5px; font-weight:500; }
.dot{ width:9px; height:9px; border-radius:3px; flex:none; }

.tt-bars__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:7px; height:62px; }
.tt-bar{ flex:1; border-radius:5px 5px 2px 2px; height:var(--h); background:linear-gradient(180deg, rgba(245,165,36,.55), rgba(245,165,36,.2)); transform-origin:bottom; animation:growbar 1s var(--ease) both; }
.tt-bar--hi{ background:linear-gradient(180deg, var(--amber-lit), var(--amber)); box-shadow:0 0 14px rgba(245,165,36,.4); }
.tt-bars__x{ display:flex; justify-content:space-between; margin-top:8px; font-family:var(--mono); font-size:10px; color:var(--mist-dim); }

/* ════════════════════ THE LOOP ════════════════════ */
.loop{ padding:clamp(80px,13vh,150px) 0; text-align:center; }
.loop__title{ font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,4.5vw,3rem); letter-spacing:-.02em; margin:18px 0 18px; }
.loop__lead{ max-width:640px; margin:0 auto; color:var(--mist); font-size:clamp(1rem,1.7vw,1.13rem); }

.cycle{ display:grid; grid-template-columns:340px 1fr; gap:clamp(30px,5vw,70px); align-items:center; margin-top:60px; text-align:left; }
.cycle__ring{ position:relative; width:320px; height:320px; justify-self:center; }
.cycle-svg{ width:100%; height:100%; transform:rotate(-90deg); }
.cycle-track{ fill:none; stroke:rgba(255,255,255,.06); stroke-width:2; }
.cycle-prog{ fill:none; stroke:url(#loopGrad); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:754; stroke-dashoffset:754; }
.cycle.in-view .cycle-prog{ animation:draw 2.2s var(--ease) .2s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.cycle-node{ filter:drop-shadow(0 0 6px currentColor); }
.cycle-node--teal{ fill:var(--teal-lit); color:var(--teal-lit); }
.cycle-node--amber{ fill:var(--amber-lit); color:var(--amber-lit); }
.cycle__center{ position:absolute; inset:0; display:grid; place-items:center; }
.cycle__center-line{ width:120px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--teal-lit),var(--amber-lit)); box-shadow:0 0 20px rgba(45,212,191,.4); }

.cycle__steps{ list-style:none; display:flex; flex-direction:column; gap:14px; counter-reset:s; }
.cycle-step{ position:relative; padding:16px 18px 16px 20px; border-radius:14px; background:rgba(255,255,255,.025); border:1px solid var(--hairline-2); border-left:2px solid var(--hairline); }
.cycle-step--teal{ border-left-color:var(--teal-lit); }
.cycle-step--amber{ border-left-color:var(--amber-lit); }
.cycle-step__k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--mist-dim); }
.cycle-step b{ display:block; font-family:var(--display); font-size:17px; margin:3px 0 5px; }
.cycle-step--teal b{ color:var(--teal-lit); }
.cycle-step--amber b{ color:var(--amber-lit); }
.cycle-step__d{ font-size:13.5px; color:var(--mist); }

/* ════════════════════ SPECS ════════════════════ */
.specs{ padding:clamp(70px,11vh,130px) 0; text-align:center; }
.specs__title{ font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,4.5vw,3rem); letter-spacing:-.02em; margin:16px 0 50px; }
.specs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; text-align:left; }
.spec{ padding:24px; border-radius:var(--r); background:linear-gradient(180deg, rgba(255,255,255,.03), transparent); border:1px solid var(--hairline-2); transition:border-color .25s, transform .25s var(--ease); }
.spec:hover{ transform:translateY(-4px); border-color:var(--hairline); }
.spec__ic{ display:inline-grid; place-items:center; width:42px; height:42px; border-radius:12px; font-size:19px; background:linear-gradient(135deg, rgba(45,212,191,.14), rgba(245,165,36,.14)); color:var(--paper); margin-bottom:14px; }
.spec h3{ font-family:var(--display); font-weight:600; font-size:17px; margin-bottom:7px; }
.spec p{ font-size:13.8px; color:var(--mist); }

.stack{ margin-top:46px; padding:24px; border-radius:var(--r); border:1px solid var(--hairline-2); background:rgba(255,255,255,.015); }
.stack__label{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--mist-dim); }
.stack__row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:16px; }
.stack__row span{ font-family:var(--mono); font-size:12.5px; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--hairline-2); color:var(--mist); transition:.2s; }
.stack__row span:hover{ color:var(--paper); border-color:var(--hairline); }

/* ════════════════════ FINAL ════════════════════ */
.final{ padding:clamp(90px,16vh,180px) 0; position:relative; text-align:center; }
.final__inner{ position:relative; }
.final__horizon{ position:absolute; left:50%; top:-30px; transform:translateX(-50%); width:min(680px,90%); height:1px; background:linear-gradient(90deg,transparent,var(--teal-lit),var(--amber-lit),transparent); box-shadow:0 0 40px 4px rgba(245,165,36,.25); }
.final__title{ font-family:var(--display); font-weight:700; font-size:clamp(2.2rem,6vw,4rem); line-height:1.05; letter-spacing:-.03em; }
.final__sub{ margin:22px auto 36px; color:var(--mist); font-size:clamp(1rem,1.8vw,1.18rem); }
.final__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ════════════════════ FOOTER ════════════════════ */
.foot{ border-top:1px solid var(--hairline); padding:56px 0 30px; background:rgba(7,11,17,.5); }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; padding-bottom:40px; border-bottom:1px solid var(--hairline-2); }
.foot__brand{ display:inline-flex; align-items:center; gap:10px; height:fit-content; }
.foot__col{ display:flex; flex-direction:column; gap:11px; }
.foot__h{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--mist-dim); text-transform:uppercase; margin-bottom:3px; }
.foot__col a{ font-size:14px; color:var(--mist); transition:color .2s; width:fit-content; }
.foot__col a:hover{ color:var(--paper); }
.foot__base{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:13px; color:var(--mist-dim); flex-wrap:wrap; gap:10px; }
.foot__tagline{ font-family:var(--mono); letter-spacing:.04em; }

/* ════════════════════ reveal animation ════════════════════ */
[data-rv]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-rv].is-in{ opacity:1; transform:none; }

/* hero title: masked slide-up, driven by hero load (not scroll IO) */
.reveal-line > span{ display:block; transform:translateY(115%); opacity:0; transition:transform .9s var(--ease), opacity .9s var(--ease); }
.hero.is-ready .reveal-line > span{ transform:none; opacity:1; }
.hero .reveal-line:nth-child(2) > span{ transition-delay:.09s; }
.hero .reveal-line:nth-child(3) > span{ transition-delay:.18s; }

/* ════════════════════ RESPONSIVE ════════════════════ */
@media (max-width:920px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
  .product__grid{ grid-template-columns:1fr; gap:46px; }
  .product__grid--rev .mock-wrap{ order:2; }
  .cycle{ grid-template-columns:1fr; }
  .cycle__ring{ width:260px; height:260px; }
  .specs__grid{ grid-template-columns:1fr 1fr; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:28px; }
}
/* on narrow viewports the floating chips collide with the hero copy/CTAs:
   hide them and let the sun + horizon line carry the signature instead */
@media (max-width:760px){
  .float-chip{ display:none; }
}
@media (max-width:560px){
  .wrap{ padding-inline:20px; }
  .hero{ padding-top:120px; }
  .hz-sun{ width:230px; height:230px; }
  .specs__grid{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; }
  .hero__meta{ gap:10px; }
  .tt-app__charts{ flex-direction:column; align-items:stretch; }
  .tt-donut{ align-self:center; }
}

/* ════════════════════ reduced motion ════════════════════ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  [data-rv]{ opacity:1; transform:none; }
  .reveal-line > span{ opacity:1; transform:none; }
  .cycle-prog{ stroke-dashoffset:0; }
  .spine-bar,.tt-bar{ transform:none; }
}