/*!
 * WebStudio — Custom WordPress Theme
 * Main stylesheet (hand-authored, no framework, no build step)
 * Sections: Tokens, Reset, Base, Layout, Components, Sections, Utilities, Motion, Responsive
 */

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root{
  /* --- color: ink (near-black, used for dark sections & text) --- */
  --ink-950:#0a0c10;
  --ink-900:#12151c;
  --ink-800:#1b1f29;
  --ink-700:#262b38;
  --ink-600:#3a4152;

  /* --- color: neutral gray scale --- */
  --gray-50:#f7f8fa;
  --gray-100:#eef0f4;
  --gray-200:#dfe2e9;
  --gray-300:#c5cad4;
  --gray-400:#9aa2b1;
  --gray-500:#707a8c;
  --gray-600:#535c6c;
  --gray-700:#3c4453;

  /* --- color: brand accent (indigo-blue, tech/trust) --- */
  --accent-50:#eef1ff;
  --accent-100:#dde2ff;
  --accent-400:#6b7bff;
  --accent-500:#4f5dff;
  --accent-600:#3d47e0;
  --accent-700:#3038b8;

  /* --- color: luxury/gold highlight (sparse use) --- */
  --gold-400:#e0b84a;
  --gold-500:#c9a227;

  /* --- color: gradient accent (hero title highlight) --- */
  --gradient-accent:linear-gradient(135deg,#818cf8 0%,#c084fc 50%,#f472b6 100%);

  /* --- color: semantic --- */
  --paper:#ffffff;
  --paper-soft:#f7f8fa;
  --success:#1fae6a;

  --text-primary:var(--ink-900);
  --text-secondary:var(--gray-600);
  --text-inverse:#ffffff;
  --text-inverse-soft:rgba(255,255,255,.72);

  --border-soft:var(--gray-200);
  --border-strong:var(--gray-300);

  /* --- spacing scale --- */
  --space-1:.25rem;
  --space-2:.5rem;
  --space-3:.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:2.5rem;
  --space-8:3rem;
  --space-9:4rem;
  --space-10:5rem;
  --space-11:6.5rem;
  --space-12:8rem;

  /* --- radii --- */
  --radius-sm:.5rem;
  --radius-md:.875rem;
  --radius-lg:1.25rem;
  --radius-xl:1.75rem;
  --radius-full:999px;

  /* --- shadow (soft, purposeful — not heavy) --- */
  --shadow-sm:0 1px 2px rgba(10,12,16,.06);
  --shadow-md:0 8px 24px -8px rgba(10,12,16,.14);
  --shadow-lg:0 24px 48px -16px rgba(10,12,16,.22);
  --shadow-accent:0 16px 32px -12px rgba(79,93,255,.35);

  /* --- type scale (fluid via clamp) --- */
  --fs-hero:clamp(2.25rem,1.4rem + 3.6vw,4.25rem);
  --fs-h2:clamp(1.75rem,1.35rem + 1.7vw,2.75rem);
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.625rem);
  --fs-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);
  --fs-body:1rem;
  --fs-sm:.875rem;
  --fs-xs:.75rem;

  --container-w:1240px;

  /* --- motion --- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-fast:.18s;
  --dur-base:.32s;
  --dur-slow:.6s;

  --header-h:76px;
}

/* =========================================================
   2. RESET
   ========================================================= */
