/* ================================================================
   NUMU WEBSITE — style.css v1.5.29 — WhatsApp float bottom-inset raised per skill PART 15 min (2.1rem floor on mobile to clear iOS home-indicator + URL bar) + v1.5.20 logo viewBox / process 2×2 / mobile heavy
   (100svh on hero/mobile-nav, hover guards on card grids, refined focus
    ring, press-feedback on small UI, removed unnecessary will-change,
    legal-link styling). All changes are additive; no behavioural breaks.
   ---------------------------------------------------------------- v1.5.5
   v1.5.5 — €750 STILL clipped after v1.5.4. User circled only the
   featured (€750) card in their screenshot — the non-featured €1,200
   rendered fine. That was the missing clue. The featured card has
   -webkit-background-clip:text + -webkit-text-fill-color:transparent
   for the gradient text-fill. This WebKit/Chromium feature clips the
   background-painted-as-text at the CONTENT BOX of the element, so
   glyph descenders extending into padding-bottom DON'T get the
   background painted there and appear flat-cut.
   No amount of line-height/padding/overflow tricks fixes this — it's
   intrinsic to how Chromium implements background-clip:text.
   Fix: removed the gradient. Featured price now uses solid
   --primary-deep (a deeper warm gold-brown). The featured card is
   still clearly differentiated by: the popular ribbon, the breathing
   popular-glow shadow, and the tinted background.
   v1.5.4 changes (filter:none on .reveal.visible) and v1.5.3 changes
   (overflow:visible on pricing-card-inner) remain — both were real
   issues that my testing flushed out.
   Pure CSS — no build step
   ================================================================ */

/* Self-hosted fonts — SIL OFL 1.1 */
@font-face{font-family:"Outfit";font-weight:400;font-display:swap;src:url("../fonts/outfit-400.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-weight:500;font-display:swap;src:url("../fonts/outfit-500.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-weight:600;font-display:swap;src:url("../fonts/outfit-600.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-weight:700;font-display:swap;src:url("../fonts/outfit-700.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-weight:800;font-display:swap;src:url("../fonts/outfit-800.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400;font-display:swap;src:url("../fonts/dmsans-400.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:500;font-display:swap;src:url("../fonts/dmsans-500.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:600;font-display:swap;src:url("../fonts/dmsans-600.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:700;font-display:swap;src:url("../fonts/dmsans-700.woff2") format("woff2")}
@font-face{font-family:"Noto Sans Arabic";font-weight:400;font-display:swap;src:url("../fonts/notoarabic-400.woff2") format("woff2")}
@font-face{font-family:"Noto Sans Arabic";font-weight:500;font-display:swap;src:url("../fonts/notoarabic-500.woff2") format("woff2")}
@font-face{font-family:"Noto Sans Arabic";font-weight:600;font-display:swap;src:url("../fonts/notoarabic-600.woff2") format("woff2")}
@font-face{font-family:"Noto Sans Arabic";font-weight:700;font-display:swap;src:url("../fonts/notoarabic-700.woff2") format("woff2")}

/* 1. TOKENS */
:root {
  --bg: 40 30% 96%;
  --bg-deep: 35 22% 92%;
  --fg: 25 22% 18%;
  --fg-soft: 25 20% 28%;
  --card: 40 35% 99%;
  --card-shell: 35 22% 93%;
  --primary: 31 52% 60%;
  --primary-deep: 28 51% 32%;
  --primary-fg: 25 22% 14%;
  --muted: 35 25% 90%;
  --muted-fg: 25 15% 40%;
  --accent: 15 55% 48%;
  --accent-fg: 40 30% 96%;
  --border: 35 18% 82%;
  --border-soft: 35 20% 88%;
  --shadow-tint: 28 45% 18%;
  --r-sm: 0.625rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-pill: 999px;
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --e-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --e-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --sh-1: 0 1px 2px hsl(var(--shadow-tint) / 0.06);
  --sh-2: 0 2px 4px hsl(var(--shadow-tint) / 0.04), 0 8px 24px hsl(var(--shadow-tint) / 0.06);
  --sh-3: 0 4px 8px hsl(var(--shadow-tint) / 0.05), 0 16px 40px hsl(var(--shadow-tint) / 0.10);
  --sh-4: 0 8px 16px hsl(var(--shadow-tint) / 0.06), 0 32px 64px hsl(var(--shadow-tint) / 0.14);
  --max-w: 1240px;
}

/* 2. RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"DM Sans",sans-serif;background:hsl(var(--bg));color:hsl(var(--fg));line-height:1.6;overflow-x:clip;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern","ss01","liga","calt"}
[dir="rtl"] body{font-family:"Noto Sans Arabic","DM Sans",sans-serif}
h1,h2,h3,h4,h5,h6{font-family:"Outfit",sans-serif;line-height:1.1;letter-spacing:-0.02em;text-wrap:balance}
p{text-wrap:pretty}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5,[dir="rtl"] h6{font-family:"Noto Sans Arabic","Outfit",sans-serif;letter-spacing:-0.01em}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
button{cursor:pointer;font:inherit;background:none;border:none}
ul,ol{list-style:none}
::selection{background:hsl(var(--primary)/0.30);color:hsl(var(--fg))}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:hsl(var(--bg-deep))}
::-webkit-scrollbar-thumb{background:hsl(var(--primary)/0.45);border-radius:10px;border:2px solid hsl(var(--bg-deep))}
::-webkit-scrollbar-thumb:hover{background:hsl(var(--primary)/0.7)}
:focus-visible{outline:1px solid hsl(var(--primary)/0.65);outline-offset:3px;box-shadow:0 0 0 4px hsl(var(--primary)/0.16);border-radius:4px;transition:box-shadow 0.18s var(--e-quart),outline-color 0.18s var(--e-quart)}

/* Subtle film-grain — paper feel */
body::before{content:'';position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0.035;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.13  0 0 0 0 0.08  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
@media(prefers-reduced-motion:reduce){body::before{opacity:0.02}}

/* 3. UTILITIES */
.container{max-width:var(--max-w);margin-inline:auto;padding-inline:1.25rem;position:relative}
@media(min-width:640px){.container{padding-inline:2rem}}
@media(min-width:1024px){.container{padding-inline:2.5rem}}
.section{padding-block:6rem}
@media(min-width:768px){.section{padding-block:8rem}}
@media(min-width:1024px){.section{padding-block:9rem}}
.section-muted{background:hsl(var(--bg-deep)/0.55);position:relative}
.section-muted::before{content:'';position:absolute;inset-inline:0;top:0;height:1px;background:linear-gradient(90deg,transparent,hsl(var(--border)) 20%,hsl(var(--border)) 80%,transparent)}
.text-center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:1rem;top:-3rem;z-index:300;padding:0.625rem 1rem;border-radius:var(--r-md);background:hsl(var(--fg));color:hsl(var(--bg));font-size:0.875rem;font-weight:500;transition:top 0.2s var(--e-quart)}
.skip-link:focus-visible{top:1rem}

/* 4. HEADER — Floating Pill Nav. Initial state: fully transparent.
   On scroll: glass pill materializes with backdrop-blur + border + shadow. */
.site-header{position:fixed;top:0;inset-inline:0;z-index:100;padding:0.75rem 1rem;transition:padding 0.5s var(--e-quart);pointer-events:none}
.site-header > *{pointer-events:auto}
@media(min-width:640px){.site-header{padding:1.25rem 1.5rem}}
.site-header.scrolled{padding-top:0.5rem}

.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:var(--max-w);margin-inline:auto;
  padding:0.625rem 0.625rem 0.625rem 1.25rem;
  border-radius:var(--r-pill);
  /* INITIAL STATE — fully see-through. No background, no border, no shadow, no blur. */
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:background 0.5s var(--e-quart),
             backdrop-filter 0.5s var(--e-quart),
             -webkit-backdrop-filter 0.5s var(--e-quart),
             border-color 0.5s var(--e-quart),
             box-shadow 0.5s var(--e-quart);
}
@media(min-width:640px){.header-inner{padding:0.75rem 0.75rem 0.75rem 1.5rem}}

/* SCROLLED STATE — pill materializes */
.site-header.scrolled .header-inner{
  background:hsl(var(--bg)/0.92);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-color:hsl(var(--border)/0.85);
  box-shadow:var(--sh-3), inset 0 1px 0 hsl(var(--card)/0.6);
}

.logo{display:inline-flex;align-items:center;color:hsl(var(--fg));transition:color 0.4s var(--e-quart), transform 0.4s var(--e-quart);line-height:0;padding:0.125rem 0}
.logo:hover{color:hsl(var(--primary-deep))}
.logo:active{transform:scale(0.96)}
/* v1.5.2: nudged height up + viewBox of source SVG extended so the period dot doesn't clip */
/* v1.5.20: logo SVG viewBox extended to -10 -10 920 220 to prevent
   period-dot clipping at small render sizes (anti-aliased edge loss).
   Heights bumped ~10% to keep letters visually the same size after the
   ~9% reduction caused by the larger viewBox. */
.logo-svg{display:block;height:2rem;width:auto}
@media(min-width:640px){.logo-svg{height:2.25rem}}

.nav-desktop{position:relative;isolation:isolate;display:none;align-items:center;gap:0.25rem}
@media(min-width:880px){.nav-desktop{display:flex}}
/* Sliding pill — vars set by JS, same iOS-drawer easing as the pricing tabs.
   Hover-tracks on the desktop nav; mouseleave snaps back to .active. */
.nav-desktop::before{content:'';position:absolute;left:var(--ind-x, 0);top:var(--ind-y, 0);width:var(--ind-w, 0);height:var(--ind-h, 0);background:hsl(var(--primary)/0.12);border-radius:var(--r-pill);opacity:0;pointer-events:none;z-index:0;transition:left 320ms cubic-bezier(0.32, 0.72, 0, 1), top 320ms cubic-bezier(0.32, 0.72, 0, 1), width 320ms cubic-bezier(0.32, 0.72, 0, 1), height 320ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease-out, background 240ms ease-out}
.nav-desktop.is-ready::before{opacity:1}
/* Hover state: pill picks up a slightly stronger tint to read as "you're hovering this" */
.nav-desktop.is-hovering::before{background:hsl(var(--primary)/0.16)}
.nav-link{position:relative;z-index:1;font-size:0.875rem;font-weight:500;color:hsl(var(--fg)/0.72);padding:0.5rem 0.875rem;border-radius:var(--r-pill);transition:color 0.32s cubic-bezier(0.32, 0.72, 0, 1), background 0.35s var(--e-quart), transform 0.18s var(--e-quart)}
.nav-link:hover{color:hsl(var(--fg))}
/* Fallback (JS off / pre-init): active link carries its own background */
.nav-link.active{color:hsl(var(--primary-deep));background:hsl(var(--primary)/0.12)}
.nav-desktop.is-ready .nav-link.active{background:transparent;color:hsl(var(--primary-deep))}
.nav-desktop.is-ready.is-hovering .nav-link.active{color:hsl(var(--fg)/0.72)}

.header-actions{display:flex;align-items:center;gap:0.5rem}
.lang-dropdown{position:relative}
.lang-btn{display:inline-flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:0.375rem;white-space:nowrap;padding:0.5rem 0.75rem 0.5rem 0.875rem;min-height:2.25rem;border-radius:var(--r-pill);background:transparent;font-size:0.75rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:hsl(var(--fg)/0.8);border:1px solid hsl(var(--border)/0.7);transition:color 0.3s var(--e-quart), border-color 0.3s var(--e-quart), background 0.3s var(--e-quart)}
.lang-btn .lang-current{display:inline-block}
.lang-btn svg{flex-shrink:0}
[dir="rtl"] .lang-btn{font-size:0.875rem;padding:0.375rem 0.875rem;letter-spacing:0;text-transform:none}
.lang-btn:hover{border-color:hsl(var(--primary)/0.5);color:hsl(var(--primary-deep));background:hsl(var(--primary)/0.06)}
.lang-btn svg{flex-shrink:0;width:12px;height:12px;display:inline-block;vertical-align:middle;transition:transform 0.4s var(--e-spring)}
.lang-dropdown.open .lang-btn svg{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 0.625rem);inset-inline-end:0;min-width:9.5rem;background:hsl(var(--card)/0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsl(var(--border)/0.7);border-radius:var(--r-md);box-shadow:var(--sh-3);padding:0.375rem;opacity:0;visibility:hidden;transform:translateY(-8px) scale(0.98);transition:opacity 0.35s var(--e-quart), visibility 0.35s var(--e-quart), transform 0.35s var(--e-quart);z-index:50}
.lang-dropdown.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.lang-option{display:flex;align-items:center;gap:0.5rem;width:100%;padding:0.6rem 0.75rem;min-height:2.5rem;border-radius:var(--r-sm);font-size:0.8125rem;font-weight:500;color:hsl(var(--fg));text-align:start;transition:background 0.25s var(--e-quart), color 0.25s var(--e-quart)}
.lang-option:hover{background:hsl(var(--muted)/0.6)}
.lang-option.active{color:hsl(var(--primary-deep));background:hsl(var(--primary)/0.10);font-weight:600}
.lang-btn:active,.lang-option:active,.nav-link:active{transform:scale(0.97)}
.menu-toggle:active{transform:scale(0.92)}

.menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:2.5rem;height:2.5rem;border-radius:var(--r-pill);background:transparent;transition:background 0.3s var(--e-quart)}
@media(min-width:880px){.menu-toggle{display:none}}
.menu-toggle:hover{background:hsl(var(--muted)/0.6)}
.menu-toggle span{display:block;width:18px;height:1.75px;background:hsl(var(--fg));border-radius:2px;transition:transform 0.45s var(--e-spring), opacity 0.3s var(--e-quart)}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(4px,5px)}
.menu-toggle.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(4px,-5px)}

