/* backed — site styles. Direction A ("the orb"): ink page, Inter Tight 800 headlines, Inter body, the orb as the hero. */
:root{
  --bg:#0B0B0C;
  --tile:#161618;
  --fg:#F5F5F7;
  --dim:#A1A1A6;
  --dim-2:#8E8E93;
  --line:#232326;
  --blue:#2F7DF6;
  --blue-hover:#5B9BFF;
  --green:#30D158;
  --red:#FF453A;
  --font:"Inter",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:"Inter Tight",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --gutter:24px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-hover)}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.center{text-align:center}

/* the "backed." full-stop wordmark: Inter Tight 800 + a drawn green dot */
.wm{display:inline-flex;align-items:baseline;font-family:var(--display);font-weight:800;font-size:24px;line-height:1;letter-spacing:-.05em;color:var(--fg)}
.wm__dot{display:inline-block;width:.19em;height:.19em;border-radius:50%;background:var(--green);margin-left:.05em}
.wm--sm{font-size:20px}
.wm--xl{font-size:clamp(72px,11vw,148px)}

/* Follow @backed_app (the only call to action) */
.follow{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:500;white-space:nowrap;color:var(--blue)}
.follow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.follow--lg{font-size:17px}
.follow--lg svg{width:18px;height:18px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(11,11,12,.78);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav__in{max-width:1200px;margin:0 auto;padding:0 var(--gutter);height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav__brand{display:flex;align-items:center;min-height:44px}
.nav__links{display:flex;align-items:center;gap:22px}
.nav__link{display:flex;align-items:center;min-height:44px;font-size:14px;color:var(--dim);white-space:nowrap}
.nav__link:hover{color:var(--fg)}

/* hero */
.hero{min-height:calc(100svh - 56px);padding:clamp(28px,6vh,72px) var(--gutter) clamp(20px,4vh,40px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hero__title{font-family:var(--display);font-weight:800;font-size:clamp(60px,min(11vw,17vh),168px);letter-spacing:-.055em;line-height:.95;text-wrap:balance}
.hero__sub{margin-top:18px;max-width:620px;font-size:clamp(19px,1.7vw,24px);font-weight:500;line-height:1.35;letter-spacing:-.015em;color:var(--dim);text-wrap:pretty}

/* the orb: rendered on pure black, screened onto the page so its square disappears */
.orb{aspect-ratio:1/1}
.orb__video{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;background:#000}
/* iPhones in Low Power Mode won't autoplay any video and put a play button on it instead.
   Hide that button on the decorative loops; app.js swaps the orbs for an animated image (data-still) when that happens. */
.orb__video::-webkit-media-controls,.tile__video::-webkit-media-controls,
.orb__video::-webkit-media-controls-start-playback-button,.tile__video::-webkit-media-controls-start-playback-button,
.orb__video::-webkit-media-controls-overlay-play-button,.tile__video::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0}
img.orb__video{background:transparent}
.orb--hero{width:min(540px,100%,max(220px,calc(100svh - 400px)));margin-top:4px}

.orb--end{width:min(420px,80%)}


/* how it works film, on a MacBook */
.film{padding:120px var(--gutter) 160px;display:flex;flex-direction:column;align-items:center;scroll-margin-top:56px}
.film__title{font-family:var(--display);font-weight:800;font-size:clamp(34px,3.8vw,54px);letter-spacing:-.045em;line-height:1.02;margin-bottom:44px;text-align:center}
.mac{width:100%;max-width:1180px;display:flex;flex-direction:column;align-items:center}
.mac__lid{width:88%;border-radius:26px 26px 6px 6px;padding:14px 14px 26px;background:#0D0D0F;border:1px solid #2C2C2E;box-shadow:0 0 0 1px #000 inset}
.mac__screen{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.mac__video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.mac__base{position:relative;width:100%;height:20px;border-radius:2px 2px 18px 18px;background:linear-gradient(180deg,#4A4A4E 0%,#2C2C2E 45%,#18181A 100%)}
.mac__base span{position:absolute;left:50%;top:0;width:16%;height:7px;margin-left:-8%;border-radius:0 0 8px 8px;background:#1C1C1E}
.film__play{position:absolute;inset:0;display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-start;gap:14px;border:0;padding:clamp(16px,3vw,32px);margin:0;cursor:pointer;color:#fff;font:inherit;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 45%);transition:opacity .35s}
.film__icon{flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.25);transition:transform .35s cubic-bezier(.16,1,.3,1),background .25s}
.film__icon svg{width:24px;height:24px;fill:#fff;margin-left:3px}
.film__label{height:64px;display:flex;align-items:center;font-size:19px;font-weight:500;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.film__time{color:rgba(255,255,255,.7);margin-left:8px}
.film__play:hover .film__icon{transform:scale(1.07);background:rgba(255,255,255,.26)}
.film.is-playing .film__play{opacity:0;pointer-events:none}

/* section headings */
.h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,3.8vw,54px);letter-spacing:-.045em;line-height:1.02}

/* the cut-downs: four 4:5 clips */
.how{max-width:1100px;margin:0 auto;padding:0 var(--gutter) 160px}
.how .h2{margin-bottom:48px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}
.tile{background:var(--tile);border:1px solid #232326;border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.tile__stage{aspect-ratio:4/5;background:#0B0D12}
.tile__video{display:block;width:100%;height:100%;object-fit:cover}
.tile__copy{padding:28px 36px 40px;display:flex;flex-direction:column;gap:8px}
.tile__copy h3{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.04em;line-height:1.1}
.tile__copy p{color:var(--dim)}

/* the end: green orb, the wordmark, "Backed, or not." */
.end{padding:40px var(--gutter) 140px;display:flex;flex-direction:column;align-items:center;text-align:center}
.end__mark{margin-top:8px}
.end__title{margin-top:14px;font-family:var(--display);font-weight:800;font-size:clamp(32px,3.6vw,48px);letter-spacing:-.045em;line-height:1.05;color:var(--dim)}
.end .follow--lg{margin-top:20px}

/* footer */
.foot{border-top:1px solid var(--line);color:var(--dim-2);font-size:13px;line-height:1.4}
.foot__in{max-width:1200px;margin:0 auto;padding:22px var(--gutter) 28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px}
.foot__left{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}

@media (max-width:760px){
  :root{--gutter:20px}
  .nav__link{display:none}
  .hero{min-height:0;padding:44px var(--gutter) 24px}
  .orb--hero{width:min(340px,100%)}
  .film{padding:88px var(--gutter) 96px}
  .film__title{margin-bottom:24px}
  /* on a phone the film is the 9:16 cut, so the Mac becomes a phone frame */
  .mac__lid{width:min(320px,80vw);border-radius:46px;padding:9px;background:#0D0D0F;border:1px solid #2C2C2E;box-shadow:0 0 0 1px #000 inset,0 30px 80px rgba(0,0,0,.5)}
  .mac__screen{aspect-ratio:9/16;border-radius:37px}
  .mac__base{display:none}
  .film__play{justify-content:center;padding:0 16px 28px}
  .film__icon{width:44px;height:44px}
  .film__icon svg{width:17px;height:17px}
  .film__label{height:44px;font-size:15px}
  .how{padding-bottom:88px}
  .how .h2{margin-bottom:32px}
  .tiles{gap:12px}
  .tile{border-radius:22px}
  .tile__copy{padding:22px 26px 30px}
  .tile__copy h3{font-size:22px}
  .end{padding-bottom:96px}
  .foot__in{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}