/* ===== tokens ===== */
/* ============================================================
   WSHIK TEC — Fonts
   Brand uses a clean, geometric Arabic+Latin sans. The custom
   logotype is substituted with Tajawal (Google Fonts) — the
   closest premium geometric Arabic family with full Latin support.
   --> SUBSTITUTION: replace with the licensed brand font if supplied.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');


/* ============================================================
   WSHIK TEC — Color tokens
   Brand palette (from brand guide):
     Mint    #0EFFBE   Electric Blue #2A0DFF
     Magenta #F129BE   Charcoal      #1D1D1B
   ============================================================ */
:root {
  /* --- Brand core --- */
  --mint: #0EFFBE;          /* primary accent / action */
  --blue: #2A0DFF;          /* electric blue secondary */
  --magenta: #F129BE;       /* vibrant magenta secondary */
  --charcoal: #1D1D1B;      /* brand near-black */

  /* --- Mint ramp (mint is light; use -600/-700 for text & links on white) --- */
  --mint-50:  #E6FFF8;
  --mint-100: #C0FFEE;
  --mint-200: #84FFDC;
  --mint-300: #2FFFC8;
  --mint-400: #0EFFBE;      /* = brand mint */
  --mint-500: #06E2A8;
  --mint-600: #02C492;      /* readable on white */
  --mint-700: #019C75;
  --mint-800: #02785A;

  /* --- Blue ramp --- */
  --blue-50:  #EEEBFF;
  --blue-100: #D8D1FF;
  --blue-300: #6A55FF;
  --blue-500: #2A0DFF;      /* = brand blue */
  --blue-600: #2109D6;
  --blue-700: #1A07A6;

  /* --- Magenta ramp --- */
  --magenta-50:  #FFE9F8;
  --magenta-100: #FFCDEE;
  --magenta-300: #F86FD2;
  --magenta-500: #F129BE;   /* = brand magenta */
  --magenta-600: #D40FA1;
  --magenta-700: #A60A7D;

  /* --- Neutral ramp (warm, tuned to charcoal) --- */
  --gray-50:  #F8F8F6;
  --gray-100: #EFEFEC;
  --gray-200: #E2E2DC;
  --gray-300: #CCCCC4;
  --gray-400: #A6A69D;
  --gray-500: #79796F;
  --gray-600: #57574F;
  --gray-700: #3C3C37;
  --gray-800: #292926;
  --gray-900: #1D1D1B;      /* = brand charcoal */
  --gray-950: #131312;
  --white: #FFFFFF;

  /* ============ Semantic aliases ============ */
  /* Surfaces & backgrounds */
  --color-bg: var(--white);
  --color-bg-subtle: var(--gray-50);
  --color-surface: var(--white);
  --color-surface-subtle: var(--gray-50);
  --color-surface-dark: var(--gray-900);
  --color-surface-ink: var(--charcoal);

  /* Text */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-on-dark: var(--white);
  --text-on-dark-muted: rgba(255, 255, 255, 0.66);
  --text-accent: var(--mint-700);     /* mint as readable text/link on white */

  /* Action / accent */
  --color-accent: var(--mint);
  --color-accent-ink: var(--charcoal);  /* text sitting on mint */
  --color-accent-hover: var(--mint-300);
  --color-accent-strong: var(--mint-600);

  /* Borders & lines */
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  /* Focus / state */
  --focus-ring: var(--blue);
  --color-success: var(--mint-700);
  --color-danger: #E5484D;
  --color-warning: #E8A100;

  /* Category accents (service groups, data, tags) */
  --accent-ads: var(--mint);
  --accent-creative: var(--magenta);
  --accent-convert: var(--blue);
  --accent-strategy: var(--charcoal);
}


/* ============================================================
   WSHIK TEC — Typography tokens
   Family: Tajawal (geometric Arabic + Latin). Optimised for
   Arabic / RTL reading: generous sizes & line-height.
   ============================================================ */