.mobile-nav{position:fixed;top:0;inset-inline-start:0;width:100%;height:100svh;background:hsl(var(--bg)/0.94);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;opacity:0;visibility:hidden;transition:opacity 0.5s var(--e-quart), visibility 0.5s var(--e-quart)}
.mobile-nav.open{opacity:1;visibility:visible}
.mobile-nav a{font-family:"Outfit",sans-serif;font-size:2rem;font-weight:600;letter-spacing:-0.03em;color:hsl(var(--fg));opacity:0;transform:translateY(20px);transition:opacity 0.6s var(--e-expo), transform 0.6s var(--e-expo), color 0.3s var(--e-quart)}
[dir="rtl"] .mobile-nav a{font-family:"Noto Sans Arabic","Outfit",sans-serif;letter-spacing:-0.01em}
.mobile-nav.open a{opacity:1;transform:translateY(0)}
.mobile-nav.open a:nth-child(1){transition-delay:0.10s}
.mobile-nav.open a:nth-child(2){transition-delay:0.16s}
.mobile-nav.open a:nth-child(3){transition-delay:0.22s}
.mobile-nav.open a:nth-child(4){transition-delay:0.28s}
.mobile-nav a:hover{color:hsl(var(--primary-deep))}

/* 5. BUTTONS — Premium with button-in-button arrow */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.875rem 1.5rem 0.875rem 1.625rem;border-radius:var(--r-pill);font-weight:600;font-size:0.875rem;letter-spacing:-0.005em;border:1px solid transparent;white-space:nowrap;position:relative;isolation:isolate;transition:transform 0.5s var(--e-quart), box-shadow 0.5s var(--e-quart), background-color 0.4s var(--e-quart), border-color 0.4s var(--e-quart), color 0.4s var(--e-quart)}
.btn:active{transform:scale(0.97)}

.btn .btn-arrow{display:inline-flex;align-items:center;justify-content:center;width:1.625rem;height:1.625rem;border-radius:50%;margin-inline-start:0.25rem;margin-inline-end:-0.375rem;background:hsl(var(--fg)/0.10);transition:transform 0.5s var(--e-spring), background 0.4s var(--e-quart), color 0.4s var(--e-quart)}
.btn .btn-arrow svg{width:13px;height:13px;transition:transform 0.5s var(--e-quart)}
[dir="rtl"] .btn .btn-arrow svg{transform:scaleX(-1)}

.btn-primary{background:hsl(var(--fg));color:hsl(var(--bg));box-shadow:var(--sh-2), inset 0 1px 0 hsl(var(--bg)/0.10)}
.btn-primary .btn-arrow{background:hsl(var(--bg)/0.18)}
.btn-primary:hover{transform:translateY(-2px);background:hsl(25 24% 14%);box-shadow:var(--sh-3), inset 0 1px 0 hsl(var(--bg)/0.14)}
.btn-primary:hover .btn-arrow{background:hsl(var(--primary)/0.95);color:hsl(var(--primary-fg));transform:translate(2px,-1px) scale(1.06)}
[dir="rtl"] .btn-primary:hover .btn-arrow{transform:translate(-2px,-1px) scale(1.06)}

.btn-outline{background:hsl(var(--card)/0.7);color:hsl(var(--fg));border-color:hsl(var(--border));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--sh-1)}
.btn-outline .btn-arrow{background:hsl(var(--fg)/0.06)}
.btn-outline:hover{transform:translateY(-2px);border-color:hsl(var(--primary)/0.55);color:hsl(var(--primary-deep));background:hsl(var(--primary)/0.06);box-shadow:var(--sh-2)}
.btn-outline:hover .btn-arrow{background:hsl(var(--primary)/0.18);color:hsl(var(--primary-deep));transform:translate(2px,-1px) scale(1.05)}
[dir="rtl"] .btn-outline:hover .btn-arrow{transform:translate(-2px,-1px) scale(1.05)}

/* Accent — gold splash. Used on hero CTA + featured pricing CTA */
.btn-accent{background:hsl(var(--primary));color:hsl(var(--primary-fg));box-shadow:0 6px 18px hsl(var(--primary)/0.22), inset 0 1px 0 hsl(var(--bg)/0.22)}
.btn-accent .btn-arrow{background:hsl(var(--primary-fg)/0.14)}
.btn-accent:hover{transform:translateY(-2px);background:hsl(31 56% 56%);box-shadow:0 12px 32px hsl(var(--primary)/0.32), inset 0 1px 0 hsl(var(--bg)/0.26)}
.btn-accent:hover .btn-arrow{transform:translate(2px,-1px) scale(1.06)}
[dir="rtl"] .btn-accent:hover .btn-arrow{transform:translate(-2px,-1px) scale(1.06)}

