/* ============================================================
   راوی — Landing (Otter-benchmarked)
   Builds on styles.css; adds landing-specific layout & mockups.
   ============================================================ */

/* Display font hook — when user drops Ravi.woff2 into fonts/, it's live */
@font-face{
  font-family:'Ravi';
  src:url('fonts/Ravi.woff2') format('woff2'), url('fonts/Ravi.ttf') format('truetype'), url('fonts/Ravi.otf') format('opentype');
  font-weight:400 800;
  font-display:swap;
}
:root{
  --display:'Ravi', 'Vazirmatn', system-ui, sans-serif;
}

/* ---------- ambient blobs (decorative only) ---------- */
.amb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(40px);opacity:.9;z-index:0;}
.amb-lav{background:radial-gradient(closest-side,var(--lav) 0%,rgba(236,231,251,0) 72%);}
.amb-blush{background:radial-gradient(closest-side,var(--blush) 0%,rgba(251,234,241,0) 72%);}
.amb-sky{background:radial-gradient(closest-side,var(--sky) 0%,rgba(231,240,253,0) 72%);}

/* hand-drawn wavy connector */
.wavy{display:block;width:100%;height:54px;color:var(--blue-200);opacity:.55;}

/* ---------- nav refinement ---------- */
.nav .brand .word{font-size:24px;}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-cta .login{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;}
.nav-cta .login:hover{color:var(--blue);}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:#fff;padding:0;}
.hero .ambient{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.hero .ambient .amb-lav{width:900px;height:900px;top:-300px;right:-220px;}
.hero .ambient .amb-blush{width:680px;height:680px;top:160px;left:-180px;}
.hero .ambient .amb-sky{width:520px;height:520px;bottom:-220px;right:35%;}
.hero .wrap{position:relative;z-index:1;padding-block:80px 110px;text-align:start;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
.hero-copy h1{font-family:var(--display);font-size:66px;font-weight:600;line-height:1.08;letter-spacing:-.03em;margin:22px 0 22px;max-width:none;text-wrap:balance;}
.hero-copy h1 .em{color:var(--blue);}
.hero-copy .sub{font-size:21px;color:var(--body);line-height:1.65;max-width:520px;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--blue);background:var(--blue-50);padding:7px 14px;border-radius:var(--r-pill);white-space:nowrap;}
.hero-cta{margin-top:36px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.hero-trust{margin-top:22px;font-size:14.5px;color:var(--muted);display:flex;align-items:center;gap:8px;}
.hero-trust svg{color:var(--success);}

/* ---------- live transcript mockup ---------- */
.mockup{position:relative;border-radius:24px;background:#fff;box-shadow:0 30px 80px rgba(19,21,27,.14), 0 8px 24px rgba(19,21,27,.06);border:1px solid var(--line);overflow:hidden;}
.mockup-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line);background:linear-gradient(to bottom,#FCFCFE,#fff);}
.mockup-head .title{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;white-space:nowrap;}
.mockup-head .title .dot{width:8px;height:8px;border-radius:50%;background:#D83A3A;animation:pulse 1.4s ease-in-out infinite;}
.mockup-head .meta{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--muted);direction:ltr;white-space:nowrap;}
.mockup-body{padding:18px 22px 22px;}
.mockup-wave{display:flex;align-items:center;gap:3px;height:30px;margin-bottom:14px;}
.mockup-wave span{flex:1;background:var(--blue-200);border-radius:3px;animation:bar 1.2s ease-in-out infinite;}
.mockup-wave span:nth-child(2){background:var(--blue-400);animation-delay:.1s;}
.mockup-wave span:nth-child(3){background:var(--blue);animation-delay:.2s;}
.mockup-wave span:nth-child(4){background:var(--blue-400);animation-delay:.3s;}
.mockup-wave span:nth-child(5){background:var(--blue-200);animation-delay:.4s;}
.mockup-wave span:nth-child(6){background:var(--blue);animation-delay:.5s;}
.mockup-wave span:nth-child(7){background:var(--blue-400);animation-delay:.6s;}
.mockup-wave span:nth-child(8){background:var(--blue-200);animation-delay:.7s;}
.mockup-wave span:nth-child(9){background:var(--blue);animation-delay:.8s;}
.mockup-wave span:nth-child(10){background:var(--blue-400);animation-delay:.9s;}
.mockup-wave span:nth-child(11){background:var(--blue-200);animation-delay:1s;}
.mockup-wave span:nth-child(12){background:var(--blue-400);animation-delay:1.1s;}
@keyframes bar{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.mockup-line{display:flex;gap:12px;padding:10px 0;}
.mockup-line + .mockup-line{border-top:1px solid var(--line);}
.mockup-line .av{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;font-size:13px;}
.mockup-line .who{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;}
.mockup-line .who .ts{font-size:11.5px;color:var(--muted);font-family:ui-monospace,monospace;font-weight:400;direction:ltr;}
.mockup-line .said{font-size:14px;color:var(--ink-2);margin-top:2px;line-height:1.5;}
.mockup-line .said .cursor{display:inline-block;width:2px;height:14px;background:var(--blue);margin-right:3px;vertical-align:middle;animation:blink 1s steps(2,end) infinite;}
@keyframes blink{50%{opacity:0}}
.mockup-summary{margin-top:14px;background:var(--blue-50);border:1px solid var(--blue-200);border-radius:14px;padding:14px 16px;}
.mockup-summary .lbl{font-weight:600;color:var(--blue-600);font-size:12.5px;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.mockup-summary p{font-size:13.5px;color:var(--ink-2);line-height:1.6;}

/* ---------- integration strip ---------- */
.platforms{padding-block:48px 56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;}
.platforms .wrap{display:flex;align-items:center;justify-content:center;gap:36px;flex-wrap:wrap;}
.platforms .lbl{font-size:14.5px;color:var(--muted);font-weight:500;}
.plat{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--ink-2);}
.plat svg{width:22px;height:22px;color:var(--blue);}

/* ---------- big feature row (alternating) ---------- */
.feature{position:relative;padding-block:120px;overflow:hidden;}
.feature .wrap{position:relative;z-index:1;}
.feature.bg-paper{background:var(--paper);}
.feature .ambient{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.feature.flip .feature-grid{direction:ltr;}
.feature.flip .feature-grid > *{direction:rtl;}
.feature-copy .eyebrow{margin-bottom:16px;}
.feature-copy h2{font-family:var(--display);font-size:52px;font-weight:600;line-height:1.1;letter-spacing:-.025em;margin-bottom:20px;}
.feature-copy .lead{font-size:19px;color:var(--body);line-height:1.7;}
.feature-copy ul{margin-top:24px;list-style:none;padding:0;display:flex;flex-direction:column;gap:13px;}
.feature-copy li{display:flex;gap:11px;align-items:flex-start;font-size:16px;color:var(--ink-2);}
.feature-copy li svg{flex:none;width:22px;height:22px;color:var(--blue);background:var(--blue-50);border-radius:50%;padding:4px;}

/* ---------- chat mockup ---------- */
.chat-mock{padding:22px;}
.chat-head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px;}
.chat-head .ic{width:36px;height:36px;border-radius:10px;background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;}
.chat-head .ti{font-weight:600;font-size:15px;}
.chat-head .st{font-size:12.5px;color:var(--muted);}
.bubble{padding:13px 16px;border-radius:18px;font-size:14.5px;line-height:1.55;max-width:80%;}
.bubble.q{background:var(--paper);color:var(--ink-2);align-self:flex-start;border-bottom-left-radius:6px;margin-bottom:14px;}
.bubble.a{background:var(--blue);color:#fff;align-self:flex-end;margin-right:auto;border-bottom-right-radius:6px;margin-bottom:14px;display:flex;align-items:flex-start;gap:8px;}
.bubble.a .sparkle{font-size:14px;}
.chat-body{display:flex;flex-direction:column;}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.chat-chip{font-size:13px;border:1px solid var(--blue-200);color:var(--blue);background:#fff;padding:7px 12px;border-radius:var(--r-pill);cursor:pointer;}
.chat-input{margin-top:16px;display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);}
.chat-input input{flex:1;border:none;outline:none;background:transparent;font-family:var(--sans);font-size:14px;color:var(--ink);}
.chat-input button{width:36px;height:36px;border-radius:10px;background:var(--blue);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;}

/* ---------- feature grid (small features) ---------- */
.small-features{padding-block:120px;}
.sf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.sf-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;transition:transform .25s ease, box-shadow .25s, border-color .25s;}
.sf-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:transparent;}
.sf-card .icon-box{width:46px;height:46px;border-radius:12px;background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.sf-card h3{font-size:21px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em;}
.sf-card p{color:var(--body);font-size:15.5px;line-height:1.65;}

/* ---------- use cases ---------- */
.usecases{padding-block:120px;background:var(--paper);position:relative;overflow:hidden;}
.uc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.uc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:36px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;transition:transform .25s, box-shadow .25s;}
.uc-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);}
.uc-card .uc-head{display:flex;align-items:center;gap:14px;}
.uc-card .uc-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;}
.uc-card h3{font-size:22px;font-weight:600;}
.uc-card p{color:var(--body);font-size:15.5px;line-height:1.7;}
.uc-card .uc-list{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.uc-card .uc-list span{font-size:14.5px;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start;}
.uc-card .uc-list svg{flex:none;width:18px;height:18px;color:var(--blue);margin-top:3px;}

/* ---------- faq ---------- */
.faq{padding-block:120px;}
.faq-list{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:14px;}
.qa{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s, box-shadow .2s;}
.qa[open]{border-color:var(--blue-200);box-shadow:var(--sh-sm);}
.qa summary{padding:22px 26px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:17px;font-weight:600;color:var(--ink);list-style:none;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary .ic{width:30px;height:30px;border-radius:50%;background:var(--blue-50);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .3s;}
.qa[open] summary .ic{transform:rotate(45deg);background:var(--blue);color:#fff;}
.qa .a{padding:0 26px 24px;color:var(--body);font-size:15.5px;line-height:1.75;}

/* ---------- big CTA ---------- */
.cta{position:relative;padding-block:120px;overflow:hidden;text-align:center;background:#fff;}
.cta .ambient{position:absolute;inset:0;z-index:0;overflow:hidden;}
.cta .ambient .amb-lav{width:760px;height:760px;left:50%;top:-180px;transform:translateX(-50%);}
.cta .ambient .amb-blush{width:520px;height:520px;left:5%;top:40%;}
.cta .ambient .amb-sky{width:560px;height:560px;right:5%;top:30%;}
.cta .wrap{position:relative;z-index:1;}
.cta h2{font-family:var(--display);font-size:64px;font-weight:600;line-height:1.1;letter-spacing:-.025em;margin-bottom:18px;max-width:18ch;margin-inline:auto;}
.cta p{font-size:20px;color:var(--body);max-width:520px;margin:0 auto 36px;line-height:1.6;}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------- footer ---------- */
.footer{background:var(--paper);border-top:1px solid var(--line);padding:72px 0 32px;color:var(--body);font-size:14.5px;}
.footer .footer-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:48px;margin-bottom:48px;}
.footer .brand{margin-bottom:18px;}
.footer .footer-about{font-size:15px;color:var(--body);line-height:1.7;max-width:340px;margin-bottom:22px;}
.footer-col h4{font-size:14px;font-weight:600;color:var(--ink);text-transform:uppercase;letter-spacing:.08em;margin-bottom:18px;}
.footer-col a{display:block;color:var(--body);text-decoration:none;padding:5px 0;transition:color .15s;}
.footer-col a:hover{color:var(--blue);}
.footer-bottom{padding-top:28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13.5px;}
.footer-social{display:flex;gap:12px;}
.footer-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--body);transition:color .15s, border-color .15s;}
.footer-social a:hover{color:var(--blue);border-color:var(--blue);}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1;transform:none;}
.d1{transition-delay:.08s;} .d2{transition-delay:.16s;} .d3{transition-delay:.24s;} .d4{transition-delay:.32s;}

/* ---------- responsive ---------- */
@media(max-width:840px){
  .hero-grid,.feature-grid{grid-template-columns:1fr;gap:50px;}
  .hero-copy h1{font-size:50px;}
  .feature-copy h2{font-size:36px;}
  .cta h2{font-size:42px;}
  .sf-grid{grid-template-columns:1fr;}
  .uc-grid{grid-template-columns:1fr;}
  .footer .footer-top{grid-template-columns:1fr 1fr;}
  .platforms .wrap{gap:20px;}
}