/* Deltalk landing — fonts, design-system tokens (colours live in colors.css), the six DS
   components the page mounts (Button, IconButton, VerificationBadge, ChatBubble,
   TypingIndicator, VoicePlayer) and the page's own rules. Source: «Deltalk Landing.dc.html». */

/* ── fonts: the app's IRANSans Mobile, self-hosted ── */
@font-face{font-family:'IRANSansMobile';src:url(../fonts/iransans_regular.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IRANSansMobile';src:url(../fonts/iransans_medium.ttf) format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IRANSansMobile';src:url(../fonts/iransans_bold.ttf) format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IRANSansMobile';src:url(../fonts/iransans_black.ttf) format('truetype');font-weight:900;font-style:normal;font-display:swap}

/* ── tokens: typography · spacing · sizes · radii · shadows · motion ── */
:root{
  --font-display:'IRANSansMobile',system-ui,sans-serif;
  --font-sans:'IRANSansMobile',system-ui,-apple-system,sans-serif;
  --font-persian:'IRANSansMobile',system-ui,sans-serif;
  --font-latin:'Hanken Grotesk',system-ui,sans-serif;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
  --text-display-xl:4.5rem;--text-display-lg:3.375rem;--text-display-md:2.5rem;
  --text-h1:2rem;--text-h2:1.5rem;--text-h3:1.25rem;--text-body-lg:1.125rem;--text-body:1rem;
  --text-body-sm:.9375rem;--text-caption:.8125rem;--text-micro:.6875rem;
  --lh-tight:1.3;--lh-snug:1.45;--lh-normal:1.75;--lh-relaxed:1.9;
  --ls-tight:0;--ls-snug:0;--ls-normal:0;--ls-wide:0;--ls-overline:0;

  --space-0:0;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;
  --space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;
  --gutter-screen:var(--space-5);--gap-section:var(--space-6);--pad-card:var(--space-4);--gap-card:var(--space-3);
  --gap-stack:var(--space-4);--gap-inline:var(--space-2);--gap-row-media:var(--space-3);
  --touch-min:48px;--control-h-button:52px;--control-h-input:48px;
  --pad-pill-x:11px;--pad-control-x:18px;--pad-bubble:10px 14px;--pad-banner:14px 16px;--gap-tight:5px;--border-focus-w:2px;

  --size-8:8px;--size-12:12px;--size-16:16px;--size-20:20px;--size-24:24px;--size-28:28px;--size-32:32px;--size-36:36px;
  --size-40:40px;--size-44:44px;--size-48:48px;--size-52:52px;--size-56:56px;--size-60:60px;--size-64:64px;--size-72:72px;
  --size-76:76px;--size-112:112px;--width-voice-min:220px;--width-voice-max:300px;--width-bubble-media:240px;
  --radius-bubble-image:18px;--radius-bubble-quote:12px;

  --radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-2xl:36px;--radius-pill:999px;
  --radius-input:12px;--radius-button:16px;--radius-card:20px;--radius-sheet:28px;--radius-chip:999px;--radius-hairline:2px;
  --radius-bubble:22px;--radius-bubble-tail:6px;
  --radius-bubble-sent:var(--radius-bubble) var(--radius-bubble) var(--radius-bubble-tail) var(--radius-bubble);
  --radius-bubble-received:var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) var(--radius-bubble-tail);

  --shadow-xs:0 1px 2px rgba(26,22,38,.05);--shadow-sm:0 2px 8px rgba(26,22,38,.06);--shadow-md:0 6px 20px rgba(26,22,38,.08);
  --shadow-lg:0 16px 40px rgba(26,22,38,.12);--shadow-xl:0 28px 64px rgba(26,22,38,.16);
  --glow-warm:0 8px 24px color-mix(in srgb,var(--accent) 28%,transparent);
  --glow-cool:0 8px 24px color-mix(in srgb,var(--conversation-active) 24%,transparent);
  --shadow-on-photo:0 2px 10px rgba(0,0,0,.5);
  --ring:0 0 0 3px color-mix(in srgb,var(--focus-ring) 35%,transparent);

  --dur-fast:140ms;--dur-base:240ms;--dur-slow:420ms;--dur-unfold:560ms;
  --ease-standard:cubic-bezier(.2,0,0,1);--ease-out-soft:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.45,0,.15,1);--ease-gentle-over:cubic-bezier(.34,1.4,.64,1);
  --press-scale:.97;--hover-lift:-2px;
}
[dir="rtl"]{
  --radius-bubble-sent:var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) var(--radius-bubble-tail);
  --radius-bubble-received:var(--radius-bubble) var(--radius-bubble) var(--radius-bubble-tail) var(--radius-bubble);
}
@keyframes dt-typing{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@keyframes dt-unfold{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html{direction:rtl}
html,body{margin:0;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-body);
  line-height:var(--lh-normal);letter-spacing:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.page{position:relative;min-height:100vh;background:var(--bg);color:var(--text-primary);overflow-x:clip}
h1,h2,h3,h4{font-family:var(--font-sans);font-weight:var(--fw-semibold);line-height:var(--lh-snug);letter-spacing:0;margin:0}
a{color:var(--accent-tint-fg);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-primary)}
::selection{background:var(--warm-100);color:var(--ink)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-xs)}
[dir="rtl"] [data-dir-icon]{transform:scaleX(-1)}
img{display:block}