:root {
  /* Families */
  --font-sans: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Tajawal', system-ui, sans-serif;

  /* Weights */
  --fw-light: 300;        /* @kind other */
  --fw-regular: 400;      /* @kind other */
  --fw-medium: 500;       /* @kind other */
  --fw-bold: 700;         /* @kind other */
  --fw-extrabold: 800;    /* @kind other */
  --fw-black: 900;        /* @kind other */

  /* Type scale (Arabic reads a touch larger; base = 17px) */
  --text-xs:   0.8125rem;  /* 13 */
  --text-sm:   0.9375rem;  /* 15 */
  --text-base: 1.0625rem;  /* 17 */
  --text-md:   1.1875rem;  /* 19 */
  --text-lg:   1.375rem;   /* 22 */
  --text-xl:   1.625rem;   /* 26 */
  --text-2xl:  2rem;       /* 32 */
  --text-3xl:  2.5rem;     /* 40 */
  --text-4xl:  3.25rem;    /* 52 */
  --text-5xl:  4.25rem;    /* 68 */
  --text-6xl:  5.5rem;     /* 88 */

  /* Fluid display sizes for hero / section headers */
  --display-sm: clamp(2rem, 1.3rem + 3vw, 3rem);      /* @kind other */
  --display-md: clamp(2.5rem, 1.4rem + 4.6vw, 4rem);  /* @kind other */
  --display-lg: clamp(3rem, 1.4rem + 6.4vw, 5.25rem); /* @kind other */

  /* Line heights */
  --leading-none: 1;        /* @kind other */
  --leading-tight: 1.16;    /* @kind other */
  --leading-snug: 1.32;     /* @kind other */
  --leading-normal: 1.62;   /* @kind other */
  --leading-relaxed: 1.85;  /* @kind other */

  /* Letter spacing (Arabic: keep ~0; Latin labels can widen) */
  --tracking-tight: -0.02em;  /* @kind other */
  --tracking-normal: 0em;     /* @kind other */
  --tracking-wide: 0.08em;    /* @kind other */
  --tracking-wider: 0.16em;   /* @kind other */
}


/* ============================================================
   WSHIK TEC — Spacing, sizing, radius
   4px base grid. The brand leans on LARGE, airy spacing.
   ============================================================ */
:root {
  /* Spacing scale (4px grid) */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-7: 1.75rem;   /* 28 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */
  --space-40: 10rem;    /* 160 */

  /* Vertical rhythm for full-bleed sections */
  --section-y: clamp(4rem, 8vw, 9rem);       /* @kind spacing */
  --section-y-lg: clamp(5rem, 10vw, 12rem);  /* @kind spacing */

  /* Layout containers */
  --container: 1200px;                       /* @kind spacing */
  --container-wide: 1320px;                  /* @kind spacing */
  --container-narrow: 760px;                 /* @kind spacing */
  --gutter: clamp(1.25rem, 4vw, 3rem);       /* @kind spacing */

  /* Radii — echo the rounded "bar cap" of the brand mark */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;     /* buttons / chips — the bar-cap shape */

  /* Control sizing */
  --control-h-sm: 38px;   /* @kind spacing */
  --control-h-md: 48px;   /* @kind spacing */
  --control-h-lg: 58px;   /* @kind spacing */
}


/* ============================================================
   WSHIK TEC — Effects: shadows, rings, transitions
   Minimal & soft. Mint "glow" reserved for primary CTAs.
   ============================================================ */
