/*
Theme Name: ADSBIO Landing
Theme URI: https://adsbio.example
Author: adsbio
Author URI: https://adsbio.example
Description: تم لندینگ ADSBIO — صفحه‌ی اصلی معرفی ابزارهای بررسی، آرشیو و آنالیز A/B تست تبلیغات. طراحی بر پایه‌ی Material Design 3 روی گرید Bootstrap 5.3، با حالت روشن و تاریک.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: adsbio-landing
*/

/* ===========================================================
   ADSBIO Landing — Material Design 3 tokens on Bootstrap 5.3
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Roboto+Mono:wght@500&display=swap');
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Black.woff2') format('woff2');
  font-weight: 900; font-display: swap;
}

/* ---------- M3 design tokens ---------- */
:root,
[data-theme="light"]{
  --m3-bg:                 #FFFBFE;
  --m3-surface:             #FFFBFE;
  --m3-surface-1:           #F7F2FA;
  --m3-surface-2:           #F1ECF4;
  --m3-surface-container:   #ECE6F0;
  --m3-on-surface:          #1C1B1F;
  --m3-on-surface-variant:  #49454F;
  --m3-outline:             #79747E;
  --m3-outline-variant:     #CAC4D0;

  --m3-primary:             #6750A4;
  --m3-on-primary:          #FFFFFF;
  --m3-primary-container:   #EADDFF;
  --m3-on-primary-container:#21005D;

  --m3-yekta:               #FF6A39;
  --m3-yekta-container:     #FFE3D9;
  --m3-tapsell:             #1C8C7D;
  --m3-tapsell-container:   #CFF3EC;

  --m3-shadow: 220 30% 15%;
  --m3-elev-1: 0 1px 2px hsl(var(--m3-shadow) / 0.14), 0 1px 3px 1px hsl(var(--m3-shadow) / 0.10);
  --m3-elev-2: 0 1px 2px hsl(var(--m3-shadow) / 0.16), 0 3px 6px 2px hsl(var(--m3-shadow) / 0.10);
  --m3-elev-3: 0 4px 8px 3px hsl(var(--m3-shadow) / 0.12), 0 1px 3px hsl(var(--m3-shadow) / 0.18);

  color-scheme: light;
}

[data-theme="dark"]{
  --m3-bg:                 #131316;
  --m3-surface:             #131316;
  --m3-surface-1:           #1C1B21;
  --m3-surface-2:           #201F26;
  --m3-surface-container:   #232228;
  --m3-on-surface:          #E6E1E6;
  --m3-on-surface-variant:  #CAC4D0;
  --m3-outline:             #938F99;
  --m3-outline-variant:     #49454F;

  --m3-primary:             #D0BCFF;
  --m3-on-primary:          #381E72;
  --m3-primary-container:   #4F378B;
  --m3-on-primary-container:#EADDFF;

  --m3-yekta:               #FFB599;
  --m3-yekta-container:     #7A3418;
  --m3-tapsell:             #7BDCCB;
  --m3-tapsell-container:   #0D4A42;

  --m3-shadow: 220 40% 2%;
  color-scheme: dark;
}

/* ---------- base ---------- */
html{ scroll-behavior:smooth; }
body{
  background:var(--m3-bg);
  color:var(--m3-on-surface);
  font-family:'Vazirmatn','Roboto',sans-serif;
  direction:rtl;
  transition:background-color .35s ease, color .35s ease;
}
.font-latin{ font-family:'Roboto','Vazirmatn',sans-serif; }
.font-mono{ font-family:'Roboto Mono',monospace; direction:ltr; }

a{ text-decoration:none; color:inherit; }

::selection{ background:var(--m3-primary-container); color:var(--m3-on-primary-container); }

/* ---------- top app bar ---------- */
.m3-appbar{
  position:sticky; top:0; z-index:1000;
  background:color-mix(in srgb, var(--m3-surface) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--m3-outline-variant);
  transition:background-color .35s ease, border-color .35s ease;
}
.m3-brand{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.05rem; }
.m3-brand-mark{
  width:34px; height:34px; border-radius:10px; flex:none;
  background:linear-gradient(135deg, var(--m3-primary), var(--m3-yekta));
  display:flex; align-items:center; justify-content:center;
  color:var(--m3-on-primary); font-weight:900; font-size:.95rem;
}
.m3-nav-link{
  font-size:.9rem; color:var(--m3-on-surface-variant); padding:.5rem .9rem; border-radius:100px;
  transition:background-color .2s ease, color .2s ease;
}
.m3-nav-link:hover{ background:var(--m3-surface-container); color:var(--m3-on-surface); }

