/* ============================================================================
   kit.css — Sanjab Studio website UI-kit section layouts.
   Derived from the shipped site.css; tokens, fonts, [data-color] hooks and the
   global reset live in the design system's styles.css (loaded first).
   Primitive classes (.btn/.card/.badge/.eyebrow…) are kept here for the kit's
   section scaffolding and mirror the React primitives in the bundle.
   ========================================================================== */
/* ============================================================================
   site.css — سیستم طراحی مدرن «سنجاب استودیو» (theme tokens، بدون رنگ هاردکد)
   ========================================================================== */

a{color:inherit}
img,svg{display:block}

/* اعداد و لاتین با Sora */
.num,.metric-value,.stat strong,.about-feat strong,.hero h1{font-feature-settings:"ss01";}

/* آیکون خطی */
.ic{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:18px;height:18px}
.ic-check{width:20px;height:20px}

.container{max-width:var(--maxw); margin:0 auto; padding:0 28px}
section{padding:104px 0; position:relative}

/* ── سرفصل بخش ─────────────────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.82rem; font-weight:700; letter-spacing:.02em;
  color:var(--brand); margin-bottom:16px;
}
.eyebrow::before{content:''; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),transparent)}
.section-head{max-width:660px; margin:0 auto 56px; text-align:center}
.section-head .eyebrow{justify-content:center}
.section-head .eyebrow::after{content:''; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(270deg,var(--brand),transparent)}
h1,h2,h3{letter-spacing:-.02em; line-height:1.18; font-weight:800}
.section-head h2{font-size:clamp(1.7rem,3.6vw,2.6rem); margin-bottom:14px}
.section-head p{color:var(--t2); font-size:1.05rem}

.accent{
  background:linear-gradient(102deg,var(--brand),var(--brand-2) 60%,var(--gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ── کارت پایه ─────────────────────────────────────────────────────────── */
.card{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

/* ── دکمه ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 26px; border-radius:var(--r); font:inherit;
  font-weight:700; font-size:.98rem; text-decoration:none;
  cursor:pointer; border:1px solid transparent; transition:.3s var(--ease);
}
.btn .ic{width:19px;height:19px}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand-deep)); color:#fff;
  box-shadow:0 14px 34px -14px var(--brand);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 40px -14px var(--brand)}
.btn-ghost{background:var(--card); color:var(--t1); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--brand); background:var(--surface)}

/* ── ناوبری ────────────────────────────────────────────────────────────── */
.nav{position:fixed; inset:0 0 auto; z-index:100; padding:16px 0;
  backdrop-filter:blur(18px); background:rgba(10,13,18,.55);
  border-bottom:1px solid transparent; transition:.3s var(--ease)}
.nav.scrolled{background:rgba(10,13,18,.9); border-bottom-color:var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:22px}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--t1)}
.logo-mark{width:44px; height:44px; display:grid; place-items:center; border-radius:13px;
  background:linear-gradient(135deg,var(--brand),var(--gold));
  box-shadow:0 8px 22px -8px var(--brand); transition:transform .4s var(--ease)}
.logo-mark .ic{width:26px;height:26px;stroke:#1a1205;stroke-width:1.9}
.logo-mark img{width:100%; height:100%; object-fit:cover; border-radius:inherit}
.logo-name{font-weight:800; font-size:1.18rem; line-height:1.2}
.logo-sub{display:block; font-size:.68rem; color:var(--t3); font-weight:500}
.logo-sub a, .logo-wbc{color:var(--brand); text-decoration:none}
.nav-menu{display:flex; gap:4px; list-style:none}
.nav-menu a{color:var(--t2); text-decoration:none; font-size:.94rem; font-weight:600;
  padding:8px 14px; border-radius:11px; transition:.2s}
.nav-menu a:hover{color:var(--t1); background:var(--card)}
.nav-cta{padding:10px 20px; font-size:.92rem}
.menu-toggle{display:none; background:var(--card); border:1px solid var(--line);
  color:var(--t1); width:44px; height:44px; border-radius:12px; cursor:pointer;
  align-items:center; justify-content:center}

/* ── هیرو ──────────────────────────────────────────────────────────────── */
.hero{padding:140px 0 84px; min-height:100vh; display:flex; align-items:center}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; width:100%}
.badge{display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:100px;
  background:var(--card); border:1px solid var(--line); font-size:.84rem; color:var(--t2); margin-bottom:24px}