@font-face{
  font-family:'Iranian Sans';
  src:url('../fonts/iranian-sans.woff2') format('woff2'),
      url('../fonts/iranian-sans.woff') format('woff'),
      url('../fonts/iranian-sans.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto;}
html,body{height:100%;}
body{
  font-family:'Iranian Sans',Tahoma,'Segoe UI',Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:1.9;
  color:var(--text-primary);
  background:var(--paper);
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto;}
input,button,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;background:none;border:none;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
h1,h2,h3,h4{font-weight:800;line-height:1.3;letter-spacing:0;}
p{color:var(--text-secondary);}
:focus-visible{outline:2px solid var(--accent-500);outline-offset:3px;border-radius:4px;}
::selection{background:var(--accent-500);color:#fff;}

/* =========================================================
   3. LAYOUT
   ========================================================= */
.container{
  width:100%;
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--space-5);
}
.section{padding-block:var(--space-11);}
.section--tight{padding-block:var(--space-9);}
.section-head{
  max-width:640px;
  margin-inline:auto;
  text-align:center;
  margin-bottom:var(--space-9);
}
.section-head--right{margin-inline:0;text-align:right;}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--accent-600);
  background:var(--accent-50);
  padding:.4rem .9rem;
  border-radius:var(--radius-full);
  margin-bottom:var(--space-4);
}
.eyebrow--inverse{color:var(--accent-100);background:rgba(255,255,255,.08);}
.section-title{font-size:var(--fs-h2);color:var(--text-primary);margin-bottom:var(--space-4);}
.section-lead{font-size:var(--fs-lead);color:var(--text-secondary);}
.on-dark .section-title{color:#fff;}
.on-dark .section-lead{color:var(--text-inverse-soft);}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.skip-link{
  position:absolute;top:-100px;right:var(--space-4);z-index:9999;
  background:var(--accent-600);color:#fff;padding:.75rem 1.25rem;border-radius:var(--radius-sm);
  transition:top var(--dur-base) var(--ease-out);
}
.skip-link:focus{top:var(--space-4);}

/* =========================================================
   4. BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:var(--fs-sm);font-weight:700;
  padding:.9rem 1.75rem;
  border-radius:var(--radius-full);
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
  white-space:nowrap;
  border:1.5px solid transparent;
  will-change:transform;
}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--accent-500);color:#fff;box-shadow:var(--shadow-accent);}
.btn-primary:hover{background:var(--accent-600);transform:translateY(-2px);box-shadow:0 20px 36px -12px rgba(79,93,255,.42);}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--border-strong);}
.btn-ghost:hover{border-color:var(--accent-500);color:var(--accent-600);transform:translateY(-2px);}
.btn-ghost-inverse{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.22);}
.btn-ghost-inverse:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);transform:translateY(-2px);}
.btn-block{width:100%;}
.btn-lg{padding:1.1rem 2.25rem;font-size:1rem;}

/* =========================================================
   5. HEADER
   ========================================================= */
.site-header{
  position:fixed;inset-inline:0;top:0;z-index:1000;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.92);
  border-bottom-color:var(--border-soft);
  box-shadow:0 8px 24px -18px rgba(10,12,16,.25);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);width:100%;}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--text-primary);flex-shrink:0;}
.brand-mark{
  width:38px;height:38px;border-radius:.7rem;
  background:linear-gradient(135deg,var(--accent-500),var(--accent-700));
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
}
.brand-mark svg{width:20px;height:20px;}
.brand-text{display:flex;flex-direction:column;gap:.1rem;line-height:1;}
.brand-word{font-size:1.55rem;font-weight:800;letter-spacing:-.01em;}
.brand-black{color:var(--ink-900);}
.brand-blue{color:var(--accent-500);}
.brand-tagline{font-size:.7rem;font-weight:600;color:var(--text-secondary);letter-spacing:.01em;}
.primary-nav{display:none;}
.primary-nav ul{display:flex;align-items:center;gap:var(--space-7);}
.primary-nav a{
  font-size:var(--fs-sm);font-weight:600;color:var(--text-secondary);
  position:relative;padding-block:.35rem;
  transition:color var(--dur-fast) var(--ease-out);
}
.primary-nav a::after{
  content:'';position:absolute;right:0;bottom:-2px;width:0;height:2px;background:var(--accent-500);
  transition:width var(--dur-base) var(--ease-out);
}
.primary-nav a:hover{color:var(--text-primary);}
.primary-nav a:hover::after{width:100%;}
.header-actions{display:flex;align-items:center;gap:var(--space-4);}
.header-cta{display:none;}
.nav-toggle{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border-soft);flex-shrink:0;
}
.nav-toggle svg{width:20px;height:20px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle.is-active .icon-open{display:none;}
.nav-toggle.is-active .icon-close{display:block;}

.mobile-nav{
  position:fixed;inset:0;top:var(--header-h);z-index:999;
  background:var(--paper);
  padding:var(--space-6) var(--space-5);
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out),visibility var(--dur-base);
  overflow-y:auto;
}
.mobile-nav.is-open{transform:translateY(0);opacity:1;visibility:visible;}
.mobile-nav ul{display:flex;flex-direction:column;gap:var(--space-2);}
.mobile-nav a{display:block;padding:var(--space-4) var(--space-2);font-size:1.05rem;font-weight:700;border-bottom:1px solid var(--border-soft);}
.mobile-nav .header-cta{display:flex;margin-top:var(--space-6);}