/* ── DS · Button ── */
.dt-btn{--_bg:var(--action-primary);--_fg:var(--text-on-warm);--_press:var(--action-primary-press);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--gap-inline);
  font-family:var(--font-sans);font-weight:var(--fw-semibold);letter-spacing:var(--ls-snug);
  border:none;cursor:pointer;border-radius:var(--radius-button);color:var(--_fg);background:var(--_bg);
  transition:transform var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);
  white-space:nowrap;text-decoration:none;flex-shrink:0}
.dt-btn:hover{background:var(--_press);color:var(--_fg)}
.dt-btn:active{transform:scale(var(--press-scale))}
.dt-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.dt-btn[disabled]{opacity:.45;pointer-events:none}
.dt-btn--sm{height:var(--size-40);padding:0 var(--space-4);font-size:var(--text-body-sm);position:relative}
.dt-btn--sm::after{content:"";position:absolute;top:50%;left:50%;width:100%;height:var(--size-48);transform:translate(-50%,-50%)}
.dt-btn--md{height:var(--size-48);padding:0 var(--space-6);font-size:var(--text-body)}
.dt-btn--lg{height:var(--size-56);padding:0 var(--space-8);font-size:var(--text-body-lg)}
.dt-btn--primary{--_bg:var(--action-cta);--_fg:var(--text-on-cta);--_press:var(--action-cta-press)}
.dt-btn--gradient{background:var(--gradient-brand);--_fg:var(--text-on-brand);color:var(--text-on-brand);box-shadow:var(--shadow-md)}
.dt-btn--gradient:hover{filter:brightness(1.04)}
.dt-btn--secondary{--_bg:var(--surface-card);--_fg:var(--action-primary);box-shadow:inset 0 0 0 1px var(--border-control)}
.dt-btn--secondary:hover{--_bg:var(--warm-50);background:var(--warm-50)}
.dt-btn--secondary:focus-visible{box-shadow:inset 0 0 0 1px var(--border-control),var(--ring)}
.dt-btn--ghost{--_bg:transparent;--_fg:var(--text-primary)}
.dt-btn--ghost:hover{background:var(--hover-veil)}
.dt-btn--block{width:100%}

/* ── DS · IconButton ── */
.dt-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;position:relative;
  border-radius:var(--radius-button);background:transparent;color:var(--text-primary);padding:0;font:inherit;
  transition:transform var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.dt-iconbtn:hover{background:var(--hover-veil)}
.dt-iconbtn:active{transform:scale(var(--press-scale))}
.dt-iconbtn:focus-visible{outline:none;box-shadow:var(--ring)}
.dt-iconbtn--square{border-radius:var(--radius-button)}
.dt-iconbtn--circle{border-radius:var(--radius-pill)}
.dt-iconbtn--36{width:var(--size-36);height:var(--size-36)}
.dt-iconbtn--40{width:var(--size-40);height:var(--size-40)}
.dt-iconbtn--48{width:var(--size-48);height:var(--size-48)}
.dt-iconbtn--52{width:var(--size-52);height:var(--size-52)}
.dt-iconbtn--36::after,.dt-iconbtn--40::after{content:'';position:absolute;top:50%;left:50%;width:var(--size-48);height:var(--size-48);transform:translate(-50%,-50%)}

