@font-face {
  font-family: "Scheherazade New";
  src: url("assets/ScheherazadeNew-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #171717;
  --muted: #686764;
  --paper: #f7f4ee;
  --white: #fff;
  --blue: #146df5;
  --blue-dark: #0d48ad;
  --line: rgba(23, 23, 23, .12);
  --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 72px;
  padding: 0 clamp(24px, 5vw, 76px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(23,23,23,.08);
  background: rgba(247,244,238,.82);
  backdrop-filter: blur(22px) saturate(140%);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 5px 16px rgba(13,72,173,.18); }
nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 550; }
nav a { color: #494846; transition: color .2s ease; }
nav a:hover { color: var(--ink); }
.nav-cta { padding: 9px 15px; border-radius: 99px; background: var(--ink); color: #fff; }
nav a.nav-cta:hover { color: #fff; background: #333; }

.hero {
  min-height: calc(100vh - 72px);
  padding: clamp(72px, 10vw, 145px) 0 100px clamp(24px, 7vw, 112px);
  display: grid;
  grid-template-columns: minmax(390px, .8fr) minmax(560px, 1.2fr);
  gap: 5vw;
  align-items: center;
  overflow: hidden;
}
.eyebrow { margin: 0 0 22px; color: var(--blue); font-size: 13px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-family: var(--serif); font-size: clamp(64px, 7vw, 116px); font-weight: 400; line-height: .9; letter-spacing: -.06em; }
h1 em { color: var(--blue); font-weight: 400; }
.lead { max-width: 610px; margin: 34px 0; color: var(--muted); font-size: clamp(18px, 1.6vw, 23px); line-height: 1.52; letter-spacing: -.018em; }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 23px; border: 0; border-radius: 15px; font-weight: 650; cursor: pointer; }
.button.primary { background: var(--blue); color: #fff; box-shadow: 0 12px 30px rgba(20,109,245,.22); }
.button.primary:hover { background: #0e61df; transform: translateY(-1px); }
.button.quiet { background: rgba(255,255,255,.65); border: 1px solid var(--line); }
.platform-note { margin-top: 24px; color: #84817b; font-size: 12px; }
.apple { font-size: 9px; margin-right: 5px; }

.app-stage { width: 800px; perspective: 1200px; }
.screenshot-crop {
  position: relative;
  width: 800px;
  aspect-ratio: 1209 / 946;
  overflow: hidden;
  border-radius: 18px;
  background: transparent;
  box-shadow: -30px 55px 100px rgba(38,35,30,.2), 0 4px 16px rgba(0,0,0,.13);
  transform: rotateY(-4deg) rotateX(.5deg);
  transform-origin: left center;
}
.screenshot-crop::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 10px;
  background: var(--paper);
  pointer-events: none;
}
.screenshot-crop img {
  display: block;
  width: 101.49%;
  height: auto;
  transform: translateY(-3.6%);
}
.window { width: 800px; height: 580px; border: 1px solid rgba(13,31,60,.16); border-radius: 18px; overflow: hidden; background: #e7e8eb; box-shadow: -30px 55px 100px rgba(38,35,30,.2), 0 2px 8px rgba(0,0,0,.12); transform: rotateY(-5deg) rotateX(1deg); transform-origin: left center; }
.window-bar { height: 46px; display: flex; align-items: center; justify-content: center; padding: 0 18px; background: linear-gradient(#f9f9fa,#ededee); border-bottom: 1px solid #cfd0d2; font-size: 12px; color: #55565a; }
.window-bar b { position: absolute; right: 18px; letter-spacing: 2px; }
.traffic { position: absolute; display: flex; gap: 7px; margin-right: 730px; }
.traffic i { width: 11px; height: 11px; border-radius: 50%; background: #ff5d57; }
.traffic i:nth-child(2) { background: #febc2e; }.traffic i:nth-child(3) { background: #28c840; }
.toolbar { height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 7px; background: #f4f4f5; border-bottom: 1px solid #d3d4d6; }
.tool { padding: 8px 10px; color: #5c5d61; font-size: 11px; border-radius: 7px; }
.tool.active { background: #fff; color: #1c1d20; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.toolbar .spacer { flex: 1; }
.round { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #d3d4d6; border-radius: 8px; background: #fff; font-size: 12px; }
.workspace { display: grid; grid-template-columns: 155px 1fr; height: 478px; }
.workspace aside { padding: 22px 10px; background: #f1f1f2; border-right: 1px solid #d1d2d4; }
.workspace aside small { display: block; margin: 0 9px 10px; color: #898a8e; font-size: 9px; letter-spacing: .12em; font-weight: 700; }
.scene { display: grid; grid-template-columns: 20px 1fr; gap: 7px; padding: 10px 8px; border-radius: 8px; color: #5d5e62; font-size: 9px; line-height: 1.35; }
.scene b { color: #929397; }.scene.selected { background: #dce9fc; color: #163d70; }.scene.selected b { color: var(--blue); }
.notes-label { margin-top: 30px !important; }
.note-dot { width: 9px; height: 9px; margin: 10px 9px; border-radius: 50%; }.note-dot.cyan { background:#20b9d6; }.note-dot.yellow{background:#f9d332;}
.paper { position: relative; width: 510px; min-height: 660px; margin: 24px auto 0; padding: 58px 63px; background: #fff; box-shadow: 0 2px 9px rgba(0,0,0,.13); font: 12px/1.55 "Courier New", monospace; color: #111; }
.paper h3 { margin: 0 0 22px; font-size: 12px; font-weight: 700; }.paper h4 { margin: 27px 0 2px; text-align: center; font-size: 12px; }.paper p { margin: 0 0 17px; }.paper .dialogue { width: 235px; margin: 0 auto 25px; }
.page-meta { position: absolute; top: 29px; left: 34px; right: 34px; display: flex; justify-content: space-between; }
.paper mark { background: rgba(255,219,44,.58); padding: 1px 0; }
.note-pin { position:absolute; right:20px; top:318px; display:grid; place-items:center; width:23px; height:23px; border-radius:7px; background:#e8f7fb; color:#0996b0; border:1px solid #9ddde9; }
.revision-star { position:absolute; right:42px; top:373px; color:#1674ed; font-weight:bold; }

.statement { padding: 160px 24px; text-align: center; }
.statement p { margin: 0 0 20px; color: var(--blue); font-weight: 700; }
.statement h2, .release h2 { margin: 0; font-family: var(--serif); font-size: clamp(56px, 7vw, 100px); font-weight: 400; line-height: .98; letter-spacing: -.055em; }

.feature-grid { max-width: 1280px; margin: 0 auto; padding: 0 24px 140px; display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.feature { position: relative; min-height: 520px; padding: clamp(34px,5vw,62px); border: 1px solid var(--line); border-radius: 32px; background: rgba(255,255,255,.76); overflow: hidden; }
.feature.wide { grid-column: 1/-1; min-height: 610px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 8vw; align-items: center; }
.feature.dark { background: #17191e; color:#fff; border:0; }.feature.warm { background:#ece5d9; }
.feature-number { position:absolute; top:30px; right:34px; color:#93918d; font: 12px/1 var(--sans); }
.feature h3 { max-width:520px; margin: 22px 0 18px; font-family:var(--serif); font-size:clamp(38px,4vw,60px); font-weight:400; line-height:1.04; letter-spacing:-.045em; }
.feature p { max-width: 570px; color: #6e6c68; font-size: 17px; line-height: 1.6; }.feature.dark p { color:#aeb1b8; }
.format-stack { display:flex; flex-direction:column; gap:20px; padding:60px 50px; border:1px solid #343740; border-radius:20px; background:#1f2228; font: 15px/1.5 "Courier New",monospace; box-shadow:0 30px 70px rgba(0,0,0,.25); }
.format-stack .action-line{max-width:420px;color:#c7cad0}.format-stack .character-line{text-align:center;margin-top:20px}.format-stack .dialogue-line{width:260px;margin:auto;color:#dfe1e5}
.feature-icon { display:grid; place-items:center; width:88px;height:88px;margin-top:90px;border-radius:25px;background:#e5f6fb;color:#0ba0bc;border:1px solid #a8dce7;font-size:34px;box-shadow:0 15px 35px rgba(11,160,188,.12); }
.swatches { height:170px;margin-top:70px;display:flex;align-items:center;justify-content:center;gap:16px; }
.swatches i { width:54px;height:54px;border-radius:18px;background:#fedc3d;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 12px 25px rgba(0,0,0,.08);transform:translateY(-15px) rotate(-8deg); }
.swatches i:nth-child(2){background:#43c46a;transform:translateY(8px) rotate(5deg)}.swatches i:nth-child(3){background:#2694f2;transform:translateY(-7px) rotate(-3deg)}.swatches i:nth-child(4){background:#f03b8e;transform:translateY(12px) rotate(7deg)}.swatches i:nth-child(5){background:#ff9e24;transform:translateY(-13px) rotate(4deg)}
.rtl-card { background:#dbe7f8; }.rtl-sample,.hebrew-sample{margin:0!important;color:#154994!important;font-size:clamp(34px,4vw,58px)!important;line-height:1.25!important}.rtl-sample{font-family:"Scheherazade New","Geeza Pro",serif!important;line-height:1.08!important}.hebrew-sample{margin-top:22px!important;color:#6a7890!important;font-family:"New Peninim MT","Arial Hebrew",Arial,sans-serif!important;font-size:clamp(25px,3vw,40px)!important}
.revision-page { margin-top:65px;padding:40px 44px;border-radius:8px;background:#dcecff;box-shadow:0 22px 50px rgba(37,92,150,.13);display:grid;grid-template-columns:30px 1fr;gap:8px;font-family:"Courier New",monospace;transform:rotate(-2deg)}.revision-page span{color:var(--blue);font-size:24px}.revision-page small{grid-column:2;color:#6d87a8}
.exchange-icons { margin-top:80px;display:flex;align-items:center;justify-content:center;gap:25px}.exchange-icons span{display:grid;place-items:center;width:120px;height:145px;border-radius:13px;background:#fff;border:1px solid #dfe0e3;box-shadow:0 18px 40px rgba(0,0,0,.09);color:var(--blue);font:700 18px var(--sans)}.exchange-icons i{font-style:normal;color:#888;font-size:28px}

.professional { padding:150px clamp(24px,6vw,90px);background:#17191e;color:#fff }
.professional-intro { display:grid;grid-template-columns:minmax(320px,1.05fr) minmax(280px,.7fr);column-gap:8vw;align-items:end;max-width:1280px;margin:0 auto 78px }
.professional-intro .eyebrow { grid-column:1/-1;margin-bottom:25px }
.professional-intro h2 { margin:0;font-family:var(--serif);font-size:clamp(52px,6.5vw,94px);font-weight:400;line-height:.98;letter-spacing:-.055em }
.professional-intro>p:last-child { max-width:510px;margin:0 0 8px;color:#aeb1b8;font-size:18px;line-height:1.65 }
.professional-grid { display:grid;grid-template-columns:repeat(4,1fr);max-width:1280px;margin:auto;border-top:1px solid rgba(255,255,255,.16);border-left:1px solid rgba(255,255,255,.16) }
.professional-grid article { min-height:270px;padding:32px 28px;border-right:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.015);transition:background .2s ease }
.professional-grid article:hover { background:rgba(255,255,255,.055) }
.professional-grid span { color:#6f96cf;font-size:11px;letter-spacing:.12em }
.professional-grid h3 { margin:52px 0 13px;font-family:var(--serif);font-size:28px;font-weight:400;line-height:1.05;letter-spacing:-.025em }
.professional-grid p { margin:0;color:#989ca4;font-size:14px;line-height:1.55 }

.pricing { padding:150px clamp(24px,6vw,90px);background:#ebe7df }
.pricing-heading { max-width:850px;margin:0 auto 70px;text-align:center }
.pricing-heading h2 { margin:0;font-family:var(--serif);font-size:clamp(54px,7vw,94px);font-weight:400;line-height:.98;letter-spacing:-.055em }
.pricing-heading>p:last-child { max-width:680px;margin:28px auto 0;color:var(--muted);font-size:18px;line-height:1.65 }
.pricing-grid { display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:18px;max-width:1280px;margin:auto;align-items:stretch }
.price-card { position:relative;display:flex;flex-direction:column;min-height:570px;padding:38px;border:1px solid rgba(23,23,23,.11);border-radius:28px;background:rgba(255,255,255,.7);box-shadow:0 20px 45px rgba(31,27,21,.05) }
.price-card.featured { color:#fff;background:#17191e;border-color:#17191e;box-shadow:0 28px 65px rgba(23,25,30,.2) }
.price-badge { align-self:flex-start;padding:7px 11px;border-radius:99px;background:#146df5;color:#fff;font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase }
.quiet-badge { background:#ddd8cf;color:#57534c }.student-badge { background:#dce9fc;color:#1554ac }
.price-card h3 { margin:34px 0 12px;font-family:var(--serif);font-size:35px;font-weight:400;letter-spacing:-.035em }
.price { display:flex;align-items:baseline;gap:13px;margin:0 }.price strong{font-family:var(--serif);font-size:70px;font-weight:400;letter-spacing:-.06em}.price del{color:#858995;font-size:22px}
.price-note { min-height:42px;margin:4px 0 26px;color:#74716c;font-size:13px;line-height:1.45 }.featured .price-note{color:#aeb1b8}
.price-card ul { flex:1;margin:0 0 34px;padding:26px 0 0;list-style:none;border-top:1px solid rgba(23,23,23,.1) }.featured ul{border-color:rgba(255,255,255,.15)}
.price-card li { position:relative;margin:0 0 15px;padding-left:24px;color:#5e5b56;font-size:14px;line-height:1.5 }.featured li{color:#c3c6cc}.price-card li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:800}
.price-card .button { width:100%;margin-top:auto }.button.secondary{background:#fff;color:var(--ink);border:1px solid rgba(23,23,23,.13)}.button.secondary:hover{background:#f8f8f7;transform:translateY(-1px)}
.payment-note { margin:30px auto 0;text-align:center;color:#77736d;font-size:12px }

.release { padding: 170px 24px; text-align:center; background:#fff; }
.release>img { width:100px;height:100px;border-radius:25px;box-shadow:0 25px 50px rgba(13,72,173,.22);margin-bottom:38px }
.release h2 { font-size:clamp(60px,8vw,110px) }.release>p:not(.eyebrow){max-width:600px;margin:30px auto;color:var(--muted);font-size:19px;line-height:1.6}.release .disabled{margin:10px auto 23px;opacity:.7;cursor:default}.release small{display:block;color:#898783}
footer { padding:60px clamp(24px,6vw,90px);display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:25px;border-top:1px solid var(--line);font-size:13px;color:#77736e }.footer-brand{color:var(--ink)}.footer-links{display:flex;gap:18px;justify-content:center}.footer-links button{border:0;background:none;color:#77736e;cursor:pointer;padding:4px}.footer-links button:hover{color:var(--ink)}
dialog { max-width:560px;padding:42px;border:0;border-radius:24px;box-shadow:0 30px 100px rgba(0,0,0,.25);color:var(--ink)}dialog::backdrop{background:rgba(20,20,20,.38);backdrop-filter:blur(5px)}dialog h2{font-family:var(--serif);font-size:40px;margin:0 0 20px}.dialog-close{position:absolute;top:15px;right:17px;width:34px;height:34px;border:0;border-radius:50%;background:#eee;cursor:pointer;font-size:20px}

@media (max-width: 1000px) {
  .hero { grid-template-columns:1fr; padding-right:24px; }
  .hero-copy { max-width:760px; }
  .app-stage { width:100%; }
  .screenshot-crop { width:min(800px,100%); transform:none; }
  .professional-intro { grid-template-columns:1fr;gap:30px }
  .professional-grid { grid-template-columns:repeat(2,1fr) }
  .pricing-grid { grid-template-columns:1fr 1fr }.price-card.featured{grid-column:1/-1}.price-card{min-height:520px}
}
@media (max-width: 760px) {
  .site-header { height:64px; }.site-header nav a:not(.nav-cta){display:none}
  .hero { padding-top:70px; min-height:auto; }.lead{font-size:18px}.app-stage{overflow:hidden}.screenshot-crop{width:100%;border-radius:13px}
  .statement{padding:110px 24px}.feature-grid{grid-template-columns:1fr}.feature,.feature.wide{grid-column:auto;min-height:480px;grid-template-columns:1fr}.feature.wide{gap:30px}.format-stack{padding:35px 25px}.rtl-card{display:flex!important;flex-direction:column}.professional{padding:105px 24px}.professional-grid{grid-template-columns:1fr}.professional-grid article{min-height:230px}.pricing{padding:105px 24px}.pricing-grid{grid-template-columns:1fr}.price-card.featured{grid-column:auto}.price-card{min-height:auto}.release{padding:110px 24px}
  footer{grid-template-columns:1fr;text-align:center}.footer-brand{justify-content:center}
}
@media (prefers-reduced-motion: no-preference) {
  .screenshot-crop { animation: arrive 1s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes arrive { from { opacity:0; transform:translateX(70px) rotateY(-8deg); } }
}