.btn-white{background:hsl(var(--bg));color:hsl(var(--fg));box-shadow:var(--sh-2)}
.btn-white .btn-arrow{background:hsl(var(--fg)/0.08)}
.btn-white:hover{transform:translateY(-2px);background:hsl(var(--card));box-shadow:var(--sh-3)}
.btn-white:hover .btn-arrow{background:hsl(var(--primary));color:hsl(var(--primary-fg));transform:translate(2px,-1px) scale(1.06)}
[dir="rtl"] .btn-white:hover .btn-arrow{transform:translate(-2px,-1px) scale(1.06)}

/* Standalone arrow (legacy fallback for buttons without arrow wrapper) */
.btn > svg{width:14px;height:14px;transition:transform 0.4s var(--e-quart)}
.btn:hover > svg{transform:translateX(2px)}
[dir="rtl"] .btn > svg{transform:scaleX(-1)}
[dir="rtl"] .btn:hover > svg{transform:scaleX(-1) translateX(2px)}

/* 6. EYEBROW — pill label above selected section heads (Pricing, Values, CTA only) */
.eyebrow{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.4rem 0.875rem;
  border-radius:var(--r-pill);
  background:hsl(var(--primary)/0.10);
  border:1px solid hsl(var(--primary)/0.22);
  color:hsl(var(--primary-deep));
  font-size:0.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.16em;
  margin-bottom:1.25rem;
}
[dir="rtl"] .eyebrow{font-size:0.8125rem;letter-spacing:0;text-transform:none}
.eyebrow::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:hsl(var(--primary));
  box-shadow:0 0 0 3px hsl(var(--primary)/0.18);
}
.eyebrow.eyebrow-accent{background:hsl(var(--accent)/0.10);border-color:hsl(var(--accent)/0.25);color:hsl(var(--accent))}
.eyebrow.eyebrow-accent::before{background:hsl(var(--accent));box-shadow:0 0 0 3px hsl(var(--accent)/0.18)}
/* When the section-header is centered (the default), the eyebrow needs to NOT span full width */
.section-header .eyebrow{align-self:center}
.section-header.left .eyebrow{align-self:flex-start}
/* Also make sure section-header has flex column layout so align-self on eyebrow works */
.section-header{display:flex;flex-direction:column;align-items:center}
.section-header.left{align-items:flex-start}

/* 7. HERO */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;padding-top:5rem}
.hero::after{content:'';position:absolute;inset-inline:0;bottom:0;height:25%;background:linear-gradient(to bottom, transparent 0%, hsl(var(--bg-deep)/0.55) 100%);z-index:-1;pointer-events:none}
/* v1.5.18: <picture> element with WebP variants — was a background-image
   div before. Photo and gradient now live on separate layers. The picture
   is wrapped in a styling div (.hero-photo) so pseudo-elements work
   reliably; PART 4 fill-image trap: picture defaults to inline → explicit
   display:block on both wrapper and inner picture/img. */
.hero-photo{position:absolute;inset:0;z-index:-3;display:block;pointer-events:none;overflow:hidden}
.hero-photo picture{display:block;width:100%;height:100%}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
@media (min-width: 640px){.hero-photo img{object-position:center 35%}}
/* Gradient overlay — was inside the background-image stack, now its own pseudo
   so it composites over the WebP/JPG instead of being part of the bitmap layer. */
.hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom, hsl(var(--bg)) 0%, hsl(var(--bg)/0.86) 8%, hsl(var(--bg)/0.74) 35%, hsl(var(--bg)/0.66) 60%, hsl(var(--bg)/0.82) 78%, hsl(var(--bg-deep)) 92%, hsl(var(--bg-deep)) 100%);pointer-events:none}
@media (min-width: 640px){.hero-photo::after{background:linear-gradient(to bottom, hsl(var(--bg)) 0%, hsl(var(--bg)/0.84) 10%, hsl(var(--bg)/0.70) 40%, hsl(var(--bg)/0.62) 60%, hsl(var(--bg)/0.78) 78%, hsl(var(--bg-deep)) 92%, hsl(var(--bg-deep)) 100%)}}

.hero-content{position:relative;z-index:10;max-width:54rem;padding-block:4rem 6rem}
.hero h1{font-size:clamp(2.5rem, 6.5vw, 5.25rem);font-weight:700;letter-spacing:-0.045em;line-height:0.98;margin-bottom:1.75rem}
[dir="rtl"] .hero h1{letter-spacing:-0.015em;line-height:1.05}
.typing-wrapper{min-height:5rem;margin-bottom:2.25rem;max-width:42rem}
@media(min-width:768px){.typing-wrapper{min-height:4rem}}
.typing-text{font-size:1.0625rem;color:hsl(var(--fg-soft));line-height:1.55;font-weight:400}
@media(min-width:768px){.typing-text{font-size:1.1875rem}}
.typing-cursor{display:inline-block;width:2px;height:1.1em;background:hsl(var(--primary));margin-inline-start:3px;vertical-align:text-bottom;animation:blink 1s step-end infinite}
.hero-buttons{display:flex;flex-direction:column;gap:0.875rem;flex-wrap:wrap}
@media(min-width:480px){.hero-buttons{flex-direction:row;align-items:center}}

.scroll-indicator{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);z-index:10;display:none;flex-direction:column;align-items:center;gap:0.625rem;opacity:0.5;transition:opacity 0.5s var(--e-quart)}
@media(min-width:768px){.scroll-indicator{display:flex}}
.scroll-indicator:hover{opacity:1}
.scroll-mouse{width:22px;height:34px;border-radius:20px;border:1.5px solid hsl(var(--fg)/0.30);display:flex;align-items:flex-start;justify-content:center;padding-top:5px}
.scroll-dot{width:3px;height:7px;border-radius:3px;background:hsl(var(--primary));animation:scroll-bounce 1.6s ease-in-out infinite}

/* 8. SECTION HEADERS */
.section-header{text-align:center;max-width:42rem;margin-inline:auto;margin-bottom:4rem}
@media(min-width:768px){.section-header{margin-bottom:5rem}}
.section-header.left{text-align:start;margin-inline:0}
.section-header h2{font-size:clamp(2rem, 4.5vw, 3.25rem);font-weight:700;letter-spacing:-0.03em;line-height:1.04;margin-bottom:1rem}
[dir="rtl"] .section-header h2{letter-spacing:-0.01em;line-height:1.18}
.section-header p{font-size:1.0625rem;color:hsl(var(--muted-fg));line-height:1.6;max-width:36rem;margin-inline:auto}
.section-header.left p{margin-inline:0}

/* 9. SERVICES — Asymmetric Bento + Double-Bezel */
.services-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.services-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}}
@media(min-width:1024px){
  .services-grid{grid-template-columns:repeat(6, minmax(0, 1fr));grid-auto-rows:minmax(220px, auto);gap:1.25rem}
  .services-grid > .service-card:nth-child(1){grid-column:span 4}
  .services-grid > .service-card:nth-child(2){grid-column:span 2}
  .services-grid > .service-card:nth-child(3){grid-column:span 2}
  .services-grid > .service-card:nth-child(4){grid-column:span 2}
  .services-grid > .service-card:nth-child(5){grid-column:span 2}
  .services-grid > .service-card:nth-child(6){grid-column:span 6}
}

.service-card{position:relative;background:hsl(var(--card-shell)/0.7);border:1px solid hsl(var(--border)/0.7);border-radius:calc(var(--r-xl) + 0.25rem);padding:0.4rem;transition:transform 0.6s var(--e-quart), border-color 0.5s var(--e-quart), box-shadow 0.6s var(--e-quart);box-shadow:var(--sh-1)}
.service-card-inner{position:relative;background:hsl(var(--card));border:1px solid hsl(var(--border-soft));border-radius:var(--r-xl);padding:1.75rem;height:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;box-shadow:inset 0 1px 0 hsl(var(--bg)/0.5);transition:background 0.5s var(--e-quart)}
@media(min-width:768px){.service-card-inner{padding:2.25rem}}
@media(min-width:1024px){.services-grid > .service-card:nth-child(1) .service-card-inner, .services-grid > .service-card:nth-child(6) .service-card-inner{padding:2.5rem 2.75rem}}

/* Spotlight gradient — driven by --mx/--my from JS, contained inside the inner overflow:hidden */
.service-card-inner::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), hsl(var(--primary)/0.14), transparent 45%);opacity:0;transition:opacity 0.4s var(--e-quart);pointer-events:none;z-index:0}
.service-card-inner > *{position:relative;z-index:1}

@media(hover:hover) and (pointer:fine){
  /* Outer card lift on hover (works whether cursor on tray or inner) */
  .service-card:hover{transform:translateY(-4px);border-color:hsl(var(--primary)/0.4);box-shadow:var(--sh-3), 0 0 0 1px hsl(var(--primary)/0.10)}
  /* v1.5.1: spotlight glow only triggers when cursor is inside the inner white area — not when hovering tray padding */
  .service-card-inner:hover::before{opacity:1}
}

