@font-face {
  font-family: "Epchil SF Arabic";
  src: url("/assets/sf-arabic-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #111412;
  --surface: #191d1a;
  --surface-2: #202521;
  --panel: #292d2a;
  --line: rgba(228, 237, 231, 0.13);
  --text: #f1f4f0;
  --muted: #919a93;
  --mint: #6bdda6;
  --mint-soft: #baf4d6;
  --paper: #e9ede7;
  --ink: #152019;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }
::selection { color: var(--ink); background: var(--mint); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: .75rem;
  left: .75rem;
  padding: .8rem 1rem;
  transform: translateY(-160%);
  color: var(--ink);
  background: var(--mint);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute;
  z-index: 80;
  top: 0;
  left: 0;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.35rem var(--gutter);
  border-bottom: 1px solid var(--line);
  background: rgba(17, 20, 18, .72);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: .65rem;
  font-size: 1.08rem;
  font-weight: 750;
  letter-spacing: -.03em;
}

.brand-mark {
  width: 2rem;
  fill: none;
  stroke: var(--mint);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.brand-mark .mark-spark { fill: var(--mint); stroke: none; }
.desktop-nav { display: flex; gap: clamp(1.5rem, 3.5vw, 3.75rem); }

.desktop-nav a,
.nav-cta {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.desktop-nav a { color: #a5ada7; transition: color 220ms ease; }
.desktop-nav a:hover { color: var(--text); }

.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: .75rem;
}

.language-picker {
  display: flex;
  height: 2.55rem;
  align-items: center;
  gap: .4rem;
  padding: 0 .7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #a8b0aa;
  background: rgba(255,255,255,.025);
}

.language-picker svg {
  width: .85rem;
  fill: none;
  stroke: var(--mint);
  stroke-linecap: round;
  stroke-width: 1.5;
}

.language-picker select {
  max-width: 5.1rem;
  padding: 0;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  font: 700 .62rem/1 var(--sans);
  letter-spacing: .06em;
  cursor: pointer;
  color-scheme: dark;
}

.language-picker:focus-within {
  border-color: rgba(107,221,166,.65);
  box-shadow: 0 0 0 3px rgba(107,221,166,.08);
}

.nav-cta {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: .8rem;
  padding: .72rem 1rem;
  border: 1px solid rgba(107, 221, 166, .46);
  border-radius: 999px;
  color: var(--mint-soft);
  transition: color 220ms ease, background 220ms ease;
}
.nav-cta:hover { color: var(--ink); background: var(--mint); }
.menu-toggle, .mobile-menu { display: none; }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(8.5rem, 15vw, 13rem) var(--gutter) 2.5rem;
  isolation: isolate;
}

.hero::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  content: "";
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.hero-glow {
  position: absolute;
  z-index: -1;
  top: -25rem;
  left: -12rem;
  width: 68rem;
  height: 58rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(68, 160, 112, .27), rgba(17, 20, 18, 0) 68%);
  pointer-events: none;
}

.hero-copy { position: relative; z-index: 3; max-width: 48rem; }

.eyebrow,
.section-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--mint-soft);
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.live-dot {
  position: relative;
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--mint);
}
.live-dot::after {
  position: absolute;
  inset: -.3rem;
  border: 1px solid var(--mint);
  border-radius: inherit;
  content: "";
  animation: breathe 2.2s ease-out infinite;
}
@keyframes breathe { 0% { opacity: .65; transform: scale(.5); } 80%,100% { opacity: 0; transform: scale(1.35); } }

.hero h1 {
  max-width: 52rem;
  margin: 1.8rem 0 2.2rem;
  font-size: clamp(4rem, 7.3vw, 8rem);
  font-weight: 560;
  letter-spacing: -.075em;
  line-height: .86;
}
.hero h1 span { color: transparent; -webkit-text-stroke: max(1px, .012em) rgba(241, 244, 240, .75); }

.hero-description {
  max-width: 34rem;
  margin: 0;
  color: #aab1ac;
  font-size: clamp(1rem, 1.4vw, 1.23rem);
  line-height: 1.55;
}
.hero-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 2.4rem; }

.button {
  display: inline-flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: .8rem 1.1rem .8rem 1.35rem;
  border-radius: .65rem;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform 220ms ease, background 220ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--ink); background: var(--mint); box-shadow: 0 1rem 2.5rem rgba(56, 173, 117, .18); }