/* =========================================================
   6. HERO
   ========================================================= */
.hero{
  position:relative;
  padding-top:calc(var(--header-h) + var(--space-10));
  padding-bottom:var(--space-11);
  background:var(--ink-950);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{position:absolute;inset:0;z-index:-1;}
.hero-bg::before{
  content:'';position:absolute;top:-20%;left:-10%;width:60%;height:70%;
  background:radial-gradient(circle,rgba(79,93,255,.35),transparent 70%);
  filter:blur(10px);
}
.hero-bg::after{
  content:'';position:absolute;bottom:-30%;right:-10%;width:55%;height:70%;
  background:radial-gradient(circle,rgba(201,162,39,.16),transparent 70%);
}
.hero-grid-overlay{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
}
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-6);position:relative;}
.hero-title{font-size:var(--fs-hero);font-weight:800;max-width:16ch;}
.hero-title .accent-word{
  background:var(--gradient-accent);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
@media (min-width:1024px){
  .hero-title{
    max-width:none;white-space:nowrap;
    font-size:clamp(2.4rem,-0.15rem + 5.2vw,3.9rem);
  }
}
.hero-subtitle{font-size:var(--fs-lead);color:var(--text-inverse-soft);max-width:52ch;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;margin-top:var(--space-2);}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:var(--space-7);justify-content:center;
  margin-top:var(--space-9);padding-top:var(--space-7);
  border-top:1px solid rgba(255,255,255,.12);width:100%;max-width:760px;
}
.hero-meta-item{display:flex;flex-direction:column;align-items:center;gap:.15rem;}
.hero-meta-num{font-size:1.75rem;font-weight:800;color:#fff;}
.hero-meta-label{font-size:var(--fs-xs);color:var(--text-inverse-soft);}

/* =========================================================
   7. TRUST BAR
   ========================================================= */
.trust{background:var(--paper-soft);border-bottom:1px solid var(--border-soft);}
.trust-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);
}
.trust-item{display:flex;align-items:center;gap:.85rem;}
.trust-icon{
  width:44px;height:44px;flex-shrink:0;border-radius:var(--radius-md);
  background:var(--paper);border:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:center;color:var(--accent-600);
  box-shadow:var(--shadow-sm);
}
.trust-icon svg{width:22px;height:22px;}
.trust-text{font-size:var(--fs-sm);font-weight:700;color:var(--text-primary);}

/* =========================================================
   8. SERVICES
   ========================================================= */
.services-grid{display:grid;grid-template-columns:1fr;gap:var(--space-5);}
.service-card{
  padding:var(--space-7);border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  background:var(--paper);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;}