.service-icon{width:2.75rem;height:2.75rem;border-radius:0.875rem;background:hsl(var(--primary)/0.12);border:1px solid hsl(var(--primary)/0.22);display:inline-flex;align-items:center;justify-content:center;margin-bottom:1.25rem;transition:transform 0.5s var(--e-spring), background 0.4s var(--e-quart), border-color 0.4s var(--e-quart), box-shadow 0.5s var(--e-quart)}
.service-icon svg{width:1.25rem;height:1.25rem;color:hsl(var(--primary-deep));stroke-width:1.6;transition:color 0.3s var(--e-quart)}
@media(hover:hover) and (pointer:fine){
  .service-card:hover .service-icon{background:hsl(var(--primary));border-color:hsl(var(--primary));box-shadow:0 8px 22px hsl(var(--primary)/0.32);transform:translate(2px,-2px) rotate(-4deg) scale(1.04)}
  .service-card:hover .service-icon svg{color:hsl(var(--primary-fg))}
}

.service-card h3{font-size:1.25rem;font-weight:600;letter-spacing:-0.015em;margin-bottom:0.5rem;transition:color 0.4s var(--e-quart)}
@media(min-width:1024px){.services-grid > .service-card:nth-child(1) h3, .services-grid > .service-card:nth-child(6) h3{font-size:1.5rem}}
.service-card:hover h3{color:hsl(var(--primary-deep))}
.service-card p{font-size:0.875rem;color:hsl(var(--muted-fg));line-height:1.6}
@media(min-width:1024px){.services-grid > .service-card:nth-child(1) p, .services-grid > .service-card:nth-child(6) p{font-size:0.9375rem;max-width:36rem}}

@media(prefers-reduced-motion:reduce){
  .service-card,.service-icon{transition:background 0.3s ease, color 0.3s ease, border-color 0.3s ease}
  .service-card:hover,.service-card:hover .service-icon{transform:none}
}

/* 10. PROCESS TIMELINE */
.process-steps{display:grid;grid-template-columns:1fr;gap:2.5rem;position:relative;max-width:78rem;margin-inline:auto}
@media(min-width:768px){.process-steps{grid-template-columns:repeat(4,1fr);gap:2rem}}
.process-line{display:none}
@media(min-width:768px){
  .process-line{display:block;position:absolute;top:1.875rem;inset-inline-start:calc(12.5% + 0.25rem);inset-inline-end:calc(12.5% + 0.25rem);height:1px;background:hsl(var(--border))}
  .process-line-fill{width:0;height:100%;background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent)));transition:width 1.6s var(--e-expo)}
  [dir="rtl"] .process-line-fill{background:linear-gradient(270deg,hsl(var(--primary)),hsl(var(--accent)))}
  .process-steps.visible .process-line-fill{width:100%}
}

.process-step{text-align:center;position:relative}
.step-number{width:3.75rem;height:3.75rem;border-radius:50%;background:hsl(var(--card));border:1px solid hsl(var(--border));display:flex;align-items:center;justify-content:center;font-family:"Outfit",sans-serif;font-weight:600;font-size:1.25rem;letter-spacing:-0.02em;color:hsl(var(--muted-fg));margin-inline:auto;margin-bottom:1.5rem;position:relative;z-index:2;box-shadow:0 0 0 6px hsl(var(--bg));transition:transform 0.5s var(--e-spring), border-color 0.5s var(--e-quart), background 0.5s var(--e-quart), box-shadow 0.6s var(--e-quart), color 0.5s var(--e-quart);cursor:pointer}
[dir="rtl"] .step-number{font-family:"Noto Sans Arabic","Outfit",sans-serif;letter-spacing:0}
/* On muted background, ring color matches the warmer rendered surface */
.section-muted .step-number{box-shadow:0 0 0 6px hsl(38 27% 92%)}

.process-steps.visible .step-number{border-color:hsl(var(--primary));color:hsl(var(--primary-fg));background:hsl(var(--primary));animation:step-pop 0.7s var(--e-spring) forwards, step-glow 4s ease-in-out infinite}
.section-muted .process-steps.visible .step-number{animation:step-pop 0.7s var(--e-spring) forwards, step-glow-muted 4s ease-in-out infinite}
.process-steps.visible .process-step:nth-child(1) .step-number{animation-delay:0s, 0s}
.process-steps.visible .process-step:nth-child(2) .step-number{animation-delay:0.15s, 0.5s}
.process-steps.visible .process-step:nth-child(3) .step-number{animation-delay:0.30s, 1s}
.process-steps.visible .process-step:nth-child(4) .step-number{animation-delay:0.45s, 1.5s}

.process-steps .process-step:hover .step-number,
.process-steps.visible .process-step:hover .step-number{transform:scale(1.12) !important;animation-play-state:paused;box-shadow:0 0 0 6px hsl(var(--bg)), 0 14px 36px hsl(var(--primary)/0.42), 0 0 0 12px hsl(var(--primary)/0.08)}
.section-muted .process-steps .process-step:hover .step-number,
.section-muted .process-steps.visible .process-step:hover .step-number{box-shadow:0 0 0 6px hsl(38 27% 92%), 0 14px 36px hsl(var(--primary)/0.42), 0 0 0 12px hsl(var(--primary)/0.08)}

.step-number::before{content:'';position:absolute;inset:-12px;border-radius:50%;background:radial-gradient(circle at center, hsl(var(--primary)/0.30) 0%, hsl(var(--primary)/0.12) 45%, transparent 75%);filter:blur(11px);opacity:0;transition:opacity 0.6s var(--e-quart);z-index:-1}
.process-steps.visible .step-number::before{opacity:1}
.process-step h3{font-size:1.0625rem;font-weight:600;letter-spacing:-0.015em;margin-bottom:0.5rem}
.process-step p{font-size:0.875rem;color:hsl(var(--muted-fg));line-height:1.55;max-width:14rem;margin-inline:auto}

/* 11. PRICING */
/* v1.5.10: display:flex (was inline-flex) — auto-margins don't horizontally center inline-level elements per CSS spec, so margin:0 auto was being ignored. Block-level flex + width:fit-content + margin:0 auto centers correctly. */
.pricing-tabs{position:relative;isolation:isolate;display:flex;justify-content:center;gap:0.25rem;margin:0 auto 3rem;background:hsl(var(--card-shell)/0.7);border:1px solid hsl(var(--border)/0.7);border-radius:var(--r-pill);padding:0.3rem;width:fit-content;max-width:100%;box-shadow:var(--sh-1), inset 0 1px 0 hsl(var(--card)/0.6)}
.pricing-tabs-wrap{display:flex;justify-content:center;margin-bottom:0.5rem}
/* Sliding pill-indicator. CSS vars --ind-x/y/w/h set by JS to active-tab offsets.
   iOS-drawer easing (cubic-bezier(0.32, 0.72, 0, 1)) — same curve PART 16-F specifies. */
.pricing-tabs::before{content:'';position:absolute;left:var(--ind-x, 0);top:var(--ind-y, 0);width:var(--ind-w, 0);height:var(--ind-h, 0);background:hsl(var(--card));border-radius:var(--r-pill);box-shadow:var(--sh-1), inset 0 1px 0 hsl(var(--bg)/0.5);opacity:0;pointer-events:none;z-index:0;transition:left 320ms cubic-bezier(0.32, 0.72, 0, 1), top 320ms cubic-bezier(0.32, 0.72, 0, 1), width 320ms cubic-bezier(0.32, 0.72, 0, 1), height 320ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease-out}
.pricing-tabs.is-ready::before{opacity:1}
.pricing-tab{position:relative;z-index:1;padding:0.6rem 1.375rem;border-radius:var(--r-pill);background:transparent;font-size:0.8125rem;font-weight:600;letter-spacing:-0.005em;color:hsl(var(--muted-fg));transition:color 0.32s cubic-bezier(0.32, 0.72, 0, 1), background 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.18s var(--e-quart)}
.pricing-tab:hover{color:hsl(var(--fg))}
.pricing-tab:active{transform:scale(0.97)}
/* No-JS / pre-init fallback: active tab carries its own bg+shadow.
   Once .is-ready is on the parent, those drop and the ::before is the visual. */
.pricing-tab.active{background:hsl(var(--card));color:hsl(var(--fg));box-shadow:var(--sh-1), inset 0 1px 0 hsl(var(--bg)/0.5)}
.pricing-tabs.is-ready .pricing-tab.active{background:transparent;box-shadow:none;color:hsl(var(--fg))}
@media(max-width:480px){.pricing-tabs{gap:0.125rem;padding:0.2rem}.pricing-tab{padding:0.5rem 0.875rem;font-size:0.8125rem}}
@media(prefers-reduced-motion:reduce){.pricing-tabs::before{transition:opacity 200ms ease-out}}

.pricing-panel{display:none}
.pricing-panel.active{display:block;animation:fade-in 0.5s var(--e-expo)}
.pricing-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;max-width:78rem;margin-inline:auto}
@media(min-width:768px){.pricing-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}