/* ── DS · VerificationBadge ── */
.dt-verif{--_h:var(--size-28);--_pad:12px;--_icon:18px;--_gap:4px;--_fs:var(--text-caption);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--_gap);
  height:var(--_h);padding:0 var(--_pad);box-sizing:border-box;
  font-family:var(--font-sans);font-weight:var(--fw-medium);font-size:var(--_fs);line-height:1;white-space:nowrap;
  background:var(--surface-well);color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--border);border-radius:var(--radius-chip)}
.dt-verif__mark{display:inline-flex;flex-shrink:0}
.dt-verif__mark svg{width:var(--_icon);height:var(--_icon);display:block}
.dt-verif--lg{--_h:var(--size-28);--_pad:12px;--_icon:18px;--_gap:4px;--_fs:var(--text-caption)}
.dt-verif--sm{--_h:var(--size-20);--_pad:var(--space-2);--_icon:14px;--_gap:3px;--_fs:var(--text-micro)}
.dt-verif--mini{--_h:var(--size-24);--_pad:0;--_icon:24px;--_gap:0;width:var(--_h)}
.dt-verif--onphoto{background:var(--ink-fixed);color:var(--on-ink-fixed);box-shadow:inset 0 0 0 1px var(--ink-fixed-edge),var(--shadow-on-photo)}
.dt-verif--mini-bare{background:none;box-shadow:none}

/* ── DS · ChatBubble ── */
.dt-msg{display:flex;margin-bottom:var(--space-2)}
.dt-msg--sent{justify-content:flex-end}
.dt-msg--received{justify-content:flex-start}
.dt-msg__col{display:flex;flex-direction:column;max-width:78%;gap:2px}
.dt-msg--sent .dt-msg__col{align-items:flex-end}
.dt-msg--received .dt-msg__col{align-items:flex-start}
.dt-msg__bubble{padding:var(--pad-bubble);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--lh-normal);
  word-break:break-word;position:relative;animation:dt-unfold var(--dur-base) var(--ease-out-soft)}
.dt-msg--sent .dt-msg__bubble{background:var(--bubble-sent-fill);color:var(--bubble-sent-on-fill);border-radius:var(--radius-bubble-sent)}
.dt-msg--received .dt-msg__bubble{background:var(--bubble-received-fill);color:var(--bubble-received-on-fill);border-radius:var(--radius-bubble-received);box-shadow:var(--shadow-sm);border:1px solid var(--border-subtle)}
.dt-msg__meta{display:flex;align-items:center;gap:var(--gap-tight);font-size:var(--text-micro);color:var(--bubble-timestamp);padding:0 4px;font-variant-numeric:tabular-nums}
.dt-msg__tick{display:inline-flex}
.dt-msg__tick--read{color:var(--bubble-status-read)}
/* the landing's glass bubbles over the hero art */
.dt-msg--glass .dt-msg__bubble{background:var(--on-media-plate)!important;color:var(--on-media-ink)!important;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border:1px solid color-mix(in srgb,var(--bg) 60%,transparent)!important;box-shadow:var(--shadow-lg)!important}

/* ── DS · TypingIndicator ── */
.dt-typing{display:flex;justify-content:flex-start;margin-bottom:var(--space-2)}
.dt-typing__bubble{display:inline-flex;align-items:center;gap:6px;padding:14px 16px;background:var(--surface-card);
  border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);border-radius:var(--radius-bubble-received);animation:dt-unfold var(--dur-base) var(--ease-out-soft)}
.dt-typing__dot{width:9px;height:9px;border-radius:50%;background:var(--other-person);animation:dt-typing 1.4s var(--ease-in-out) infinite}

