/* Echo — coming soon
   Self-hosted type, no external requests. */

@font-face{
  font-family:"Inter Tight";
  src:url("fonts/inter-tight-latin.woff2") format("woff2");
  font-weight:300 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-latin.woff2") format("woff2");
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --ink:#060607;
  --text:#F2F3F5;
  --text-2:#A9ADB5;
  --text-3:#83878F;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.06);
  --blue:#1D9BF0;
  --blue-soft:rgba(29,155,240,.14);

  --display:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --gut:clamp(20px,5vw,48px);
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  color-scheme:dark;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{color:inherit}
img,svg{display:block;max-width:100%}

::selection{background:rgba(29,155,240,.32);color:#fff}

:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:max(var(--gut),env(safe-area-inset-left));
  padding-inline-end:max(var(--gut),env(safe-area-inset-right));
}

/* ---------- HERO ---------- */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:clamp(72px,12vh,140px) clamp(56px,9vh,96px);
  overflow:hidden;
  isolation:isolate;
}

.hero__glow{
  position:absolute;
  z-index:-1;
  top:-28vmax;
  left:50%;
  width:min(150vmax,1900px);
  aspect-ratio:1;
  transform:translateX(-50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(29,155,240,.22), rgba(29,155,240,.07) 34%, transparent 62%),
    radial-gradient(circle at 50% 50%, rgba(29,155,240,.10), transparent 30%);
  pointer-events:none;
}

/* faint concentric broadcast rings, drawn from the mark's geometry */
.hero__glow::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(29,155,240,.10) 0 1px,
      transparent 1px 168px);
  mask-image:radial-gradient(circle at 50% 50%, #000 8%, rgba(0,0,0,.55) 32%, transparent 66%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 8%, rgba(0,0,0,.55) 32%, transparent 66%);
  opacity:.75;
}

.hero__inner{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:max(var(--gut),env(safe-area-inset-left));
  padding-inline-end:max(var(--gut),env(safe-area-inset-right));
}

.hero__rule{
  position:absolute;
  inset-inline:0;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);
}

/* hero top row: lockup + powered sticker */
.hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:clamp(40px,7vh,72px);
}

/* lockup */
.lockup{
  display:flex;
  align-items:center;
  gap:14px;
}

.markwrap{
  position:relative;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
}

/* breathing halo behind the mark */
.markwrap::before{
  content:"";
  position:absolute;
  inset:-16px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(29,155,240,.30),transparent 68%);
  opacity:.9;
  animation:halo 7s ease-in-out infinite;
}

.mark{
  position:relative;
  width:52px;
  height:52px;
  border-radius:13px;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 12px 34px -12px rgba(29,155,240,.6);
}

/* the motion moment: arcs drift outward, one after the other */
.arc{
  transform-origin:9px 16px;
  animation:emit 7s cubic-bezier(.4,0,.2,1) infinite;
}
.arc--1{animation-delay:-1.2s}
.arc--2{animation-delay:-.5s}

@keyframes emit{
  0%,58%,100%{opacity:1}
  22%{opacity:.34}
}

@keyframes halo{
  0%,100%{transform:scale(.9);opacity:.55}
  50%{transform:scale(1.06);opacity:1}
}

.lockup__word{
  font-family:var(--display);
  font-size:clamp(30px,4.4vw,40px);
  font-weight:640;
  letter-spacing:-.035em;
  line-height:1;
  color:var(--text);
}

/* powered-by sticker */
.powered{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.3;
  letter-spacing:.01em;
  text-decoration:none;
  transition:border-color .22s ease, background .22s ease, transform .22s cubic-bezier(.2,.7,.3,1), color .22s ease;
  -webkit-tap-highlight-color:transparent;
}

.powered:hover{
  border-color:rgba(245,165,36,.45);
  color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
}

.powered__mark{
  width:15px;
  height:15px;
  color:#f5a524;
  flex:none;
}

.powered__text{white-space:nowrap}

.powered b{
  font-weight:600;
  color:var(--text);
}

.powered__arrow{
  font-size:11px;
  line-height:1;
  opacity:.6;
  transform:translateY(0);
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}

.powered:hover .powered__arrow{transform:translate(1px,-1px)}