.service-icon{
  width:52px;height:52px;border-radius:var(--radius-md);
  background:var(--accent-50);color:var(--accent-600);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-5);
  transition:background-color var(--dur-base),color var(--dur-base);
}
.service-icon svg{width:26px;height:26px;}
.service-card:hover .service-icon{background:var(--accent-500);color:#fff;}
.service-title{font-size:var(--fs-h3);margin-bottom:var(--space-2);}
.service-desc{font-size:var(--fs-sm);}
.seo-tool-body::after{content:'';display:table;clear:both;}
.seo-tool-visual{display:block;width:60px;height:34px;}
.seo-tool-visual svg{width:100%;height:100%;display:block;}
.seo-tool-visual--right{float:right;margin:.15rem 0 .5rem .75rem;}
.seo-tool-visual--left{float:left;margin:.15rem .75rem .5rem 0;}

/* =========================================================
   9. WHY US (no-elementor)
   ========================================================= */
.whyus{background:var(--ink-950);color:#fff;position:relative;overflow:hidden;}
.whyus-grid{display:grid;grid-template-columns:1fr;gap:var(--space-8);align-items:center;}
.whyus-list{display:flex;flex-direction:column;gap:var(--space-6);}
.whyus-item{display:flex;gap:var(--space-4);}
.whyus-num{
  font-size:1.1rem;font-weight:800;color:var(--accent-400);
  width:44px;height:44px;flex-shrink:0;border-radius:50%;
  border:1.5px solid rgba(79,93,255,.4);display:flex;align-items:center;justify-content:center;
}
.whyus-item h3{font-size:1.15rem;margin-bottom:.35rem;}
.whyus-item p{color:var(--text-inverse-soft);font-size:var(--fs-sm);}
.whyus-panel{
  border-radius:var(--radius-xl);
  background:linear-gradient(160deg,var(--ink-800),var(--ink-900));
  border:1px solid var(--ink-700);
  padding:var(--space-8);
  position:relative;
}
.whyus-panel-row{display:flex;align-items:center;justify-content:space-between;padding-block:var(--space-4);border-bottom:1px solid var(--ink-700);}
.whyus-panel-row:last-child{border-bottom:none;}
.whyus-panel-label{font-size:var(--fs-sm);color:var(--text-inverse-soft);}
.whyus-panel-bar{flex:1;max-width:140px;height:6px;border-radius:var(--radius-full);background:var(--ink-700);margin:0 var(--space-4);overflow:hidden;}
.whyus-panel-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent-500),var(--accent-400));}
.whyus-panel-val{font-size:var(--fs-sm);font-weight:800;color:#fff;flex-shrink:0;}

/* =========================================================
   10. PORTFOLIO
   ========================================================= */
.portfolio-filters{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:var(--space-8);}
.portfolio-filter{
  font-size:var(--fs-xs);font-weight:700;padding:.55rem 1.1rem;border-radius:var(--radius-full);
  border:1.5px solid var(--border-soft);color:var(--text-secondary);
  transition:all var(--dur-fast) var(--ease-out);
}
.portfolio-filter.is-active,.portfolio-filter:hover{background:var(--ink-950);border-color:var(--ink-950);color:#fff;}
.portfolio-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);}
.portfolio-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--ink-950);aspect-ratio:4/3;
}
.portfolio-mockup{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;}
.portfolio-mockup-svg{animation:ws-portfolio-scroll 16s ease-in-out infinite;}
@keyframes ws-portfolio-scroll{
  0%,42%{transform:translateY(0);}
  54%,71%{transform:translateY(-77%);}
  100%{transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .portfolio-mockup-svg{animation:none;}
}
.portfolio-card{cursor:pointer;}
.portfolio-card.is-paused .portfolio-mockup-svg{animation:none;transform:translateY(0);}
.portfolio-card.is-paused .portfolio-overlay{opacity:1;background:linear-gradient(to top,rgba(10,12,16,.85) 0%,rgba(10,12,16,.15) 60%,transparent 100%);}
.portfolio-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--space-6);
  background:linear-gradient(to top,rgba(10,12,16,.92) 0%,rgba(10,12,16,.35) 55%,transparent 100%);
  opacity:0;transition:opacity var(--dur-base) var(--ease-out);
}
.portfolio-card:hover .portfolio-overlay,.portfolio-card:focus-within .portfolio-overlay{opacity:1;}
.portfolio-card:hover .portfolio-mockup,.portfolio-card:focus-within .portfolio-mockup{transform:scale(1.04);}
.portfolio-mockup{transition:transform var(--dur-slow) var(--ease-out);}
.portfolio-cat{font-size:var(--fs-xs);font-weight:700;color:var(--accent-400);margin-bottom:.25rem;}
.portfolio-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);color:var(--text-secondary);margin-bottom:var(--space-6);flex-wrap:wrap;}
.portfolio-breadcrumb a{color:var(--text-secondary);transition:color var(--dur-fast) var(--ease-out);}
.portfolio-breadcrumb a:hover{color:var(--accent-600);}
.portfolio-breadcrumb span:last-child{color:var(--text-primary);font-weight:600;}
.portfolio-name{font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:var(--space-4);}
.portfolio-links{display:flex;flex-wrap:wrap;gap:.6rem;}
.portfolio-link{
  display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);font-weight:700;color:#fff;
  background:rgba(255,255,255,.14);padding:.55rem 1rem;border-radius:var(--radius-full);width:fit-content;
  transition:background var(--dur-fast);
}
.portfolio-link:hover{background:var(--accent-500);}
.portfolio-link svg{width:14px;height:14px;}