/* ── DS · VoicePlayer ── */
.dt-vplayer{display:inline-flex;align-items:center;gap:12px;padding:var(--pad-bubble);border-radius:var(--radius-bubble);min-width:var(--width-voice-min);max-width:var(--width-voice-max);font-family:var(--font-sans)}
.dt-vplayer--received{background:var(--surface-card);color:var(--text-primary);box-shadow:var(--shadow-sm);border:1px solid var(--border-subtle);border-radius:var(--radius-bubble-received)}
.dt-vplayer__btn{flex-shrink:0}
.dt-vplayer--received .dt-vplayer__btn{background:var(--action-primary);color:var(--text-on-warm)}
.dt-vplayer__btn svg{width:20px;height:20px;position:relative}
.dt-vplayer__main{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.dt-vplayer__wave{display:flex;align-items:center;gap:2.5px;height:26px;cursor:pointer}
.dt-vplayer__wave i{flex:1;border-radius:var(--radius-hairline);transition:background var(--dur-fast);min-width:2px}
.dt-vplayer--received .dt-vplayer__wave i{background:var(--border-strong)}
.dt-vplayer--received .dt-vplayer__wave i.on{background:var(--action-primary)}
.dt-vplayer__time{font-size:var(--text-micro);font-variant-numeric:tabular-nums;opacity:.85}

/* ── glyph shells: `.g` = the DS stroke factory, `.gf` = a filled symbol ── */
svg.g{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;flex-shrink:0}
svg.gf{fill:currentColor;display:block;flex-shrink:0}

/* ── theme-paired artwork ── */
[data-theme="dark"] .lt{display:none!important}
:root:not([data-theme="dark"]) .dk{display:none!important}

/* ── header ── */
:root{--hd-px:20px;--hd-h:76px;--hd-gap:24px}
.hd{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}
.hd__in{max-width:1180px;margin:0 auto;padding:0 var(--hd-px);height:var(--hd-h);display:flex;align-items:center;justify-content:space-between;gap:var(--hd-gap)}
.nav{display:none;align-items:stretch;align-self:stretch;gap:28px;font-size:15px}
.nav a{display:flex;align-items:center;color:var(--text-secondary);font-weight:500;box-shadow:inset 0 0 0 transparent;transition:color .25s var(--ease-standard),box-shadow .25s var(--ease-standard)}
.nav a:hover{color:var(--text-primary)}
.nav a[aria-current="true"]{color:var(--text-primary);font-weight:700;box-shadow:inset 0 -2px 0 var(--accent)}

/* ── hero ── */
.hero-copy{flex:1 1 440px;max-width:560px;display:flex;flex-direction:column;gap:28px;align-items:stretch;text-align:start}
.hero-badge{align-self:flex-start}
.cta-row{align-self:stretch;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;gap:12px}
.hero-checks{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px 22px;font-size:14px;color:var(--text-secondary)}
.hero-checks span{display:inline-flex;align-items:center;gap:6px}
.hero-checks span>span{display:inline-flex;color:var(--success-text)}

/* ── feature tour ── */
.tour{max-width:1180px;margin:0 auto;padding:0 20px clamp(48px,8vw,96px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0}
.phone{position:sticky;z-index:3;align-self:stretch;flex:0 0 auto;margin-top:0;background:var(--surface-well)}
.phone-fade{display:block;position:absolute;left:0;right:0;top:100%;height:32px;background:linear-gradient(var(--surface-well),transparent);pointer-events:none}
.ph-in{position:absolute;width:520px;height:680px;transform-origin:0 0}
.scr{position:absolute;inset:0;pointer-events:none;transition:opacity .6s var(--ease-standard),transform .6s var(--ease-standard);opacity:0;transform:translateY(18px) scale(.97)}
.pop{opacity:0;transform:translateY(16px) scale(.94)}
.ph-photo{position:absolute;left:110px;top:40px;width:300px;height:600px;border-radius:36px;overflow:hidden;background:var(--surface-well);box-shadow:var(--shadow-xl)}
.ph-photo img{width:100%;height:100%;display:block;object-fit:cover}
.scrim{position:absolute;inset:0;background:var(--gradient-media-scrim)}
.ph-name{position:absolute;bottom:22px;right:22px;left:22px;display:flex;flex-direction:column;gap:4px;color:var(--on-ink-fixed)}
.ph-name>div{display:flex;align-items:center;gap:8px}
.card{background:var(--surface-card);color:var(--text-primary);border:1px solid var(--border);box-shadow:var(--shadow-xl);box-sizing:border-box}
.v-top{top:240px}
.steps{flex:0 1 480px;min-width:0;position:relative;z-index:2;display:flex;flex-direction:column}
.step{min-height:62vh;display:flex;align-items:center;justify-content:center;padding:24px 0}
.step>div{max-width:480px;display:flex;flex-direction:column;align-items:flex-start;text-align:start;gap:14px;padding:0 4px;border-radius:var(--radius-card);background:transparent;box-shadow:none;transition:opacity .5s var(--ease-standard);opacity:.3}
.step h3{margin:0;font-weight:900;font-size:clamp(26px,3vw,38px);line-height:1.4;text-wrap:balance}
.step p{margin:0;font-size:17px;line-height:1.9;color:var(--text-secondary);text-wrap:pretty}
.step .n{font-size:14px;font-weight:700;color:var(--accent-tint-fg)}
.is-wide .tour{flex-direction:row;gap:72px}
.is-wide .phone{z-index:1;align-self:flex-start;background:transparent}
.is-wide .phone-fade{display:none}
.is-wide .v-top{top:100px}
.is-wide .step{min-height:88vh}
.is-wide .step>div{padding:0}

/* ── shared section bits ── */
.pill{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:var(--accent-tint);color:var(--accent-tint-fg);font-size:14px;font-weight:700}
.sec-head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.h2{margin:0;font-weight:900;font-size:clamp(30px,4vw,48px);line-height:1.4;text-wrap:balance}
.lead{margin:0;font-size:17px;line-height:1.9;color:var(--text-secondary);text-wrap:pretty}
.disc{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}

/* ── safety ── */
:root{--vb-d:96px;--vb-o:-28px;--vb-s:4}
.safety-float{display:flex}
.safety-float-mob{display:none}

/* ── plus ── */
.plus-rows{display:none}
.plus-grid{display:grid}

/* ── reviews ── */
.rev-arrow{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:1px solid var(--border);background:var(--surface-card);color:var(--text-primary);display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);padding:0}
.rev-arrow:hover{background:var(--hover-veil)}
.rev-track{flex:1;min-width:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(100%,300px),calc((100% - 40px) / 3));gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 12px}
.rev-track::-webkit-scrollbar{display:none}
.rev-dots{display:none;justify-content:center;margin-top:-32px}
.rev-dot{width:24px;height:44px;border:none;background:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.rev-dot span{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--border-control);transition:background var(--dur-fast) var(--ease-standard)}
.rev-dot[aria-current="true"] span{background:var(--text-primary)}