/* tagline kicker */
.kicker{
  margin:0 0 14px;
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(11px,1vw,12.5px);
  font-weight:560;
  letter-spacing:.17em;
  color:var(--blue);
  opacity:.95;
}

/* status line */
.status{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 clamp(16px,2.4vh,22px);
  padding:7px 15px 7px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  font-size:13.5px;
  line-height:1.4;
  font-weight:450;
  letter-spacing:.005em;
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
}

.status__dot{
  position:relative;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 0 rgba(29,155,240,.5);
  animation:ping 3.4s ease-out infinite;
  flex:none;
}

@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(29,155,240,.45)}
  60%,100%{box-shadow:0 0 0 7px rgba(29,155,240,0)}
}

/* headline */
.h1{
  margin:0;
  font-family:var(--display);
  font-size:clamp(44px,7.6vw,104px);
  font-weight:560;
  line-height:.98;
  letter-spacing:-.042em;
  text-wrap:balance;
  max-width:17ch;
  color:var(--text);
}

/* soft top-lit gradient on the headline where background-clip:text is solid */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .h1{
    background:linear-gradient(178deg,#FFFFFF 20%,#C3C7CE 96%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

.brk{display:none}

.lede{
  margin:clamp(24px,3.5vh,34px) 0 0;
  max-width:56ch;
  font-size:clamp(17px,1.55vw,20px);
  line-height:1.55;
  color:var(--text-2);
  text-wrap:pretty;
}

/* cta */
.cta{
  display:flex;
  align-items:center;
  gap:clamp(16px,2.4vw,26px);
  flex-wrap:wrap;
  margin-top:clamp(34px,5vh,48px);
}

.btn{
  --btn-bg:var(--blue);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 26px;
  min-height:56px;
  border-radius:999px;
  background:var(--btn-bg);
  color:#04121C;
  font-family:var(--display);
  font-size:16.5px;
  font-weight:600;
  letter-spacing:-.012em;
  text-decoration:none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 10px 34px -12px rgba(29,155,240,.9);
  transition:background-color .22s ease, transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
  -webkit-tap-highlight-color:transparent;
}

.btn:hover{
  background:#3EAEF7;
  transform:translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 16px 44px -14px rgba(29,155,240,1);
}

.btn:active{transform:translateY(0) scale(.99)}

.btn__arrow{
  font-size:1.05em;
  line-height:1;
  transform:translateY(-.01em);
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}

.btn:hover .btn__arrow{transform:translate(3px,-.01em)}

.cta__note{
  font-size:13.5px;
  line-height:1.45;
  color:var(--text-3);
  max-width:22ch;
}

/* ---------- VALUES ---------- */

.values{
  position:relative;
  padding-block:clamp(64px,10vh,116px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 40%),
    var(--ink);
  border-top:1px solid var(--line-2);
}

.eyebrow{
  margin:0 0 clamp(32px,5vh,52px);
  font-family:var(--display);
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
}

.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);
}

.card{
  padding-top:26px;
  border-top:1px solid var(--line);
}

.card__num{
  margin:0 0 clamp(20px,3vw,28px);
  font-family:var(--display);
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--blue);
  font-variant-numeric:tabular-nums;
}

.card h3{
  margin:0 0 14px;
  font-family:var(--display);
  font-size:clamp(21px,2.1vw,25px);
  font-weight:580;
  line-height:1.2;
  letter-spacing:-.025em;
  color:var(--text);
  text-wrap:balance;
}

.card p:last-child{
  margin:0;
  font-size:16px;
  line-height:1.62;
  color:var(--text-2);
  text-wrap:pretty;
}

/* ---------- FOUNDATION ---------- */

.foundation{
  position:relative;
  padding-block:clamp(64px,10vh,116px);
  border-top:1px solid var(--line-2);
  overflow:hidden;
}

.foundation::before{
  content:"";
  position:absolute;
  z-index:0;
  left:50%;
  bottom:-52%;
  width:min(120vmax,1500px);
  aspect-ratio:2/1;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%, rgba(29,155,240,.15), rgba(29,155,240,.04) 40%, transparent 66%);
  pointer-events:none;
}

.foundation__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,5vw,72px);
  align-items:start;
}