:root {
  /* Elevation — soft, warm-tinted (charcoal base) */
  --shadow-xs: 0 1px 2px rgba(29, 29, 27, 0.06);
  --shadow-sm: 0 2px 6px rgba(29, 29, 27, 0.07);
  --shadow-md: 0 10px 28px -10px rgba(29, 29, 27, 0.16);
  --shadow-lg: 0 26px 64px -22px rgba(29, 29, 27, 0.22);
  --shadow-xl: 0 40px 90px -28px rgba(29, 29, 27, 0.28);

  /* Brand glows — for hero CTAs / accent moments only */
  --glow-mint: 0 14px 40px -10px rgba(14, 255, 190, 0.55);
  --glow-blue: 0 14px 40px -12px rgba(42, 13, 255, 0.45);
  --glow-magenta: 0 14px 40px -12px rgba(241, 41, 190, 0.45);

  /* Focus ring */
  --ring-width: 3px;                                      /* @kind other */
  --ring: 0 0 0 var(--ring-width) rgba(42, 13, 255, 0.45);      /* @kind shadow */
  --ring-mint: 0 0 0 var(--ring-width) rgba(14, 255, 190, 0.55); /* @kind shadow */

  /* Motion — quick, confident, no bounce */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast: 130ms;   /* @kind other */
  --dur: 220ms;        /* @kind other */
  --dur-slow: 420ms;   /* @kind other */

  /* Hairline borders */
  --border-width: 1px;  /* @kind other */
}


/* ============================================================
   WSHIK TEC — Base / reset (RTL-first, Arabic)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  direction: rtl;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  background: var(--color-bg);
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

p { text-wrap: pretty; }

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

img, svg, video { display: block; max-width: 100%; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--mint);
  color: var(--charcoal);
}

/* Utility container */
.wt-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ===== design-system components ===== */