/* ── faq ── */
.faq-q{all:unset;box-sizing:border-box;width:100%;min-height:64px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font-size:17px;font-weight:700;color:var(--text-primary);text-align:start}
.faq-q:focus-visible{box-shadow:var(--ring)}
.faq-ic{flex:0 0 auto;display:inline-flex;color:var(--text-secondary);transition:transform .3s var(--ease-standard)}
.faq-q[aria-expanded="true"] .faq-ic{transform:rotate(45deg)}
.faq-a{display:grid;transition:grid-template-rows .35s var(--ease-standard);grid-template-rows:0fr}
.faq-q[aria-expanded="true"]+.faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 22px 22px;font-size:16px;line-height:1.95;color:var(--text-secondary);text-wrap:pretty}

/* ── final cta · footer ── */
.cta-final{position:relative;align-self:auto;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center;gap:12px}
.ft__in{max-width:1180px;margin:0 auto;padding:32px 20px;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:space-between;gap:20px}
.ft a{color:var(--text-secondary)}
.ft a:hover{color:var(--text-primary)}

/* ── breakpoints: `mob` < 640 · `wide` ≥ 900 · review arrows 640–1115 ── */
@media (min-width:900px){.nav{display:flex}}
@media (min-width:640px) and (max-width:1115px){.rev-arrow{display:inline-flex}}
@media (max-width:639px){
  :root{--hd-px:16px;--hd-h:64px;--hd-gap:12px;--vb-d:60px;--vb-o:-16px;--vb-s:2.5}
  .hero-copy{align-items:center;text-align:center}
  .hero-badge{align-self:center}
  .cta-row{flex-direction:column;align-items:stretch}
  .hero-checks{justify-content:center}
  .mb{width:100%}
  .safety-float{display:none}
  .safety-float-mob{display:flex}
  .plus-rows{display:flex}
  .plus-grid{display:none}
  .rev-track{grid-auto-columns:84%;gap:12px}
  .rev-dots{display:flex}
  .cta-final{align-self:stretch;flex-direction:column;align-items:stretch}
  .ft__in{flex-direction:column}
}