/* =========================================================
   11. PRICING
   ========================================================= */
.pricing-grid{display:grid;grid-template-columns:1fr;gap:var(--space-6);align-items:stretch;}
.price-card{
  display:flex;flex-direction:column;
  border:1.5px solid var(--border-soft);border-radius:var(--radius-xl);
  padding:var(--space-7);background:var(--paper);position:relative;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.price-card.is-featured{
  border-color:var(--accent-500);
  background:linear-gradient(160deg,var(--ink-950),var(--ink-900));color:#fff;
  box-shadow:var(--shadow-lg);
}
.price-badge{
  position:absolute;top:-14px;right:var(--space-6);
  background:var(--gold-500);color:var(--ink-950);
  font-size:var(--fs-xs);font-weight:800;padding:.4rem .9rem;border-radius:var(--radius-full);
  box-shadow:0 8px 16px -6px rgba(201,162,39,.55);
}
.price-dot{width:10px;height:10px;border-radius:50%;margin-bottom:var(--space-4);}
.price-name{font-size:1.3rem;font-weight:800;margin-bottom:.35rem;}
.price-desc{font-size:var(--fs-sm);color:var(--text-secondary);margin-bottom:var(--space-6);}
.is-featured .price-desc{color:var(--text-inverse-soft);}
.price-amount{display:flex;align-items:baseline;gap:.4rem;margin-bottom:var(--space-6);}
.price-num{font-size:2.35rem;font-weight:800;}
.price-unit{font-size:var(--fs-sm);color:var(--text-secondary);}
.is-featured .price-unit{color:var(--text-inverse-soft);}
.price-features{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-7);flex:1;}
.price-features li{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--fs-sm);}
.price-features svg{width:18px;height:18px;flex-shrink:0;margin-top:.15rem;color:var(--success);}
.is-featured .price-features svg{color:var(--accent-400);}
.price-duration{font-size:var(--fs-xs);color:var(--text-secondary);text-align:center;margin-top:var(--space-4);}
.is-featured .price-duration{color:var(--text-inverse-soft);}

/* =========================================================
   12. ADDONS
   ========================================================= */
.addons-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--border-soft);border:1px solid var(--border-soft);border-radius:var(--radius-lg);overflow:hidden;}
.addon-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-6);background:var(--paper);}
.addon-name{font-size:var(--fs-sm);font-weight:700;}
.addon-price{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-sm);font-weight:800;color:var(--accent-600);white-space:nowrap;}
.addon-price svg{width:15px;height:15px;}
.addon-price.is-quote{color:var(--text-secondary);font-weight:600;}

/* =========================================================
   13. PROCESS TIMELINE
   ========================================================= */
