/* ================================================================
   YaakoubPro — High-Fidelity Claymorphism layer
   Centralized visual system. Loaded after assets/site.css.
   ================================================================ */

:root{
  --bg:#F4F1FA;
  --surface:rgba(255,255,255,.72);
  --surface-2:rgba(255,255,255,.40);
  --ink:#332F3A;
  --muted:#635F69;
  --line:rgba(124,58,237,.13);
  --brand:#7C3AED;
  --brand-2:#DB2777;
  --brand-soft:#EDE9FE;
  --success:#10B981;
  --warning:#F59E0B;
  --sky:#0EA5E9;
  --dark:#332F3A;
  --display:"Nunito","DM Sans",system-ui,sans-serif;
  --font:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:32px;
  --clay-deep:
    30px 30px 60px rgba(205,198,217,.72),
    -30px -30px 60px rgba(255,255,255,.92),
    inset 10px 10px 20px rgba(139,92,246,.05),
    inset -10px -10px 20px rgba(255,255,255,.80);
  --clay-card:
    16px 16px 32px rgba(160,150,180,.20),
    -10px -10px 24px rgba(255,255,255,.90),
    inset 6px 6px 12px rgba(139,92,246,.03),
    inset -6px -6px 12px rgba(255,255,255,1);
  --clay-card-hover:
    22px 24px 44px rgba(139,92,166,.24),
    -12px -12px 30px rgba(255,255,255,.96),
    inset 7px 7px 14px rgba(139,92,246,.04),
    inset -7px -7px 14px rgba(255,255,255,1);
  --clay-button:
    12px 12px 24px rgba(139,92,246,.30),
    -8px -8px 16px rgba(255,255,255,.40),
    inset 4px 4px 8px rgba(255,255,255,.40),
    inset -4px -4px 8px rgba(0,0,0,.10);
  --clay-button-hover:
    16px 17px 30px rgba(124,58,237,.36),
    -9px -9px 18px rgba(255,255,255,.48),
    inset 4px 4px 9px rgba(255,255,255,.46),
    inset -4px -4px 9px rgba(0,0,0,.11);
  --clay-pressed:
    inset 10px 10px 20px #d9d4e3,
    inset -10px -10px 20px #ffffff;
  --shadow:var(--clay-card);
}

html[data-theme="dark"]{
  --bg:#211D2A;
  --surface:rgba(55,48,67,.82);
  --surface-2:rgba(63,54,78,.50);
  --ink:#FAF8FF;
  --muted:#D3CBDD;
  --line:rgba(196,181,253,.18);
  --brand:#A78BFA;
  --brand-2:#F472B6;
  --brand-soft:rgba(124,58,237,.22);
  --dark:#17131D;
  --clay-deep:
    30px 30px 60px rgba(10,8,14,.55),
    -22px -22px 52px rgba(76,67,91,.32),
    inset 10px 10px 20px rgba(167,139,250,.05),
    inset -10px -10px 20px rgba(255,255,255,.025);
  --clay-card:
    16px 16px 32px rgba(10,8,14,.40),
    -10px -10px 24px rgba(88,76,104,.18),
    inset 6px 6px 12px rgba(167,139,250,.035),
    inset -6px -6px 12px rgba(255,255,255,.02);
  --clay-card-hover:
    22px 24px 44px rgba(8,6,12,.48),
    -12px -12px 30px rgba(93,80,112,.21),
    inset 7px 7px 14px rgba(167,139,250,.05),
    inset -7px -7px 14px rgba(255,255,255,.025);
  --clay-pressed:
    inset 10px 10px 20px rgba(10,8,14,.58),
    inset -10px -10px 20px rgba(88,76,104,.20);
}

html{background:var(--bg)}
body{
  position:relative;
  isolation:isolate;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  letter-spacing:0;
  line-height:1.65;
}
body::before,body::after{
  content:"";
  position:fixed;
  z-index:-2;
  width:min(62vh,720px);
  height:min(62vh,720px);
  border-radius:50%;
  filter:blur(72px);
  pointer-events:none;
  opacity:.52;
  will-change:transform;
}
body::before{
  top:-18vh;
  left:-12vw;
  background:rgba(139,92,246,.17);
  animation:clay-float 9s ease-in-out infinite;
}
body::after{
  right:-16vw;
  top:26vh;
  background:rgba(14,165,233,.13);
  animation:clay-float-delayed 11s ease-in-out 1.8s infinite;
}
main{position:relative;z-index:1}
main::before{
  content:"";
  position:fixed;
  z-index:-2;
  left:36vw;
  bottom:-28vh;
  width:min(58vh,680px);
  height:min(58vh,680px);
  border-radius:50%;
  background:rgba(219,39,119,.10);
  filter:blur(82px);
  pointer-events:none;
  animation:clay-float-slow 13s ease-in-out 2.5s infinite;
}