.pricing-card{position:relative;background:hsl(var(--card-shell)/0.65);border:1px solid hsl(var(--border)/0.7);border-radius:calc(var(--r-xl) + 0.25rem);padding:0.4rem;display:flex;flex-direction:column;box-shadow:var(--sh-1);transition:transform 0.6s var(--e-quart), box-shadow 0.6s var(--e-quart), border-color 0.5s var(--e-quart)}
/* v1.5.3: removed overflow:hidden — Outfit-Bold extends digits below the line box and the clip was cutting off descenders on €750-style prices */
.pricing-card-inner{flex:1;background:hsl(var(--card));border:1px solid hsl(var(--border-soft));border-radius:var(--r-xl);padding:1.875rem 1.625rem;display:flex;flex-direction:column;box-shadow:inset 0 1px 0 hsl(var(--bg)/0.55);position:relative}
@media(min-width:768px){.pricing-card-inner{padding:2.25rem 2rem}}
@media(hover:hover) and (pointer:fine){
  .pricing-card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:hsl(var(--border))}
  .pricing-card.featured:hover{transform:translateY(-8px);box-shadow:0 28px 56px hsl(var(--primary)/0.22), var(--sh-3);animation-play-state:paused}
}
.pricing-card.featured{border-color:hsl(var(--primary)/0.45);background:hsl(var(--primary)/0.06);animation:popular-glow 4.5s ease-in-out infinite}

.popular-ribbon{position:absolute;top:-0.625rem;inset-inline:0;display:flex;justify-content:center;z-index:5;pointer-events:none}
.popular-ribbon span{padding:0.3125rem 0.875rem;border-radius:var(--r-pill);background:hsl(var(--accent));color:hsl(var(--accent-fg));font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;box-shadow:0 6px 16px hsl(var(--accent)/0.30);-webkit-font-smoothing:antialiased}
[dir="rtl"] .popular-ribbon span{letter-spacing:0;text-transform:none;font-size:0.8125rem}

.pricing-card h3{font-size:1.375rem;font-weight:700;letter-spacing:-0.025em;margin-bottom:0.375rem}
/* v1.4.1: min-height locks all 3 cards' price/CTA blocks to the same baseline regardless of desc length */
.pricing-card .card-desc{font-size:0.875rem;color:hsl(var(--muted-fg));margin-bottom:1.5rem;line-height:1.55;min-height:2.7em}
.price-block{margin-bottom:1.75rem;padding-bottom:1.5rem;border-bottom:1px dashed hsl(var(--border))}

/* v1.5.1: line-height bumped from 1 to 1.15 + padding-bottom 0.08em prevents the bottom of digits / euro sign from being clipped, especially when the gradient text-fill is active on the featured card */
/* v1.5.3: line-height bumped to 1.3 + larger padding-bottom (0.18em). Combined with removing overflow:hidden above, this guarantees no glyph clipping across browsers/font-metric quirks. */
.price-amount{font-family:"Outfit",sans-serif;font-size:clamp(2.25rem, 4vw, 3rem);font-weight:700;letter-spacing:-0.04em;color:hsl(var(--accent));line-height:1.3;display:inline-block;padding-bottom:0.18em}
[dir="rtl"] .price-amount{font-family:"Noto Sans Arabic","Outfit",sans-serif;letter-spacing:-0.01em}
/* v1.5.5: REMOVED gradient text-fill. -webkit-background-clip:text + -webkit-text-fill-color:transparent clips at the content-box, so glyph descenders extending into padding-bottom were cut off (the bottom of the '0' in '€750'). Solid darker primary color instead — featured card still pops via ribbon + breathing glow + tinted background. */
.pricing-card.featured .price-amount{color:hsl(var(--primary-deep))}
.price-suffix{font-size:0.875rem;color:hsl(var(--muted-fg));font-weight:500;margin-inline-start:0.25rem}

.feature-list{margin-bottom:1.75rem;flex-grow:1}
.feature-item{display:flex;align-items:flex-start;gap:0.75rem;font-size:0.875rem;padding-block:0.4rem;color:hsl(var(--fg-soft));line-height:1.5}
.feature-check{width:1.125rem;height:1.125rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:0.1875rem}
.feature-check svg{width:0.75rem;height:0.75rem}
.check-primary{background:hsl(var(--primary)/0.14);color:hsl(var(--primary-deep))}
.check-accent{background:hsl(var(--accent)/0.14);color:hsl(var(--accent))}
.pricing-card .btn{width:100%}

.addons-grid{display:grid;grid-template-columns:1fr;gap:0.75rem;max-width:60rem;margin-inline:auto}
@media(min-width:480px){.addons-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.addons-grid{grid-template-columns:repeat(3,1fr);gap:0.875rem}}
.addon-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.95rem 1.125rem;background:hsl(var(--card));border-radius:var(--r-md);border:1px solid hsl(var(--border-soft));box-shadow:var(--sh-1);transition:transform 0.5s var(--e-spring), box-shadow 0.5s var(--e-quart), border-color 0.5s var(--e-quart)}
@media(hover:hover) and (pointer:fine){
  .addon-card:hover{border-color:hsl(var(--primary)/0.30);box-shadow:var(--sh-2);transform:translateY(-2px)}
}
.addon-name{font-size:0.875rem;font-weight:500;letter-spacing:-0.005em}
.addon-price{font-size:0.875rem;font-weight:700;color:hsl(var(--primary-deep));white-space:nowrap;font-variant-numeric:tabular-nums}

/* 12. CTA BANNER */
.cta-banner{position:relative;overflow:hidden}
.cta-inner{position:relative;background:linear-gradient(135deg, hsl(25 26% 14%) 0%, hsl(28 28% 11%) 100%);color:hsl(var(--bg));border-radius:var(--r-xl);padding:4rem 1.75rem;text-align:center;overflow:hidden;box-shadow:var(--sh-4)}
@media(min-width:768px){.cta-inner{padding:6rem 3.5rem;border-radius:calc(var(--r-xl) + 0.5rem)}}
.cta-inner::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 hsl(var(--bg)/0.10), inset 0 -1px 0 hsl(var(--shadow-tint)/0.4)}
.cta-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.30;animation:morph 9s ease-in-out infinite}
.cta-blob-1{width:24rem;height:24rem;background:hsl(var(--primary));top:-7rem;inset-inline-start:-7rem}
.cta-blob-2{width:18rem;height:18rem;background:hsl(var(--accent));bottom:-5rem;inset-inline-end:-5rem;animation-delay:-4.5s}
.cta-inner h2{font-size:clamp(2rem, 4.5vw, 3.25rem);font-weight:700;letter-spacing:-0.035em;line-height:1.04;margin-bottom:1.25rem;position:relative;z-index:1}
.cta-inner p{font-size:1.0625rem;color:hsl(var(--bg)/0.70);margin-bottom:2.25rem;max-width:34rem;margin-inline:auto;position:relative;z-index:1}
.cta-inner .btn{position:relative;z-index:1}

/* 13. CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:1024px){.contact-grid{grid-template-columns:5fr 7fr;gap:4rem}}
.contact-info-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.25rem;padding:0.75rem;border-radius:var(--r-md);transition:background 0.4s var(--e-quart)}
.contact-info-item:last-of-type{margin-bottom:0}
.contact-info-item:hover{background:hsl(var(--card)/0.7)}
.contact-info-item a{transition:color 0.3s var(--e-quart);word-break:break-word}
.contact-info-item a:hover{color:hsl(var(--primary-deep))}
.info-icon{width:2.75rem;height:2.75rem;border-radius:0.875rem;background:hsl(var(--primary)/0.12);border:1px solid hsl(var(--primary)/0.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.4s var(--e-quart), border-color 0.4s var(--e-quart), box-shadow 0.4s var(--e-quart), transform 0.4s var(--e-spring)}
.info-icon svg{width:1.125rem;height:1.125rem;color:hsl(var(--primary-deep));stroke-width:1.6;transition:color 0.3s var(--e-quart)}
@media(hover:hover) and (pointer:fine){
  .contact-info-item:hover .info-icon{background:hsl(var(--primary));border-color:hsl(var(--primary));box-shadow:0 6px 18px hsl(var(--primary)/0.25);transform:translateY(-2px) scale(1.04)}
  .contact-info-item:hover .info-icon svg{color:hsl(var(--primary-fg))}
}
.info-label{font-weight:600;font-size:0.8125rem;margin-bottom:0.25rem;color:hsl(var(--fg))}
.info-value{font-size:0.875rem;color:hsl(var(--muted-fg))}

.social-links{display:flex;gap:0.625rem;margin-top:2rem;flex-wrap:wrap}
.social-link{width:2.75rem;height:2.75rem;border-radius:var(--r-md);background:hsl(var(--card));border:1px solid hsl(var(--border-soft));display:flex;align-items:center;justify-content:center;transition:transform 0.5s var(--e-spring), background 0.4s var(--e-quart), border-color 0.4s var(--e-quart), box-shadow 0.4s var(--e-quart)}
.social-link svg{width:1.125rem;height:1.125rem;color:hsl(var(--fg)/0.75);transition:color 0.3s var(--e-quart)}
@media(hover:hover) and (pointer:fine){
  .social-link:hover{background:hsl(var(--fg));border-color:hsl(var(--fg));transform:translateY(-3px) scale(1.04);box-shadow:var(--sh-2)}
  .social-link:hover svg{color:hsl(var(--bg))}
}

/* Form glow — pulsing breathing halo behind card */
.form-glow-wrap{position:relative;border-radius:calc(var(--r-xl) + 0.25rem);isolation:isolate}
.form-glow-wrap::before{content:'';position:absolute;inset:-18px;border-radius:calc(var(--r-xl) + 18px);background:radial-gradient(ellipse at center, hsl(var(--primary)/0.32) 0%, hsl(var(--accent)/0.22) 38%, hsl(var(--primary)/0.10) 62%, transparent 80%);filter:blur(22px);animation:form-breathe 5s ease-in-out infinite;pointer-events:none;z-index:-1}
.form-glow-wrap::after{content:'';position:absolute;inset:-38px;border-radius:calc(var(--r-xl) + 38px);background:radial-gradient(ellipse at center, hsl(var(--accent)/0.18) 0%, hsl(var(--primary)/0.13) 45%, transparent 75%);filter:blur(34px);animation:form-breathe-slow 7.5s ease-in-out infinite;pointer-events:none;z-index:-2}
.form-glow-wrap .form-card{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.form-glow-wrap::before,.form-glow-wrap::after{animation:none;opacity:0.5}}

