:root {
  /* Morning haze over a summer tree: the hour cicadas start to sing. */
  --haze: #EEF1E8;
  --ink: #22302A;
  --moss: #5C6F55;
  --vein: #B8661A;          /* the orange wing veins of a periodical cicada */
  --rule: #CDD5C6;
  --glass-a: #D3E9E0;
  --glass-b: #E7E0F1;
  --glass-c: #F3E6CC;
  --btn-ink: #FFF8EE;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --haze: #16201B;
    --ink: #E6EDE4;
    --moss: #A3B59C;
    --vein: #E3A04B;
    --rule: #2E3B34;
    --glass-a: #24423A;
    --glass-b: #352F45;
    --glass-c: #4A3C24;
    --btn-ink: #1A140C;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--haze);
  color: var(--ink);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  line-height: 1.55;
}
.bn { font-family: "Tiro Bangla", "Noto Sans Bengali", serif; font-weight: 400; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--vein); outline-offset: 3px; border-radius: 4px; }

.top, main, .foot { width: min(100% - 32px, 1040px); margin-inline: auto; }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; padding-block: 22px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; font-size: 1.05rem; }
.brand-mark { width: 26px; height: 26px; color: var(--vein); }
.top-link { color: var(--moss); text-decoration: none; font-weight: 500; }
.top-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Hero: the wing is the one moment of motion */
.hero { position: relative; padding-block: clamp(48px, 9vw, 112px) clamp(56px, 8vw, 104px); }
.wing {
  position: absolute; z-index: 0;
  right: -7%; top: -3%;
  width: min(78vw, 760px); height: auto;
  transform: rotate(-9deg);
  overflow: visible;
}
.membrane { fill: url(#glass); opacity: 0; animation: glass 1.4s ease-out 1.2s forwards; }
.membrane.hind { animation-delay: 1.5s; }
.vein {
  fill: none; stroke: var(--vein); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 1.3s cubic-bezier(.45,.05,.25,1) var(--d, 0s) forwards;
}
.vein.edge { stroke-width: 2.2; }
.vein.cross { stroke-width: 1.1; animation-duration: .7s; }
.vein.faint { stroke-width: 1.1; opacity: .55; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes glass { to { opacity: .78; } }

.hero-text { position: relative; z-index: 1; max-width: 640px; }
h1 {
  margin: 0;
  font-size: clamp(3.6rem, 13vw, 9.5rem);
  font-weight: 760;
  font-stretch: 78%;
  font-variation-settings: "wdth" 78;
  line-height: .9;
  letter-spacing: -.035em;
  opacity: 0;
  animation: surface 1s cubic-bezier(.2,.7,.2,1) .35s forwards;
}
@keyframes surface { from { opacity: 0; transform: translateY(.18em); } to { opacity: 1; transform: none; } }
.lede { margin: 22px 0 0; font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.3; font-weight: 450; max-width: 26ch; }
.status { display: flex; align-items: baseline; gap: 10px; margin: 28px 0 0; font-size: 1.15rem; font-weight: 550; max-width: 46ch; }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--vein); transform: translateY(-1px); }

/* Sections */
h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 700; font-stretch: 85%; font-variation-settings: "wdth" 85; letter-spacing: -.015em; line-height: 1.1; }
.apps { border-top: 1px solid var(--rule); padding-top: 44px; }
.section-note { margin: 10px 0 8px; color: var(--moss); max-width: 60ch; }

.app {
  display: grid; grid-template-columns: 80px 1fr; gap: 0 28px;
  padding-block: 36px;
  border-bottom: 1px solid var(--rule);
}
.app:last-child { border-bottom: 0; }
.app-icon { width: 80px; height: 80px; border-radius: 20px; }
.app-body { max-width: 66ch; }
h3 { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.15; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
h3 .bn { font-size: 1.25rem; color: var(--moss); }
.app-what { margin: 6px 0 12px; font-size: 1.2rem; font-weight: 500; }
.app p { margin-block: 0 12px; }
.app-facts { color: var(--moss); font-size: .95rem; }
code, kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .88em; background: color-mix(in srgb, var(--rule) 55%, transparent); padding: .1em .35em; border-radius: 5px; }
.typed .bn { font-size: 1.1em; }

.app-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px !important; }
.btn {
  display: inline-block; padding: 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--haze); text-decoration: none; font-weight: 600;
  transition: background-color .15s ease;
}
.btn:hover { background: var(--vein); color: var(--btn-ink); }
.btn.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.quiet:hover { background: var(--ink); color: var(--haze); }
.plain { color: var(--moss); font-weight: 500; text-underline-offset: 4px; }
.plain:hover { color: var(--ink); }

/* Coming next */
.soon { border-top: 1px solid var(--rule); padding-block: 44px 24px; }
.soon dl { margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 48px; }
.soon dt { font-weight: 700; font-size: 1.2rem; }
.soon dd { margin: 4px 0 0; color: var(--moss); max-width: 42ch; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 40px 48px; color: var(--moss); font-size: .95rem; border-top: 1px solid var(--rule); margin-top: 40px; }
.foot p { margin: 0; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 640px) {
  .hero { padding-top: 52vw; }
  .wing { right: -14%; top: 0; width: 104vw; }
  .app { grid-template-columns: 56px 1fr; gap: 0 16px; }
  .app-icon { width: 56px; height: 56px; border-radius: 14px; }
  h3 { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vein, .membrane, h1 { animation: none; }
  .vein { stroke-dashoffset: 0; }
  .membrane { opacity: .78; }
  h1 { opacity: 1; }
}