.process-list{display:flex;flex-direction:column;}
.process-item{display:flex;gap:var(--space-5);position:relative;padding-bottom:var(--space-8);}
.process-item:last-child{padding-bottom:0;}
.process-item::before{
  content:'';position:absolute;top:52px;bottom:0;right:23px;width:2px;
  background:var(--border-soft);
}
.process-item:last-child::before{display:none;}
.process-num{
  width:48px;height:48px;flex-shrink:0;border-radius:50%;
  background:var(--ink-950);color:#fff;font-weight:800;font-size:var(--fs-sm);
  display:flex;align-items:center;justify-content:center;z-index:1;
}
.process-body{padding-top:.6rem;}
.process-body h3{font-size:1.05rem;margin-bottom:.25rem;}
.process-body p{font-size:var(--fs-sm);}
.process-note{
  margin-top:var(--space-8);padding:var(--space-5) var(--space-6);
  background:var(--accent-50);border-radius:var(--radius-md);
  font-size:var(--fs-sm);color:var(--accent-700);font-weight:600;display:flex;gap:.6rem;align-items:flex-start;
}
.process-note svg{width:20px;height:20px;flex-shrink:0;margin-top:.1rem;}

/* =========================================================
   14. FAQ
   ========================================================= */
.faq-list{max-width:820px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-3);}
.faq-item{border:1px solid var(--border-soft);border-radius:var(--radius-md);overflow:hidden;background:var(--paper);}
.faq-question{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  width:100%;padding:var(--space-5) var(--space-6);font-weight:700;font-size:var(--fs-body);text-align:right;
}
.faq-icon{width:34px;height:34px;border-radius:50%;background:var(--paper-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform var(--dur-base) var(--ease-out),background var(--dur-base);}
.faq-icon svg{width:16px;height:16px;}
.faq-item.is-open .faq-icon{background:var(--accent-500);color:#fff;transform:rotate(45deg);}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ease-out);}
.faq-answer-inner{overflow:hidden;}
.faq-answer p{padding:0 var(--space-6) var(--space-5);font-size:var(--fs-sm);}
.faq-item.is-open .faq-answer{grid-template-rows:1fr;}

/* =========================================================
   15. FINAL CTA
   ========================================================= */
.final-cta{
  background:linear-gradient(150deg,var(--accent-700),var(--ink-950) 70%);
  color:#fff;border-radius:var(--radius-xl);
  padding:var(--space-10) var(--space-6);text-align:center;
  margin-inline:var(--space-5);
  position:relative;overflow:hidden;
}
.final-cta::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.15) 1px,transparent 1px);
  background-size:26px 26px;opacity:.4;
}
.final-cta-inner{position:relative;max-width:640px;margin-inline:auto;}
.final-cta h2{font-size:var(--fs-h2);margin-bottom:var(--space-4);}
.final-cta p{color:var(--text-inverse-soft);font-size:var(--fs-lead);margin-bottom:var(--space-7);}
.final-cta-actions{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:center;}

/* =========================================================
   15b. LEAD FORM (inside final CTA)
   ========================================================= */