.form-card{background:hsl(var(--card-shell)/0.75);border:1px solid hsl(var(--border)/0.7);border-radius:calc(var(--r-xl) + 0.25rem);padding:0.4rem;box-shadow:var(--sh-2)}
.form-card-inner{background:hsl(var(--card));border:1px solid hsl(var(--border-soft));border-radius:var(--r-xl);padding:1.75rem;box-shadow:inset 0 1px 0 hsl(var(--bg)/0.55)}
@media(min-width:768px){.form-card-inner{padding:2.5rem}}
.form-group{margin-bottom:1.125rem}
.form-label{display:block;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.5rem;color:hsl(var(--fg-soft))}
[dir="rtl"] .form-label{font-size:0.875rem;letter-spacing:0;text-transform:none}
.form-input,.form-textarea{width:100%;padding:0.875rem 1rem;border-radius:var(--r-md);border:1px solid hsl(var(--border));background:hsl(var(--bg));color:hsl(var(--fg));font-size:0.9375rem;font-family:inherit;line-height:1.5;transition:border-color 0.3s var(--e-quart), box-shadow 0.3s var(--e-quart), background 0.3s var(--e-quart)}
.form-input::placeholder,.form-textarea::placeholder{color:hsl(var(--muted-fg)/0.7)}
.form-input:focus,.form-textarea:focus,.form-input:focus-visible,.form-textarea:focus-visible{outline:none;box-shadow:0 0 0 4px hsl(var(--primary)/0.18);border-color:hsl(var(--primary));background:hsl(var(--card))}
.form-textarea{min-height:9rem;resize:vertical}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-status{padding:0.875rem 1rem;border-radius:var(--r-md);font-size:0.875rem;margin-bottom:1rem;display:none;border:1px solid transparent}
.form-status.success{display:block;background:hsl(140 45% 96%);color:hsl(140 50% 26%);border-color:hsl(140 40% 80%)}
.form-status.error{display:block;background:hsl(0 65% 96%);color:hsl(0 60% 35%);border-color:hsl(0 60% 85%)}

/* 14. PAGE HEADER + ABOUT */
.page-header{position:relative;padding-block:7rem 4rem;overflow:hidden;background:linear-gradient(to bottom,hsl(var(--bg-deep)/0.6),hsl(var(--bg)))}
@media(min-width:768px){.page-header{padding-block:9rem 5rem}}
.deco-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.deco-blob-1{width:22rem;height:22rem;background:hsl(var(--primary)/0.12);top:-7rem;inset-inline-start:-7rem;animation:morph 9s ease-in-out infinite}
.deco-blob-2{width:16rem;height:16rem;background:hsl(var(--accent)/0.10);bottom:-4rem;inset-inline-end:-4rem;animation:morph 9s ease-in-out infinite -5s}
.page-header h1{font-size:clamp(2.5rem, 5.5vw, 4.25rem);font-weight:700;letter-spacing:-0.04em;line-height:1.0;margin-bottom:1.25rem}
[dir="rtl"] .page-header h1{letter-spacing:-0.015em;line-height:1.1}
.page-header .subtitle{font-size:1.1875rem;color:hsl(var(--muted-fg));line-height:1.55;max-width:36rem}
.page-header.text-center .subtitle{margin-inline:auto}

.arabic-badge{display:inline-flex;align-items:center;gap:0.75rem;padding:0.5rem 1.125rem;border-radius:var(--r-pill);background:hsl(var(--primary)/0.10);border:1px solid hsl(var(--primary)/0.22);color:hsl(var(--primary-deep));font-size:0.9375rem;font-weight:500;margin-bottom:1.5rem;line-height:1.2}
.arabic-badge > :first-child{font-family:"Noto Sans Arabic","Outfit",sans-serif;font-size:1.375rem;font-weight:600}
.arabic-badge .dot{width:4px;height:4px;border-radius:50%;background:hsl(var(--primary)/0.5)}

.story-block{background:hsl(var(--card));border:1px solid hsl(var(--border-soft));border-radius:var(--r-xl);padding:2rem;margin-bottom:1.25rem;position:relative;overflow:hidden;box-shadow:var(--sh-1)}
@media(min-width:768px){.story-block{padding:2.75rem;margin-bottom:1.5rem}}
.story-block::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,hsl(var(--primary)),hsl(var(--accent)));opacity:0.7}
.story-block.alt::before{background:linear-gradient(to bottom,hsl(var(--accent)),hsl(var(--primary)))}
.story-block h2{font-size:1.375rem;font-weight:700;letter-spacing:-0.025em;margin-bottom:0.875rem}
.story-block p{font-size:1.0625rem;color:hsl(var(--fg-soft));line-height:1.7}