.m3-icon-btn{
  width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--m3-outline-variant); color:var(--m3-on-surface);
  cursor:pointer; transition:background-color .2s ease, transform .3s ease;
}
.m3-icon-btn:hover{ background:var(--m3-surface-container); }
.m3-icon-btn .bi{ transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; }

/* ---------- buttons (M3 filled / tonal / outlined) ---------- */
.m3-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.92rem; padding:.75rem 1.5rem;
  border-radius:100px; border:1px solid transparent; cursor:pointer;
  transition:box-shadow .25s ease, transform .15s ease, background-color .2s ease;
  white-space:nowrap;
}
.m3-btn:active{ transform:scale(.97); }
.m3-btn-filled{ background:var(--m3-primary); color:var(--m3-on-primary); }
.m3-btn-filled:hover{ box-shadow:var(--m3-elev-2); }
.m3-btn-tonal{ background:var(--m3-primary-container); color:var(--m3-on-primary-container); }
.m3-btn-tonal:hover{ box-shadow:var(--m3-elev-1); }
.m3-btn-outlined{ background:transparent; border-color:var(--m3-outline); color:var(--m3-on-surface); }
.m3-btn-outlined:hover{ background:var(--m3-surface-container); }

/* ---------- hero ---------- */
.m3-hero{ padding:6rem 0 4rem; overflow:hidden; }
.m3-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Roboto Mono',monospace; direction:ltr; font-size:.72rem; letter-spacing:.06em;
  color:var(--m3-on-surface-variant); border:1px solid var(--m3-outline-variant);
  padding:.35rem .8rem; border-radius:100px; margin-bottom:1.5rem;
}
.m3-eyebrow-dot{ width:7px; height:7px; border-radius:50%; background:var(--m3-primary); }
.m3-hero h1{
  font-weight:900; font-size:clamp(2rem, 4.2vw, 3.4rem); line-height:1.28;
  margin-bottom:1.1rem; letter-spacing:-.01em;
}
.m3-hero h1 em{ font-style:normal; color:var(--m3-primary); }
.m3-hero p.lead{
  font-size:1.05rem; color:var(--m3-on-surface-variant); max-width:46ch; margin-bottom:2rem;
}
.m3-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- signature: elevation stack ---------- */
.m3-stack{
  position:relative; height:380px; display:flex; align-items:center; justify-content:center;
}
.m3-stack-card{
  position:absolute; width:230px; padding:20px; border-radius:24px;
  background:var(--m3-surface-1); border:1px solid var(--m3-outline-variant);
  box-shadow:var(--m3-elev-2);
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  opacity:0; transform:translateY(24px) scale(.92);
}
.m3-stack.is-in .m3-stack-card{ opacity:1; }
.m3-stack-card:hover{ box-shadow:var(--m3-elev-3); z-index:5 !important; }
.m3-stack-card .icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; margin-bottom:14px;
}
.m3-stack-card h4{ font-size:.98rem; font-weight:700; margin-bottom:4px; }
.m3-stack-card p{ font-size:.78rem; color:var(--m3-on-surface-variant); margin:0; }

.m3-stack-card.c1{ transform:translateY(0) scale(1) rotate(-9deg) translateX(-96px); z-index:1; transition-delay:.05s; }
.m3-stack-card.c2{ transform:translateY(0) scale(1) rotate(0deg) translateY(-22px); z-index:3; transition-delay:.18s; }
.m3-stack-card.c3{ transform:translateY(0) scale(1) rotate(9deg) translateX(96px); z-index:1; transition-delay:.31s; }
.m3-stack:not(.is-in) .m3-stack-card{ transform:translateY(24px) scale(.92) !important; }

.m3-stack-card.c1 .icon{ background:var(--m3-yekta-container); color:var(--m3-yekta); }
.m3-stack-card.c2 .icon{ background:var(--m3-primary-container); color:var(--m3-primary); }
.m3-stack-card.c3 .icon{ background:var(--m3-tapsell-container); color:var(--m3-tapsell); }

/* ---------- stats strip ---------- */
.m3-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--m3-outline-variant); border-radius:28px; overflow:hidden;
  margin-top:4rem;
}
.m3-stat{ padding:1.6rem 1.4rem; background:var(--m3-surface-1); border-inline-start:1px solid var(--m3-outline-variant); }
.m3-stat:first-child{ border-inline-start:none; }
.m3-stat .num{ font-family:'Roboto Mono',monospace; direction:ltr; font-size:1.7rem; font-weight:700; color:var(--m3-primary); }
.m3-stat .label{ font-size:.8rem; color:var(--m3-on-surface-variant); margin-top:2px; }