.button-primary:hover { background: #7debb6; }
.platform-note { display: flex; align-items: center; gap: .55rem; color: #9aa29c; font-size: .72rem; }
.platform-note svg { width: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }

.hero-product {
  position: absolute;
  z-index: 2;
  top: clamp(9rem, 13vw, 12rem);
  right: max(-11rem, -10vw);
  width: min(62vw, 66rem);
  min-width: 54rem;
  perspective: 1400px;
}

.app-window {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 1.15rem;
  background: #232623;
  box-shadow: 0 3rem 8rem rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.5);
  transform: rotateY(-8deg) rotateX(2deg);
  transform-origin: right center;
}
.app-shadow { position: absolute; right: 6%; bottom: -8%; left: 4%; height: 40%; border-radius: 50%; background: rgba(68, 180, 125, .25); filter: blur(80px); }

.window-bar {
  position: relative;
  display: grid;
  height: 3.2rem;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 1rem;
  border-bottom: 1px solid #313532;
  background: #1b1e1c;
  color: #c4c9c5;
  font-size: .74rem;
  font-weight: 650;
}
.traffic-lights { display: flex; gap: .48rem; }
.traffic-lights i { width: .7rem; height: .7rem; border-radius: 50%; background: #ff5f57; }
.traffic-lights i:nth-child(2) { background: #ffbd2e; }
.traffic-lights i:nth-child(3) { background: #28c840; }
.window-status { display: flex; align-items: center; justify-self: end; gap: .4rem; color: #778079; font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }
.window-status i { width: .35rem; height: .35rem; border-radius: 50%; background: var(--mint); }

.app-body { display: grid; min-height: 37rem; grid-template-columns: 1fr 11rem; }
.app-content { padding: 2.2rem; }
.app-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 1.5rem; }
.mini-label,.card-index { color: #778079; font-size: .55rem; font-weight: 750; letter-spacing: .14em; }
.app-heading h2 { margin: .45rem 0 0; font-size: 1.5rem; font-weight: 550; letter-spacing: -.04em; }
.active-chip { display: flex; align-items: center; gap: .45rem; padding: .45rem .65rem; border: 1px solid rgba(107,221,166,.2); border-radius: 999px; color: #9be4bd; background: rgba(107,221,166,.06); font-size: .58rem; }
.active-chip i { width: .35rem; height: .35rem; border-radius: 50%; background: var(--mint); }

.setting-card { overflow: hidden; border: 1px solid #3b403c; border-radius: .8rem; background: #292c29; }
.setting-row { display: grid; min-height: 5rem; grid-template-columns: auto 1fr auto; align-items: center; gap: .85rem; padding: 1rem 1.1rem; }
.setting-row + .setting-row { border-top: 1px solid #3b403c; }
.setting-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .5rem; color: var(--mint); background: rgba(107,221,166,.08); }
.setting-icon svg { width: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.6; }
.setting-copy { display: flex; flex-direction: column; gap: .3rem; }
.setting-copy strong { font-size: .72rem; font-weight: 580; }
.setting-copy span { color: #747c76; font-size: .55rem; }
kbd { font-family: inherit; }
.setting-row kbd { padding: .55rem .75rem; border: 1px solid #5b615c; border-bottom-width: 2px; border-radius: .45rem; color: #d9ddd9; background: #343835; font-size: .68rem; }
.setting-row kbd b { margin-right: .3rem; color: #979e98; font-weight: 500; }
.toggle { position: relative; width: 2.3rem; height: 1.28rem; border-radius: 999px; background: #3c413d; }
.toggle i { position: absolute; top: .16rem; left: .16rem; width: .96rem; height: .96rem; border-radius: 50%; background: #fff; }
.toggle.on { background: #3db77b; }
.toggle.on i { transform: translateX(1.02rem); }

.transcription-card { margin-top: 1rem; padding: 1.15rem; border: 1px solid #3b403c; border-radius: .8rem; background: #202320; }
.transcription-top,.recording-meta { display: flex; align-items: center; justify-content: space-between; }
.language { display: flex; align-items: center; gap: .35rem; color: #a7ada8; font-size: .56rem; }
.language i { width: .35rem; height: .35rem; border-radius: 50%; background: var(--mint); }
.waveform { display: flex; height: 5rem; align-items: center; justify-content: center; gap: .26rem; margin: .75rem 0; }
.waveform i { width: .14rem; height: 12%; border-radius: 99px; background: var(--mint); animation: wave .9s ease-in-out infinite alternate; }
.waveform i:nth-child(3n) { height: 48%; animation-delay: -.2s; }
.waveform i:nth-child(4n) { height: 76%; animation-delay: -.45s; }
.waveform i:nth-child(5n) { height: 32%; animation-delay: -.65s; }
.waveform i:nth-child(7n) { height: 93%; animation-delay: -.1s; }
@keyframes wave { to { transform: scaleY(.35); opacity: .55; } }
.transcribed-text { margin: 0 0 1.15rem; color: #d9ded9; font-size: .72rem; text-align: center; }
.recording-meta { padding-top: .8rem; border-top: 1px solid #323733; color: #69706b; font-size: .53rem; }
.recording-meta span { display: flex; align-items: center; gap: .35rem; }
.recording-meta span i { width: .35rem; height: .35rem; border-radius: 50%; background: #ff675e; }

.app-sidebar { display: flex; flex-direction: column; padding: 1.4rem .75rem; border-left: 1px solid #353a36; background: #262926; }
.sidebar-logo { display: grid; height: 5rem; place-items: center; color: var(--mint); }
.sidebar-logo svg { width: 2.6rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.app-sidebar nav { display: flex; flex-direction: column; gap: .4rem; margin-top: 1.25rem; }
.app-sidebar nav span { display: flex; align-items: center; gap: .65rem; padding: .75rem .7rem; border-radius: .5rem; color: #8a918b; font-size: .6rem; }
.app-sidebar nav span i { width: 1rem; color: #b1b7b2; font-size: .8rem; font-style: normal; text-align: center; }
.app-sidebar nav b,
.section-label b,
.mobile-menu nav b { font: inherit; }
.app-sidebar nav .selected { color: #132019; background: #68be92; }
.app-sidebar nav .selected i { color: inherit; }
.app-version { margin: auto 0 0 .5rem; color: #606761; font-size: .52rem; }

.floating-voice { position: absolute; z-index: 5; bottom: -2rem; left: 10%; display: grid; width: 6.5rem; aspect-ratio: 1; place-items: center; }
.voice-center { z-index: 2; display: grid; width: 3.5rem; aspect-ratio: 1; place-items: center; border-radius: 50%; color: var(--ink); background: var(--mint); box-shadow: 0 .8rem 3rem rgba(107,221,166,.32); }
.voice-center svg { width: 1.4rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.voice-rings,.voice-rings i { position: absolute; inset: 0; border: 1px solid rgba(107,221,166,.32); border-radius: 50%; animation: voice-pulse 2.5s ease-out infinite; }
.voice-rings i:nth-child(2) { animation-delay: -.8s; }
.voice-rings i:nth-child(3) { animation-delay: -1.6s; }
@keyframes voice-pulse { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }

.hero-foot { position: relative; z-index: 4; display: flex; align-items: center; gap: 2.5rem; margin-top: clamp(8rem, 14vw, 14rem); padding-top: 1.5rem; border-top: 1px solid var(--line); }
.hero-foot > span { color: #636b65; font-size: .56rem; font-weight: 750; letter-spacing: .14em; }
.app-list { display: flex; align-items: center; gap: 1.15rem; color: #8e9690; font-size: .68rem; }
.app-list i { width: .2rem; height: .2rem; border-radius: 50%; background: #4d544f; }

.section { padding: clamp(6rem, 11vw, 11rem) var(--gutter); }
.section-label span { display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .52rem; }
.section-label.light { color: var(--mint-soft); }

.product { color: var(--ink); background: var(--paper); }
.section-heading { display: grid; grid-template-columns: 1fr 1.65fr .75fr; align-items: end; gap: 3vw; margin-bottom: clamp(4rem, 8vw, 7.5rem); }
.section-heading .section-label { align-self: start; color: #326b4f; }
.section-heading h2,.workflow-sticky h2,.experience-copy h2 { margin: 0; font-size: clamp(3.5rem, 6.3vw, 7rem); font-weight: 570; letter-spacing: -.07em; line-height: .88; }
.section-heading h2 em,.workflow-sticky h2 em,.experience-copy h2 em,.statement p em { color: #3ca875; font-family: var(--serif); font-weight: 400; font-style: italic; }
.section-heading > p { max-width: 22rem; margin: 0; color: #69716b; font-size: .9rem; line-height: 1.6; }

.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.feature-card { position: relative; min-height: 45rem; overflow: hidden; border: 1px solid rgba(21,32,25,.14); border-radius: 1rem; background: #dfe5de; }
.feature-copy { position: relative; z-index: 3; max-width: 28rem; padding: clamp(1.75rem, 3vw, 3rem); }
.feature-copy .card-index,.shortcut-copy .card-index { color: #4e765f; }
.feature-copy h3 { margin: 1.4rem 0 1rem; font-size: clamp(2.6rem, 4vw, 4.5rem); font-weight: 580; letter-spacing: -.065em; line-height: .9; }
.feature-copy p { max-width: 24rem; margin: 0; color: #5d665f; font-size: .9rem; line-height: 1.55; }

.dictate-card { background: #dce7df; }
.dictation-demo { position: absolute; right: -7%; bottom: -7%; width: 84%; }
.fake-browser { overflow: hidden; border: 1px solid rgba(21,32,25,.18); border-radius: 1rem; background: #f5f7f4; box-shadow: 0 2rem 5rem rgba(36,57,44,.15); }
.browser-bar { display: flex; height: 2.7rem; align-items: center; gap: .4rem; padding: 0 1rem; border-bottom: 1px solid rgba(21,32,25,.12); }
.browser-bar i { width: .55rem; height: .55rem; border-radius: 50%; background: #ff6259; }
.browser-bar i:nth-child(2){background:#ffc14a}.browser-bar i:nth-child(3){background:#39c858}
.browser-bar span { margin-left: auto; margin-right: auto; color: #7b827d; font-size: .65rem; }
.message-to { display: flex; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid rgba(21,32,25,.1); font-size: .72rem; }
.message-to span { color: #909691; }.message-to strong { font-weight: 600; }
.message-body { min-height: 10rem; padding: 1.5rem 1.3rem; font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 2rem); line-height: 1.35; }
.cursor { display: inline-block; width: 1px; height: 1.1em; margin-left: .2rem; transform: translateY(.18em); background: #1e8f60; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.message-bottom { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-top: 1px solid rgba(21,32,25,.1); color: #737b75; }
.message-bottom button { margin-left: auto; width: 2rem; height: 2rem; border: 0; border-radius: 50%; color: white; background: var(--ink); }
.shortcut-pill { position: absolute; top: 24%; left: -9%; display: flex; align-items: center; gap: .55rem; padding: .75rem .9rem; border: 1px solid rgba(255,255,255,.18); border-radius: .65rem; color: white; background: #1a211d; box-shadow: 0 1rem 3rem rgba(20,30,24,.25); font-size: .63rem; }
.shortcut-pill kbd { padding: .35rem .45rem; border: 1px solid #4f5852; border-radius: .25rem; color: #cdd3ce; background: #2d352f; }
.shortcut-pill strong { color: var(--mint); font-weight: 550; }
.pulse-dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--mint); animation: breathe 1.8s infinite; }

.audio-card { background: #17241d; color: var(--text); }
.audio-card .feature-copy .card-index { color: var(--mint); }
.audio-card .feature-copy p { color: #91a097; }
.file-demo { position: absolute; right: clamp(1.5rem,3vw,3rem); bottom: clamp(1.5rem,3vw,3rem); left: clamp(1.5rem,3vw,3rem); padding: 1.25rem; border: 1px solid #36453c; border-radius: .85rem; background: #202c25; }
.audio-file { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid #3b4b41; border-radius: .65rem; background: #26342c; }
.file-icon { position: relative; display: grid; width: 3.2rem; height: 3.7rem; place-items: end center; padding-bottom: .55rem; border-radius: .25rem; color: var(--ink); background: var(--mint); font-size: .48rem; font-weight: 800; }
.file-icon i { position:absolute; top:0; right:0; border-style:solid; border-width:0 .9rem .9rem 0; border-color:transparent #202c25 transparent transparent; }
.audio-file > div:last-child { display: flex; flex-direction: column; gap: .35rem; }
.audio-file strong { font-size: .76rem; font-weight: 580; }
.audio-file span { color: #77877d; font-size: .58rem; }
.processing-line { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .7rem; margin: 1.4rem 0; color: #8b9a91; font-size: .58rem; }
.processing-line i { grid-column: 1/-1; height: 2px; background: linear-gradient(to right,var(--mint) 78%,#354139 78%); }
.processing-line span { grid-column: 1; }
.processing-line strong { font-weight: 550; color: var(--mint); }
.result-lines { display: flex; flex-direction: column; gap: .65rem; }
.result-lines i { width: 100%; height: .35rem; border-radius: 9px; background: #3d4b42; }
.result-lines i:nth-child(2){width:88%}.result-lines i:nth-child(3){width:96%}.result-lines i:nth-child(4){width:74%}.result-lines i:nth-child(5){width:45%}
.done-chip { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; padding: .5rem .65rem; border-radius: 99px; color: var(--mint-soft); background: rgba(107,221,166,.1); font-size: .58rem; }

.shortcut-card { grid-column: 1/-1; display: grid; min-height: 23rem; grid-template-columns: 1fr 2fr; align-items: center; padding: clamp(2rem,5vw,5rem); background: var(--mint); }
.shortcut-copy p { max-width: 25rem; margin: 1.2rem 0 0; font-family: var(--serif); font-size: clamp(2rem,3.2vw,3.6rem); font-style: italic; letter-spacing: -.045em; line-height: 1; }
.keycaps { display: flex; align-items: center; justify-content: flex-end; gap: 1.3rem; }
.keycaps kbd,.press-visual kbd { display: flex; width: clamp(7rem,12vw,11rem); aspect-ratio: 1; flex-direction: column; justify-content: space-between; padding: 1rem; border: 1px solid rgba(21,32,25,.25); border-bottom-width: .5rem; border-radius: 1rem; background: rgba(239,247,242,.6); box-shadow: 0 1rem 2.5rem rgba(38,90,61,.12); font-size: clamp(2rem,4vw,4rem); }
.keycaps kbd small,.press-visual kbd small { font-size: .62rem; font-weight: 600; }
.keycaps > span,.press-visual > span { font-family: var(--serif); font-size: 2.5rem; }
.keycaps .space-key { width: clamp(12rem,22vw,23rem); aspect-ratio: 2.1; }

.workflow { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(3rem,9vw,10rem); background: var(--bg); }
.workflow-sticky { position: sticky; top: 8rem; align-self: start; }
.workflow-sticky h2 { margin: 3rem 0 2rem; }
.workflow-sticky h2 em { color: var(--mint); }
.workflow-sticky > p { max-width: 29rem; margin: 0; color: #909991; font-size: .95rem; line-height: 1.65; }
.workflow-steps { display: flex; flex-direction: column; gap: 2rem; }
.workflow-step { position: relative; min-height: 34rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); }
.step-number { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border: 1px solid #3d463f; border-radius: 50%; color: var(--mint); font-size: .58rem; }
.step-visual { display: flex; height: 19rem; align-items: center; justify-content: center; }
.workflow-step h3 { margin: 0 0 .7rem; font-size: clamp(1.8rem,3vw,3rem); font-weight: 550; letter-spacing: -.045em; }
.workflow-step > p { max-width: 29rem; margin: 0; color: #8a938c; font-size: .84rem; line-height: 1.55; }
.focus-visual { position: relative; }
.input-shell { display: flex; width: 80%; height: 4.5rem; align-items: center; justify-content: space-between; padding: 0 1.3rem; border: 1px solid var(--mint); border-radius: .65rem; color: #7f8881; background: #222824; box-shadow: 0 0 0 .25rem rgba(107,221,166,.07); font-size: .72rem; }
.input-shell i { width: 1px; height: 1.5rem; background: var(--mint); animation: blink 1s steps(1) infinite; }
.focus-visual svg { position: absolute; right: 7%; bottom: 21%; width: 2.2rem; fill: #e9ede7; stroke: #121512; stroke-width: 1.5; }
.press-visual { gap: 1rem; }
.press-visual kbd { width: 7rem; padding: .8rem; border-color: #4a544d; color: #dce1dc; background: #2b332e; font-size: 2rem; box-shadow: none; }
.press-visual .wide-key { width: 11rem; aspect-ratio: 1.7; align-items: center; justify-content: flex-end; color: #8f9891; font-size: .6rem; }
.press-visual > span { color: #6e776f; }
.words-visual { color: #dce4dd; font-family: var(--serif); font-size: clamp(1.8rem,3vw,3rem); font-style: italic; }
.words-visual i { width: 1px; height: 1.2em; margin-left: .25rem; background: var(--mint); animation: blink 1s steps(1) infinite; }

.experience { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(4rem,9vw,10rem); color: var(--ink); background: #dce2dc; }
.experience-copy .section-label { color: #326b4f; }
.experience-copy h2 { margin: 3rem 0 2rem; }
.experience-copy > p { max-width: 33rem; color: #626b64; font-size: .92rem; line-height: 1.65; }
.experience-points { margin: 3rem 0 0; padding: 0; border-top: 1px solid rgba(21,32,25,.2); list-style: none; }
.experience-points li { display: grid; grid-template-columns: 2rem 1fr 1fr; align-items: center; gap: .7rem; padding: 1.2rem 0; border-bottom: 1px solid rgba(21,32,25,.2); }
.experience-points li > span { color: #5e7968; font-size: .56rem; }
.experience-points strong { font-size: .82rem; font-weight: 650; }
.experience-points p { margin: 0; color: #6b736d; font-size: .72rem; }

.experience-visual { position: relative; min-height: 45rem; }
.mini-app { position: absolute; z-index: 2; top: 50%; left: 50%; width: min(90%,35rem); overflow: hidden; transform: translate(-50%,-50%) rotate(3deg); border: 1px solid #3d4540; border-radius: 1.2rem; color: var(--text); background: #252926; box-shadow: 0 3rem 6rem rgba(37,54,43,.25); }
.mini-window-bar { position: relative; display: flex; height: 3rem; align-items: center; gap: .45rem; padding: 0 1rem; border-bottom: 1px solid #353a36; background: #1e211f; }
.mini-window-bar i { width: .62rem; height: .62rem; border-radius: 50%; background:#ff6259}.mini-window-bar i:nth-child(2){background:#ffc14a}.mini-window-bar i:nth-child(3){background:#39c858}
.mini-window-bar span { position: absolute; left: 50%; transform: translateX(-50%); color: #909791; font-size: .65rem; font-weight: 650; }
.mini-app-body { padding: clamp(2rem,4vw,4rem); }
.mini-app-label { color: var(--mint); font-size: .56rem; font-weight: 700; letter-spacing: .1em; }
.mini-app-body h3 { max-width: 24rem; margin: 1rem 0 3rem auto; font-size: clamp(2rem,3.6vw,3.7rem); font-weight: 500; line-height: 1.3; }
.kurdish-input { display: flex; height: 4rem; align-items: center; justify-content: space-between; padding: 0 1rem; border: 1px solid #4b524d; border-radius: .6rem; color: #7e8780; font-size: .75rem; }
.kurdish-input i { width: 1px; height: 1.4rem; background: var(--mint); }
.kurdish-wave { display: flex; height: 6rem; align-items: center; justify-content: center; gap: .45rem; }
.kurdish-wave i { width: .18rem; height: 18%; border-radius: 9px; background: var(--mint); animation: wave 1s ease-in-out infinite alternate; }.kurdish-wave i:nth-child(2n){height:52%;animation-delay:-.3s}.kurdish-wave i:nth-child(3n){height:78%;animation-delay:-.6s}
.mini-controls { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid #3b403c; color: #939b95; font-size: .65rem; }
.mini-controls button { display:grid;width:2.7rem;height:2.7rem;place-items:center;border:0;border-radius:50%;color:var(--ink);background:var(--mint)}
.mini-controls svg { width: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.language-orbit { position: absolute; z-index: 3; display: grid; width: 4rem; height: 4rem; place-items: center; border: 1px solid rgba(21,32,25,.2); border-radius: 50%; font-family: var(--serif); font-size: 1.5rem; font-style: italic; background: var(--mint); box-shadow: 0 1rem 3rem rgba(37,54,43,.15); }
.orbit-one { top: 9%; right: 4%; }.orbit-two { bottom: 9%; left: 1%; background:#fff}.orbit-three { right:-2%; bottom:20%; width:3rem;height:3rem;background:#1d2922;color:var(--mint)}

.availability {
  border-top: 1px solid var(--line);
  background: #121713;
}

.availability-heading {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3vw;
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

.availability-heading h2 {
  max-width: 60rem;
  margin: 0;
  font-size: clamp(3.5rem, 6.3vw, 7rem);
  font-weight: 570;
  letter-spacing: -.07em;
  line-height: .88;
}

.availability-heading h2 em {
  color: var(--mint);
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
}

.availability-heading > p {
  grid-column: 2;
  max-width: 32rem;
  margin: 1rem 0 0;
  color: #929b94;
  font-size: .92rem;
  line-height: 1.65;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.platform-card {
  position: relative;
  display: flex;
  min-height: 25rem;
  flex-direction: column;
  padding: clamp(1.5rem, 2.8vw, 2.5rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: linear-gradient(145deg, #1c231e, #151a16);
  transition: border-color 260ms ease, transform 260ms ease;
}

.platform-card::after {
  position: absolute;
  right: -25%;
  bottom: -45%;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: rgba(107,221,166,.07);
  filter: blur(10px);
}

.platform-card:hover {
  border-color: rgba(107,221,166,.42);
  transform: translateY(-4px);
}

.platform-card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.platform-logo {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--mint);
}

.apple-logo,
.windows-logo { fill: currentColor; }
.linux-logo { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

.available-badge {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .6rem;
  border: 1px solid rgba(107,221,166,.18);
  border-radius: 999px;
  color: #9cd6b6;
  background: rgba(107,221,166,.05);
  font-size: .56rem;
}

.available-badge i {
  width: .35rem;
  height: .35rem;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 .2rem rgba(107,221,166,.1);
}

.platform-card h3 {
  margin: auto 0 .8rem;
  font-size: clamp(2.6rem, 4vw, 4.5rem);
  font-weight: 560;
  letter-spacing: -.06em;
}

.platform-card > p {
  position: relative;
  z-index: 2;
  min-height: 3rem;
  max-width: 22rem;
  margin: 0 0 2rem;
  color: #879188;
  font-size: .8rem;
  line-height: 1.55;
}

.architecture-list {
  position: relative;
  z-index: 2;
  display: flex;
  gap: .5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.architecture-list span {
  padding: .45rem .6rem;
  border: 1px solid #364139;
  border-radius: .35rem;
  color: #c0c8c2;
  background: rgba(255,255,255,.025);
  font: 700 .56rem/1 var(--sans);
  letter-spacing: .08em;
}

.demo-download {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(107,221,166,.38);
  border-radius: .5rem;
  color: var(--ink);
  background: var(--mint);
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background 220ms ease, transform 220ms ease;
}

.demo-download:hover {
  transform: translateY(-2px);
  background: #82e9b8;
}

.demo-download span:last-child {
  font-size: 1rem;
}

.statement { position: relative; display: flex; min-height: 42rem; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 7rem var(--gutter); text-align: center; background: var(--mint); color: var(--ink); }
.statement p { position: relative; z-index: 2; margin: 0 0 3rem; font-size: clamp(3.4rem,7.8vw,8.5rem); font-weight: 570; letter-spacing: -.075em; line-height: .86; }
.statement p em { color: var(--ink); }
.button-dark { position: relative; z-index: 2; color: var(--text); background: var(--ink); }
.statement-orb { position: absolute; top: 50%; left: 50%; display: grid; width: 30rem; aspect-ratio:1; place-items:center; transform:translate(-50%,-50%); border:1px solid rgba(21,32,25,.12);border-radius:50%}
.statement-orb svg { width: 6rem; fill:none;stroke:rgba(21,32,25,.13);stroke-linecap:round;stroke-width:1.3}
.statement-orb i { position:absolute;inset:-25%;border:1px solid rgba(21,32,25,.08);border-radius:50%}.statement-orb i:nth-of-type(2){inset:-55%}.statement-orb i:nth-of-type(3){inset:-85%}

footer { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;padding:2rem var(--gutter);border-top:1px solid var(--line);background:var(--bg)}
footer > p { margin:0;color:#7e8780;font-family:var(--serif);font-size:.9rem;font-style:italic }
.footer-meta { display:flex;justify-self:end;gap:1.5rem;color:#666e68;font-size:.58rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase }

.js .reveal,.js .reveal-up { opacity:0;transform:translateY(1.6rem);transition:opacity 850ms ease,transform 850ms cubic-bezier(.22,1,.36,1)}
.js .reveal-up { transform:translateY(.45em) }
.js .is-visible { opacity:1;transform:translateY(0) }
.js section:target .reveal,
.js section:target .reveal-up { opacity:1;transform:translateY(0) }
.feature-grid .reveal:nth-child(2),.workflow-steps .reveal:nth-child(2),.platform-grid .reveal:nth-child(2){transition-delay:120ms}.workflow-steps .reveal:nth-child(3),.platform-grid .reveal:nth-child(3){transition-delay:240ms}

@media (max-width: 1100px) {
  .nav-cta { display:none; }
  .hero { padding-bottom: 3rem; }
  .hero-copy { max-width: 41rem; }
  .hero-product { top: 13rem; right: -24rem; width: 61rem; }
  .hero-foot { margin-top: 16rem; }
  .section-heading { grid-template-columns: .8fr 1.7fr; }
  .section-heading > p { grid-column:2; }
  .feature-card { min-height: 40rem; }
  .workflow { gap: 4rem; }
  .experience-points li { grid-template-columns:2rem 1fr; }.experience-points p{grid-column:2}
  .platform-card { min-height:22rem }
}

@media (max-width: 820px) {
  .site-header { grid-template-columns:1fr auto auto;gap:.75rem }
  .desktop-nav,.nav-cta { display:none; }
  .header-actions { justify-self:auto }
  .language-picker { height:2.25rem;padding:0 .55rem }
  .menu-toggle { position:relative;z-index:90;display:flex;align-items:center;gap:.7rem;padding:0;border:0;background:transparent;font-size:.66rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;cursor:pointer }
  .menu-toggle i,.menu-toggle i::after { display:block;width:1.25rem;height:1px;content:"";background:currentColor;transition:transform 280ms ease }
  .menu-toggle i::after { transform:translateY(.38rem) }
  .menu-toggle[aria-expanded="true"] i { transform:translateY(.18rem) rotate(45deg) }.menu-toggle[aria-expanded="true"] i::after{transform:rotate(-90deg)}
  .mobile-menu { position:fixed;z-index:70;inset:0;display:flex;visibility:hidden;flex-direction:column;justify-content:center;padding:7rem var(--gutter) 2rem;transform:translateY(-100%);background:#101310;transition:visibility 500ms,transform 500ms cubic-bezier(.76,0,.24,1) }
  .mobile-menu.open { visibility:visible;transform:translateY(0) }
  .mobile-menu nav { display:flex;flex-direction:column }
  .mobile-menu nav a { display:flex;align-items:baseline;gap:1rem;padding:.3rem 0;font-size:clamp(3rem,13vw,6rem);font-weight:560;letter-spacing:-.07em }.mobile-menu nav a span{color:var(--mint);font-size:.6rem;letter-spacing:0}
  .mobile-menu > p { margin-top:auto;color:#69716b;font-size:.65rem;text-transform:uppercase;letter-spacing:.1em }
  .site-header.menu-active { position:fixed;background:transparent;border-color:transparent }
  .hero { min-height:auto;padding-top:9rem; }
  .hero h1 { font-size:clamp(4rem,12vw,6.4rem); }
  .hero-product { position:relative;top:auto;right:auto;width:62rem;min-width:0;margin-top:5rem;transform:translateX(-5%); }
  .hero-foot { margin-top:7rem; }
  .section-heading { grid-template-columns:1fr; }.section-heading h2,.section-heading>p{grid-column:1}.section-heading h2{margin-top:3rem}
  .feature-grid { grid-template-columns:1fr }.shortcut-card{grid-column:1}.feature-card{min-height:43rem}
  .workflow { grid-template-columns:1fr }.workflow-sticky{position:relative;top:auto}.workflow-sticky h2{max-width:40rem}.workflow-steps{display:grid;grid-template-columns:1fr 1fr}.workflow-step:nth-child(3){grid-column:1/-1}
  .experience { grid-template-columns:1fr }.experience-visual{min-height:42rem}
  .availability-heading { grid-template-columns:1fr }
  .availability-heading h2,.availability-heading>p { grid-column:1 }
  .availability-heading h2 { margin-top:3rem }
  .platform-grid { grid-template-columns:1fr 1fr }
  .platform-card:last-child { grid-column:1/-1 }
  footer { grid-template-columns:1fr 1fr }footer>p{display:none}
}

html[lang="zh-CN"] body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

html[lang="ug"] {
  --sans: "Epchil SF Arabic", "SF Arabic", Arial, sans-serif;
  --serif: "Epchil SF Arabic", "SF Arabic", Arial, sans-serif;
}

html[lang="zh-CN"] .hero h1,
html[lang="zh-CN"] .section-heading h2,
html[lang="zh-CN"] .workflow-sticky h2,
html[lang="zh-CN"] .experience-copy h2,
html[lang="zh-CN"] .availability-heading h2,
html[lang="zh-CN"] .statement p {
  letter-spacing: -.055em;
}

html[dir="rtl"] body {
  font-family: var(--sans);
  text-align: right;
}

html[dir="rtl"] .hero-copy { margin-left: auto; }
html[dir="rtl"] .hero-product { right: auto; left: max(-11rem, -10vw); }
html[dir="rtl"] .app-window { transform: rotateY(8deg) rotateX(2deg); transform-origin: left center; }
html[dir="rtl"] .app-body { direction: ltr; }
html[dir="rtl"] .app-content,
html[dir="rtl"] .app-sidebar { direction: rtl; }
html[dir="rtl"] .app-sidebar { border-right: 0; border-left: 1px solid #353a36; }
html[dir="rtl"] .browser-bar,
html[dir="rtl"] .window-bar,
html[dir="rtl"] .mini-window-bar { direction: ltr; }
html[dir="rtl"] .browser-bar span,
html[dir="rtl"] .window-bar > span,
html[dir="rtl"] .mini-window-bar span { direction: rtl; }
html[dir="rtl"] .hero h1,
html[dir="rtl"] .section-heading h2,
html[dir="rtl"] .workflow-sticky h2,
html[dir="rtl"] .experience-copy h2,
html[dir="rtl"] .availability-heading h2,
html[dir="rtl"] .statement p {
  letter-spacing: -.045em;
}
html[dir="rtl"] .footer-meta { justify-self: start; }

@media (max-width: 1100px) {
  html[dir="rtl"] .hero-product { right:auto;left:-24rem }
}

@media (max-width: 820px) {
  html[dir="rtl"] .hero-product { right:auto;left:auto;transform:translateX(5%) }
}

@media (max-width: 600px) {
  html[dir="rtl"] .hero-product { transform:translateX(11%) }
  html[dir="rtl"] .app-window { transform:rotateY(6deg) scale(.92);transform-origin:right center }
  html[dir="rtl"] .footer-meta { justify-self:start }
}

@media (max-width: 600px) {
  .site-header { padding-top:1rem;padding-bottom:1rem }
  .hero { padding-top:8rem; }
  .hero h1 { margin-top:1.5rem;font-size:clamp(3.45rem,17vw,5.6rem);line-height:.9 }
  .hero-description { font-size:.92rem }
  .hero-actions { align-items:flex-start;flex-direction:column }
  .hero-product { width:46rem;margin-top:4rem;transform:translateX(-11%) }
  .app-window { transform:rotateY(-6deg) scale(.92);transform-origin:left center }
  .floating-voice { left:4% }
  .hero-foot { align-items:flex-start;flex-direction:column;gap:1rem;margin-top:3rem }
  .app-list { width:100%;overflow:hidden;gap:.8rem;white-space:nowrap }
  .section-heading h2,.workflow-sticky h2,.experience-copy h2 { font-size:clamp(3.2rem,15vw,5rem) }
  .feature-card { min-height:39rem }
  .feature-copy h3 { font-size:clamp(2.8rem,13vw,4rem) }
  .dictation-demo { right:-25%;width:108% }.shortcut-pill{left:-3%}
  .shortcut-card { display:flex;min-height:32rem;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:2rem }
  .keycaps { width:100%;gap:.5rem }.keycaps kbd{width:6rem;border-radius:.65rem}.keycaps .space-key{width:10rem}.keycaps>span{font-size:1.6rem}
  .workflow-steps { grid-template-columns:1fr }.workflow-step:nth-child(3){grid-column:1}.workflow-step{min-height:31rem}
  .press-visual kbd{width:5.6rem}.press-visual .wide-key{width:8.5rem}
  .experience-points li { grid-template-columns:1.5rem 1fr }.experience-visual{min-height:35rem}.mini-app{width:105%}.orbit-one{right:-4%}.orbit-two{left:-5%}
  .availability-heading h2 { font-size:clamp(3.2rem,15vw,5rem) }
  .platform-grid { grid-template-columns:1fr }
  .platform-card:last-child { grid-column:1 }
  .platform-card { min-height:20rem }
  .statement { min-height:38rem }.statement p{font-size:clamp(3.3rem,16vw,5.5rem)}
  footer { grid-template-columns:1fr;gap:1.5rem }.footer-meta{justify-self:start}
}

@media (max-width: 600px) {
  html[dir="rtl"] .hero-product { transform:translateX(11%) }
  html[dir="rtl"] .app-window { transform:rotateY(6deg) scale(.92);transform-origin:right center }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important }
  .js .reveal,.js .reveal-up { opacity:1;transform:none }
}