.badge .dot{width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 12px var(--green); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}}
.hero h1{font-size:clamp(2.2rem,5.2vw,3.9rem); margin-bottom:22px}
.hero p{font-size:1.12rem; color:var(--t2); max-width:540px; margin-bottom:32px}
.hero-actions{display:flex; gap:13px; flex-wrap:wrap}
.hero-stats{display:flex; gap:10px; margin-top:38px; flex-wrap:wrap}
.hero-stats .stat{flex:1; min-width:108px; padding:12px 14px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r)}
.stat strong{display:block; font-family:'Sora',sans-serif; font-size:1.15rem; font-weight:700;
  color:var(--brand-2)}
.stat span{font-size:.76rem; color:var(--t3)}

/* عکس هیرو (image-slot) + اعداد فشردهٔ شناور روی عکس + متریک‌ها */
.hero-figure{position:relative}
.hero-squirrel{display:block; width:100%; max-width:440px; aspect-ratio:1; object-fit:contain;
  margin-inline:auto; background:radial-gradient(70% 70% at 50% 45%, #fff, #fff6ee);
  border-radius:28px; box-shadow:var(--shadow); border:1px solid var(--line-2)}
.hero-photo{display:block; width:100%; aspect-ratio:4/5; max-height:480px; border-radius:24px;
  box-shadow:var(--shadow); border:1px solid var(--line-2)}
.hero-statchips{position:absolute; inset-inline:14px; inset-block-end:14px; display:flex; gap:8px;
  padding:10px; border-radius:18px; background:rgba(13,16,22,.74); backdrop-filter:blur(12px);
  border:1px solid var(--line-2); box-shadow:0 16px 36px -18px rgba(0,0,0,.7)}
.hero-statchips .hstat{flex:1; text-align:center; min-width:0}
.hero-statchips .hstat strong{display:block; font-family:'Sora',sans-serif; font-size:1.02rem; font-weight:800;
  color:var(--brand-2); font-feature-settings:"ss01"}
.hero-statchips .hstat span{font-size:.64rem; color:var(--t3); white-space:nowrap}
.hero-metrics{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.hmetric{display:flex; align-items:center; gap:11px; padding:11px 14px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r)}
.hmetric-ic{width:34px; height:34px; flex:0 0 auto; border-radius:10px; display:grid; place-items:center;
  color:var(--brand); background:var(--brand-soft)}
.hmetric:nth-child(2) .hmetric-ic{color:var(--yt); background:rgba(255,67,56,.12)}
.hmetric:nth-child(3) .hmetric-ic{color:var(--gold); background:rgba(232,177,60,.12)}
.hmetric-body b{font-family:'Sora',sans-serif; font-weight:800; font-size:1.05rem; color:var(--t1); margin-inline-end:6px}
.hmetric-body small{font-size:.8rem; color:var(--t3)}

/* لینک مشاورهٔ رایگان در نوار */
.nav-consult{color:var(--brand-2) !important; font-weight:700}
.nav-consult:hover{background:var(--brand-soft) !important}

.hero-visual{display:flex; flex-direction:column; gap:14px}
.metric-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 22px; box-shadow:var(--shadow-soft); position:relative; overflow:hidden}
.metric-card:nth-child(1){animation:floaty 7s ease-in-out infinite}
.metric-card:nth-child(2){animation:floaty 7s 1.2s ease-in-out infinite; margin-inline-start:34px}
.metric-card:nth-child(3){animation:floaty 7s 2.4s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.metric-head{display:flex; align-items:center; gap:10px; color:var(--t2); font-size:.92rem; font-weight:600; margin-bottom:10px}
.metric-head .ic{width:34px; height:34px; padding:7px; border-radius:10px; color:var(--brand);
  background:var(--brand-soft)}
.metric-card:nth-child(2) .metric-head .ic{color:var(--yt); background:rgba(255,67,56,.12)}
.metric-card:nth-child(3) .metric-head .ic{color:var(--gold); background:rgba(232,177,60,.12)}
.metric-value{font-family:'Sora',sans-serif; font-size:2rem; font-weight:800; color:var(--green); margin-bottom:2px}
.metric-card:nth-child(1) .metric-value{color:var(--brand-2)}
.metric-card:nth-child(3) .metric-value{color:var(--gold)}
.metric-note{font-size:.82rem; color:var(--t3)}

/* ── خدمات ─────────────────────────────────────────────────────────────── */
.grid-auto{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.service-card{padding:26px; cursor:default; position:relative; overflow:hidden}
.service-card::after{content:''; position:absolute; inset:0 auto auto 0; width:120px; height:120px;
  background:radial-gradient(circle,var(--c),transparent 70%); opacity:.1; transition:.5s var(--ease)}
.service-card:hover{transform:translateY(-6px); border-color:color-mix(in oklab,var(--c) 55%,transparent);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.6)}
.service-card:hover::after{opacity:.22; transform:scale(1.4)}
.card-icon{width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  color:var(--c); background:color-mix(in oklab,var(--c) 15%,transparent);
  border:1px solid color-mix(in oklab,var(--c) 30%,transparent); margin-bottom:18px; position:relative; z-index:1}
.card-icon .ic{width:26px; height:26px}
.service-card h3{font-size:1.12rem; margin-bottom:9px; position:relative; z-index:1}
.service-card p{font-size:.92rem; color:var(--t2); position:relative; z-index:1}
.tag-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; position:relative; z-index:1}
.tag-row span{font-size:.74rem; padding:4px 11px; border-radius:100px; color:var(--t2);
  background:rgba(255,255,255,.05); border:1px solid var(--line)}

