.product-hero{padding:8rem 0 3rem;min-height:auto}
.hero-sub{font-size:1.2rem;line-height:1.7;color:#e8d9be;max-width:660px;margin:0 auto}
.cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem}
.btn-solid{display:inline-block;background:#c9a35c;color:#1c130b;border-radius:.6rem;padding:.8rem 1.6rem;font-weight:600;text-decoration:none;border:none;cursor:pointer;font-size:1rem}
.btn-solid:hover{background:#dbb671}
.btn-solid:disabled{opacity:.6;cursor:wait}
.section{padding:4rem 0}
.section h2{font-size:2rem;text-align:center;margin-bottom:.5rem}
.section .lead{text-align:center;color:#d9c8a9;max-width:640px;margin:0 auto 2.5rem;line-height:1.7}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;max-width:980px;margin:0 auto}
.feature-card{padding:1.75rem;border-radius:1rem}
.feature-card h3{margin-top:0;font-size:1.1rem;color:#ffebcc}
.feature-card p{margin:.6rem 0 0;font-size:.92rem;line-height:1.65;color:#e3d5ba}
.feature-card code{font-size:.85em;color:#ffebcc}
.how-num{display:inline-flex;width:2rem;height:2rem;border-radius:50%;background:#c9a35c;color:#1c130b;font-weight:700;align-items:center;justify-content:center;margin-bottom:.75rem}
.trust-strip{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:center;padding:1.1rem 1rem;border-top:1px solid rgba(245,235,218,.14);border-bottom:1px solid rgba(245,235,218,.14);color:#d9c8a9;font-size:.9rem;text-align:center}
.library-list{max-width:760px;margin:0 auto;display:grid;gap:.6rem}
.library-list a{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-radius:.6rem;color:#f5ebda;text-decoration:none;font-size:.95rem}
.library-list a span:last-child{color:#c9a35c;text-align:end}
.cta-box{text-align:center;padding:2.5rem 1.5rem;border-radius:1.25rem;max-width:720px;margin:0 auto}
.cta-box p{color:#e3d5ba;line-height:1.7}
.footer-legal{font-size:.8rem;color:#b7a888;margin-top:.5rem}
.footer-legal a{color:#c9a35c}
.demo-box{max-width:780px;margin:0 auto;padding:1.75rem;border-radius:1rem}
.demo-form{display:flex;gap:.75rem;flex-wrap:wrap}
.demo-form input{flex:1 1 320px;padding:.8rem 1rem;border-radius:.6rem;border:1px solid rgba(245,235,218,.35);background:rgba(18,13,10,.7);color:#f5ebda;font-size:1rem}
.demo-examples{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.demo-examples button{border:1px solid rgba(201,163,92,.6);background:transparent;color:#ffebcc;border-radius:999px;padding:.3rem .85rem;font-size:.8rem;cursor:pointer}
.demo-examples button:hover{background:rgba(201,163,92,.15)}
.demo-out{margin-top:1.25rem;line-height:1.8;color:#f5ebda}
.demo-out .status{color:#b7a888;font-size:.9rem}
.demo-out sup a{color:#c9a35c;text-decoration:none;font-weight:700;padding:0 .1rem}
.demo-sources{margin-top:1.1rem;display:grid;gap:.6rem}
.demo-source{border:1px solid rgba(245,235,218,.14);border-radius:.6rem;padding:.75rem 1rem;font-size:.88rem;color:#e3d5ba}
.demo-source b{color:#ffebcc}
.demo-source a{color:#c9a35c}
.demo-source blockquote{margin:.4rem 0 0;font-style:italic;color:#d9c8a9}
.demo-note{text-align:center;color:#b7a888;font-size:.8rem;margin:1rem auto 0;max-width:780px}
.waitlist-form{display:flex;gap:.75rem;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:1.25rem}
.waitlist-form input[type=email]{min-width:260px;padding:.8rem 1rem;border-radius:.6rem;border:1px solid rgba(245,235,218,.4);background:rgba(18,13,10,.65);color:#f5ebda;font-size:1rem}
.foot-note{font-size:.78rem;color:#b7a888;margin-top:1rem}
.foot-note a{color:#c9a35c}
[dir=rtl] .demo-source blockquote,[dir=rtl] .demo-out{text-align:right}

/* Product overview: founder-led educational startup, with a clearly labelled example. */
.product-hero{background:radial-gradient(ellipse at 50% 20%,rgba(201,163,92,.13),transparent 65%);padding-bottom:2rem}
.product-eyebrow{color:#c9a35c;font-size:.75rem;letter-spacing:.16em;margin:1.4rem 0 1rem;font-weight:700}
.product-headline{font-size:clamp(2.6rem,6vw,4.8rem);line-height:1.12!important;letter-spacing:-.04em;margin:0 0 1.4rem!important}
.product-headline em{font-style:normal;color:#dcbf80}
.product-preview{max-width:680px;margin:0 auto 3rem;padding:1.5rem;border:1px solid #75603c;border-radius:1.2rem;background:linear-gradient(145deg,#271e15,#17110d);box-shadow:0 24px 70px #0005;text-align:start}
.preview-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#b7a888}
.preview-question{padding:1rem;background:#ffffff08;border:1px solid #ffffff12;border-radius:.65rem;color:#f5ebda;line-height:1.6}
.preview-answer{border-inline-start:2px solid #c9a35c;padding-inline-start:1rem;font-size:.95rem;line-height:1.65}
.preview-brand{font-weight:700;color:#dcbf80}.preview-answer a{font-size:.82rem;color:#dcbf80}.preview-answer p{margin:.4rem 0}
.product-metrics{display:grid;grid-template-columns:repeat(3,1fr);max-width:760px;margin:0 auto;gap:1rem;text-align:center}
.product-metrics strong{display:block;font-size:2.2rem;color:#ffebcc;line-height:1.2}.product-metrics span{display:block;font-size:.85rem;color:#b7a888;margin-top:.5rem}
.metrics-note{text-align:center;color:#b7a888;font-size:.78rem;margin:1.2rem auto 3.5rem;max-width:680px;line-height:1.6}
.product-audience{padding-bottom:1rem}.section[id]{scroll-margin-top:5rem}
@media(max-width:720px){.product-preview{margin-inline:1rem;padding:1.1rem}.product-hero{padding-top:6rem}.product-headline{font-size:2.7rem}.product-metrics strong{font-size:1.8rem}.hero-sub{font-size:1.05rem}.waitlist-form input[type=email]{min-width:0;width:100%}}
body{background-image:none;background-color:#100f0d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
body:before{background:radial-gradient(ellipse at 70% 0%,#b28a3920,transparent 55%)}
.product-headline{-webkit-text-fill-color:initial;background:none;color:#f8f3e8;font-family:inherit;font-weight:750}
.section h2,.feature-card h3{font-family:inherit;letter-spacing:-.025em}
.product-hero{min-height:auto!important;min-height:initial!important}
.navbar{background:#100f0df2!important;border-bottom:1px solid #ffffff12}
.product-audience .feature-card{background:#1b1915;border:1px solid #ffffff12;box-shadow:none}
.demo-box{background:#1b1915;border:1px solid #c9a35c50;box-shadow:0 15px 50px #0003}
.hero-content{width:100%}.hero-title{margin-inline:auto!important}

/* AI disclosure line above the fatwa note in the Ask section */
.demo-disclosure { font-size: .86rem; line-height: 1.5; opacity: .78; margin: 18px 0 4px; }

/* Company fact table */
.fact-table { width: 100%; border-collapse: collapse; margin: 14px 0 26px; font-size: .95rem; }
.fact-table th, .fact-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid rgba(127,127,127,.25); vertical-align: top; }
.fact-table th { width: 26%; font-weight: 600; opacity: .8; white-space: nowrap; }

/* Recorded-sample fallback in the Ask box (shown when the model is unavailable) */
.demo-sample-label { font-size: .72rem; letter-spacing: .12em; opacity: .72; margin: 0 0 6px; }
.demo-sample-note { font-size: .84rem; line-height: 1.5; opacity: .8; margin: 0 0 12px; }
.demo-sample-q { font-size: .95rem; margin: 0 0 10px; }

/* Ana sayva duzeni - scripts/build_site.py uretiliyor */
body.home { background: radial-gradient(1100px 560px at 85% -12%, rgba(201,163,92,.17), transparent 62%), #0d0c0a; }
.hero-grid { display: grid; gap: 34px; grid-template-columns: 1.05fr .95fr; align-items: start; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.proof-strip { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.proof-strip li { font-size: .78rem; border: 1px solid rgba(201,163,92,.34); border-radius: 999px; padding: 5px 11px; color: #e8dcc4; background: rgba(201,163,92,.08); }
.hero-demo { margin: 0; }
.recorded { border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 22px; margin-top: 8px; }
.recorded-answer { font-size: 1.02rem; line-height: 1.75; color: #f5eee0; }
.how-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 10px; }
.how-card { padding: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.how-card h3 { margin: 10px 0 6px; font-size: 1.02rem; }
.how-card p { margin: 0; font-size: .92rem; line-height: 1.65; opacity: .86; }
.api-list { padding-inline-start: 1.1rem; font-size: .95rem; line-height: 1.75; opacity: .9; }
.roadmap { display: grid; gap: 4px; }
.road-item { display: grid; grid-template-columns: 190px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
@media (max-width: 640px) { .road-item { grid-template-columns: 1fr; } }
.road-label { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: #c9a35c; }
.road-item p { margin: 0; font-size: .95rem; line-height: 1.6; opacity: .9; }
.faq { display: grid; gap: 8px; }
.faq-item { border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 12px 14px; background: rgba(255,255,255,.03); }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item p { margin: 10px 0 0; opacity: .86; line-height: 1.7; font-size: .94rem; }
.waitlist-status { font-size: .9rem; color: #c9a35c; min-height: 1.3em; margin: 10px 0 0; }
[dir="rtl"] .road-item, [dir="rtl"] .faq-item { text-align: right; }

/* ── First-screen polish ────────────────────────────────────────────────────
   Measured at 1440px: the headline rendered at 76.8px and three lines, so the
   sentence naming the product fell below the fold, and tap targets sat under
   44px on phones. The hero glow was decoration only. */
.hero-title, .product-headline { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.13; }
.product-hero { background: none; }
.hero-copy, .proof-strip { text-align: start; }
.cta-row { justify-content: flex-start; }
.proof-strip { margin-top: 18px; }
.proof-strip li { border-color: rgba(255,255,255,.14); background: none; color: #cdbfa6; }

/* A completed interaction, visible before anyone types: the first screen used to
   hold nothing but an empty input, which reads as "no product yet". */
.demo-example-answer { border-top: 1px solid rgba(255,255,255,.1); margin-top: 14px; padding-top: 14px; }
.demo-example-label { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #a99b83; margin-bottom: 6px; }
.demo-example-answer .preview-question { font-weight: 600; margin: 0 0 8px; }
.demo-example-answer .recorded-answer { margin: 0 0 10px; font-size: .98rem; line-height: 1.6; }
.demo-source-example { border: 0; padding: 0; font-size: .82rem; }
.src-publisher { color: #a99b83; }

@media (max-width: 1180px) {
  .nav-links a.btn-ghost { color: #f0e2cd; text-align: start; }
}
@media (max-width: 800px) {
  .hero-grid { padding-inline: 20px; }
  .cta-row .btn-solid, .cta-row .btn-outline, .demo-form button, .demo-examples button { min-height: 44px; }
  .demo-form { flex-direction: column; }
  .demo-form input { flex: 1 1 auto; width: 100%; }
  .demo-examples button { padding: .55rem .9rem; }
  .demo-disclosure, .demo-note { text-align: start; opacity: 1; color: #cdbfa6; font-size: .88rem; }
}

/* ── Round 2 of the design review: navigation, first mobile screen, docs page ─
   Measured at 1408px: the AR language option was clipped, because the drawer
   links and the switcher together exceeded the container. The brand lived
   inside the drawer, so phones had no logo at all, and the panel was
   translucent enough that the headline showed through it. */
.brand { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; padding: .35rem .2rem; font-weight: 700; letter-spacing: .01em; color: #f5ebda; text-decoration: none; }
.brand img { border-radius: 6px; }
.brand:hover { color: #fff; }
.nav-content { gap: .35rem; }
.nav-links { gap: .05rem; }
.nav-links .btn-ghost { padding: .45rem .55rem; font-size: .82rem; }
.lang-switcher { margin-inline-start: .35rem; padding-inline-start: .6rem; gap: .1rem; }
.lang-btn { padding: .3rem .42rem; font-size: .76rem; }

/* the hamburger glyph read as a browser control; the panel was see-through */
.mobile-menu-toggle { background: none; border: 1px solid rgba(224,194,152,.35); color: #e0c298; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: .42rem .7rem; }
.mobile-menu-toggle:after { content: var(--lbl-menu, "Menu"); }
body.nav-open .mobile-menu-toggle:after { content: var(--lbl-close, "Close"); }
@media (max-width: 1180px) {
  .nav-links { background: #0c0b0af7 !important; gap: .05rem; padding: 3.4rem .8rem .9rem !important; }
  .nav-links .btn-ghost { padding: .58rem .7rem; font-size: .95rem; }
}

/* facts are statements, not competing controls */
.proof-strip li { border: 0; background: none; padding: 0; color: #c2b49a; font-size: .84rem; }
.proof-strip { gap: 0 14px; }
.proof-strip li + li::before { content: "·"; margin-inline-end: 14px; color: #6f6555; }

/* the quoted passage itself, inside the hero card */
.demo-quote { margin: 12px 0 0; padding-inline-start: 12px; border-inline-start: 2px solid rgba(201,163,92,.45); font-size: .9rem; line-height: 1.65; color: #ded1b7; font-style: italic; }
.demo-example-link { margin: 12px 0 0; font-size: .86rem; }
.demo-source-example { font-size: .88rem; color: #ded1b7; }
.src-publisher { color: #bfae90; }

/* API documentation page */
body.api-doc main { padding-top: 5rem; }
body.api-doc .hero-title { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.table-wrap { overflow-x: auto; }
table.spec { width: 100%; border-collapse: collapse; margin: 12px 0 26px; font-size: .92rem; }
table.spec th, table.spec td { text-align: start; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.09); vertical-align: top; }
table.spec th { color: #c3b189; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
table.spec code, .metrics-note code { background: rgba(255,255,255,.07); border-radius: 4px; padding: .08rem .32rem; font-size: .86em; }
pre.code { background: #0a0908; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: .78rem; line-height: 1.6; color: #d7cbaf; margin: 12px 0 26px; white-space: pre; }

/* mobile: the demonstration has to be on the opening screen, not below it */
@media (max-width: 800px) {
  .product-hero { padding-top: 4.4rem; }
  .cta-row { display: none; }
  .hero-sub { font-size: .96rem; margin: 14px 0 0; }
  .hero-copy h1, .hero-copy .hero-title { margin-top: 10px; }
  .badge { white-space: nowrap; font-size: .68rem; padding-inline: .7rem; }
  .proof-strip { margin-top: 14px; gap: 4px 10px; }
  .demo-examples { gap: .4rem; }
}

/* Round 2 measurement at 390px: the recorded answer started at y=829 in an 844px
   viewport, i.e. the phone still opened on an empty input, and the menu button was
   a 30px tap target. Inside the card the example now comes first, and the headline
   is capped to two lines on narrow screens. */
@media (max-width: 800px) {
  .hero-demo { display: flex; flex-direction: column; }
  .demo-example-answer { order: -1; margin-top: 0; padding-top: 0; border-top: 0; }
  .demo-example-answer + .demo-form, .demo-form { margin-top: 14px; }
  .hero-title, .product-headline { font-size: clamp(1.85rem, 7.4vw, 2.3rem); }
  .hero-sub { font-size: .95rem; line-height: 1.55; margin-top: 12px; }
  .mobile-menu-toggle { min-height: 44px; padding: .6rem .9rem; }
  .lang-btn { min-height: 36px; }
  .demo-disclosure { font-size: .84rem; }
}

/* Round 3: header touched both viewport edges, the API link was default blue on
   dark, the quoted passage was centred and italic, and the evidence sat below a
   stack of chips and disclaimers. */
.nav-content { padding-inline: clamp(14px, 4vw, 44px); }
.demo-example-link a, .demo-source-example a, .api-list a, table.spec a { color: #f2c96b; text-decoration: underline; text-underline-offset: 3px; }
.demo-example-link a:hover { color: #ffe6b0; }
.demo-example-answer { order: -1; }
.hero-demo .demo-example-answer { border-top: 0; margin-top: 0; padding-top: 0; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.demo-evidence { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; letter-spacing: .02em; color: #a99b83; }
.demo-evidence span { border: 1px solid rgba(255, 255, 255, .12); border-radius: 4px; padding: 2px 6px; }
.hero-demo, .hero-demo .preview-question, .hero-demo .recorded-answer, .hero-demo .demo-source-example, .hero-demo .demo-quote, .hero-demo .demo-example-label, .hero-demo .demo-example-link { text-align: start; }
.demo-quote { font-style: normal; }
@media (max-width: 800px) {
  .product-hero { padding-top: 5.2rem; }
  .proof-strip { flex-direction: column; gap: 3px; }
  .proof-strip li + li::before { content: none; margin: 0; }
}

/* The card was only a flex container on phones, so the evidence-first order
   applied there and not at desktop; and the endpoint-evidence line, left at
   default order, fell below the fold. Both are ordered explicitly now. */
.hero-demo { display: flex; flex-direction: column; }
.hero-demo .demo-example-answer { order: -2; }
.hero-demo .demo-evidence { order: -3; }

/* The endpoint-evidence row wrapped into three lines on phones and pushed the
   quoted passage past the fold; the header gap was then widened too far. One
   scrollable line, tighter hero spacing, and the passage is on screen again. */
@media (max-width: 800px) {
  .product-hero { padding-top: 4.6rem; }
  .hero-copy .hero-sub { margin-top: 10px; }
  .proof-strip { margin-top: 10px; }
  .demo-evidence { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 8px; }
  .demo-evidence::-webkit-scrollbar { display: none; }
  .demo-evidence span { flex: 0 0 auto; }
  .hero-demo { padding: 16px; }
}