/* ---------- section shell ---------- */
.m3-section{ padding:5rem 0; }
.m3-section-head{ margin-bottom:2.6rem; max-width:62ch; }
.m3-section-head .m3-eyebrow{ margin-bottom:1rem; }
.m3-section-head h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:800; margin-bottom:.6rem; }
.m3-section-head p{ color:var(--m3-on-surface-variant); font-size:.98rem; margin:0; }

/* ---------- tool cards ---------- */
.m3-tool-card{
  background:var(--m3-surface-1); border:1px solid var(--m3-outline-variant);
  border-radius:28px; padding:2rem; height:100%; display:flex; flex-direction:column;
  transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.m3-tool-card:hover{ box-shadow:var(--m3-elev-3); transform:translateY(-4px); border-color:transparent; }
.m3-tool-card .icon-wrap{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom:1.4rem;
}
.m3-tool-card.t1 .icon-wrap{ background:var(--m3-yekta-container); color:var(--m3-yekta); }
.m3-tool-card.t2 .icon-wrap{ background:var(--m3-tapsell-container); color:var(--m3-tapsell); }
.m3-tool-card.t3 .icon-wrap{ background:var(--m3-primary-container); color:var(--m3-on-primary-container); }
.m3-tool-card h3{ font-size:1.15rem; font-weight:800; margin-bottom:.6rem; }
.m3-tool-card p{ color:var(--m3-on-surface-variant); font-size:.92rem; flex-grow:1; margin-bottom:1.6rem; }
.m3-tool-card .m3-chip-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:1.4rem; }
.m3-chip{
  font-family:'Roboto Mono',monospace; direction:ltr; font-size:.68rem;
  padding:.3rem .6rem; border-radius:8px; border:1px solid var(--m3-outline-variant);
  color:var(--m3-on-surface-variant);
}
.m3-tool-card .m3-btn{ align-self:flex-start; }

/* ---------- about / intro ---------- */
.m3-about-card{
  background:var(--m3-surface-1); border:1px solid var(--m3-outline-variant);
  border-radius:28px; padding:2.4rem; display:flex; gap:1.8rem; align-items:flex-start; flex-wrap:wrap;
}
.m3-avatar{
  width:76px; height:76px; border-radius:22px; flex:none;
  background:linear-gradient(135deg, var(--m3-primary), var(--m3-yekta));
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; font-weight:900; color:var(--m3-on-primary);
}
.m3-about-card h3{ font-size:1.2rem; font-weight:800; margin-bottom:.3rem; }
.m3-about-card .role{ font-size:.85rem; color:var(--m3-on-surface-variant); margin-bottom:1rem; }
.m3-about-card p.bio{ color:var(--m3-on-surface-variant); font-size:.94rem; max-width:60ch; margin:0; }
.m3-about-placeholder-note{
  font-family:'Roboto Mono',monospace; direction:ltr; font-size:.68rem;
  color:var(--m3-primary); margin-top:1rem; display:block;
}

/* ---------- footer ---------- */
.m3-footer{
  border-top:1px solid var(--m3-outline-variant);
  padding:2.4rem 0; color:var(--m3-on-surface-variant); font-size:.85rem;
}

/* ---------- responsive ---------- */
@media (max-width: 991px){
  .m3-stack{ height:300px; }
  .m3-stack-card{ width:190px; padding:16px; }
  .m3-stack-card.c1{ transform:rotate(-8deg) translateX(-64px) translateY(10px); }
  .m3-stack-card.c3{ transform:rotate(8deg) translateX(64px) translateY(10px); }
}
@media (max-width: 767px){
  .m3-hero{ padding:3.2rem 0 2.4rem; }
  .m3-stack{ height:250px; margin-top:2rem; }
  .m3-stack-card{ width:150px; padding:12px; border-radius:18px; }
  .m3-stack-card h4{ font-size:.82rem; }
  .m3-stack-card p{ display:none; }
  .m3-stack-card.c1{ transform:rotate(-8deg) translateX(-48px) translateY(6px); }
  .m3-stack-card.c3{ transform:rotate(8deg) translateX(48px) translateY(6px); }
  .m3-stats{ grid-template-columns:repeat(2,1fr); border-radius:20px; }
  .m3-stat{ border-inline-start:none; border-top:1px solid var(--m3-outline-variant); }
  .m3-stat:nth-child(1), .m3-stat:nth-child(2){ border-top:none; }
  .m3-section{ padding:3.2rem 0; }
  .m3-about-card{ padding:1.6rem; }
}
@media (prefers-reduced-motion: reduce){
  .m3-stack-card, .m3-icon-btn .bi{ transition:none !important; }
}