/* ── یوتیوب ────────────────────────────────────────────────────────────── */
.youtube-section{background:linear-gradient(180deg,transparent,rgba(255,67,56,.04),transparent);
  border-block:1px solid var(--line)}
.split{display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center}
.youtube-section h2{font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:16px}
.youtube-section .lead{color:var(--t2); font-size:1.05rem; margin-bottom:24px}
.yt-perks{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:28px}
.yt-perk{padding:16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r)}
.yt-perk-ic{width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  color:var(--yt); background:rgba(255,67,56,.13); margin-bottom:11px}
.yt-perk strong{display:block; font-size:.96rem; margin-bottom:3px}
.yt-perk span{font-size:.83rem; color:var(--t2)}
.yt-player{background:#0c0c0e; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow)}
.yt-thumb{aspect-ratio:16/9; display:grid; place-items:center; position:relative;
  background:linear-gradient(135deg,rgba(255,67,56,.28),rgba(242,135,46,.22)),linear-gradient(45deg,#1a1410,#2a1a1e)}
.yt-play{width:78px; height:54px; border-radius:15px; display:grid; place-items:center;
  background:var(--yt); color:#fff; box-shadow:0 10px 30px rgba(255,67,56,.5); cursor:pointer; transition:transform .3s}
.yt-play .ic{width:26px;height:26px;fill:#fff;stroke:none}
.yt-thumb:hover .yt-play{transform:scale(1.1)}
.yt-dur{position:absolute; inset:auto 14px 14px auto; background:rgba(0,0,0,.85); color:#fff;
  font-size:.76rem; padding:3px 8px; border-radius:6px; font-family:'Sora',sans-serif}
.yt-info{padding:18px}
.yt-info h4{font-size:1.02rem; font-weight:700; margin-bottom:9px}
.yt-meta{display:flex; align-items:center; gap:8px; font-size:.83rem; color:var(--t3); flex-wrap:wrap}
.yt-meta .ch{display:flex; align-items:center; gap:7px; color:var(--t2)}
.yt-ch-av{width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--gold)); color:#1a1205}
.yt-ch-av .ic{width:15px;height:15px;stroke-width:1.9}
.yt-statrow{display:flex; gap:16px; margin-top:14px; padding:12px 14px; flex-wrap:wrap;
  background:rgba(255,255,255,.03); border-radius:12px; font-size:.84rem}
.yt-statrow span{display:flex; align-items:center; gap:6px; color:var(--t2)}
.yt-statrow strong{color:var(--green); font-family:'Sora',sans-serif}

/* ── استودیوها ─────────────────────────────────────────────────────────── */
.studios-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.studio-card{overflow:hidden}
.studio-card:hover{transform:translateY(-6px); border-color:color-mix(in oklab,var(--c) 50%,transparent)}
.studio-banner{height:150px; display:grid; place-items:center; position:relative;
  background:linear-gradient(135deg,color-mix(in oklab,var(--c) 85%,#000),color-mix(in oklab,var(--c) 35%,#000))}
.studio-banner::before{content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.22),transparent 55%)}
.studio-glyph{width:54px; height:54px; color:#fff; position:relative; z-index:1; stroke-width:1.6;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.studio-num{position:absolute; inset:14px 14px auto auto; z-index:2; font-family:'Sora',sans-serif;
  font-weight:700; font-size:.78rem; color:#fff; background:rgba(0,0,0,.45); backdrop-filter:blur(8px);
  padding:4px 11px; border-radius:8px}
.studio-body{padding:22px}
.studio-body h3{font-size:1.1rem; margin-bottom:8px}
.studio-body p{font-size:.88rem; color:var(--t2); margin-bottom:14px}
.check-list{list-style:none; display:flex; flex-direction:column; gap:8px}
.check-list li{display:flex; align-items:center; gap:9px; font-size:.86rem; color:var(--t2)}
.check-list .ic{color:var(--green)}

/* ── AI ────────────────────────────────────────────────────────────────── */
.ai-section{background:linear-gradient(180deg,transparent,rgba(155,123,255,.05),transparent);
  border-block:1px solid var(--line)}
.ai-section h2{font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:16px}
.ai-section .lead{color:var(--t2); font-size:1.05rem; margin-bottom:24px}
.ai-features{list-style:none; margin-bottom:30px}
.ai-features li{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.ai-features li:last-child{border-bottom:none}
.ai-features .ic{flex:0 0 auto; width:24px; height:24px; padding:4px; border-radius:50%; color:#fff;
  background:linear-gradient(135deg,var(--green),var(--greenDeep)); stroke-width:2.4}
.ai-features span{color:var(--t1); font-size:.96rem}
.ai-visual{position:relative; height:440px; display:grid; place-items:center}
.ai-ring{position:absolute; border:1px solid color-mix(in oklab,var(--brand) 24%,transparent); border-radius:50%; animation:spin 24s linear infinite}
.ai-ring.r1{width:280px;height:280px} .ai-ring.r2{width:360px;height:360px;animation-duration:34s;animation-direction:reverse;border-color:color-mix(in oklab,var(--gold) 22%,transparent)}
.ai-ring.r3{width:440px;height:440px;animation-duration:44s;border-color:color-mix(in oklab,var(--brand) 14%,transparent)}
@keyframes spin{to{transform:rotate(360deg)}}
.ai-acorn{width:190px; height:190px; border-radius:50%; display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 38% 32%, color-mix(in oklab,var(--brand) 92%,white), var(--brand-deep));
  box-shadow:0 0 90px -10px var(--brand), inset 0 -10px 30px rgba(0,0,0,.25); animation:orb 6s ease-in-out infinite}
.ai-acorn .ic{width:92px; height:92px; color:#1a1205; stroke-width:1.6}
.ai-photo{display:block; width:210px; height:210px; border-radius:50%; position:relative;
  box-shadow:0 0 80px rgba(242,135,46,.35); border:1px solid color-mix(in oklab,var(--brand) 30%,transparent)}
.ai-squirrel{object-fit:cover; background:#fff; z-index:1}
@keyframes orb{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.ai-chips{position:absolute; inset:0}
.folio-a{text-decoration:none; display:block; color:inherit}
.folio-link{display:inline-flex; align-items:center; gap:6px; margin-top:12px; font-size:.82rem; font-weight:700;
  color:var(--brand-2)}
.folio-link .ic{width:15px; height:15px}

/* ── ویژوال برند هیرو (به‌جای عکس تا وقتی کاربر آپلود کند) ─────────────── */
.hero-brandviz{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:radial-gradient(120% 90% at 50% 10%, color-mix(in oklab,var(--brand) 26%,var(--card)), var(--card-2));
  overflow:hidden; position:relative}
.hero-brandviz::before{content:''; position:absolute; inset:-2px; border-radius:inherit;
  background:radial-gradient(60% 50% at 50% 30%, rgba(242,135,46,.28), transparent 70%)}
.hero-acorn{position:relative; color:var(--brand-2); filter:drop-shadow(0 14px 30px rgba(242,135,46,.4))}
.hero-viz-name{position:relative; font-weight:800; font-size:1.5rem; color:var(--t1); letter-spacing:-.01em}
.hero-viz-tag{position:relative; font-size:.84rem; color:var(--t2)}

/* ── بنر صفحات اختصاصی + دکمهٔ بیشتر + ناوبری فعال ──────────────────────── */
.page-hero{padding:128px 0 30px; text-align:center}
.page-hero h1{font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.02em; margin:14px 0 12px}
.page-hero p{font-size:1.08rem; color:var(--t2); max-width:620px; margin:0 auto; line-height:1.8}
.page-hero .eyebrow,.page-hero .sj-eyebrow{justify-content:center}
.more-row{margin-top:-26px; padding-bottom:18px; display:flex; justify-content:center}
.more-row .container{display:flex; justify-content:center}
.nav-menu a.active{color:var(--brand-2)}
.lang-toggle{flex:0 0 auto;width:42px;height:36px;border-radius:10px;cursor:pointer;font:inherit;font-weight:800;
  font-size:.78rem;font-family:'Sora',sans-serif;color:var(--t2);background:var(--card);border:1px solid var(--line-2);
  transition:.2s}
.lang-toggle:hover{color:var(--brand-2);border-color:var(--brand)}
.nav-menu a.active::after{content:''; display:block; height:2px; border-radius:2px; margin-top:4px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2))}
@keyframes routeIn{from{transform:translateY(10px)}to{transform:translateY(0)}}
.route-view{display:block; animation:routeIn .35s var(--ease)}
/* صفحات اختصاصی (بدون هیرو) — فاصله از نوار بالا */
.route-view:not(.is-home) > section:first-child,
.route-view:not(.is-home) > .youtube-section:first-child,
.route-view:not(.is-home) > .ai-section:first-child{padding-top:124px}
.ai-chip{position:absolute; padding:8px 14px; border-radius:100px; font-size:.84rem; white-space:nowrap;
  background:var(--card); border:1px solid var(--line-2); box-shadow:var(--shadow-soft)}
.ai-chips .ai-chip:nth-child(1){inset:8% 6% auto auto}
.ai-chips .ai-chip:nth-child(2){inset:auto auto 14% 2%}
.ai-chips .ai-chip:nth-child(3){inset:46% -2% auto auto}
.ai-chips .ai-chip:nth-child(4){inset:auto 22% 6% auto}

/* ── نمونه‌کارها ───────────────────────────────────────────────────────── */
.folio-filters{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:34px}
.folio-filter{padding:8px 16px; border-radius:100px; font:inherit; font-size:.86rem; font-weight:600;
  cursor:pointer; color:var(--t2); background:var(--card); border:1px solid var(--line); transition:.2s}
.folio-filter:hover{color:var(--t1)}
.folio-filter.active{color:#1a1205; background:linear-gradient(135deg,var(--brand),var(--brand-2)); border-color:transparent}
.folio-card{overflow:hidden; cursor:pointer}
.folio-card:hover{transform:translateY(-5px); border-color:color-mix(in oklab,var(--c) 50%,transparent)}
.folio-thumb{aspect-ratio:16/10; display:grid; place-items:center; position:relative;
  background:linear-gradient(140deg,color-mix(in oklab,var(--c) 55%,#000),var(--bg-2))}
.folio-glyph{width:48px; height:48px; color:#fff; stroke-width:1.5; opacity:.92}
.folio-cat{position:absolute; inset:auto auto 12px 12px; font-size:.72rem; font-weight:700;
  color:#fff; background:rgba(0,0,0,.4); backdrop-filter:blur(8px); padding:4px 11px; border-radius:100px}
.folio-body{padding:20px}
.folio-body h3{font-size:1.04rem; margin-bottom:7px}
.folio-body p{font-size:.86rem; color:var(--t2)}

/* ── پیشنهاد ویژه ──────────────────────────────────────────────────────── */
.offer{position:relative; overflow:hidden; padding:52px; text-align:center; border-radius:var(--r-xl);
  background:linear-gradient(125deg,var(--brand),var(--brand-deep) 55%,var(--berry)); margin:0 0 8px}
.offer::before{content:''; position:absolute; inset:-40% -10% auto auto; width:340px; height:340px;
  border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%)}
.offer h3{font-size:clamp(1.4rem,2.8vw,2rem); color:#fff; margin-bottom:12px; position:relative}
.offer p{color:rgba(255,255,255,.92); margin-bottom:24px; font-size:1.04rem; position:relative}
.offer .btn{background:#fff; color:var(--brand-deep); position:relative}
.offer .btn:hover{transform:translateY(-2px) scale(1.03)}

/* ── چرا ما ─────────────────────────────────────────────────────────────── */
.why-card{padding:30px 24px; text-align:center}
.why-card:hover{transform:translateY(-5px); border-color:var(--line-2)}
.why-ic{width:60px; height:60px; margin:0 auto 16px; border-radius:17px; display:grid; place-items:center;
  color:var(--brand); background:var(--brand-soft); border:1px solid color-mix(in oklab,var(--brand) 28%,transparent)}
.why-ic .ic{width:28px;height:28px}
.why-card h3{font-size:1.06rem; margin-bottom:9px}
.why-card p{font-size:.88rem; color:var(--t2)}

/* ── درباره ─────────────────────────────────────────────────────────────── */
.about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center}
.about-visual{position:relative; aspect-ratio:1; max-width:420px; margin:0 auto; display:grid; place-items:center}
.about-shape{position:absolute; inset:0; opacity:.16; animation:morph 14s ease-in-out infinite;
  background:linear-gradient(135deg,var(--brand),var(--gold),var(--green));
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%}
@keyframes morph{50%{border-radius:58% 42% 37% 63% / 56% 59% 41% 44%}}
.about-mark{width:150px; height:150px; border-radius:38px; display:grid; place-items:center; position:relative;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep)); box-shadow:var(--shadow)}
.about-mark .ic{width:84px; height:84px; color:#fff; stroke-width:1.4}
.about-content h2{font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:18px}
.about-content > p{color:var(--t2); margin-bottom:16px; font-size:1rem}
.holding-badge{display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:var(--r);
  background:var(--card); border:1px solid var(--line-2); margin-top:22px}
.holding-logo{width:46px; height:46px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,#1A73E8,#06C0DE)}
.holding-logo .ic{width:26px;height:26px;color:#fff}
.holding-badge strong{display:block; font-size:.94rem; margin-bottom:2px}
.holding-badge span{font-size:.82rem; color:var(--t2)}
.holding-badge a{color:var(--brand); text-decoration:none; font-weight:600}
.about-feats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:26px}
.about-feat{padding:15px; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm)}
.about-feat strong{display:block; font-family:'Sora',sans-serif; font-size:1.5rem; color:var(--brand-2); margin-bottom:3px}
.about-feat span{font-size:.8rem; color:var(--t3)}

/* ── تماس ───────────────────────────────────────────────────────────────── */
.contact-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:48px}
.contact-info h3{font-size:1.4rem; margin-bottom:10px}
.contact-info > p{color:var(--t2); margin-bottom:26px}
.channels{display:flex; flex-direction:column; gap:11px}
.channel{display:flex; align-items:center; gap:13px; padding:14px 16px; border-radius:var(--r);
  background:var(--card); border:1px solid var(--line); text-decoration:none; color:var(--t1); transition:.3s var(--ease)}
.channel:hover{border-color:var(--brand); background:var(--surface); transform:translateX(-4px)}
.channel-ic{width:44px; height:44px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; color:#fff}
.channel[data-ic=phone] .channel-ic{background:linear-gradient(135deg,var(--green),var(--greenDeep))}
.channel[data-ic=whatsapp] .channel-ic{background:#1faa54}
.channel[data-ic=mail] .channel-ic{background:linear-gradient(135deg,var(--brand),var(--brand-deep))}
.channel[data-ic=telegram] .channel-ic{background:linear-gradient(135deg,#2aa3e0,#0088cc)}
.channel[data-ic=instagram] .channel-ic{background:linear-gradient(135deg,#f09433,#dc2743,#cc2366)}
.channel[data-ic=youtube] .channel-ic{background:var(--yt)}
.channel-txt strong{display:block; font-size:.94rem; margin-bottom:2px}
.channel-txt span{font-size:.82rem; color:var(--t2)}
.contact-form{padding:30px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg)}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-group{margin-bottom:16px}
.form-group label{display:block; font-size:.86rem; color:var(--t2); font-weight:500; margin-bottom:7px}
.form-group input,.form-group select,.form-group textarea{width:100%; padding:12px 15px;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:11px; color:var(--t1);
  font:inherit; font-size:.94rem; transition:.2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;
  border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.form-group textarea{resize:vertical; min-height:108px}
.form-submit{width:100%; justify-content:center; margin-top:4px}
.form-note{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:.78rem; color:var(--t3)}
.form-note .ic{width:16px;height:16px;color:var(--green)}
.form-success{display:none; margin-top:12px; padding:13px; text-align:center; font-size:.9rem;
  color:var(--green); background:rgba(45,212,160,.12); border:1px solid var(--green); border-radius:11px}
.form-success.show{display:block; animation:fadeUp .4s var(--ease)}

/* ── فوتر ───────────────────────────────────────────────────────────────── */
footer{padding:58px 0 28px; border-top:1px solid var(--line); background:var(--bg-2)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:36px}
.footer-brand p{color:var(--t2); margin-top:14px; font-size:.9rem; max-width:330px}
.footer-brand a{color:var(--brand); text-decoration:none}
.footer-col h5{font-size:.94rem; margin-bottom:15px}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:9px}
.footer-col a{color:var(--t2); text-decoration:none; font-size:.89rem; transition:.2s}
.footer-col a:hover{color:var(--brand)}
.footer-bottom{border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:14px; font-size:.83rem; color:var(--t3)}
.footer-made{font-size:.78rem; color:var(--t3); margin-top:10px; opacity:.85}
.social{display:flex; gap:9px}
.social a{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--t2);
  background:var(--card); border:1px solid var(--line); transition:.2s}
.social a:hover{color:#fff; background:var(--brand); border-color:var(--brand); transform:translateY(-2px)}
.social .ic{width:19px;height:19px}

/* ── واتساپ شناور ──────────────────────────────────────────────────────── */
.fab{position:fixed; inset:auto auto 24px 24px; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:#1faa54; text-decoration:none; z-index:99;
  box-shadow:0 12px 30px rgba(31,170,84,.45); animation:bob 3s infinite; transition:transform .3s}
.fab:hover{transform:scale(1.08)}
.fab .ic{width:28px;height:28px}
@keyframes bob{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}60%{transform:translateY(-3px)}}

/* ── reveal ─────────────────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .reveal.in{opacity:1; transform:translateY(0)}
}

/* ── ریسپانسیو ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){ .studios-grid{grid-template-columns:1fr 1fr} }
@media (max-width:960px){
  .hero-grid,.split,.ai-section .split,.about-grid,.contact-grid{grid-template-columns:1fr; gap:40px}
  .hero{padding-top:120px}
  .metric-card:nth-child(2){margin-inline-start:0}
  .ai-visual{height:380px}
  .about-feats{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:768px){
  section{padding:72px 0}
  .nav-menu{position:fixed; inset:72px 0 auto; flex-direction:column; padding:18px; gap:4px;
    background:var(--bg-2); border-bottom:1px solid var(--line); display:none}
  .nav-menu.open{display:flex}
  .nav-menu a{display:block; padding:12px 14px}
  .nav-cta{display:none}
  .menu-toggle{display:flex}
  .studios-grid{grid-template-columns:1fr}
  .yt-perks{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column; text-align:center}
  .form-row{grid-template-columns:1fr}
  .about-feats{grid-template-columns:repeat(2,1fr)}
  .offer{padding:38px 24px}
}
@media (max-width:430px){
  .hero h1{font-size:2rem}
  .hero-stats .stat{min-width:100%}
  .yt-perks{grid-template-columns:1fr}
}