/* =========================================================
   فريق مسيو — Mesue Team
   site.css — Redesigned 2026
   ========================================================= */

/* === Fonts === */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-400-arabic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-700-arabic.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* === Design Tokens === */
:root {
  --clr-brand:        #1B1F3B;
  --clr-accent:       #4F6EF7;
  --clr-accent-light: #EEF2FF;
  --clr-accent-glow:  rgba(79,110,247,.18);
  --clr-success:      #22C55E;
  --clr-warn:         #F97316;
  --clr-warn-light:   #FFF7ED;
  --clr-bg:           #F8FAFF;
  --clr-bg-alt:       #EEF2FF;
  --clr-white:        #FFFFFF;
  --clr-text:         #0F172A;
  --clr-text-muted:   #64748B;
  --clr-border:       #E2E8F0;
  --clr-border-light: #F1F5F9;

  --font-main: "IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  --text-xs:  .75rem; --text-sm:  .875rem; --text-base: 1rem;
  --text-lg:  1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.5rem; --text-5xl: 3.25rem;

  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.25rem;
  --sp-6:1.5rem;--sp-8:2rem;--sp-10:2.5rem;--sp-12:3rem;--sp-16:4rem;--sp-20:5rem;

  --r-sm:.375rem;--r-md:.75rem;--r-lg:1.25rem;--r-xl:2rem;--r-full:9999px;

  --shadow-sm:  0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:  0 4px 16px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
  --shadow-lg:  0 12px 40px rgba(15,23,42,.12), 0 4px 12px rgba(15,23,42,.07);
  --shadow-xl:  0 24px 60px rgba(15,23,42,.16);
  --shadow-accent: 0 8px 32px var(--clr-accent-glow);

  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast:150ms;--dur-med:250ms;--dur-slow:400ms;

  --max-w: 1180px;
  --header-h: 68px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-main);font-size:var(--text-lg);line-height:1.7;color:var(--clr-text);background:var(--clr-bg);direction:rtl;text-align:right;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none}

.skip{position:absolute;top:-100%;left:1rem;background:var(--clr-brand);color:#fff;padding:.5rem 1rem;border-radius:var(--r-sm);font-size:var(--text-sm);z-index:9999;transition:top var(--dur-fast)}
.skip:focus{top:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.wrap{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--sp-6)}
.center{text-align:center}
.start{text-align:start}

.ic{width:1.25em;height:1.25em;flex-shrink:0;vertical-align:middle}
.ic-xs{width:1em;height:1em}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:.7rem 1.6rem;border-radius:var(--r-full);font-size:var(--text-base);font-weight:700;line-height:1;text-align:center;white-space:nowrap;transition:all var(--dur-med) var(--ease);cursor:pointer;border:2px solid transparent;position:relative;overflow:hidden}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--clr-accent);color:#fff;border-color:var(--clr-accent);box-shadow:0 4px 20px var(--clr-accent-glow)}
.btn-primary:hover{background:#3d58e8;border-color:#3d58e8;box-shadow:0 8px 32px rgba(79,110,247,.35);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--clr-accent);border-color:var(--clr-accent)}
.btn-ghost:hover{background:var(--clr-accent-light);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--clr-brand);border-color:#fff;box-shadow:var(--shadow-md)}
.btn-light:hover{background:var(--clr-bg);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.8);transform:translateY(-2px)}
.btn-lg{padding:.95rem 2.2rem;font-size:var(--text-lg)}
.btn-sm{padding:.5rem 1.1rem;font-size:var(--text-sm)}