.wt-badge{
  font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:var(--text-xs);
  display:inline-flex;align-items:center;gap:.4em;
  padding:.34em .85em;border-radius:var(--radius-pill);line-height:1;
  border:1px solid transparent;white-space:nowrap;
}
.wt-badge svg{width:1.05em;height:1.05em}
.wt-badge--mint{background:var(--mint-50);color:var(--mint-800)}
.wt-badge--blue{background:var(--blue-50);color:var(--blue-700)}
.wt-badge--magenta{background:var(--magenta-50);color:var(--magenta-700)}
.wt-badge--neutral{background:var(--gray-100);color:var(--gray-700)}
.wt-badge--ink{background:var(--charcoal);color:#fff}
.wt-badge--solid{background:var(--mint);color:var(--charcoal)}
.wt-badge--mint-solid{background:var(--mint);color:var(--charcoal)}
.wt-badge--blue-solid{background:var(--blue);color:#fff}
.wt-badge--magenta-solid{background:var(--magenta);color:#fff}
.wt-badge--outline{background:transparent;color:var(--text-secondary);border-color:var(--border-strong)}



.wt-btn{
  font-family:var(--font-sans);font-weight:var(--fw-bold);
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  border-radius:var(--radius-pill);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.wt-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.wt-btn--sm{height:var(--control-h-sm);padding:0 1.1rem;font-size:var(--text-sm)}
.wt-btn--md{height:var(--control-h-md);padding:0 1.6rem;font-size:var(--text-base)}
.wt-btn--lg{height:var(--control-h-lg);padding:0 2.1rem;font-size:var(--text-md)}
.wt-btn--block{width:100%}
.wt-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.wt-btn svg{width:1.25em;height:1.25em;flex:none}

.wt-btn--primary{background:var(--mint);color:var(--charcoal)}
.wt-btn--primary:hover{background:var(--mint-300);transform:translateY(-1px);box-shadow:var(--glow-mint)}
.wt-btn--primary:active{transform:translateY(0);background:var(--mint-500)}

.wt-btn--dark{background:var(--charcoal);color:#fff}
.wt-btn--dark:hover{background:var(--mint);color:var(--charcoal);transform:translateY(-1px)}
.wt-btn--dark:active{transform:translateY(0)}

.wt-btn--outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.wt-btn--outline:hover{background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.wt-btn--outline:active{transform:translateY(1px)}

.wt-btn--ghost{background:transparent;color:var(--text-primary)}
.wt-btn--ghost:hover{background:var(--gray-100)}

/* on charcoal surfaces */
.wt-btn--onDark.wt-btn--outline{color:#fff;border-color:var(--border-on-dark)}
.wt-btn--onDark.wt-btn--outline:hover{background:#fff;color:var(--charcoal);border-color:#fff}
.wt-btn--onDark.wt-btn--ghost{color:#fff}
.wt-btn--onDark.wt-btn--ghost:hover{background:rgba(255,255,255,.1)}



.wt-card{
  background:var(--color-surface);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:var(--space-7);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.wt-card--pad-sm{padding:var(--space-5)}
.wt-card--pad-lg{padding:var(--space-10)}
.wt-card--elevated{border-color:transparent;box-shadow:var(--shadow-md)}
.wt-card--interactive{cursor:pointer}
.wt-card--interactive:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border)}
.wt-card--dark{background:var(--gray-800);border-color:var(--border-on-dark);color:#fff}
.wt-card--dark.wt-card--interactive:hover{border-color:var(--mint)}
.wt-card--mint{background:var(--mint);border-color:transparent;color:var(--charcoal)}



.wt-field{display:flex;flex-direction:column;gap:.5rem;font-family:var(--font-sans)}
.wt-field__label{font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--text-primary)}
.wt-field__req{color:var(--magenta-600);margin-inline-start:.2em}
.wt-field__wrap{position:relative;display:flex;align-items:center}
.wt-field__icon{position:absolute;inset-inline-start:1rem;display:flex;color:var(--text-muted);pointer-events:none}
.wt-field__icon svg{width:1.25rem;height:1.25rem}
.wt-input{
  width:100%;font:inherit;font-size:var(--text-base);color:var(--text-primary);
  background:var(--color-surface);border:1.5px solid var(--border-strong);
  border-radius:var(--radius-md);padding:0 1.1rem;height:var(--control-h-md);
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.wt-input--hasicon{padding-inline-start:2.9rem}
textarea.wt-input{height:auto;padding:.85rem 1.1rem;line-height:var(--leading-normal);resize:vertical;min-height:7rem}
.wt-input::placeholder{color:var(--gray-400)}
.wt-input:hover{border-color:var(--gray-400)}
.wt-input:focus{outline:none;border-color:var(--blue);box-shadow:var(--ring)}
.wt-field--error .wt-input{border-color:var(--color-danger)}
.wt-field--error .wt-input:focus{box-shadow:0 0 0 3px rgba(229,72,77,.3)}
.wt-field__hint{font-size:var(--text-xs);color:var(--text-muted)}
.wt-field__hint--err{color:var(--color-danger);font-weight:var(--fw-medium)}



.wt-feat{display:flex;flex-direction:column;gap:var(--space-3);font-family:var(--font-sans)}
.wt-feat--row{flex-direction:row;gap:var(--space-4);align-items:flex-start}
.wt-feat__icon{width:52px;height:52px;border-radius:var(--radius-lg);display:grid;place-items:center;flex:none;
  background:var(--mint);color:var(--charcoal)}
.wt-feat__icon svg{width:25px;height:25px}
.wt-feat--blue .wt-feat__icon{background:var(--blue);color:#fff}
.wt-feat--magenta .wt-feat__icon{background:var(--magenta);color:#fff}
.wt-feat--ink .wt-feat__icon{background:var(--charcoal);color:#fff}
.wt-feat--soft .wt-feat__icon{background:var(--mint-50);color:var(--mint-800)}
.wt-feat__title{font-size:var(--text-lg);font-weight:var(--fw-bold);margin:0;color:var(--text-primary)}
.wt-feat__text{font-size:var(--text-sm);color:var(--text-secondary);margin:0;line-height:var(--leading-normal)}
.wt-feat--ondark .wt-feat__title{color:#fff}
.wt-feat--ondark .wt-feat__text{color:var(--text-on-dark-muted)}



.wt-head{display:flex;flex-direction:column;gap:var(--space-4);max-width:64ch}
.wt-head--center{align-items:center;text-align:center;margin-inline:auto}
.wt-head__eyebrow{display:inline-flex;align-items:center;gap:.45em;
  font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--mint-700);
  letter-spacing:.02em}
.wt-head__eyebrow::before{content:"";width:22px;height:2px;background:var(--mint);border-radius:2px}
.wt-head--center .wt-head__eyebrow::before{display:none}
.wt-head__title{font-size:var(--display-sm);font-weight:var(--fw-black);line-height:1.12;letter-spacing:-0.02em;margin:0;color:var(--text-primary)}
.wt-head__sub{font-size:var(--text-md);color:var(--text-secondary);margin:0;line-height:var(--leading-normal)}
.wt-head--ondark .wt-head__title{color:#fff}
.wt-head--ondark .wt-head__sub{color:var(--text-on-dark-muted)}
.wt-head--ondark .wt-head__eyebrow{color:var(--mint)}



.wt-svc{
  display:flex;flex-direction:column;gap:var(--space-5);
  background:var(--color-surface);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:var(--space-8);position:relative;overflow:hidden;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.wt-svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.wt-svc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}
.wt-svc__icon{width:54px;height:54px;border-radius:var(--radius-lg);display:grid;place-items:center;flex:none}
.wt-svc__icon svg{width:26px;height:26px}
.wt-svc--mint .wt-svc__icon{background:var(--mint-50);color:var(--mint-800)}
.wt-svc--blue .wt-svc__icon{background:var(--blue-50);color:var(--blue-700)}
.wt-svc--magenta .wt-svc__icon{background:var(--magenta-50);color:var(--magenta-700)}
.wt-svc--ink .wt-svc__icon{background:var(--gray-100);color:var(--charcoal)}
.wt-svc__title{font-size:var(--text-xl);font-weight:var(--fw-extrabold);line-height:1.2;margin:0}
.wt-svc__meta{display:flex;align-items:baseline;gap:var(--space-2);flex-wrap:wrap}
.wt-svc__price{font-size:var(--text-2xl);font-weight:var(--fw-black);color:var(--text-primary)}
.wt-svc__sar{font-size:var(--text-sm);font-weight:var(--fw-bold);color:var(--text-secondary)}
.wt-svc__dur{font-size:var(--text-sm);color:var(--text-muted)}
.wt-svc__divider{height:1px;background:var(--border);margin:0}
.wt-svc__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.wt-svc__li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--text-sm);color:var(--text-secondary);line-height:1.45}
.wt-svc__li svg{width:1.1rem;height:1.1rem;flex:none;margin-top:.18rem;color:var(--mint-700)}
.wt-svc__li--ex svg{color:var(--gray-400)}
.wt-svc__li--ex{color:var(--text-muted)}
.wt-svc__exlabel{font-size:var(--text-xs);font-weight:var(--fw-bold);color:var(--text-muted);letter-spacing:.04em;margin-bottom:.1rem}



.wt-step{display:flex;flex-direction:column;gap:var(--space-3);font-family:var(--font-sans);position:relative}
.wt-step__num{
  width:56px;height:56px;border-radius:var(--radius-pill);flex:none;
  display:grid;place-items:center;font-size:var(--text-xl);font-weight:var(--fw-black);
  background:var(--charcoal);color:var(--mint);
}
.wt-step--mint .wt-step__num{background:var(--mint);color:var(--charcoal)}
.wt-step--outline .wt-step__num{background:transparent;color:var(--charcoal);border:2px solid var(--charcoal)}
.wt-step__title{font-size:var(--text-lg);font-weight:var(--fw-bold);margin:0;color:var(--text-primary)}
.wt-step__text{font-size:var(--text-sm);color:var(--text-secondary);margin:0;line-height:var(--leading-normal)}
.wt-step--ondark .wt-step__title{color:#fff}
.wt-step--ondark .wt-step__text{color:var(--text-on-dark-muted)}
.wt-step--ondark .wt-step__num{background:var(--mint);color:var(--charcoal)}


/* ===== page layout ===== */

  body { background: var(--color-bg); }
  .app { min-height: 100vh; display: flex; flex-direction: column; }
  main { flex: 1; }
  .section { padding-block: var(--section-y); }
  .section--top0 { padding-top: var(--space-12); }
  .section--ink { background: var(--charcoal); }
  .center-cta { display: flex; justify-content: center; margin-top: var(--space-12); }

  /* ---------- Header ---------- */

  /* ---------- Hero ---------- */
  .hero { padding-block: clamp(3rem, 7vw, 6.5rem) var(--section-y); position: relative; overflow: hidden; }
  .hero::before { content: ""; position: absolute; inset-inline-start: -10%; top: -20%; width: 60%; height: 80%;
    background: radial-gradient(closest-side, rgba(14,255,190,.28), transparent 70%); filter: blur(10px); pointer-events: none; }
  .hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; position: relative; }
  .hero__title { font-size: var(--display-lg); font-weight: var(--fw-black); line-height: 1.08; letter-spacing: -.025em; margin: var(--space-5) 0 var(--space-4); }
  .hero__title .hl { color: var(--mint-700); }
  .hero__sub { font-size: var(--text-md); color: var(--text-secondary); max-width: 52ch; line-height: var(--leading-normal); }
  .hero__cta { display: flex; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap; }
  .platforms { margin-top: var(--space-10); }
  .platforms__label { font-size: var(--text-sm); color: var(--text-muted); }
  .platforms__row { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-4); flex-wrap: wrap; opacity: .85; }
  .platforms__row img { height: 26px; }

  .hero__visual { display: flex; justify-content: center; }
  .hero__panel { position: relative; width: min(440px, 100%); aspect-ratio: 1; background: var(--charcoal);
    border-radius: var(--radius-2xl); display: grid; place-items: center; box-shadow: var(--shadow-xl); }
  .hero__circle { width: 58%; height: auto; filter: drop-shadow(0 16px 40px rgba(14,255,190,.35)); }
  .floatcard { position: absolute; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-4); }
  .floatcard--a { inset-block-start: 8%; inset-inline-start: -6%; width: 168px; }
  .floatcard--b { inset-block-end: 9%; inset-inline-end: -5%; display: flex; align-items: center; gap: var(--space-3); }
  .floatcard__row { display: flex; align-items: center; gap: .4rem; font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-secondary); }
  .bars { display: flex; align-items: flex-end; gap: 8px; height: 56px; margin-top: var(--space-3); }
  .bars i { flex: 1; background: var(--mint); border-radius: var(--radius-pill); min-height: 18%; }
  .bars i:nth-child(4) { background: var(--mint-700); }
  .floatcard__big { font-size: var(--text-xl); font-weight: var(--fw-black); color: var(--charcoal); line-height: 1; }
  .floatcard__cap { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

  /* ---------- Service categories ---------- */
  .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-12); }
  .cat { display: flex; flex-direction: column; gap: var(--space-4); }
  .cat__icon { width: 56px; height: 56px; border-radius: var(--radius-lg); display: grid; place-items: center; }
  .cat__icon--mint { background: var(--mint-50); color: var(--mint-800); }
  .cat__icon--magenta { background: var(--magenta-50); color: var(--magenta-700); }
  .cat__icon--blue { background: var(--blue-50); color: var(--blue-700); }
  .cat__icon--ink { background: var(--gray-100); color: var(--charcoal); }
  .cat__title { font-size: var(--text-lg); font-weight: var(--fw-extrabold); margin: 0; }
  .cat__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
  .cat__list li { display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); color: var(--text-secondary); }
  .cat__list li span { display: inline-flex; }
  .cat__list svg { color: var(--mint-700); }

  /* ---------- Steps ---------- */
  .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6); margin-top: var(--space-12); }

  /* ---------- Why grid ---------- */
  .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-10); }

  /* ---------- CTA band ---------- */
  .cta-band { background: var(--charcoal); position: relative; overflow: hidden; padding-block: var(--section-y); }
  .cta-band::before { content: ""; position: absolute; inset-inline-end: -8%; top: -40%; width: 50%; height: 140%;
    background: radial-gradient(closest-side, rgba(14,255,190,.22), transparent 70%); pointer-events: none; }
  .cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); position: relative; flex-wrap: wrap; }
  .cta-band__title { color: #fff; font-size: var(--display-sm); font-weight: var(--fw-black); margin: 0 0 .4rem; letter-spacing: -.02em; }
  .cta-band__sub { color: var(--text-on-dark-muted); font-size: var(--text-md); margin: 0; }
  .cta-band__btns { display: flex; gap: var(--space-3); flex-wrap: wrap; }

  /* ---------- Page head ---------- */
  .pagehead { padding-block: clamp(2.5rem, 6vw, 5rem) 0; }
  .pagehead .wt-container > * + * { margin-top: var(--space-4); }
  .pagehead__title { font-size: var(--display-md); font-weight: var(--fw-black); letter-spacing: -.025em; margin: var(--space-4) 0 0; }
  .pagehead__sub { font-size: var(--text-md); color: var(--text-secondary); max-width: 60ch; }

  /* ---------- Filters + service grid ---------- */
  .filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-10); }
  .filter { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-bold); cursor: pointer;
    padding: .6rem 1.2rem; border-radius: var(--radius-pill); border: 1.5px solid var(--border-strong);
    background: transparent; color: var(--text-secondary); transition: all var(--dur) var(--ease-out); }
  .filter:hover { border-color: var(--charcoal); color: var(--text-primary); }
  .filter--on { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
  .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: stretch; }

  /* ---------- About ---------- */
  .vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .vm { display: flex; flex-direction: column; gap: var(--space-4); }
  .vm__icon { width: 60px; height: 60px; border-radius: var(--radius-lg); display: grid; place-items: center; }
  .vm__icon--mint { background: var(--mint-50); color: var(--mint-800); }
  .vm__icon--mintsolid { background: var(--mint); color: var(--charcoal); }
  .vm__title { font-size: var(--text-2xl); font-weight: var(--fw-extrabold); margin: 0; }
  .vm__text { font-size: var(--text-md); color: var(--text-secondary); margin: 0; line-height: var(--leading-normal); }
  .values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); margin-top: var(--space-10); }
  .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); text-align: center; }
  .stat__num { font-size: var(--text-5xl); font-weight: var(--fw-black); color: var(--mint); line-height: 1; letter-spacing: -.02em; }
  .stat__cap { color: var(--text-on-dark-muted); margin-top: var(--space-3); font-size: var(--text-md); }

  /* ---------- Contact ---------- */
  .contact-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: var(--space-8); align-items: start; }
  .form { display: flex; flex-direction: column; gap: var(--space-5); }
  .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .field { display: flex; flex-direction: column; gap: .5rem; }
  .field__label { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--text-primary); }
  .select-wrap { position: relative; }
  .select-wrap select { appearance: none; -webkit-appearance: none; cursor: pointer; width: 100%; }
  .select-wrap__chev { position: absolute; inset-inline-start: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
  .contact-info { display: flex; flex-direction: column; gap: var(--space-4); }
  .contact-line { display: flex; align-items: center; gap: var(--space-4); background: var(--color-surface);
    border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
    transition: border-color var(--dur), transform var(--dur); }
  .contact-line:hover { transform: translateY(-2px); border-color: var(--border-strong); }
  .contact-line > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
  .contact-line__ic { width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center; flex: none; }
  .contact-line--wa .contact-line__ic { background: #25D366; }
  .contact-line__ic--ink { background: var(--charcoal); }
  .contact-line__t { font-weight: var(--fw-bold); color: var(--text-primary); }
  .contact-line__v { font-size: var(--text-sm); color: var(--text-muted); }
  .social { padding: var(--space-5); }
  .social__label { font-size: var(--text-sm); color: var(--text-muted); }
  .social__row { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
  .social__btn { width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--border);
    display: grid; place-items: center; transition: border-color var(--dur), background var(--dur); }
  .social__btn:hover { border-color: var(--charcoal); background: var(--gray-50); }
  .sent { text-align: center; padding: var(--space-8) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
  .sent__icon { width: 76px; height: 76px; border-radius: var(--radius-pill); background: var(--mint); display: grid; place-items: center; margin-bottom: var(--space-2); }
  .sent__title { font-size: var(--text-2xl); font-weight: var(--fw-extrabold); margin: 0; }
  .sent__text { color: var(--text-secondary); margin: 0 0 var(--space-3); max-width: 38ch; }

  /* ---------- Footer ---------- */
  .ftr { background: var(--gray-950); color: #fff; padding-top: var(--section-y); }
  .ftr__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: var(--space-8); padding-bottom: var(--space-12); }
  .ftr__logo { height: 46px; width: auto; }
  .ftr__tag { color: var(--text-on-dark-muted); font-size: var(--text-sm); margin: var(--space-4) 0 var(--space-5); max-width: 32ch; line-height: var(--leading-normal); }
  .ftr__platforms { display: flex; gap: var(--space-4); align-items: center; opacity: .8; }
  .ftr__col h4 { font-size: var(--text-sm); font-weight: var(--fw-bold); color: #fff; margin: 0 0 var(--space-4); letter-spacing: .02em; }
  .ftr__col a { display: block; color: var(--text-on-dark-muted); font-size: var(--text-sm); padding: .35rem 0; transition: color var(--dur); }
  .ftr__col a:hover { color: var(--mint); }
  .ftr__social { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
  .ftr__social a { width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--border-on-dark); display: grid; place-items: center; padding: 0; }
  .ftr__social a:hover { border-color: var(--mint); }
  .ftr__bottom { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-6);
    border-top: 1px solid var(--border-on-dark); color: var(--text-on-dark-muted); font-size: var(--text-sm); flex-wrap: wrap; gap: var(--space-3); }
  .ftr__bottom-links { display: flex; gap: var(--space-5); }
  .ftr__bottom-links a { color: var(--text-on-dark-muted); }
  .ftr__bottom-links a:hover { color: var(--mint); }

  /* ---------- Responsive ---------- */
  @media (max-width: 1000px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__visual { order: -1; }
    .cat-grid, .svc-grid, .steps, .values-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: 1fr 1fr; }
    .ftr__top { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 760px) {
    .cat-grid, .svc-grid, .steps, .why-grid, .values-grid, .vm-grid, .contact-grid, .form__row, .stats { grid-template-columns: 1fr; }
    .ftr__top { grid-template-columns: 1fr; gap: var(--space-6); }
    .cta-band__inner { flex-direction: column; align-items: flex-start; }
  }
/* ===== WP header logo sizing ===== */
.custom-logo { height: 44px !important; width: auto !important; }
.site-logo, .site-branding { display: flex; align-items: center; }

/* ===== Custom site header/footer (replaces Hello Elementor's bare header/footer) ===== */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border); }
.hdr__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: var(--space-6); }
.hdr__logo img { height: 40px; width: auto; }
.hdr__nav { display: flex; align-items: center; gap: var(--space-2); }
.hdr__link { font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--text-secondary);
  padding: .5rem .9rem; border-radius: var(--radius-pill); transition: color var(--dur), background var(--dur); }
.hdr__link:hover { color: var(--text-primary); background: var(--gray-100); }
.hdr__link.is-active { color: var(--text-primary); font-weight: var(--fw-bold); }
.hdr__nav-cta { display: none; }
.hdr__right { display: flex; align-items: center; gap: var(--space-3); }
.hdr__burger { display: none; background: none; border: none; cursor: pointer; color: var(--charcoal); padding: 6px; }
@media (max-width: 760px) {
  .hdr__cta { display: none; }
  .hdr__burger { display: inline-flex; }
  .hdr__nav { position: absolute; top: 76px; inset-inline: 0; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--border); padding: var(--space-4); gap: var(--space-1);
    display: none; box-shadow: var(--shadow-lg); }
  .hdr__nav.is-open { display: flex; }
  .hdr__nav-cta { display: block; margin-top: var(--space-2); }
}