.values-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:768px){.values-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.value-card{background:hsl(var(--card));border:1px solid hsl(var(--border-soft));border-radius:var(--r-xl);padding:2rem;box-shadow:var(--sh-1);transition:transform 0.6s var(--e-quart), border-color 0.5s var(--e-quart), box-shadow 0.6s var(--e-quart)}
@media(hover:hover) and (pointer:fine){
  .value-card:hover{transform:translateY(-6px);border-color:hsl(var(--primary)/0.30);box-shadow:var(--sh-3)}
}
.value-icon{width:3rem;height:3rem;border-radius:0.875rem;background:hsl(var(--primary)/0.12);border:1px solid hsl(var(--primary)/0.22);display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;transition:transform 0.5s var(--e-spring), background 0.4s var(--e-quart), border-color 0.4s var(--e-quart), box-shadow 0.5s var(--e-quart)}
.value-icon svg{width:1.25rem;height:1.25rem;color:hsl(var(--primary-deep));stroke-width:1.6;transition:color 0.3s var(--e-quart)}
@media(hover:hover) and (pointer:fine){
  .value-card:hover .value-icon{background:hsl(var(--primary));border-color:hsl(var(--primary));box-shadow:0 8px 22px hsl(var(--primary)/0.30);transform:translateY(-2px) scale(1.04)}
  .value-card:hover .value-icon svg{color:hsl(var(--primary-fg))}
  .value-card:hover h3{color:hsl(var(--primary-deep))}
}
.value-card h3{font-size:1.1875rem;font-weight:600;letter-spacing:-0.015em;margin-bottom:0.5rem;transition:color 0.3s var(--e-quart)}
.value-card p{font-size:0.9375rem;color:hsl(var(--muted-fg));line-height:1.6}

/* 15. LEGAL */
.legal-content{max-width:48rem;margin-inline:auto;padding-bottom:4rem}
.legal-section{margin-bottom:2.75rem}
.legal-section h2{font-size:1.1875rem;font-weight:600;letter-spacing:-0.015em;margin-bottom:0.875rem}
.legal-section p{font-size:0.9375rem;color:hsl(var(--muted-fg));line-height:1.75;white-space:pre-line}
.legal-content a{color:hsl(var(--primary-deep));text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:hsl(var(--primary)/0.5);text-underline-offset:0.18em;transition:color 0.3s var(--e-quart),text-decoration-color 0.3s var(--e-quart)}
.legal-content a:hover{color:hsl(var(--accent));text-decoration-color:hsl(var(--accent))}

/* 16. 404 */
.error-page{min-height:calc(100dvh - 22rem);display:flex;align-items:center;justify-content:center;text-align:center;padding:5rem 1rem}
.error-code{font-family:"Outfit",sans-serif;font-size:clamp(6rem,18vw,12rem);font-weight:800;letter-spacing:-0.06em;line-height:0.9;background:linear-gradient(135deg,hsl(var(--primary-deep)),hsl(var(--accent)));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1.25rem;padding-bottom:0.05em}
[dir="rtl"] .error-code{font-family:"Noto Sans Arabic","Outfit",sans-serif;letter-spacing:-0.02em}
.error-page h1{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;letter-spacing:-0.025em;margin-bottom:1rem}
.error-page p{color:hsl(var(--muted-fg));margin-bottom:2.25rem;max-width:30rem;margin-inline:auto;font-size:1rem;line-height:1.6}

/* 17. WHATSAPP FLOAT */
/* v1.5.21: WhatsApp float bottom-inset bumped per skill PART 15 rule —
   "min bottom 2.1rem on mobile" — to clear iOS home-indicator and bottom
   URL-bar zones (which eat 60-80px of viewport). All tiers raised. */
.wa-float{position:fixed;bottom:2.25rem;inset-inline-end:1.25rem;z-index:95;width:3.5rem;height:3.5rem;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px hsl(145 63% 38% / 0.40),0 2px 8px hsl(145 63% 38% / 0.22);transition:transform 0.5s var(--e-spring), box-shadow 0.5s var(--e-quart);animation:wa-pulse 7s ease-in-out infinite}
@media(min-width:640px){.wa-float{bottom:2.5rem;inset-inline-end:1.75rem;width:3.75rem;height:3.75rem}}
.wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 32px hsl(145 63% 38% / 0.50),0 4px 12px hsl(145 63% 38% / 0.28);color:#fff;animation:none}
.wa-float:active{transform:translateY(-1px) scale(1.02)}
.wa-float:focus-visible{outline:3px solid hsl(145 63% 38% / 0.45);outline-offset:3px}
.wa-float svg{width:1.75rem;height:1.75rem;transition:transform 0.4s var(--e-spring)}
.wa-float:hover svg{transform:scale(1.08)}
.wa-float .wa-tooltip{position:absolute;inset-inline-end:calc(100% + 0.75rem);top:50%;transform:translateY(-50%) translateX(8px);background:hsl(var(--fg));color:hsl(var(--bg));padding:0.5rem 0.875rem;border-radius:var(--r-md);font-size:0.8125rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.3s var(--e-quart), transform 0.4s var(--e-quart);box-shadow:var(--sh-2)}
[dir="rtl"] .wa-float .wa-tooltip{transform:translateY(-50%) translateX(-8px)}
.wa-float:hover .wa-tooltip{opacity:1;transform:translateY(-50%) translateX(0)}
@keyframes wa-pulse{0%,100%{box-shadow:0 8px 22px hsl(145 63% 38% / 0.40),0 2px 8px hsl(145 63% 38% / 0.22),0 0 0 0 hsl(145 63% 38% / 0.40)}70%{box-shadow:0 8px 22px hsl(145 63% 38% / 0.40),0 2px 8px hsl(145 63% 38% / 0.22),0 0 0 14px hsl(145 63% 38% / 0)}}
@media(prefers-reduced-motion:reduce){.wa-float{animation:none}}

/* 18. FOOTER */
.site-footer{background:linear-gradient(to bottom, hsl(25 26% 14%) 0%, hsl(28 28% 11%) 100%);color:hsl(var(--bg)/0.72);padding-block:5rem 2.5rem;position:relative;overflow:hidden}
.site-footer::before{content:'';position:absolute;inset-inline:0;top:0;height:1px;background:linear-gradient(90deg, transparent, hsl(var(--primary)/0.4), transparent)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.75rem;margin-bottom:3.5rem}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}}
.footer-brand .logo{color:hsl(var(--bg));margin-bottom:1rem}
.footer-brand .logo:hover{color:hsl(var(--primary))}
.footer-tagline{font-size:0.9375rem;line-height:1.55;margin-bottom:1.75rem;opacity:0.65;max-width:22rem}
.footer-social{display:flex;gap:0.5rem;flex-wrap:wrap}
.footer-social a{width:2.5rem;height:2.5rem;min-width:2.5rem;min-height:2.5rem;border-radius:0.625rem;background:hsl(var(--bg)/0.06);border:1px solid hsl(var(--bg)/0.08);display:flex;align-items:center;justify-content:center;transition:background 0.4s var(--e-quart), transform 0.5s var(--e-spring), border-color 0.4s var(--e-quart)}
.footer-social a svg{width:0.9375rem;height:0.9375rem;color:hsl(var(--bg)/0.65);transition:color 0.3s var(--e-quart)}
@media(hover:hover) and (pointer:fine){
  .footer-social a:hover{background:hsl(var(--primary));border-color:hsl(var(--primary));transform:translateY(-2px)}
  .footer-social a:hover svg{color:hsl(var(--primary-fg))}
}
.footer-col h4{font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.18em;color:hsl(var(--bg)/0.45);margin-bottom:1.25rem}
[dir="rtl"] .footer-col h4{font-size:0.875rem;letter-spacing:0;text-transform:none}
.footer-col a{display:block;font-size:0.875rem;padding-block:0.5rem;color:hsl(var(--bg)/0.72);transition:color 0.3s var(--e-quart);word-break:break-word;min-height:2.25rem;line-height:1.4}
.footer-col a:hover{color:hsl(var(--primary))}
.footer-bottom{padding-top:2rem;border-top:1px solid hsl(var(--bg)/0.08);font-size:0.75rem;color:hsl(var(--bg)/0.45);text-align:center;letter-spacing:0.02em}