.lead-form{
  display:grid;grid-template-columns:1fr;gap:var(--space-4);
  text-align:right;margin-top:var(--space-7);
}
.lead-form-row{display:grid;grid-template-columns:1fr;gap:var(--space-4);}
.lead-field label{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--text-inverse-soft);margin-bottom:.4rem;}
.lead-field input,.lead-field select,.lead-field textarea{
  width:100%;padding:.85rem 1.1rem;border-radius:var(--radius-md);
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);color:#fff;
  font-family:inherit;font-size:var(--fs-sm);transition:border-color var(--dur-fast),background var(--dur-fast);
}
.lead-field select{color:#fff;}
.lead-field select option{color:#111;}
.lead-field input::placeholder,.lead-field textarea::placeholder{color:rgba(255,255,255,.4);}
.lead-field input:focus,.lead-field select:focus,.lead-field textarea:focus{
  border-color:var(--accent-400);background:rgba(255,255,255,.12);outline:none;
}
.lead-field textarea{resize:vertical;min-height:96px;}
.lead-form-submit{margin-top:var(--space-2);}
.lead-form-note{font-size:var(--fs-xs);color:var(--text-inverse-soft);margin-top:var(--space-3);}
.lead-message{
  display:flex;align-items:center;gap:.6rem;justify-content:center;
  padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);
  font-size:var(--fs-sm);font-weight:700;margin-bottom:var(--space-6);
}
.lead-message svg{width:20px;height:20px;flex-shrink:0;}
.lead-message.is-success{background:rgba(31,174,106,.15);color:#5fe0a3;border:1px solid rgba(31,174,106,.35);}
.lead-message.is-error{background:rgba(220,80,80,.15);color:#ff9c9c;border:1px solid rgba(220,80,80,.35);}
.lead-form.is-hidden{display:none;}

/* =========================================================
   16. FOOTER
   ========================================================= */
.site-footer{background:var(--ink-950);color:var(--text-inverse-soft);}
.footer-top{display:grid;grid-template-columns:1fr;gap:var(--space-8);padding-block:var(--space-10);border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand p{color:var(--text-inverse-soft);font-size:var(--fs-sm);margin-top:var(--space-4);max-width:34ch;}
.footer-brand .brand-black{color:var(--text-inverse);}
.footer-brand .brand-tagline{color:var(--text-inverse-soft);}
.footer-social{display:flex;gap:.6rem;margin-top:var(--space-5);}
.footer-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast),border-color var(--dur-fast);
}
.footer-social svg{width:17px;height:17px;}
.footer-social a:hover{background:var(--accent-500);border-color:var(--accent-500);}
.footer-col h3{color:#fff;font-size:var(--fs-sm);margin-bottom:var(--space-4);}
.footer-col ul{display:flex;flex-direction:column;gap:.7rem;}
.footer-col a,.footer-col li{font-size:var(--fs-sm);color:var(--text-inverse-soft);transition:color var(--dur-fast);}
.footer-col a:hover{color:#fff;}
.footer-contact li{display:flex;align-items:flex-start;gap:.55rem;}
.footer-contact svg{width:17px;height:17px;flex-shrink:0;margin-top:.15rem;color:var(--accent-400);}
.footer-bottom{display:flex;flex-direction:column;gap:var(--space-3);align-items:center;text-align:center;padding-block:var(--space-6);font-size:var(--fs-xs);}
.footer-bottom a{color:var(--text-inverse-soft);}
.footer-bottom a:hover{color:#fff;}

/* =========================================================
   17. GSAP / SCROLL-REVEAL PREP STATES
   ========================================================= */
[data-reveal]{opacity:0;transform:translateY(28px);}
.js-ready [data-reveal]{opacity:0;transform:translateY(28px);}
.js-ready.js-animated [data-reveal],.no-js [data-reveal]{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important;}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

/* =========================================================
   18. RESPONSIVE
   ========================================================= */
@media (min-width:640px){
  .trust-grid{grid-template-columns:repeat(3,1fr);}
  .pricing-grid{grid-template-columns:repeat(2,1fr);}
  .portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .lead-form-row{grid-template-columns:1fr 1fr;}
}
@media (min-width:860px){
  .whyus-grid{grid-template-columns:1.1fr 1fr;}
  .footer-top{grid-template-columns:1.4fr 1fr 1fr 1fr;}
}
@media (min-width:960px){
  .container{padding-inline:var(--space-6);}
  .primary-nav{display:block;}
  .header-cta{display:inline-flex;}
  .nav-toggle{display:none;}
  .mobile-nav{display:none;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .trust-grid{grid-template-columns:repeat(6,1fr);}
  .trust-text{font-size:var(--fs-xs);}
  .pricing-grid{grid-template-columns:repeat(3,1fr);}
  .price-card.is-featured{transform:scale(1.045);}
  .price-card.is-featured:hover{transform:scale(1.045) translateY(-6px);}
  .portfolio-grid{grid-template-columns:repeat(3,1fr);}
  .addon-row{padding:var(--space-5) var(--space-7);}
}
@media (min-width:1180px){
  .services-grid{grid-template-columns:repeat(4,1fr);}
}