h1,h2,h3,h4,.section-title,.cta-content h2,.builder-total,.trust-item strong{
  font-family:var(--display);
  font-weight:800;
}
.hero h1,.page-hero h1{
  font-weight:900;
  letter-spacing:-.045em;
  line-height:1.08;
  text-wrap:balance;
}
.section-title{font-weight:900;letter-spacing:-.035em;line-height:1.1}
.hero h1 em,.page-hero h1 em,.section-title em{
  background:linear-gradient(110deg,#332F3A 10%,#7C3AED 52%,#DB2777 92%);
  background-size:160% auto;
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent!important;
  animation:clay-gradient-shift 8s ease-in-out infinite;
}
html[data-theme="dark"] .hero h1 em,
html[data-theme="dark"] .page-hero h1 em,
html[data-theme="dark"] .section-title em{
  background:linear-gradient(110deg,#F8F5FF 8%,#C4B5FD 52%,#F9A8D4 94%);
  background-clip:text;-webkit-background-clip:text;color:transparent!important;
}
.eyebrow,.kicker{color:var(--brand);font-weight:800;letter-spacing:.12em}
.hero-copy>p,.page-hero p,.section-head p,.service-card p,.benefit p,.feature p,.process-step p,.faq-a p,.content-card p,.content-card li{color:var(--muted)}

/* Floating clay navigation */
.site-header{
  top:14px;
  left:50%;
  right:auto;
  bottom:auto;
  width:min(1180px,calc(100% - 30px));
  height:72px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.72);
  border-radius:40px;
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(20px) saturate(1.15);
  -webkit-backdrop-filter:blur(20px) saturate(1.15);
  box-shadow:var(--clay-card);
  overflow:visible;
}
html[data-theme="dark"] .site-header{background:rgba(50,43,62,.72);border-color:rgba(255,255,255,.07)}
.site-header.scrolled,.site-header.menu-active{
  top:10px;
  height:68px;
  border-color:rgba(124,58,237,.12);
  background:rgba(255,255,255,.80);
  box-shadow:var(--clay-card-hover);
}
html[data-theme="dark"] .site-header.scrolled,html[data-theme="dark"] .site-header.menu-active{background:rgba(50,43,62,.88)}
.site-header .container{width:100%;padding-inline:18px}
.brand{font-family:var(--display);font-weight:900;font-size:1.12rem;letter-spacing:-.025em}
.brand img{
  width:40px;height:40px;border-radius:16px;
  box-shadow:8px 8px 16px rgba(139,92,246,.16),-6px -6px 14px rgba(255,255,255,.70),inset 3px 3px 7px rgba(255,255,255,.20),inset -3px -3px 7px rgba(0,0,0,.08);
}
.brand b{color:var(--brand)}
.nav-link,.mega-trigger{
  min-height:44px;
  padding:10px 14px;
  border-radius:18px;
  font-weight:700;
  transition:transform .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease;
}
.nav-link:after{display:none}
.nav-link:hover,.nav-link:focus-visible,.mega-trigger:hover,.mega-trigger:focus-visible,.nav-link[aria-current="page"]{
  transform:translateY(-2px);
  background:rgba(255,255,255,.66);
  color:var(--brand);
  box-shadow:8px 8px 16px rgba(160,150,180,.13),-6px -6px 14px rgba(255,255,255,.78),inset 3px 3px 6px rgba(139,92,246,.025),inset -3px -3px 6px rgba(255,255,255,.8);
}
html[data-theme="dark"] .nav-link:hover,html[data-theme="dark"] .nav-link:focus-visible,html[data-theme="dark"] .mega-trigger:hover,html[data-theme="dark"] .mega-trigger:focus-visible,html[data-theme="dark"] .nav-link[aria-current="page"]{background:rgba(255,255,255,.05)}
.icon-btn,.language-switcher summary{
  border:0;
  border-radius:18px;
  background:rgba(255,255,255,.62);
  box-shadow:8px 8px 16px rgba(160,150,180,.16),-6px -6px 14px rgba(255,255,255,.82),inset 3px 3px 7px rgba(139,92,246,.025),inset -3px -3px 7px rgba(255,255,255,.86);
}
.icon-btn{width:44px;height:44px}
.icon-btn:hover{transform:translateY(-3px) rotate(3deg);border-color:transparent;background:#fff;color:var(--brand);box-shadow:var(--clay-card)}
.icon-btn:active{transform:scale(.92);box-shadow:var(--clay-pressed)}
.language-switcher summary{min-height:44px;padding-inline:11px}
.language-switcher summary:hover,.language-switcher[open] summary{border-color:transparent;background:#fff;box-shadow:var(--clay-card);color:var(--brand)}

.mega-menu,.language-menu{
  border:1px solid rgba(255,255,255,.65);
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:var(--clay-deep);
}
html[data-theme="dark"] .mega-menu,html[data-theme="dark"] .language-menu{background:rgba(55,48,67,.92);border-color:rgba(255,255,255,.08)}
.mega-menu{border-radius:32px;padding:14px;gap:10px}
.mega-item{border-radius:22px;min-height:88px;border:1px solid transparent}
.mega-item:hover,.mega-item:focus-visible{background:rgba(237,233,254,.76);border-color:rgba(124,58,237,.10);transform:translateY(-2px);box-shadow:8px 8px 18px rgba(160,150,180,.12),-6px -6px 14px rgba(255,255,255,.65)}
.mega-icon{
  border-radius:16px;
  background:linear-gradient(145deg,#A78BFA,#7C3AED);
  color:#fff;
  box-shadow:7px 7px 14px rgba(124,58,237,.24),-4px -4px 10px rgba(255,255,255,.34),inset 3px 3px 6px rgba(255,255,255,.36),inset -3px -3px 6px rgba(0,0,0,.10);
}
.mega-feature{background:linear-gradient(145deg,#4C1D95,#7C3AED);box-shadow:var(--clay-button);border:0}
.mega-feature:hover,.mega-feature:focus-visible{background:linear-gradient(145deg,#5B21B6,#8B5CF6)}
.language-menu{border-radius:20px;padding:8px}
.language-menu a{border-radius:14px}
.language-menu a:hover{background:var(--brand-soft)}

/* Tactile controls */
.btn{
  min-height:54px;
  border:0;
  border-radius:20px;
  padding:14px 22px;
  font-family:var(--font);
  font-weight:800;
  letter-spacing:.01em;
  transition:transform .20s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,background .2s ease,color .2s ease;
}
.btn-sm{min-height:46px;padding:11px 17px;border-radius:17px}
.btn:before{display:none!important}
.btn-primary,.mobile-cta{
  color:#fff!important;
  background:linear-gradient(145deg,#A78BFA 0%,#7C3AED 64%,#6D28D9 100%)!important;
  box-shadow:var(--clay-button)!important;
}
.btn-primary:after{border-radius:19px;border-color:rgba(255,255,255,.20)}
.btn-primary:hover,.btn-primary:focus-visible,.mobile-cta:hover,.mobile-cta:focus-visible{
  color:#fff!important;
  background:linear-gradient(145deg,#B69CFF 0%,#8B5CF6 62%,#7C3AED 100%)!important;
  transform:translateY(-4px)!important;
  box-shadow:var(--clay-button-hover)!important;
}
.btn-secondary,.btn-dark{
  background:rgba(255,255,255,.76)!important;
  color:var(--ink)!important;
  border:0!important;
  box-shadow:var(--clay-card)!important;
}
html[data-theme="dark"] .btn-secondary,html[data-theme="dark"] .btn-dark{background:rgba(255,255,255,.06)!important;color:var(--ink)!important}
.btn-secondary:hover,.btn-secondary:focus-visible,.btn-dark:hover,.btn-dark:focus-visible{
  background:#fff!important;
  color:var(--brand)!important;
  transform:translateY(-4px)!important;
  box-shadow:var(--clay-card-hover)!important;
}
.btn:active,.btn-primary:active,.btn-secondary:active,.btn-dark:active{
  transform:scale(.92)!important;
  box-shadow:var(--clay-pressed)!important;
}

/* Home hero becomes an actual split clay composition. */
.hero--integrated{
  width:min(1380px,calc(100% - 30px));
  min-height:760px;
  margin:104px auto 34px;
  padding:56px 0;
  border:1px solid rgba(255,255,255,.68);
  border-radius:58px;
  background:rgba(255,255,255,.42);
  box-shadow:var(--clay-deep);
  overflow:hidden;
  isolation:isolate;
}
html[data-theme="dark"] .hero--integrated{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.05)}
.hero--integrated::before,.hero--integrated::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(24px);
  pointer-events:none;
  z-index:0;
}
.hero--integrated::before{width:220px;height:220px;background:rgba(219,39,119,.10);left:37%;top:-100px;animation:clay-breathe 7s ease-in-out infinite}
.hero--integrated::after{width:180px;height:180px;background:rgba(16,185,129,.09);left:4%;bottom:-100px;animation:clay-float-delayed 10s ease-in-out infinite}
.hero--integrated .hero-background{
  z-index:1;
  top:42px;
  right:3.3%;
  bottom:42px;
  left:auto;
  width:46%;
  height:auto;
  border-radius:46px;
  overflow:hidden;
  opacity:1;
  background:#EEE9F7;
  box-shadow:var(--clay-card-hover);
  border:8px solid rgba(255,255,255,.62);
}
html[dir="rtl"] .hero--integrated .hero-background{right:auto;left:3.3%}
.hero--integrated .hero-background img{width:100%;height:100%;object-fit:cover;animation:clay-hero-image 14s ease-in-out infinite alternate!important}
.hero--integrated .hero-scrim{display:none}
.hero--integrated .hero-grid{
  position:relative;
  z-index:2;
  grid-template-columns:minmax(0,1fr) minmax(400px,.90fr)!important;
  gap:52px;
  align-items:center;
}
html[dir="rtl"] .hero--integrated .hero-grid{grid-template-columns:minmax(400px,.90fr) minmax(0,1fr)!important}
.hero--integrated .hero-copy{max-width:650px;padding-block:20px}
.hero h1{font-size:clamp(3.2rem,5.4vw,5.5rem);margin-bottom:24px}
.hero-copy>p{font-size:clamp(1.04rem,1.15vw,1.18rem);line-height:1.75;max-width:58ch}
.eyebrow:before{height:5px;width:26px;border-radius:99px;background:linear-gradient(90deg,#A78BFA,#DB2777);box-shadow:3px 4px 8px rgba(124,58,237,.18),-2px -2px 5px rgba(255,255,255,.75)}

.project-starter{
  margin-top:30px;
  padding:22px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:32px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--clay-card);
}
html[data-theme="dark"] .project-starter{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.07)}
.project-starter:focus-within{transform:translateY(-3px);box-shadow:var(--clay-card-hover)}
.starter-head{font-family:var(--display);font-weight:800}
.service-choices{gap:10px}
.service-choice{
  min-height:82px;
  border:0;
  border-radius:20px;
  background:#EFEBF5;
  color:var(--ink);
  box-shadow:var(--clay-pressed);
  padding:13px 14px;
}
html[data-theme="dark"] .service-choice{background:rgba(17,13,24,.40)}
.service-choice:hover{background:#F8F5FF;border:0;transform:translateY(-3px);box-shadow:var(--clay-card)}
.service-choice.is-selected{
  color:#fff;
  border:0;
  background:linear-gradient(145deg,#A78BFA,#7C3AED);
  box-shadow:var(--clay-button);
}
.service-choice.is-selected:after{background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.17)}
.service-choice:active{transform:scale(.94);box-shadow:var(--clay-pressed)}
.starter-footer{border-color:rgba(124,58,237,.10);padding-top:15px;margin-top:16px}
.trust-row{gap:18px;margin-top:22px}
.trust-item{
  min-width:118px;
  padding:12px 15px;
  border-radius:20px;
  background:rgba(255,255,255,.42);
  box-shadow:8px 8px 18px rgba(160,150,180,.12),-6px -6px 14px rgba(255,255,255,.62),inset 3px 3px 6px rgba(139,92,246,.02),inset -3px -3px 6px rgba(255,255,255,.60);
}
.trust-item strong{font-size:1.35rem;font-weight:900;color:var(--brand)}
.trust-item span{color:var(--muted)}

/* Main spacing and soft sections */
.section{padding:112px 0}
.section-soft{
  position:relative;
  margin-inline:15px;
  border-radius:58px;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.46);
  box-shadow:inset 12px 12px 26px rgba(139,92,246,.025),inset -12px -12px 26px rgba(255,255,255,.44);
}
html[data-theme="dark"] .section-soft{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.035)}
.section-head{margin-bottom:54px}
.section-head p{font-size:1.05rem;line-height:1.72}

/* Universal clay cards */
.service-card,.benefit,.feature,.content-card,.contact-card,.policy-card,.collaboration-grid article,.builder-option,.process-step{
  border:1px solid rgba(255,255,255,.68)!important;
  background:rgba(255,255,255,.66)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--clay-card)!important;
}
html[data-theme="dark"] :is(.service-card,.benefit,.feature,.content-card,.contact-card,.policy-card,.collaboration-grid article,.builder-option,.process-step){background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.055)!important}
.service-card,.content-card,.contact-card,.policy-card,.collaboration-grid article{border-radius:32px}
.service-card{overflow:hidden;transform:translateZ(0)}
.service-card:before{display:none}
.service-card:hover{
  transform:translateY(-9px)!important;
  border-color:rgba(124,58,237,.14)!important;
  box-shadow:var(--clay-card-hover)!important;
}
.service-media{margin:10px;border-radius:24px;overflow:hidden;background:#EEE9F7}
.service-media:after{background:linear-gradient(135deg,rgba(124,58,237,.13),transparent 48%,rgba(219,39,119,.06))}
.service-body{padding:20px 26px 27px}
.service-card h3{font-family:var(--display);font-weight:900;font-size:1.35rem}
.price-tag{
  padding:7px 10px;
  border-radius:999px;
  color:#6D28D9;
  background:#EDE9FE;
  box-shadow:inset 3px 3px 7px rgba(124,58,237,.08),inset -3px -3px 7px rgba(255,255,255,.80);
}
.text-link{font-weight:800;color:var(--brand)}

.why-image,.page-visual,.hero-picture{
  border:8px solid rgba(255,255,255,.56)!important;
  border-radius:40px!important;
  box-shadow:var(--clay-card-hover)!important;
  background:#EEE9F7!important;
}
.why-image img,.page-visual img,.hero-picture img{border-radius:31px}
.benefit-grid{gap:18px}
.benefit{
  border-radius:28px!important;
  padding:23px!important;
  min-height:190px;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),box-shadow .34s ease,background .34s ease!important;
}
.benefit:hover,.benefit:focus-within{
  color:var(--ink)!important;
  background:rgba(255,255,255,.78)!important;
  border-color:rgba(124,58,237,.12)!important;
  transform:translateY(-7px)!important;
  box-shadow:var(--clay-card-hover)!important;
}
html[data-theme="dark"] .benefit:hover,html[data-theme="dark"] .benefit:focus-within{background:rgba(255,255,255,.065)!important;color:var(--ink)!important}
.benefit:hover :is(h3,p,.benefit-num,.benefit-icon),.benefit:focus-within :is(h3,p,.benefit-num,.benefit-icon){color:inherit!important}
.benefit-num{color:var(--brand)!important;font-family:var(--display);font-weight:900}
.benefit-icon{
  width:40px;height:40px;
  border-radius:15px;
  color:#fff!important;
  background:linear-gradient(145deg,#38BDF8,#0EA5E9)!important;
  box-shadow:7px 7px 14px rgba(14,165,233,.20),-5px -5px 12px rgba(255,255,255,.58),inset 3px 3px 6px rgba(255,255,255,.35),inset -3px -3px 6px rgba(0,0,0,.08);
}
.benefit:nth-child(2) .benefit-icon{background:linear-gradient(145deg,#C084FC,#7C3AED)!important}
.benefit:nth-child(3) .benefit-icon{background:linear-gradient(145deg,#F472B6,#DB2777)!important}
.benefit:nth-child(4) .benefit-icon{background:linear-gradient(145deg,#34D399,#10B981)!important}
.benefit h3{font-family:var(--display);font-weight:900;font-size:1.12rem}

/* Projects: keep the strong imagery, wrap it in clay. */
.project-card{
  border:8px solid rgba(255,255,255,.62)!important;
  border-radius:36px!important;
  background:#E9E3F1;
  box-shadow:var(--clay-card)!important;
  transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s ease!important;
}
.project-card:before{top:18px;left:20px}
.project-card:hover{transform:translateY(-10px) scale(1.012)!important;box-shadow:var(--clay-card-hover)!important;border-color:rgba(255,255,255,.82)!important}
.project-card img{border-radius:27px}
.project-overlay{border-radius:27px;background:linear-gradient(180deg,rgba(51,47,58,.01) 28%,rgba(34,27,47,.88))}
.project-open{
  width:50px;height:50px;
  border-radius:18px;
  background:rgba(255,255,255,.90);
  color:var(--brand);
  box-shadow:9px 9px 18px rgba(20,12,35,.22),-5px -5px 12px rgba(255,255,255,.32),inset 3px 3px 6px rgba(255,255,255,.65),inset -3px -3px 6px rgba(124,58,237,.05);
}
.project-open:active{transform:scale(.90)!important;box-shadow:var(--clay-pressed)}
.project-copy span{color:#DDD6FE}
.project-copy h3{font-family:var(--display);font-weight:900}

/* Process cards instead of a flat timeline */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-top:0}
.process-step{
  padding:26px!important;
  border-radius:28px!important;
  min-height:190px;
  overflow:hidden;
  transition:transform .34s ease,box-shadow .34s ease!important;
}
.process-step:before{display:none}
.process-step:hover{transform:translateY(-7px);box-shadow:var(--clay-card-hover)!important}
.process-step strong{
  display:grid;
  place-items:center;
  width:46px;height:46px;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(145deg,#A78BFA,#7C3AED);
  box-shadow:var(--clay-button);
  font-family:var(--display);
  font-weight:900;
}
.process-step:nth-child(2) strong{background:linear-gradient(145deg,#F472B6,#DB2777)}
.process-step:nth-child(3) strong{background:linear-gradient(145deg,#38BDF8,#0EA5E9)}
.process-step:nth-child(4) strong{background:linear-gradient(145deg,#34D399,#10B981)}
.process-step h3{font-family:var(--display);font-size:1.18rem;font-weight:900;margin-top:22px}
.process-icon{border:0;border-radius:16px;background:linear-gradient(145deg,#A78BFA,#7C3AED);color:#fff;box-shadow:var(--clay-button)}

/* FAQ: recessed-open physical panels */
.faq-list{border-top:0;display:grid;gap:14px}
.faq-item{
  border:0;
  border-radius:26px;
  padding-inline:18px;
  background:rgba(255,255,255,.60);
  box-shadow:var(--clay-card);
  overflow:hidden;
  transition:transform .26s ease,box-shadow .26s ease,background .26s ease;
}
html[data-theme="dark"] .faq-item{background:rgba(255,255,255,.04)}
.faq-item:hover{background:rgba(255,255,255,.72);transform:translateY(-3px);box-shadow:var(--clay-card-hover)}
.faq-item.open{background:#EFEBF5;box-shadow:var(--clay-pressed);transform:none}
html[data-theme="dark"] .faq-item.open{background:rgba(16,12,23,.36)}
.faq-q{padding:21px 5px;font-family:var(--display);font-size:1rem;font-weight:800}
.faq-item.open .faq-q{color:var(--brand)}
.faq-a p{padding-bottom:22px}

/* Page heroes and informational components */
.page-hero{padding:140px 0 82px}
.page-hero:not(.page-hero--banner) .page-hero-grid{
  padding:36px;
  border-radius:48px;
  background:rgba(255,255,255,.38);
  box-shadow:var(--clay-deep);
  border:1px solid rgba(255,255,255,.58);
}
.page-hero--banner{
  width:min(1380px,calc(100% - 30px));
  margin:104px auto 20px;
  padding:72px 0;
  min-height:500px;
  border-radius:56px;
  box-shadow:var(--clay-deep);
  border:8px solid rgba(255,255,255,.54);
  background:#EEE9F7;
}
.page-hero--banner .page-banner{border-radius:48px;overflow:hidden}
.page-hero--banner .page-banner:after{background:linear-gradient(90deg,rgba(244,241,250,.96),rgba(244,241,250,.78) 44%,rgba(244,241,250,.14))}
html[dir="rtl"] .page-hero--banner .page-banner:after{background:linear-gradient(270deg,rgba(244,241,250,.96),rgba(244,241,250,.78) 44%,rgba(244,241,250,.14))}
html[data-theme="dark"] .page-hero--banner .page-banner:after{background:linear-gradient(90deg,rgba(33,29,42,.96),rgba(33,29,42,.78) 44%,rgba(33,29,42,.16))}
html[data-theme="dark"][dir="rtl"] .page-hero--banner .page-banner:after{background:linear-gradient(270deg,rgba(33,29,42,.96),rgba(33,29,42,.78) 44%,rgba(33,29,42,.16))}
.breadcrumb{
  display:inline-flex;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  box-shadow:7px 7px 15px rgba(160,150,180,.10),-5px -5px 12px rgba(255,255,255,.62);
}

.feature-list{gap:20px}
.feature{
  border-top:0!important;
  border-radius:26px;
  padding:25px;
  transition:transform .30s ease,box-shadow .30s ease!important;
}
.feature:hover{transform:translateY(-6px)!important;box-shadow:var(--clay-card-hover)!important}
.feature h3{font-family:var(--display);font-weight:900}

.builder{gap:32px}
.builder-options{gap:14px}
.builder-option{
  border-radius:24px!important;
  padding:20px;
}
.builder-option:hover{transform:translateY(-4px)!important;box-shadow:var(--clay-card-hover)!important}
.builder-option input{width:22px;height:22px;accent-color:var(--brand)}
.builder-summary{
  border-radius:36px;
  padding:32px;
  color:#fff;
  background:linear-gradient(145deg,#5B21B6,#7C3AED 58%,#DB2777 125%);
  box-shadow:var(--clay-button-hover);
  overflow:hidden;
}
.builder-summary:before{
  content:"";position:absolute;width:180px;height:180px;right:-80px;top:-80px;border-radius:50%;background:rgba(255,255,255,.10);filter:blur(2px)
}
.builder-summary>span,.builder-summary p,.summary-meta,.note{color:#EEE8FF!important}
.builder-total{font-weight:900}
.quality-line{height:10px;background:rgba(255,255,255,.16);box-shadow:inset 4px 4px 8px rgba(40,15,80,.25),inset -3px -3px 7px rgba(255,255,255,.08)}
.quality-line i{background:linear-gradient(90deg,#F9A8D4,#fff,#A7F3D0)}
.builder-base{
  border:0;
  border-radius:24px;
  background:#EFEBF5;
  box-shadow:var(--clay-pressed);
  color:var(--ink);
  padding:20px 22px;
}

.field input,.field select,.field textarea{
  min-height:58px;
  border:0;
  border-radius:20px;
  background:#EFEBF5;
  color:var(--ink);
  box-shadow:var(--clay-pressed);
  padding:14px 18px;
  transition:background .22s ease,box-shadow .22s ease,transform .22s ease,outline .22s ease;
}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select,html[data-theme="dark"] .field textarea{background:rgba(16,12,23,.36)}
.field textarea{min-height:145px}
.field input:focus,.field select:focus,.field textarea:focus{
  border:0;
  background:#fff;
  box-shadow:var(--clay-card);
  outline:4px solid rgba(124,58,237,.14);
  transform:translateY(-1px);
}
html[data-theme="dark"] .field input:focus,html[data-theme="dark"] .field select:focus,html[data-theme="dark"] .field textarea:focus{background:rgba(255,255,255,.08)}
.contact-grid{gap:30px}
.contact-card{padding:32px}
.contact-point i{
  width:44px;height:44px;border-radius:16px;color:#fff;
  background:linear-gradient(145deg,#38BDF8,#0EA5E9);
  box-shadow:7px 7px 14px rgba(14,165,233,.18),-5px -5px 12px rgba(255,255,255,.62),inset 3px 3px 6px rgba(255,255,255,.34),inset -3px -3px 6px rgba(0,0,0,.08);
}

/* Final call to action */
.final-cta{padding:48px 0 112px}
.cta-shell{
  min-height:450px;
  border:8px solid rgba(255,255,255,.56);
  border-radius:48px;
  overflow:hidden;
  background:linear-gradient(145deg,#6D28D9 0%,#7C3AED 48%,#DB2777 125%);
  color:#fff;
  box-shadow:var(--clay-deep);
}
.cta-image{margin:12px;border-radius:34px;overflow:hidden;box-shadow:inset 7px 7px 14px rgba(58,28,90,.24),inset -5px -5px 12px rgba(255,255,255,.12)}
.cta-image img{border-radius:32px}
.cta-image:after{background:linear-gradient(270deg,rgba(109,40,217,.02) 35%,rgba(91,33,182,.52))}
html[dir="rtl"] .cta-image:after{background:linear-gradient(90deg,rgba(109,40,217,.02) 35%,rgba(91,33,182,.52))}
.cta-content{padding:58px}
.cta-content .kicker{color:#E9D5FF}
.cta-content h2{font-weight:900}
.cta-content p{color:#F3E8FF;font-size:1.02rem;line-height:1.72}
.cta-content:after{background:rgba(255,255,255,.075);filter:blur(4px)}
.cta-shell .btn-dark,.cta-shell .btn-secondary{
  background:rgba(255,255,255,.88)!important;
  color:#4C1D95!important;
  box-shadow:12px 12px 24px rgba(60,20,95,.26),-7px -7px 16px rgba(255,255,255,.18),inset 4px 4px 8px rgba(255,255,255,.52),inset -4px -4px 8px rgba(76,29,149,.08)!important;
}
.cta-shell .btn-dark:hover,.cta-shell .btn-secondary:hover{background:#fff!important;color:#7C3AED!important}

/* Footer: substantial but still rounded and tactile. */
.site-footer{
  z-index:1;
  position:relative;
  width:min(1380px,calc(100% - 30px));
  margin:0 auto 15px;
  padding:72px 0 28px;
  border-radius:56px;
  background:#332F3A;
  color:#F7F4FB;
  box-shadow:22px 22px 46px rgba(60,48,70,.18),-16px -16px 38px rgba(255,255,255,.45),inset 8px 8px 16px rgba(255,255,255,.025),inset -8px -8px 16px rgba(0,0,0,.14);
}
.site-footer .brand b{color:#C4B5FD}
.footer-about p,.footer-col a,.footer-bottom{color:#D4CEDA}
.footer-col h3{font-family:var(--display);font-weight:900}
.socials a{
  width:44px;height:44px;border:0;border-radius:16px;
  background:#403A49;
  box-shadow:8px 8px 16px rgba(17,14,21,.26),-5px -5px 12px rgba(92,84,103,.16),inset 3px 3px 6px rgba(255,255,255,.035),inset -3px -3px 6px rgba(0,0,0,.14);
}
.socials a:hover{background:#7C3AED;transform:translateY(-4px);box-shadow:var(--clay-button)}
.footer-bottom{border-color:rgba(255,255,255,.10)}

/* Mobile menu as a clay sheet */
@media(max-width:980px){
  .site-header{top:10px;height:66px;border-radius:32px}
  .site-header.scrolled,.site-header.menu-active{top:8px;height:64px}
  .site-header .container{padding-inline:13px}
  .brand img{width:38px;height:38px;border-radius:15px}
  .mobile-panel{
    inset:86px 12px 12px;
    z-index:120;
    padding:62px 18px 22px;
    border:1px solid rgba(255,255,255,.65);
    border-radius:34px;
    background:rgba(255,255,255,.92)!important;
    backdrop-filter:blur(22px)!important;
    -webkit-backdrop-filter:blur(22px)!important;
    box-shadow:var(--clay-deep);
    transform:translateX(110%);
  }
  html[dir="rtl"] .mobile-panel{transform:translateX(-110%)}
  .mobile-panel.open{transform:none}
  html[data-theme="dark"] .mobile-panel{background:rgba(55,48,67,.95)!important;border-color:rgba(255,255,255,.06)}
  .mobile-close{top:15px;right:17px;border:0;border-radius:16px;background:#F5F1FA;box-shadow:var(--clay-card)}
  html[dir="rtl"] .mobile-close{left:17px;right:auto}
  .mobile-panel a,.mobile-service-trigger{border-bottom:0;margin:3px 0;padding:13px 14px;border-radius:18px;transition:background .2s,box-shadow .2s,transform .2s}
  .mobile-panel a:hover,.mobile-service-trigger:hover{background:var(--brand-soft);box-shadow:inset 4px 4px 8px rgba(124,58,237,.05),inset -4px -4px 8px rgba(255,255,255,.48)}
  .mobile-cta{margin-top:14px!important;border-radius:20px!important;min-height:54px!important}
}

@media(max-width:980px) and (min-width:721px){
  .hero--integrated{min-height:860px}
  .hero--integrated .hero-grid{grid-template-columns:1fr!important;padding-bottom:390px}
  .hero--integrated .hero-background{top:auto;left:4%!important;right:4%!important;bottom:34px;width:92%;height:350px}
  .page-hero:not(.page-hero--banner) .page-hero-grid{padding:30px}
  .process-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:720px){
  :root{--radius:26px}
  body::before,body::after{opacity:.34;filter:blur(60px)}
  .section{padding:78px 0}
  .section-soft{margin-inline:8px;border-radius:36px}
  .site-header{width:calc(100% - 20px)}
  .hero--integrated{
    display:flex;
    flex-direction:column;
    width:calc(100% - 16px);
    min-height:0;
    margin:88px auto 20px;
    padding:28px 0 18px;
    border-radius:38px;
  }
  .hero--integrated .hero-grid{order:1;display:block!important;padding:0 5px}
  .hero--integrated .hero-copy{padding:0}
  .hero--integrated .hero-background{
    position:relative;
    order:2;
    inset:auto!important;
    width:calc(100% - 30px);
    height:320px;
    margin:26px auto 2px;
    border-width:6px;
    border-radius:32px;
  }
  .hero--integrated .hero-background img{border-radius:26px;animation:none!important}
  .hero h1{font-size:clamp(2.55rem,12vw,3.75rem);line-height:1.08}
  .hero-copy>p{font-size:1rem;line-height:1.72}
  .project-starter{padding:16px;border-radius:26px}
  .service-choice{border-radius:18px}
  .trust-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .trust-item{min-width:0;padding:11px 12px;border-radius:17px}
  .section-head{margin-bottom:35px}
  .section-title{font-size:clamp(2.15rem,10vw,3rem)}
  .service-card,.content-card,.contact-card,.policy-card,.collaboration-grid article{border-radius:28px}
  .service-media{border-radius:21px}
  .why-image,.page-visual,.hero-picture{border-width:6px!important;border-radius:32px!important}
  .benefit{border-radius:24px!important;min-height:0}
  .project-card{border-width:6px!important;border-radius:30px!important}
  .project-card img,.project-overlay{border-radius:24px}
  .project-open{width:46px;height:46px;border-radius:16px}
  .process-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .process-step{min-height:175px;border-radius:24px!important;padding:21px!important}
  .process-step strong{width:42px;height:42px;border-radius:15px}
  .loop-viewport.process-grid,.loop-viewport.benefit-grid{display:block!important;overflow:hidden}
  .loop-track>.benefit,.loop-track>.process-step{
    flex:0 0 min(78vw,310px);
    border-radius:24px!important;
    background:rgba(255,255,255,.70)!important;
    box-shadow:var(--clay-card)!important;
    border:1px solid rgba(255,255,255,.68)!important;
  }
  .faq-item{border-radius:22px}
  .page-hero{padding:100px 0 58px}
  .page-hero:not(.page-hero--banner) .page-hero-grid{padding:20px;border-radius:32px}
  .page-hero--banner{
    width:calc(100% - 16px);
    margin:88px auto 8px;
    padding:42px 0;
    min-height:430px;
    border-width:6px;
    border-radius:36px;
  }
  .page-hero--banner .page-banner{border-radius:29px}
  .page-hero--banner .page-banner:after{background:linear-gradient(180deg,rgba(244,241,250,.92),rgba(244,241,250,.78) 58%,rgba(244,241,250,.34))!important}
  html[data-theme="dark"] .page-hero--banner .page-banner:after{background:linear-gradient(180deg,rgba(33,29,42,.94),rgba(33,29,42,.78) 58%,rgba(33,29,42,.34))!important}
  .feature{border-radius:24px}
  .builder-option{border-radius:22px!important}
  .builder-summary{border-radius:28px;padding:27px}
  .field input,.field select,.field textarea{border-radius:18px}
  .final-cta{padding:30px 0 80px}
  .cta-shell{border-width:6px;border-radius:36px}
  .cta-image{height:245px;margin:9px;border-radius:27px}
  .cta-image img{border-radius:25px}
  .cta-image:after{background:linear-gradient(180deg,transparent 34%,rgba(91,33,182,.55))!important}
  .cta-content{padding:30px 24px 32px}
  .site-footer{width:calc(100% - 16px);margin-bottom:8px;border-radius:38px;padding-top:58px}
}

@media(max-width:440px){
  .trust-row{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr}
  .hero--integrated .hero-background{height:280px}
  .project-starter .btn{width:100%}
}

html[lang="ar"] body{font-family:"Alexandria",Tahoma,Arial,sans-serif;letter-spacing:0!important}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] .section-title,html[lang="ar"] .cta-content h2,html[lang="ar"] .brand{font-family:"Alexandria",Tahoma,Arial,sans-serif;font-weight:800;letter-spacing:0!important}
html[lang="ar"] .hero h1{font-weight:800;line-height:1.24}
html[dir="rtl"] .service-choice{text-align:right;align-items:flex-start}
html[dir="rtl"] .faq-q{text-align:right}

@keyframes clay-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(2deg)}}
@keyframes clay-float-delayed{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-15px) rotate(-2deg)}}
@keyframes clay-float-slow{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-30px) rotate(5deg)}}
@keyframes clay-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes clay-hero-image{0%{transform:scale(1.02) translate3d(0,0,0)}100%{transform:scale(1.08) translate3d(-1%,-.4%,0)}}
@keyframes clay-gradient-shift{0%,100%{background-position:0% center}50%{background-position:100% center}}

@media(prefers-reduced-motion:reduce){
  body::before,body::after,main::before,.hero--integrated::before,.hero--integrated::after,.hero--integrated .hero-background img,.hero h1 em,.page-hero h1 em,.section-title em{animation:none!important}
  .btn,.service-card,.benefit,.project-card,.process-step,.feature,.builder-option{transition-duration:.01ms!important}
}

/* Desktop bento composition — avoids a generic uniform service grid. */
@media(min-width:981px){
  .services-grid{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:22px;
  }
  .services-grid .service-card:first-child{grid-row:1 / 3}
  .services-grid .service-card:first-child .service-media{aspect-ratio:16/10}
  .services-grid .service-card:first-child .service-body{padding:25px 29px 31px}
  .services-grid .service-card:first-child h3{font-size:1.55rem}
  .services-grid .service-card:first-child p{font-size:1rem;max-width:54ch}
  .services-grid .service-card:not(:first-child){
    display:grid;
    grid-template-columns:minmax(150px,.86fr) minmax(0,1.14fr);
    align-items:stretch;
  }
  .services-grid .service-card:not(:first-child) .service-media{
    height:calc(100% - 20px);
    min-height:190px;
    aspect-ratio:auto;
  }
  .services-grid .service-card:not(:first-child) .service-body{
    padding:22px 22px 22px 10px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  html[dir="rtl"] .services-grid .service-card:not(:first-child) .service-body{padding:22px 10px 22px 22px}
}

/* ===== Arabic typography + RTL refinement (v7) ===== */
html[lang="ar"]{
  --font-ar-body:"Noto Sans Arabic",Tahoma,Arial,sans-serif;
  --font-ar-display:"Alexandria","Noto Sans Arabic",Tahoma,Arial,sans-serif;
}

html[lang="ar"] body{
  font-family:var(--font-ar-body);
  font-weight:500;
  line-height:1.82;
  letter-spacing:0!important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

html[lang="ar"] :is(h1,h2,h3,h4,.section-title,.cta-content h2,.brand,.builder-total,.trust-item strong,.starter-head){
  font-family:var(--font-ar-display);
  letter-spacing:0!important;
}

html[lang="ar"] :is(.btn,.nav-link,.mega-trigger,.service-choice,.mobile-panel a,.mobile-service-trigger,.text-link,.price-tag,.eyebrow,.kicker,.breadcrumb,.footer-col h3){
  font-family:var(--font-ar-display);
  letter-spacing:0!important;
}

html[lang="ar"] :is(.hero-copy>p,.page-hero p,.section-head p,.service-card p,.benefit p,.feature p,.process-step p,.faq-a p,.content-card p,.content-card li,.footer-about p,.footer-col a,.mega-item small,.contact-point span,.builder-option small){
  font-family:var(--font-ar-body);
  font-weight:500;
  line-height:1.9;
  letter-spacing:0!important;
}

html[lang="ar"] .hero h1,
html[lang="ar"] .page-hero h1{
  font-family:var(--font-ar-display);
  font-weight:800;
  line-height:1.28;
  letter-spacing:0!important;
  text-wrap:pretty;
}

html[lang="ar"] .section-title{
  font-weight:800;
  line-height:1.28;
  letter-spacing:0!important;
  text-wrap:pretty;
}

/* Explicit RTL alignment for all text-bearing components. */
html[dir="rtl"] :is(
  .hero-copy,.project-starter,.starter-head,.starter-result,
  .section-head,.service-body,.benefit,.feature,.process-step,
  .content-card,.contact-card,.policy-card,.collaboration-grid article,
  .builder-option,.builder-summary,.faq-intro,.faq-a,.footer-col,.footer-about,
  .project-copy,.mega-item,.mobile-panel,.mobile-services,.page-hero-grid
){
  text-align:right;
}

html[dir="rtl"] :is(.service-choice,.mobile-service-trigger,.mobile-panel a,.mobile-services a){
  text-align:right;
}

html[dir="rtl"] .service-choice{
  align-items:flex-start;
}

html[dir="rtl"] .starter-head,
html[dir="rtl"] .starter-footer,
html[dir="rtl"] .service-top,
html[dir="rtl"] .section-head,
html[dir="rtl"] .trust-row,
html[dir="rtl"] .cta-actions,
html[dir="rtl"] .footer-grid{
  direction:rtl;
}

/* Keep mixed Arabic + numbers/currency readable without reversing digits. */
html[dir="rtl"] :is(.price-tag,.starter-result strong,.builder-total,.trust-item strong,.summary-meta){
  unicode-bidi:plaintext;
  direction:rtl;
}

html[dir="rtl"] .brand{
  direction:ltr;
  unicode-bidi:isolate;
}

html[dir="rtl"] .text-link,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .btn{
  direction:rtl;
}

html[dir="rtl"] .faq-q{
  text-align:right;
  direction:rtl;
}

html[dir="rtl"] .field label,
html[dir="rtl"] .contact-form label{
  text-align:right;
}

html[lang="ar"] .eyebrow,
html[lang="ar"] .kicker{
  font-weight:700;
  text-transform:none;
  letter-spacing:0!important;
}

html[lang="ar"] .service-choice{
  font-size:.86rem;
  font-weight:700;
  line-height:1.55;
}

html[lang="ar"] .price-tag,
html[lang="ar"] .starter-kicker,
html[lang="ar"] .breadcrumb,
html[lang="ar"] .project-copy span,
html[lang="ar"] .trust-item span{
  line-height:1.65;
}

@media(max-width:720px){
  html[lang="ar"] body{font-size:16.5px;line-height:1.85}
  html[lang="ar"] .hero h1,
  html[lang="ar"] .page-hero h1{
    font-size:clamp(2.3rem,10.6vw,3.18rem);
    line-height:1.31;
  }
  html[lang="ar"] .section-title{line-height:1.34}
  html[lang="ar"] :is(.hero-copy>p,.page-hero p,.section-head p){
    font-size:1.04rem;
    line-height:1.95;
  }
  html[lang="ar"] :is(.service-card p,.benefit p,.feature p,.process-step p,.faq-a p,.content-card p,.content-card li,.footer-about p,.footer-col a){
    font-size:1rem;
    line-height:1.9;
  }
  html[lang="ar"] .service-choice{font-size:.88rem;line-height:1.55}
  html[lang="ar"] .starter-head{font-size:.98rem;line-height:1.65}
  html[lang="ar"] .starter-kicker{font-size:.78rem}
  html[lang="ar"] .btn{font-size:.94rem}
  html[dir="rtl"] .starter-footer .starter-result{
    direction:rtl;
    text-align:right;
  }
}

/* ===== Desktop-only motion polish (v7) =====
   Deliberately excluded from touch/mobile to preserve the optimized scroll path. */
@media(min-width:981px) and (hover:hover) and (pointer:fine){
  :is(
    .service-card,.benefit,.feature,.content-card,.contact-card,.policy-card,
    .collaboration-grid article,.builder-option,.process-step,.faq-item,
    .project-starter,.trust-item,.mega-item
  ){
    transition:
      transform .38s cubic-bezier(.2,.8,.2,1),
      box-shadow .38s ease,
      border-color .38s ease,
      background-color .38s ease,
      color .28s ease!important;
  }

  :is(.content-card,.contact-card,.policy-card,.collaboration-grid article):hover{
    transform:translateY(-6px);
    border-color:rgba(124,58,237,.14)!important;
    box-shadow:var(--clay-card-hover)!important;
  }

  .trust-item{
    transition:
      transform .32s cubic-bezier(.2,.8,.2,1),
      box-shadow .32s ease,
      background-color .32s ease!important;
  }
  .trust-item:hover{
    transform:translateY(-5px);
    background:rgba(255,255,255,.58);
    box-shadow:var(--clay-card);
  }
  html[data-theme="dark"] .trust-item:hover{background:rgba(255,255,255,.055)}

  .service-media img,
  .project-card img,
  .why-image img,
  .page-visual img{
    transition:transform .58s cubic-bezier(.2,.75,.2,1),filter .45s ease!important;
  }
  .service-card:hover .service-media img{transform:scale(1.035)}
  .project-card:hover img{transform:scale(1.025)}
  .why-image:hover img,.page-visual:hover img{transform:scale(1.018)}

  .service-card h3,
  .feature h3,
  .benefit h3,
  .content-card h3,
  .contact-card h3{
    transition:color .28s ease,transform .28s ease;
  }
  .service-card:hover h3,
  .feature:hover h3,
  .benefit:hover h3{
    color:var(--brand);
  }

  .text-link svg{
    transition:transform .28s cubic-bezier(.2,.8,.2,1)!important;
  }
  html:not([dir="rtl"]) .text-link:hover svg{transform:translateX(5px)}
  html[dir="rtl"] .text-link:hover svg{transform:scaleX(-1) translateX(5px)}

  /* Home cards polish that was still missing on desktop */
  .hero-stat,
  .service-choice,
  .project-open,
  .cta-shell,
  .cta-image,
  .cta-actions .btn,
  .faq-q svg,
  .price-tag{
    transition:
      transform .32s cubic-bezier(.2,.8,.2,1),
      box-shadow .32s ease,
      background-color .32s ease,
      color .28s ease,
      border-color .32s ease!important;
  }

  .project-starter{
    transition:
      transform .36s cubic-bezier(.2,.8,.2,1),
      box-shadow .36s ease,
      border-color .36s ease,
      background-color .36s ease!important;
  }

  .project-starter:hover{
    transform:translateY(-6px);
    box-shadow:var(--clay-card-hover)!important;
  }

  .hero-stat:hover{
    transform:translateY(-6px);
    box-shadow:var(--clay-card-hover);
    background:rgba(255,255,255,.58);
  }
  html[data-theme="dark"] .hero-stat:hover{background:rgba(255,255,255,.06)}

  .service-choice:hover{
    transform:translateY(-5px);
    box-shadow:var(--clay-card-hover);
  }
  .service-choice.is-selected:hover{
    transform:translateY(-4px);
    box-shadow:var(--clay-button-hover);
  }

  .service-card:hover .price-tag{
    color:#fff;
    background:linear-gradient(145deg,#A78BFA,#7C3AED);
    box-shadow:var(--clay-button);
  }

  .project-card:hover .project-open{
    transform:translateY(-2px) scale(1.03);
    background:#fff;
    box-shadow:var(--clay-button-hover);
  }

  .faq-item:hover .faq-q svg{
    transform:rotate(90deg);
  }
  .faq-item.open .faq-q svg{
    transform:rotate(45deg);
  }

  .cta-shell:hover{
    transform:translateY(-6px);
  }
  .cta-shell:hover .cta-image img{
    transform:scale(1.02);
  }

  .cta-actions .btn:hover{
    transform:translateY(-4px)!important;
  }
}