/* 19. KEYFRAMES */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes scroll-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@keyframes morph{0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}25%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}50%{border-radius:50% 60% 30% 60%/30% 50% 70% 50%}75%{border-radius:40% 60% 50% 40%/60% 40% 60% 50%}}
@keyframes fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes popular-glow{0%,100%{box-shadow:var(--sh-1), 0 0 0 0 hsl(var(--primary)/0.20)}50%{box-shadow:0 18px 44px hsl(var(--primary)/0.22), 0 0 0 12px hsl(var(--primary)/0.04)}}
@keyframes icon-wiggle{0%,100%{transform:rotate(0) scale(1)}15%{transform:rotate(-10deg) scale(1.08)}30%{transform:rotate(10deg) scale(1.08)}45%{transform:rotate(-7deg) scale(1.06)}60%{transform:rotate(5deg) scale(1.04)}75%{transform:rotate(-3deg) scale(1.02)}}
.service-icon.wiggle{animation:icon-wiggle 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}
@keyframes step-pop{0%{transform:scale(0.6);opacity:0.5}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes step-glow{0%,100%{box-shadow:0 0 0 6px hsl(var(--bg)), 0 12px 28px hsl(var(--primary)/0.28), 0 0 0 0 hsl(var(--primary)/0.30)}50%{box-shadow:0 0 0 6px hsl(var(--bg)), 0 16px 36px hsl(var(--primary)/0.40), 0 0 0 8px hsl(var(--primary)/0.06)}}
@keyframes step-glow-muted{0%,100%{box-shadow:0 0 0 6px hsl(38 27% 92%), 0 12px 28px hsl(var(--primary)/0.28), 0 0 0 0 hsl(var(--primary)/0.30)}50%{box-shadow:0 0 0 6px hsl(38 27% 92%), 0 16px 36px hsl(var(--primary)/0.40), 0 0 0 8px hsl(var(--primary)/0.06)}}
@keyframes form-breathe{0%,100%{transform:scale(0.92);opacity:0.55}50%{transform:scale(1.08);opacity:1}}
@keyframes form-breathe-slow{0%,100%{transform:scale(0.88);opacity:0.35}50%{transform:scale(1.12);opacity:0.8}}

/* 20. SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity 0.9s var(--e-expo), transform 0.9s var(--e-expo), filter 0.9s var(--e-expo)}
.reveal-left{opacity:0;transform:translateX(-32px);filter:blur(4px);transition:opacity 0.9s var(--e-expo), transform 0.9s var(--e-expo), filter 0.9s var(--e-expo)}
.reveal-right{opacity:0;transform:translateX(32px);filter:blur(4px);transition:opacity 0.9s var(--e-expo), transform 0.9s var(--e-expo), filter 0.9s var(--e-expo)}
[dir="rtl"] .reveal-left{transform:translateX(32px)}
[dir="rtl"] .reveal-right{transform:translateX(-32px)}
.reveal-scale{opacity:0;transform:scale(0.94);filter:blur(6px);transition:opacity 0.9s var(--e-expo), transform 0.9s var(--e-expo), filter 0.9s var(--e-expo)}
/* v1.5.4: filter:none (not blur(0)) — blur(0) keeps the filter property active which creates a render-layer clip box at the element's bounding rectangle, cutting off glyph descenders that extend below the box. The .pricing-card carries the .reveal class permanently, so this filter clip was the real cause of the €750 bottom-clip. */
.reveal.visible,.reveal-left.visible,.reveal-right.visible,.reveal-scale.visible{opacity:1;transform:none;filter:none}
.delay-1{transition-delay:0.08s}.delay-2{transition-delay:0.16s}.delay-3{transition-delay:0.24s}
.delay-4{transition-delay:0.32s}.delay-5{transition-delay:0.40s}.delay-6{transition-delay:0.48s}


/* ============================================================
   22. CONSOLIDATED MOBILE BLOCK (v1.5.19 — PART 15 of numu-skill)

   Phone-only overrides live here, NOT scattered through the file.
   Adjustments live in two breakpoint bands:
     - (max-width: 640px)  → standard phone tier
     - (max-width: 380px)  → very small phone tier (iPhone SE, etc.)

   Engineering hygiene:
   - iOS HIG: tap targets ≥ 44×44px → menu-toggle 2.75rem, lang-btn min-height 2.5rem
   - WhatsApp float ≥ 2.1rem inset from edge → 1rem on small phones is acceptable
     because the button itself is 3.5rem, total occupied region clears 2.1rem.
   - Footer link padding-block 0.5rem → real 40-44px tap targets
   - Mobile-nav items clamp font-size so very narrow phones don't break layout
   - Hero CTA buttons full-width on tightest phones to land on a single tap surface
   ============================================================ */
@media (max-width: 640px) {
  /* Header / nav */
  .site-header               { padding: 0.625rem 0.875rem; }
  .header-inner              { padding: 0.5rem 0.5rem 0.5rem 1rem; }
  .menu-toggle               { width: 2.75rem; height: 2.75rem; }
  .menu-toggle span          { width: 20px; height: 2px; }
  .lang-btn                  { padding: 0.4rem 0.65rem 0.4rem 0.75rem; font-size: 0.7rem; min-height: 2.4rem; }
  [dir="rtl"] .lang-btn      { font-size: 0.8125rem; padding: 0.4rem 0.75rem; }
  .lang-btn svg              { width: 12px; height: 12px; }

  /* Hero — keep min-height stable, reduce vertical breathing on tightest phones */
  .hero                      { padding-top: 4rem; }
  .hero-content              { padding-block: 2.5rem 5rem; }
  .typing-wrapper            { min-height: 6.5rem; margin-bottom: 1.75rem; }

  /* Hero buttons — KEEP ROW LAYOUT on mobile (not stack). Both CTAs share
     equal width via flex:1 so they sit comfortably side-by-side. */
  .hero-buttons              { gap: 0.5rem; flex-direction: row; flex-wrap: nowrap; align-items: stretch; }
  .hero-buttons .btn         { width: auto; flex: 1 1 0; justify-content: center; padding: 0.875rem 0.75rem; font-size: 0.875rem; gap: 0.375rem; min-width: 0; }
  .hero-buttons .btn-arrow svg { width: 0.875rem; height: 0.875rem; }

  /* Sections — more aggressive vertical compression to land more content per screen */
  .section                   { padding-block: 3rem; }
  .section-header            { margin-bottom: 2rem; }
  .section-header h2         { font-size: clamp(1.625rem, 7vw, 2rem); }
  .section-header p          { font-size: 0.9375rem; }

  /* Services grid — 1-col vertical stack on mobile (matches Stripe / Linear /
     Notion's mobile pattern). Each card has full width with generous
     padding so the text breathes. Horizontal icon+title row sits on top
     of a full-width description. Trades vertical scroll for readability. */
  .services-grid             { grid-template-columns: 1fr; gap: 0.75rem; }
  .service-card              { padding: 0.25rem; }
  .service-card-inner        { padding: 1.25rem 1.25rem; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon title" "desc desc"; column-gap: 0.875rem; row-gap: 0.5rem; align-items: center; }
  .service-icon              { grid-area: icon; width: 2.5rem; height: 2.5rem; margin: 0; border-radius: 0.625rem; }
  .service-icon svg          { width: 1.25rem; height: 1.25rem; }
  .service-card h3           { grid-area: title; font-size: 1.0625rem; margin: 0; line-height: 1.25; }
  .service-card p            { grid-area: desc; font-size: 0.875rem; line-height: 1.55; margin: 0; }

  /* Values — revert to 1-col vertical stack (icon on top, title, description)
     but more compact than the pre-v1.5.25 version. Smaller padding +
     smaller text so each card is ~140px tall instead of the original
     ~250px. Three cards stack to ~480px instead of ~750px. */
  .values-grid               { grid-template-columns: 1fr; gap: 0.75rem; }
  .value-card                { padding: 1.125rem 1.25rem; text-align: left; }
  .value-icon                { width: 2.25rem; height: 2.25rem; margin: 0 0 0.625rem 0; }
  .value-icon svg            { width: 1.125rem; height: 1.125rem; }
  .value-card h3             { font-size: 1rem; margin-bottom: 0.25rem; line-height: 1.25; }
  .value-card p              { font-size: 0.8125rem; line-height: 1.5; }

  /* Mobile menu — clamp the giant 2rem so it fits narrow phones */
  .mobile-nav a              { font-size: clamp(1.5rem, 7vw, 2rem); }

  /* Forms — bigger inputs (16px font on iOS prevents zoom-on-focus) */
  .form-input,.form-textarea { font-size: 1rem; padding: 1rem; }

  /* Process section — 2×2 grid so all 4 steps fit on one mobile screen
     without scrolling. Smaller circles + tighter spacing + no per-step
     max-width on the description (let the 2-col grid set the width). */
  .process-steps             { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
  .step-number               { width: 2.75rem; height: 2.75rem; font-size: 1.125rem; margin-bottom: 0.625rem; box-shadow: 0 0 0 4px hsl(var(--bg)); }
  .section-muted .step-number{ box-shadow: 0 0 0 4px hsl(38 27% 92%); }
  .process-step h3           { font-size: 0.9375rem; margin-bottom: 0.375rem; }
  .process-step p            { font-size: 0.8125rem; line-height: 1.45; max-width: none; margin-inline: 0; padding-inline: 0.25rem; }

  /* Footer — much tighter: smaller fonts, smaller social icons, less
     vertical breathing room. Brand row spans full width on top; the 3
     link columns sit side-by-side underneath in a 3-col grid. Saves
     ~50% vertical footprint vs 1-col stack. The 3rd column gets extra
     width (1.5fr vs 1fr) so the email "info@numuweb.com" and phone
     +43 677 61440720 fit on one line each. overflow-wrap:break-word
     only kicks in if absolutely necessary (e.g. very narrow screens). */
  .site-footer               { padding-block: 2.5rem 1.5rem; }
  .footer-grid               { grid-template-columns: 1fr 1fr 1.5fr; gap: 1.25rem 0.625rem; margin-bottom: 1.5rem; }
  .footer-brand              { grid-column: 1 / -1; }
  .footer-brand .logo        { margin-bottom: 0.625rem; }
  .footer-tagline            { font-size: 0.8125rem; line-height: 1.5; margin-bottom: 0.875rem; max-width: none; }
  .footer-social             { gap: 0.375rem; }
  .footer-social a           { width: 2rem; height: 2rem; min-width: 2rem; min-height: 2rem; border-radius: 0.5rem; }
  .footer-social a svg       { width: 0.75rem; height: 0.75rem; }
  .footer-col                { min-width: 0; }
  .footer-col h4             { font-size: 0.6875rem; margin-bottom: 0.625rem; }
  .footer-col a              { font-size: 0.75rem; line-height: 1.4; padding-block: 0.3125rem; min-height: 2rem; overflow-wrap: break-word; word-break: normal; }
  .footer-bottom             { font-size: 0.75rem; padding-top: 1.25rem; }

  /* WhatsApp float — bottom inset ≥ 2.1rem (skill PART 15) to clear iOS
     home-indicator + bottom URL bar zones. Size kept tight on mobile. */
  .wa-float                  { bottom: 2.5rem; inset-inline-end: 1rem; width: 3.25rem; height: 3.25rem; }
  .wa-float svg              { width: 1.55rem; height: 1.55rem; }
  .wa-float .wa-tooltip      { display: none; } /* tooltip useless on touch */

  /* Pricing cards — tighter padding without sacrificing legibility */
  .pricing-card              { padding: 0.35rem; }
  .pricing-card-inner        { padding: 1.5rem 1.375rem; }
}

/* Intermediate-tier override removed: services now 2-col at ALL mobile
   sizes via the main <=640 block above. Tier remains for any future
   adjustments specific to 480-639. */
@media (min-width: 480px) and (max-width: 639px) {
  /* (reserved) */
}

@media (max-width: 380px) {
  /* The very-small tier — iPhone SE-class devices */
  .container                 { padding-inline: 1rem; }
  .header-inner              { padding-left: 0.875rem; gap: 0.5rem; }
  .logo-svg                  { height: 1.8rem; }
  .lang-btn                  { padding: 0.35rem 0.55rem 0.35rem 0.65rem; font-size: 0.65rem; }
  .menu-toggle               { width: 2.5rem; height: 2.5rem; }
  .hero h1                   { font-size: clamp(2rem, 11vw, 2.5rem); }
  .hero-content              { padding-block: 2rem 4rem; }
  .typing-text               { font-size: 1rem; }
  .section                   { padding-block: 3.5rem; }
  .pricing-card-inner        { padding: 1.25rem 1.125rem; }
  .form-card-inner           { padding: 1.25rem; }
  .mobile-nav a              { font-size: clamp(1.375rem, 7vw, 1.75rem); }
}

/* 23. REDUCED MOTION */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
  .reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none;filter:none}
  html{scroll-behavior:auto}
}