.tag{display:inline-flex;align-items:center;gap:.25rem;padding:.15rem .6rem;border-radius:var(--r-full);font-size:var(--text-xs);font-weight:700;line-height:1.4}
.tag-soon{background:var(--clr-warn-light);color:var(--clr-warn);border:1px solid rgba(249,115,22,.2)}
.badge{display:inline-flex;align-items:center;padding:.3rem .9rem;background:var(--clr-accent);color:#fff;border-radius:var(--r-full);font-size:var(--text-xs);font-weight:700;letter-spacing:.03em}

/* Prelaunch */
.prelaunch{background:linear-gradient(90deg,var(--clr-brand) 0%,#2d3265 100%);color:rgba(255,255,255,.9);font-size:var(--text-sm);text-align:center;padding:.55rem var(--sp-4);letter-spacing:.02em}
.prelaunch-inner{display:flex;align-items:center;justify-content:center;gap:var(--sp-3)}
.prelaunch-dot{width:7px;height:7px;border-radius:var(--r-full);background:var(--clr-warn);box-shadow:0 0 6px var(--clr-warn);display:inline-block;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* Header */
.site-header{position:sticky;top:0;z-index:100;height:var(--header-h);background:rgba(248,250,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--clr-border-light);transition:box-shadow var(--dur-med)}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.header-in{display:flex;align-items:center;justify-content:space-between;height:100%;gap:var(--sp-4)}
.brand{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt strong{font-size:var(--text-base);color:var(--clr-brand)}
.brand-txt small{font-size:var(--text-xs);color:var(--clr-text-muted);font-weight:400}
.brand-light .brand-txt strong,.brand-light .brand-txt small{color:rgba(255,255,255,.85)}
.nav{display:flex;align-items:center;gap:var(--sp-2)}
.nav ul{display:flex;align-items:center;gap:var(--sp-1)}
.nav ul a{display:block;padding:.4rem .75rem;border-radius:var(--r-sm);font-size:var(--text-sm);color:var(--clr-text-muted);font-weight:500;transition:color var(--dur-fast),background var(--dur-fast)}
.nav ul a:hover{color:var(--clr-text);background:var(--clr-border-light)}
.nav-cta{margin-inline-start:var(--sp-3)}
.nav-toggle{display:none;padding:.5rem;border-radius:var(--r-sm);color:var(--clr-text)}
.nav-toggle:hover{background:var(--clr-border-light)}

/* Sections */
.sec{padding-block:var(--sp-20)}
.sec-soft{background:var(--clr-bg-alt)}
.sec-h{font-size:clamp(var(--text-2xl),3.5vw,var(--text-4xl));font-weight:700;color:var(--clr-brand);line-height:1.25;text-align:center}
.sec-sub{margin-top:var(--sp-3);font-size:var(--text-lg);color:var(--clr-text-muted);max-width:600px;margin-inline:auto;text-align:center}
.sec-h.start,.sec-sub.start{text-align:start;margin-inline:0}

/* Hero */
.hero{min-height:calc(100vh - var(--header-h));display:flex;align-items:center;position:relative;overflow:hidden;padding-block:var(--sp-20);background:var(--clr-white)}
.hero::before{content:"";position:absolute;top:-30%;left:-10%;width:60%;height:120%;background:radial-gradient(ellipse,rgba(79,110,247,.07) 0%,transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-20%;right:-5%;width:45%;height:80%;background:radial-gradient(ellipse,rgba(34,197,94,.05) 0%,transparent 65%);pointer-events:none}
.hero-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16);align-items:center;position:relative;z-index:1}
.hero-copy{display:flex;flex-direction:column;gap:var(--sp-5)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);padding:.4rem 1rem;background:var(--clr-accent-light);color:var(--clr-accent);border-radius:var(--r-full);font-size:var(--text-sm);font-weight:700;width:fit-content;border:1px solid rgba(79,110,247,.2)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:var(--r-full);background:var(--clr-accent);box-shadow:0 0 8px var(--clr-accent);animation:blink 2.5s ease-in-out infinite}
h1{font-size:clamp(var(--text-3xl),4.5vw,var(--text-5xl));font-weight:700;line-height:1.22;color:var(--clr-brand)}
h1 .hl{color:var(--clr-accent);display:inline;position:relative}
.lead{font-size:var(--text-xl);color:var(--clr-text-muted);line-height:1.6}
.hero-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.hero-list li{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--text-base);color:var(--clr-text-muted);padding:var(--sp-3) var(--sp-4);background:var(--clr-bg);border-radius:var(--r-md);border:1px solid var(--clr-border);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.hero-list li:hover{border-color:var(--clr-accent);box-shadow:0 0 0 3px var(--clr-accent-glow)}
.hero-list li::before{content:"";width:8px;height:8px;border-radius:var(--r-full);background:var(--clr-accent);flex-shrink:0;margin-top:.5rem}
.hero-list li strong{color:var(--clr-brand);font-weight:700}
.hero-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.micro{font-size:var(--text-sm);color:var(--clr-text-muted);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}

/* Demo */
.demo{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
.demo-phone{background:var(--clr-white);border-radius:var(--r-xl);box-shadow:var(--shadow-xl),0 0 0 1px var(--clr-border);overflow:hidden;width:100%;max-width:380px;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.demo-top{background:var(--clr-brand);color:rgba(255,255,255,.9);font-size:var(--text-sm);font-weight:700;padding:var(--sp-3) var(--sp-5);display:flex;align-items:center;gap:var(--sp-2)}
.dot{width:10px;height:10px;border-radius:var(--r-full);background:var(--clr-success);box-shadow:0 0 8px var(--clr-success);display:inline-block;animation:blink 2s ease-in-out infinite}
.ai{font-size:var(--text-xs);background:var(--clr-accent);color:#fff;padding:.1rem .45rem;border-radius:var(--r-full);font-weight:700;letter-spacing:.05em}
.bubble{margin:var(--sp-4) var(--sp-5);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-lg);font-size:var(--text-sm);line-height:1.6}
.bubble-in{background:var(--clr-bg-alt);border:1px solid var(--clr-border);border-bottom-right-radius:var(--r-sm);animation:slideIn .6s var(--ease) both}
.bubble.small{font-size:var(--text-xs);color:var(--clr-text-muted)}
.bubble.delay{animation-delay:.5s}
@keyframes slideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.src{display:flex;align-items:center;gap:var(--sp-1);margin-top:var(--sp-2);font-size:var(--text-xs);color:var(--clr-text-muted);background:#fff;padding:.25rem .6rem;border-radius:var(--r-sm);border:1px solid var(--clr-border);width:fit-content}
.demo-actions{display:flex;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5) var(--sp-5)}
.da{flex:1;text-align:center;padding:.5rem;border-radius:var(--r-md);font-size:var(--text-sm);font-weight:700;cursor:pointer;transition:all var(--dur-fast);user-select:none}
.da.ok{background:rgba(34,197,94,.1);color:#16a34a}
.da.edit{background:rgba(79,110,247,.1);color:var(--clr-accent)}
.da.no{background:rgba(239,68,68,.1);color:#dc2626}
.da:hover{filter:brightness(.9);transform:scale(.97)}
figcaption{font-size:var(--text-xs);color:var(--clr-text-muted);text-align:center;display:flex;align-items:center;justify-content:center;gap:var(--sp-2)}

/* Social Proof Bar */
.proof-bar{background:var(--clr-brand);padding:var(--sp-8) 0}
.proof-bar-in{display:flex;align-items:center;justify-content:center;gap:var(--sp-12);flex-wrap:wrap}
.proof-item{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);color:#fff;text-align:center}
.proof-num{font-size:var(--text-3xl);font-weight:700;line-height:1}
.proof-label{font-size:var(--text-sm);color:rgba(255,255,255,.6);font-weight:500}
.proof-divider{width:1px;height:3rem;background:rgba(255,255,255,.15)}

/* Fear cards */
.fear-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-10)}
.fear-card{background:#fff;border:1px solid var(--clr-border);border-radius:var(--r-lg);padding:var(--sp-6);transition:transform var(--dur-med),box-shadow var(--dur-med);position:relative;overflow:hidden}
.fear-card::before{content:"";position:absolute;top:0;right:0;width:4px;height:100%;background:var(--clr-accent);opacity:0;transition:opacity var(--dur-med)}
.fear-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.fear-card:hover::before{opacity:1}
.fear-q{font-size:var(--text-base);font-weight:700;color:var(--clr-brand);margin-bottom:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2)}
.fear-q-ic{width:28px;height:28px;border-radius:var(--r-full);background:rgba(249,115,22,.1);color:var(--clr-warn);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-size:var(--text-sm)}
.fear-a{font-size:var(--text-sm);color:var(--clr-text-muted);line-height:1.7;padding-top:var(--sp-3);border-top:1px solid var(--clr-border-light)}
.fear-a strong{color:var(--clr-success)}

/* Pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);margin-top:var(--sp-10)}
.pillar{background:#fff;border:1px solid var(--clr-border);border-radius:var(--r-lg);padding:var(--sp-8) var(--sp-6);text-align:center;transition:transform var(--dur-med),box-shadow var(--dur-med),border-color var(--dur-med);position:relative;overflow:hidden}
.pillar::after{content:"";position:absolute;bottom:0;right:0;left:0;height:3px;background:linear-gradient(90deg,var(--clr-accent),#7c3aed);transform:scaleX(0);transition:transform var(--dur-med) var(--ease)}
.pillar:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.pillar:hover::after{transform:scaleX(1)}
.pillar-ic{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:var(--r-lg);background:var(--clr-accent-light);color:var(--clr-accent);margin-bottom:var(--sp-5);transition:background var(--dur-med),color var(--dur-med),transform var(--dur-med)}
.pillar:hover .pillar-ic{background:var(--clr-accent);color:#fff;transform:rotate(-5deg) scale(1.1)}
.pillar h3{font-size:var(--text-xl);font-weight:700;color:var(--clr-brand);margin-bottom:var(--sp-3)}
.pillar p{font-size:var(--text-sm);color:var(--clr-text-muted);line-height:1.7}

/* Before / After */
.ba-scene{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-xl);margin-top:var(--sp-10);border:1px solid var(--clr-border)}
.ba-col{display:flex;flex-direction:column}
.ba-col-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6);font-weight:700;font-size:var(--text-base)}
.ba-col.before{background:#FEF2F2}
.ba-col.before .ba-col-head{color:#991B1B;background:#FEE2E2}
.ba-col.after{background:#F0FDF4}
.ba-col.after .ba-col-head{color:#166534;background:#DCFCE7}
.ba-items{display:flex;flex-direction:column}
.ba-item{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4) var(--sp-6);font-size:var(--text-sm);border-top:1px solid rgba(0,0,0,.06);line-height:1.6}
.ba-col.before .ba-item{color:#7f1d1d}
.ba-col.after .ba-item{color:#14532d}
.ba-item-ic{flex-shrink:0;margin-top:2px}

/* Team */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);margin-top:var(--sp-10)}
.emp{background:#fff;border:1px solid var(--clr-border);border-radius:var(--r-lg);padding:var(--sp-6);transition:transform var(--dur-med),box-shadow var(--dur-med),border-color var(--dur-med);display:flex;flex-direction:column;gap:var(--sp-3);position:relative;overflow:hidden}
.emp::before{content:"";position:absolute;top:0;right:0;left:0;height:3px;background:linear-gradient(90deg,var(--clr-accent),#7c3aed);transform:scaleX(0);transform-origin:right;transition:transform var(--dur-med) var(--ease)}
.emp:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(79,110,247,.2)}
.emp:hover::before{transform:scaleX(1)}
.emp-head{display:flex;align-items:center;gap:var(--sp-3)}
.emp-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--clr-accent-light);color:var(--clr-accent);flex-shrink:0;transition:background var(--dur-med),color var(--dur-med)}
.emp:hover .emp-ic{background:var(--clr-accent);color:#fff}
.emp h3{font-size:var(--text-lg);font-weight:700;color:var(--clr-brand);line-height:1.2}
.emp-role{font-size:var(--text-xs);color:var(--clr-text-muted);margin-top:2px}
.emp-result{font-size:var(--text-sm);font-weight:700;color:var(--clr-accent);padding:var(--sp-2) var(--sp-3);background:var(--clr-accent-light);border-radius:var(--r-sm);line-height:1.4}
.emp > p{font-size:var(--text-sm);color:var(--clr-text-muted);line-height:1.65;flex:1}
.more{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--text-sm);font-weight:700;color:var(--clr-accent);margin-top:var(--sp-2);transition:gap var(--dur-fast)}
.more:hover{gap:var(--sp-2)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:var(--sp-10);position:relative}
.steps::before{content:"";position:absolute;top:2rem;right:16.5%;left:16.5%;height:2px;background:linear-gradient(90deg,var(--clr-accent),#7c3aed);opacity:.25;z-index:0}
.steps li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sp-6) var(--sp-5)}
.step-n{width:4rem;height:4rem;border-radius:var(--r-full);background:var(--clr-accent);color:#fff;font-size:var(--text-xl);font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px var(--clr-accent-glow);margin-bottom:var(--sp-5);flex-shrink:0;position:relative}
.step-n::after{content:"";position:absolute;inset:-4px;border-radius:var(--r-full);border:2px dashed rgba(79,110,247,.3);animation:spin 12s linear infinite}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.steps li h3{font-size:var(--text-lg);font-weight:700;color:var(--clr-brand);margin-bottom:var(--sp-2)}
.steps li p{font-size:var(--text-sm);color:var(--clr-text-muted);line-height:1.7}

/* Solutions */
.seg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-10)}
.seg{background:#fff;border:1px solid var(--clr-border);border-radius:var(--r-lg);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);transition:transform var(--dur-med),box-shadow var(--dur-med),border-color var(--dur-med);text-decoration:none;color:inherit}
.seg:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--clr-accent)}
.seg-ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--r-md);background:var(--clr-accent-light);color:var(--clr-accent);transition:background var(--dur-med),color var(--dur-med)}
.seg:hover .seg-ic{background:var(--clr-accent);color:#fff}
.seg h3{font-size:var(--text-lg);font-weight:700;color:var(--clr-brand)}
.seg p{font-size:var(--text-sm);color:var(--clr-text-muted);line-height:1.6;flex:1;font-style:italic}
.seg .more{color:var(--clr-accent);font-size:var(--text-sm);font-weight:700;margin-top:auto}

/* Pricing */
.mini-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);margin-top:var(--sp-10);align-items:start}
.mini-plan{background:#fff;border:2px solid var(--clr-border);border-radius:var(--r-lg);padding:var(--sp-8) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);transition:transform var(--dur-med),box-shadow var(--dur-med);text-decoration:none;color:inherit;position:relative}
.mini-plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.mini-plan.is-featured{border-color:var(--clr-accent);box-shadow:var(--shadow-accent);transform:scale(1.03)}
.mini-plan.is-featured:hover{transform:scale(1.03) translateY(-4px)}
.mini-plan h3{font-size:var(--text-xl);font-weight:700;color:var(--clr-brand)}
.price{line-height:1.2;margin-block:var(--sp-2)}
.price strong{font-size:var(--text-4xl);font-weight:700;color:var(--clr-brand)}
.price span{font-size:var(--text-sm);color:var(--clr-text-muted)}
.mini-plan>p:not(.price){font-size:var(--text-sm);color:var(--clr-text-muted)}
.muted{font-size:var(--text-xs)!important;color:rgba(100,116,139,.5)!important;margin-top:auto}

/* Guarantees */
.guar{display:flex;flex-direction:column;gap:var(--sp-4)}
.guar li{display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);background:#fff;border-radius:var(--r-md);border:1px solid var(--clr-border);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.guar li:hover{border-color:var(--clr-success);box-shadow:0 0 0 3px rgba(34,197,94,.1)}
.guar-ic{width:36px;height:36px;border-radius:var(--r-full);background:rgba(34,197,94,.1);color:var(--clr-success);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.guar li div{display:flex;flex-direction:column;gap:var(--sp-1)}
.guar li strong{font-size:var(--text-base);font-weight:700;color:var(--clr-brand)}
.guar li span{font-size:var(--text-sm);color:var(--clr-text-muted)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-8)}
.faq details{background:#fff;border:1px solid var(--clr-border);border-radius:var(--r-md);overflow:hidden;transition:border-color var(--dur-fast)}
.faq details[open]{border-color:var(--clr-accent)}
.faq summary{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) var(--sp-6);font-weight:700;font-size:var(--text-base);color:var(--clr-brand);cursor:pointer;list-style:none;user-select:none;transition:background var(--dur-fast)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:var(--text-xl);font-weight:400;color:var(--clr-accent);transition:transform var(--dur-med) var(--ease);flex-shrink:0}
.faq details[open] summary{background:var(--clr-accent-light)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:var(--sp-4) var(--sp-6) var(--sp-5);font-size:var(--text-sm);color:var(--clr-text-muted);line-height:1.8;border-top:1px solid var(--clr-border-light)}

/* CTA Band */
.cta-band{background:linear-gradient(135deg,var(--clr-brand) 0%,#2d3265 50%,#1a3a5c 100%);padding-block:var(--sp-20);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;top:-40%;left:40%;width:600px;height:600px;border-radius:var(--r-full);background:radial-gradient(circle,rgba(79,110,247,.25) 0%,transparent 65%);pointer-events:none}
.cta-in{display:flex;flex-direction:column;align-items:center;gap:var(--sp-6);text-align:center;position:relative;z-index:1}
.cta-in h2{font-size:clamp(var(--text-2xl),4vw,var(--text-4xl));font-weight:700;color:#fff;line-height:1.25;max-width:640px}
.cta-in>p{font-size:var(--text-lg);color:rgba(255,255,255,.7);max-width:500px}
.cta-btns{display:flex;gap:var(--sp-4);flex-wrap:wrap;justify-content:center}
.cta-micro{font-size:var(--text-sm);color:rgba(255,255,255,.45);display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;justify-content:center}

/* Footer */
.site-footer{background:var(--clr-brand);color:rgba(255,255,255,.75);padding-block:var(--sp-16) var(--sp-8)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:var(--sp-10);padding-bottom:var(--sp-10);border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand p{font-size:var(--text-sm);margin-top:var(--sp-4);line-height:1.7;max-width:280px}
.foot-note{margin-top:var(--sp-3)!important;font-size:var(--text-xs)!important;color:rgba(255,255,255,.4)!important}
.foot-note a{color:rgba(255,255,255,.6);text-decoration:underline}
.foot-note a:hover{color:#fff}
.foot-h{font-size:var(--text-xs);font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--sp-4)}
.site-footer ul{display:flex;flex-direction:column;gap:var(--sp-2)}
.site-footer ul a{font-size:var(--text-sm);color:rgba(255,255,255,.65);transition:color var(--dur-fast)}
.site-footer ul a:hover{color:#fff}
.foot-bottom{padding-top:var(--sp-6);text-align:center}
.foot-bottom p{font-size:var(--text-xs);color:rgba(255,255,255,.35)}

/* Two-col & narrow */
.two-col{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--sp-12);align-items:start}
.narrow{max-width:760px}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* Responsive */
@media(max-width:1024px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--sp-8)}
}
@media(max-width:768px){
  :root{--sp-20:3.5rem}
  .hero-in{grid-template-columns:1fr;gap:var(--sp-10)}
  .demo{order:-1}
  .demo-phone{max-width:320px;margin:0 auto}
  .pillars,.fear-grid,.seg-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps::before{display:none}
  .mini-plans{grid-template-columns:1fr}
  .mini-plan.is-featured{transform:none}
  .ba-scene{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .proof-bar-in{gap:var(--sp-6)}
  .proof-divider{display:none}
  .foot-grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .cta-btns{flex-direction:column;align-items:center}
  .nav{display:none;flex-direction:column;position:fixed;inset:var(--header-h) 0 0;background:#fff;padding:var(--sp-6);gap:var(--sp-3);overflow-y:auto;border-top:1px solid var(--clr-border);z-index:99}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;width:100%}
  .nav ul a{font-size:var(--text-lg);padding:var(--sp-4);display:block;border-radius:var(--r-md)}
  .nav-cta{width:100%;text-align:center}
  .nav-toggle{display:flex}
}