.foundation h2{
  margin:0;
  font-family:var(--display);
  font-size:clamp(28px,3.6vw,42px);
  font-weight:560;
  line-height:1.06;
  letter-spacing:-.035em;
  text-wrap:balance;
  max-width:12ch;
}

.foundation p{
  margin:0;
  font-size:clamp(16.5px,1.5vw,18.5px);
  line-height:1.62;
  color:var(--text-2);
  max-width:56ch;
  text-wrap:pretty;
}

/* ---------- FOOTER ---------- */

.foot{
  border-top:1px solid var(--line-2);
  padding-block:clamp(28px,4vh,38px);
  background:var(--ink);
}

.foot__inner{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:max(var(--gut),env(safe-area-inset-left));
  padding-inline-end:max(var(--gut),env(safe-area-inset-right));
  padding-bottom:max(clamp(28px,4vh,38px),env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px 32px;
  flex-wrap:wrap;
  font-size:13.5px;
  line-height:1.5;
  color:var(--text-3);
}

.foot__brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
}

.foot__mark{
  width:22px;
  height:22px;
  border-radius:6px;
  opacity:.9;
}

.foot__link{margin:0}

.foot__link a{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  color:var(--text-2);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition:color .2s ease,border-color .2s ease;
}

.foot__link a:hover{
  color:var(--text);
  border-color:rgba(255,255,255,.28);
}

.foot__arrow{
  font-size:11px;
  color:var(--text-3);
  align-self:flex-start;
  margin-top:.15em;
}

/* ---------- reveal on scroll ---------- */
/* hidden state is only applied once JS confirms it can reveal them again */

.reveal{opacity:1;transform:none}

.reveal-on .reveal:not(.is-in){
  opacity:0;
  transform:translateY(14px);
}

.reveal-on .reveal{
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}

/* ---------- responsive ---------- */

@media (max-width:860px){
  .grid{
    grid-template-columns:1fr;
    gap:0;
  }
  .card{
    padding-block:26px 30px;
    border-top:1px solid var(--line);
  }
  .card:first-child{border-top:0;padding-top:0}
  .card__num{margin-bottom:14px}
  .card h3{margin-bottom:10px}
  .foundation__grid{grid-template-columns:1fr;gap:20px}
  .foundation h2{max-width:16ch}
}

@media (max-width:620px){
  body{font-size:16px}
  .hero{
    min-height:auto;
    padding-block:clamp(56px,11vh,80px) clamp(52px,9vh,72px);
  }
  .hero__top{gap:14px 16px;margin-bottom:clamp(30px,6vh,44px)}
  .lockup{gap:11px}
  .powered{padding:6px 12px;font-size:11.5px;gap:8px}
  .powered__mark{width:14px;height:14px}
  .markwrap,.mark{width:42px;height:42px}
  .mark{border-radius:11px}
  .markwrap::before{inset:-13px}
  .lockup__word{font-size:29px}
  .status{font-size:12.5px;padding:6px 13px 6px 11px}
  .h1{font-size:clamp(38px,10.4vw,52px);line-height:1.02;letter-spacing:-.035em;max-width:100%}
  .brk{display:block}
  .lede{font-size:16.5px;line-height:1.55;margin-top:22px}
  .cta{gap:14px;margin-top:30px;align-items:stretch}
  .btn{min-height:54px;width:100%;justify-content:center;font-size:16px;padding-inline:20px}
  .cta__note{max-width:none;font-size:12.5px;text-align:center;width:100%}
  .foot__inner{justify-content:flex-start;gap:14px;font-size:12.5px}
  .foot__link a{border-color:rgba(255,255,255,.16)}
}

@media (max-width:400px){
  .h1{font-size:37px}
  .lockup__word{font-size:27px}
}

/* short laptop viewports: keep the hero to one comfortable screen */
@media (min-width:861px) and (max-height:760px){
  .hero{min-height:auto;padding-block:76px 68px}
  .hero__top{margin-bottom:34px}
  .h1{font-size:clamp(44px,6.2vw,76px)}
  .lede{margin-top:22px}
  .cta{margin-top:28px}
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .arc,.status__dot,.markwrap::before{animation:none}
  .arc{opacity:1}
  .reveal-on .reveal:not(.is-in){opacity:1;transform:none}
}