:root {
  
  --blue-50:#EFF5FF; --blue-100:#DBE8FE; --blue-200:#BFD7FE; --blue-300:#93B8FD;
  --blue-400:#609BFA; --blue-500:#3B82F6; --blue-600:#2563EB; --blue-700:#1D4ED8;
  --blue-800:#1E40AF; --blue-900:#1E3A8A; --blue-950:#172554;

  --brand:#1E3A8A;
  --brand-strong:#172554;
  --brand-soft:#E6EDFB;
  --brand-gradient:linear-gradient(135deg,#1E40AF 0%,#1E3A8A 55%,#172554 100%);

--ink-950:#0B1220; --ink-900:#0F172A; --ink-800:#162236; --ink-700:#1E2C44;

--surface:#FFFFFF;
  --surface-soft:#F5F8FF;
  --surface-2:#FFFFFF;
  --line:#E3EBF7;
  --text:#0F172A;
  --text-muted:#516079;

--wa:#25D366; --wa-strong:#1EBE57;

--font-ar:'Tajawal', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-en:'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display:'Playfair Display', 'Tajawal', Georgia, serif;
  --font:var(--font-ar);

--r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow:0 8px 24px rgba(15,23,42,.08);
  --shadow-lg:0 22px 48px rgba(15,23,42,.12);
  --shadow-blue:0 16px 36px rgba(23,37,84,.30);
  --ring:0 0 0 4px rgba(30,58,138,.22);

--container:1240px;
  --container-narrow:960px;
  --gutter:clamp(1rem, 4vw, 2.5rem);
  --header-h:74px;

--ease:cubic-bezier(.22,.61,.36,1);
  --dur:.85s;
}

html[lang="en"] { --font:var(--font-en); --font-display:'Playfair Display', Georgia, serif; }

[data-theme="dark"] {
  --surface:var(--ink-900);
  --surface-soft:var(--ink-950);
  --surface-2:var(--ink-800);
  --line:#243049;
  --text:#E8EEFB;
  --text-muted:#9DB0CE;
  
  --brand:#7EA8FC;
  --brand-strong:#A8C5FE;
  --brand-gradient:linear-gradient(135deg,#3B82F6 0%,#2563EB 55%,#1D4ED8 100%);
  --brand-soft:rgba(96,155,250,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --shadow-lg:0 24px 54px rgba(0,0,0,.55);
  --shadow-blue:0 16px 38px rgba(23,37,84,.5);
  color-scheme:dark;
}

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  font-family:var(--font);
  background:var(--surface-soft);
  color:var(--text);
  line-height:1.75;
  font-size:1rem;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  min-height:100vh;
  transition:background .3s ease, color .3s ease;
}

img,svg,video,canvas { display:block; max-width:100%; height:auto; }
img,video { aspect-ratio:attr(width) / attr(height); }
a { color:var(--brand); text-decoration:none; }
a:hover { color:var(--brand-strong); }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
input,select,textarea { font:inherit; color:inherit; }
ul,ol { padding-inline-start:1.2em; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
::selection { background:var(--blue-200); color:var(--blue-950); }

h1,h2,h3,h4 { line-height:1.25; font-weight:800; color:var(--text); }
h1 { font-size:clamp(2rem, 5vw, 3.2rem); }
h2 { font-size:clamp(1.6rem, 3.6vw, 2.5rem); }
h3 { font-size:clamp(1.2rem, 2.4vw, 1.6rem); }

.skip-link {
  position:absolute; inset-inline-start:1rem; top:-60px; z-index:1000;
  background:var(--brand); color:#fff; padding:.6rem 1rem; border-radius:var(--r-sm);
  transition:top .2s ease;
}
.skip-link:focus { top:1rem; color:#fff; }

.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--narrow { max-width:var(--container-narrow); }

.section { padding-block:clamp(3.5rem, 8vw, 6.5rem); position:relative; }
.section--soft { background:var(--surface-soft); }
.section--tint { background:linear-gradient(180deg,var(--brand-soft),transparent 70%); }

.section-head { text-align:center; max-width:760px; margin-inline:auto; margin-bottom:clamp(2rem,4vw,3.2rem); }
.section-head--start { text-align:start; margin-inline:0; }

.section-tag {
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.82rem; font-weight:700; letter-spacing:.02em;
  color:var(--brand); background:var(--brand-soft);
  padding:.45em 1em; border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  margin-bottom:1rem;
}
.section-title {
  font-family:var(--font-display);
  font-size:clamp(1.7rem, 4vw, 2.7rem);
  font-weight:800; line-height:1.2; color:var(--text);
}
.section-sub { margin-top:.9rem; color:var(--text-muted); font-size:1.05rem; }

.grad-text {
  background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-weight:700; font-size:1rem; line-height:1;
  padding:.85em 1.6em; border-radius:var(--r-pill);
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background .25s ease, color .25s ease, border-color .25s ease;
  will-change:transform;
}
.btn:active { transform:translateY(1px); }
.btn svg { width:1.15em; height:1.15em; }

.btn-primary { background:var(--brand-gradient); color:#fff; box-shadow:var(--shadow-blue); }
.btn-primary:hover { color:#fff; transform:translateY(-2px); box-shadow:0 18px 40px rgba(23,37,84,.38); }

.btn-ghost { background:transparent; color:var(--brand); border-color:color-mix(in srgb,var(--brand) 40%, transparent); }
.btn-ghost:hover { background:var(--brand-soft); color:var(--brand-strong); transform:translateY(-2px); }

.btn-light { background:var(--surface); color:var(--text); border-color:var(--line); box-shadow:var(--shadow-sm); }
.btn-light:hover { border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }

.btn-wa { background:var(--wa); color:#fff; box-shadow:0 12px 28px rgba(37,211,102,.32); }
.btn-wa:hover { background:var(--wa-strong); color:#fff; transform:translateY(-2px); }

.btn-lg { padding:1.05em 2.1em; font-size:1.08rem; }
.btn-block { width:100%; }

.chip {
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.8rem; font-weight:600; color:var(--brand);
  background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 16%, transparent);
  padding:.35em .85em; border-radius:var(--r-pill);
}
.badge {
  display:inline-flex; align-items:center; gap:.35em;
  font-size:.72rem; font-weight:700; color:#fff; background:var(--brand);
  padding:.3em .7em; border-radius:var(--r-pill);
}
.badge-popular { background:var(--brand-gradient); box-shadow:var(--shadow-blue); }

.grid { display:grid; gap:clamp(1rem,2.5vw,1.8rem); }
.grid-2 { grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); }
.grid-4 { grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }

.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,2rem);
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease;
}
.card::before {
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--brand-gradient); transform:scaleX(0); transform-origin:inline-start;
  transition:transform .4s var(--ease);
}
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--brand) 28%, var(--line)); }
.card:hover::before { transform:scaleX(1); }

.card-icon {
  width:58px; height:58px; display:grid; place-items:center;
  font-size:1.7rem; border-radius:var(--r);
  background:var(--brand-soft); color:var(--brand);
  margin-bottom:1.1rem;
}
.card-title { font-size:1.2rem; font-weight:800; margin-bottom:.55rem; }
.card-text { color:var(--text-muted); font-size:.97rem; }
.card-list { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.6rem; }
.card-list li { position:relative; padding-inline-start:1.6em; color:var(--text-muted); font-size:.95rem; }
.card-list li::before {
  content:"✓"; position:absolute; inset-inline-start:0; top:0;
  color:var(--brand); font-weight:800;
}

.field { display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.1rem; }
.field-label { font-weight:600; font-size:.92rem; color:var(--text); }
.field-label .req { color:var(--brand); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.input,.textarea,.select {
  width:100%; background:var(--surface); color:var(--text);
  border:1.5px solid var(--line); border-radius:var(--r);
  padding:.85em 1em; font-size:1rem; line-height:1.5;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.textarea { min-height:130px; resize:vertical; }
.select { appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23516079'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 1em center; background-size:1.2em; padding-inline-end:2.6em;
}
html[dir="ltr"] .select { background-position:right 1em center; padding-inline-end:2.6em; padding-inline-start:1em; }
.input::placeholder,.textarea::placeholder { color:color-mix(in srgb,var(--text-muted) 80%, transparent); }
.input:focus,.textarea:focus,.select:focus {
  outline:none; border-color:var(--brand); box-shadow:var(--ring);
}
.field.has-error .input,.field.has-error .textarea,.field.has-error .select { border-color:#dc2626; }
.field-error { color:#dc2626; font-size:.82rem; }
.honeypot { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.form-note { font-size:.85rem; color:var(--text-muted); text-align:center; margin-top:.6rem; }
.form-alert { padding:.9em 1.1em; border-radius:var(--r); font-size:.95rem; margin-bottom:1rem; }
.form-alert--ok { background:color-mix(in srgb,var(--wa) 14%, var(--surface)); color:var(--wa-strong); border:1px solid color-mix(in srgb,var(--wa) 30%, transparent); }
.form-alert--err { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }

.site-header {
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb,var(--surface) 88%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.site-header.is-scrolled { box-shadow:var(--shadow); border-bottom-color:var(--line); }
.header-row { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; height:var(--header-h); }

.brand { display:inline-flex; align-items:center; gap:.7rem; color:var(--text); font-weight:800; }
.brand:hover { color:var(--text); }
.brand__avatar {
  width:42px; height:42px; border-radius:50%; object-fit:cover; aspect-ratio:1;
  border:2px solid var(--brand); box-shadow:var(--shadow-sm);
}
.brand__name { font-size:1.12rem; font-weight:800; line-height:1.1; }

.primary-nav { margin-inline:auto; }
.primary-nav ul { list-style:none; display:flex; align-items:center; gap:.3rem; margin:0; padding:0; }
.nav-link {
  display:inline-flex; align-items:center; gap:.35em;
  padding:.55em .85em; border-radius:var(--r-pill);
  color:var(--text); font-weight:600; font-size:.96rem; position:relative;
  transition:color .2s ease, background .2s ease;
}
.nav-link:hover { color:var(--brand); background:var(--brand-soft); }
.nav-link.is-active { color:var(--brand); }
.nav-link.is-active::after {
  content:""; position:absolute; inset-inline:.85em; bottom:.25em; height:2px;
  background:var(--brand-gradient); border-radius:2px;
}

.header-actions { display:flex; align-items:center; gap:.5rem; }
.icon-btn {
  width:42px; height:42px; display:grid; place-items:center; border-radius:var(--r-pill);
  color:var(--text); border:1px solid var(--line); background:var(--surface);
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.icon-btn:hover { color:var(--brand); border-color:var(--brand); transform:translateY(-1px); }
.icon-btn svg { width:20px; height:20px; }
.lang-toggle { display:inline-flex; flex-flow:row nowrap; align-items:center; width:auto; gap:.4em; font-weight:700; font-size:.9rem; padding-inline:.9em; white-space:nowrap; }
.lang-toggle svg { flex:none; }
.theme-toggle .ico-moon { display:none; }
[data-theme="dark"] .theme-toggle .ico-sun { display:none; }
[data-theme="dark"] .theme-toggle .ico-moon { display:block; }

.nav-toggle {
  display:none; width:44px; height:44px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface); flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span { width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.drawer-overlay {
  position:fixed; inset:0; z-index:198; background:rgba(11,18,32,.5);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
  backdrop-filter:blur(2px);
}
.drawer-overlay.is-open { opacity:1; visibility:visible; }

.mobile-drawer {
  position:fixed; top:0; inset-inline-end:0; z-index:199;
  width:min(88vw, 360px); height:100dvh; overflow-y:auto;
  background:var(--surface); border-inline-start:1px solid var(--line);
  box-shadow:-12px 0 40px rgba(15,23,42,.18);
  display:flex; flex-direction:column; gap:1.2rem; padding:1.3rem;
  transform:translateX(110%);
  transition:transform .4s var(--ease);
}
html[dir="ltr"] .mobile-drawer { box-shadow:12px 0 40px rgba(15,23,42,.18); transform:translateX(-110%); }
.mobile-drawer.is-open { transform:translateX(0); }

.mobile-drawer__top { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.mobile-drawer__brand { display:flex; align-items:center; gap:.6rem; color:var(--text); font-weight:800; }
.mobile-drawer__brand img { width:40px; height:40px; border-radius:50%; object-fit:cover; aspect-ratio:1; border:2px solid var(--brand); }
.mobile-drawer__close { width:40px; height:40px; border-radius:var(--r); border:1px solid var(--line); display:grid; place-items:center; color:var(--text); }
.mobile-drawer__close:hover { color:var(--brand); border-color:var(--brand); }

.mobile-drawer__nav { display:flex; flex-direction:column; gap:.2rem; }
.mobile-drawer__nav a {
  display:flex; align-items:center; gap:.7rem; padding:.8em .9em; border-radius:var(--r);
  color:var(--text); font-weight:600; transition:background .2s ease, color .2s ease;
}
.mobile-drawer__nav a:hover,.mobile-drawer__nav a.is-active { background:var(--brand-soft); color:var(--brand); }
.mobile-drawer__nav .dot { width:7px; height:7px; border-radius:50%; background:var(--brand); opacity:.5; }
.mobile-drawer__nav a.is-active .dot { opacity:1; }

.mobile-drawer__cta { display:grid; gap:.6rem; margin-top:auto; }
.mobile-drawer__contact { display:grid; gap:.5rem; padding-top:1rem; border-top:1px solid var(--line); }
.mobile-drawer__contact a { display:flex; align-items:center; gap:.6rem; color:var(--text-muted); font-size:.92rem; }
.mobile-drawer__contact a:hover { color:var(--brand); }
.mobile-drawer__contact svg { width:18px; height:18px; color:var(--brand); flex:none; }
.mobile-drawer__socials { display:flex; gap:.5rem; }
.mobile-drawer__socials a {
  width:40px; height:40px; border-radius:var(--r); display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand);
}
.mobile-drawer__socials a:hover { background:var(--brand); color:#fff; }

body.no-scroll { overflow:hidden; }

.hero { position:relative; overflow:hidden; padding-block:clamp(3rem,7vw,5.5rem); }
.hero::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 60% at 80% 10%, color-mix(in srgb,var(--brand) 12%, transparent), transparent 70%),
    radial-gradient(50% 50% at 10% 90%, color-mix(in srgb,var(--blue-500) 10%, transparent), transparent 70%),
    var(--surface-soft);
}
.hero-inner { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero-greeting { color:var(--brand); font-weight:700; font-size:1.05rem; margin-bottom:.6rem; display:inline-flex; gap:.4em; }
.hero-title { font-family:var(--font-display); font-size:clamp(2.1rem,5.4vw,3.5rem); font-weight:900; line-height:1.12; }
.hero-role { margin-top:1rem; font-weight:700; color:var(--text); font-size:clamp(1.05rem,2.4vw,1.3rem); }
.hero-tagline { margin-top:1rem; color:var(--text-muted); font-size:1.08rem; max-width:42ch; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.hero-social { display:flex; gap:.6rem; margin-top:1.6rem; }
.hero-social a {
  width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  box-shadow:var(--shadow-sm); transition:transform .2s ease, color .2s ease, border-color .2s ease;
}
.hero-social a:hover { color:var(--brand); border-color:var(--brand); transform:translateY(-3px); }

.hero-media { position:relative; }
.hero-photo {
  width:100%; max-width:420px; margin-inline:auto; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  border:6px solid var(--surface);
}
.hero-badge {
  position:absolute; display:inline-flex; align-items:center; gap:.5em;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  padding:.6em 1em; border-radius:var(--r-pill); font-weight:800; font-size:.9rem; color:var(--text);
}
.hero-badge--years { top:8%; inset-inline-start:-4%; color:var(--brand); }
.hero-badge--premium { bottom:8%; inset-inline-end:-2%; }
.hero-badge svg { width:1.1em; height:1.1em; color:var(--brand); }

.powered-by {
  display:inline-flex; align-items:center; gap:.55em;
  padding:.5em .95em; border-radius:var(--r-pill);
  background:var(--brand-gradient); color:#fff;
  box-shadow:var(--shadow-blue);
  border:1px solid rgba(255,255,255,.14);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.powered-by:hover { transform:translateY(-2px); color:#fff; box-shadow:var(--shadow-lg); }
.powered-by__label { font-size:.62rem; font-weight:700; letter-spacing:.18em; opacity:.8; }
.powered-by__name {
  font-family:var(--font-en); font-weight:900; letter-spacing:.06em; font-size:.92rem;
  padding-inline-start:.55em; border-inline-start:1px solid rgba(255,255,255,.28);
}

.hero-slogan {
  display:inline-flex; align-items:center; gap:.5em; margin-top:1.1rem;
  padding:.5em 1.1em; border-radius:var(--r-pill);
  background:var(--brand-soft); color:var(--brand);
  font-weight:800; font-size:clamp(.95rem,2vw,1.12rem); line-height:1.5;
  border:1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}
.hero-slogan::before { content:"★"; color:var(--brand); }
[data-theme="dark"] .hero-slogan { background:rgba(96,155,250,.14); color:var(--blue-200); border-color:rgba(96,155,250,.35); }
[data-theme="dark"] .hero-slogan::before { color:var(--blue-300); }

[data-theme="dark"] .grad-text {
  background:linear-gradient(135deg,#93B8FD 0%,#609BFA 50%,#BFD7FE 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
[data-theme="dark"] .hero-greeting { color:var(--blue-300); }
[data-theme="dark"] .hero-badge--years,
[data-theme="dark"] .hero-badge svg { color:var(--blue-300); }

.scroll-hint { display:inline-flex; flex-direction:column; align-items:center; gap:.3rem; color:var(--text-muted); font-size:.85rem; margin-top:2rem; }
.scroll-hint .arrow { animation:bob 1.8s var(--ease) infinite; }
@media (prefers-reduced-motion: reduce) { .scroll-hint .arrow { animation:none; } }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:clamp(1rem,2.5vw,1.8rem); }
.stat { text-align:center; padding:1.6rem 1rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.stat-num { font-family:var(--font-display); font-size:clamp(2rem,4.5vw,2.8rem); font-weight:900; color:var(--brand); line-height:1; }
.stat-num .suffix { font-size:.6em; }
.stat-label { margin-top:.5rem; color:var(--text-muted); font-size:.95rem; font-weight:600; }

.skills { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem 2.4rem; }
.skill-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.skill-name { font-weight:700; }
.skill-pct { color:var(--brand); font-weight:800; font-size:.95rem; }
.skill-bar { height:10px; border-radius:var(--r-pill); background:var(--brand-soft); overflow:hidden; }
.skill-bar > i {
  display:block; height:100%; width:0; border-radius:inherit; background:var(--brand-gradient);
  transition:width 1.2s var(--ease);
}
.js .skill-bar > i { width:0; }
.js .in-view .skill-bar > i,
.js .is-revealed .skill-bar > i,
.js .skill.in-view .skill-bar > i { width:var(--pct,0%); }
html:not(.js) .skill-bar > i { width:var(--pct,0%); }

.timeline { position:relative; display:grid; gap:1.4rem; padding-inline-start:1.6rem; }
.timeline::before { content:""; position:absolute; inset-block:0; inset-inline-start:5px; width:2px; background:var(--line); }
.timeline-item { position:relative; }
.timeline-dot { position:absolute; inset-inline-start:-1.6rem; top:.4rem; width:12px; height:12px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.timeline-period { color:var(--brand); font-weight:700; font-size:.85rem; }
.timeline-role { font-weight:800; font-size:1.1rem; margin:.2rem 0; }
.timeline-org { color:var(--text-muted); }

.workflow { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.4rem; counter-reset:step; }
.workflow-step { position:relative; padding:1.8rem 1.4rem 1.4rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.workflow-step .num { font-family:var(--font-display); font-size:2.4rem; font-weight:900; color:color-mix(in srgb,var(--brand) 26%, transparent); line-height:1; }
.workflow-step h3 { margin:.4rem 0; font-size:1.15rem; }
.workflow-step p { color:var(--text-muted); font-size:.95rem; }

.carousel { overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.carousel-track { display:flex; gap:1.2rem; width:max-content; }
@media (prefers-reduced-motion: no-preference) {
  .carousel-track--auto { animation:marquee 36s linear infinite; }
  [dir="ltr"] .carousel-track--auto { animation-direction:reverse; }
  .carousel:hover .carousel-track--auto { animation-play-state:paused; }
}
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.clients-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem; }
.clients-grid .carousel-item { flex:0 1 200px; }
@media (max-width:560px){ .clients-grid .carousel-item { flex:1 1 calc(50% - .6rem); width:auto; } }
.carousel-item {
  flex:0 0 auto; width:200px; padding:1.4rem; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
}
.carousel-item .logo { width:64px; height:64px; margin:0 auto .6rem; display:grid; place-items:center; font-size:2rem; border-radius:var(--r); background:var(--brand-soft); }
.carousel-item img.logo { object-fit:contain; padding:.5rem; aspect-ratio:1; }
.carousel-item .name { font-weight:700; font-size:.95rem; }
.carousel-item .cat { color:var(--text-muted); font-size:.82rem; margin-top:.2rem; }

.faq { display:grid; gap:.8rem; max-width:820px; margin-inline:auto; }
.faq-item { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; }
.faq-item.is-open { border-color:color-mix(in srgb,var(--brand) 32%, var(--line)); box-shadow:var(--shadow); }
.faq-q {
  width:100%; text-align:start; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1em 1.3em; font-weight:700; font-size:1.05rem; color:var(--text);
}
.faq-q .icon { flex:none; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--brand-soft); color:var(--brand); transition:transform .3s var(--ease); font-weight:800; }
.faq-item.is-open .faq-q .icon { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.faq-a__inner { padding:0 1.3em 1.2em; color:var(--text-muted); line-height:1.8; }
html:not(.js) .faq-a { max-height:none; }

.pricing { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.6rem; align-items:start; }
.price-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:2rem 1.7rem; box-shadow:var(--shadow-sm); position:relative; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.price-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.price-card.is-popular { border-color:var(--brand); box-shadow:var(--shadow-blue); transform:translateY(-8px); }
.price-card .pop-badge { position:absolute; top:-14px; inset-inline-start:50%; transform:translateX(-50%); }
html[dir="ltr"] .price-card .pop-badge { transform:translateX(-50%); }
.price-card .plan-icon { font-size:2rem; }
.price-card .plan-name { font-size:1.4rem; font-weight:800; margin:.4rem 0 .1rem; }
.price-card .plan-for { color:var(--text-muted); font-size:.9rem; }
.price-card .plan-price { font-family:var(--font-display); font-weight:900; font-size:2rem; color:var(--brand); margin:1rem 0; }
.price-card .plan-price small { font-size:.5em; color:var(--text-muted); font-weight:600; font-family:var(--font); }
.price-card .plan-features { list-style:none; padding:0; margin:0 0 1.4rem; display:grid; gap:.6rem; }
.price-card .plan-features li { position:relative; padding-inline-start:1.7em; color:var(--text-muted); font-size:.93rem; }
.price-card .plan-features li::before { content:"✓"; position:absolute; inset-inline-start:0; color:var(--brand); font-weight:800; }
.price-card .plan-features li.no::before { content:"✗"; color:color-mix(in srgb,var(--text-muted) 70%, transparent); }
.price-card .plan-features li.no { opacity:.7; }

.contact-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; }
.contact-card { display:flex; gap:1rem; align-items:flex-start; padding:1.4rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), border-color .25s ease; }
.contact-card:hover { transform:translateY(-4px); border-color:var(--brand); }
.contact-card .ico { width:48px; height:48px; flex:none; border-radius:var(--r); display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); font-size:1.3rem; }
.contact-card .label { font-size:.82rem; color:var(--text-muted); font-weight:600; }
.contact-card .value { font-weight:700; word-break:break-word; }
.contact-card .value bdi { direction:ltr; unicode-bidi:embed; }

.contact-layout {
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(1.4rem,3vw,2.4rem); align-items:start;
}
@media (max-width:860px) { .contact-layout { grid-template-columns:1fr; } }

.contact-panel {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--shadow);
  padding:clamp(1.4rem,4vw,2.4rem); position:relative; overflow:hidden;
}
.contact-panel__head { margin-bottom:1.4rem; }
.contact-panel__head h2 { font-family:var(--font-display); font-size:clamp(1.4rem,3vw,1.85rem); }
.contact-panel__head p { color:var(--text-muted); margin-top:.5rem; font-size:.97rem; }

.contact-form-card::before {
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--brand-gradient);
}
.contact-form-card .reassure {
  display:inline-flex; align-items:center; gap:.5em;
  color:var(--brand); font-weight:700; font-size:.9rem;
  background:var(--brand-soft); padding:.5em 1em; border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,var(--brand) 16%, transparent);
  margin-bottom:1.4rem;
}
.contact-form-card .reassure svg { width:1.05em; height:1.05em; flex:none; }

.contact-alert {
  display:flex; align-items:center; gap:.7rem;
  border-radius:var(--r-lg); padding:1rem 1.2rem; margin-bottom:1.5rem;
  font-weight:600; line-height:1.5;
}
.contact-alert .a-ico { width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; }
.contact-alert--ok { background:color-mix(in srgb,var(--wa) 12%, var(--surface)); border:1px solid color-mix(in srgb,var(--wa) 36%, transparent); color:var(--wa-strong); }
.contact-alert--ok .a-ico { background:var(--wa); color:#fff; }
.contact-alert--err { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }
.contact-alert--err .a-ico { background:#dc2626; color:#fff; }

.contact-info {
  background:var(--brand-gradient); color:#fff; border-color:transparent;
  box-shadow:var(--shadow-blue);
}
.contact-info::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 70% at 85% 0%, rgba(255,255,255,.16), transparent 60%);
}
.contact-info > * { position:relative; z-index:1; }
.contact-info h2 { color:#fff; }
.contact-info p { color:rgba(255,255,255,.9); }

.contact-info__list { list-style:none; padding:0; margin:0 0 1.5rem; display:grid; gap:.9rem; }
.contact-info__item {
  display:flex; align-items:center; gap:.9rem; color:#fff;
  padding:.9rem 1rem; border-radius:var(--r-lg);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  transition:transform .25s var(--ease), background .25s ease;
}
a.contact-info__item:hover { color:#fff; transform:translateY(-3px); background:rgba(255,255,255,.16); }
.contact-info__chip {
  width:46px; height:46px; flex:none; border-radius:var(--r); display:grid; place-items:center;
  background:rgba(255,255,255,.16); color:#fff; font-size:1.25rem;
}
.contact-info__chip svg { width:1.25rem; height:1.25rem; }
.contact-info__item .label { font-size:.78rem; color:rgba(255,255,255,.78); font-weight:600; display:block; }
.contact-info__item .value { font-weight:700; word-break:break-word; }
.contact-info__item .value bdi { direction:ltr; unicode-bidi:embed; }

.contact-info .btn-wa { width:100%; margin-bottom:1.3rem; }

.contact-hours {
  display:flex; align-items:center; gap:.6rem; font-size:.92rem;
  color:rgba(255,255,255,.92); padding-top:1.2rem; margin-top:.2rem;
  border-top:1px solid rgba(255,255,255,.16);
}
.contact-hours svg { width:1.1em; height:1.1em; flex:none; }

.contact-socials { display:flex; gap:.6rem; margin-top:1.2rem; }
.contact-socials a {
  width:44px; height:44px; border-radius:var(--r); display:grid; place-items:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#fff;
  transition:transform .2s ease, background .2s ease;
}
.contact-socials a:hover { color:#fff; background:rgba(255,255,255,.22); transform:translateY(-3px); }
.contact-socials svg { width:20px; height:20px; }

.contact-map {
  margin-top:1.4rem; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.16); line-height:0;
}
.contact-map iframe { width:100%; height:200px; border:0; display:block; filter:grayscale(.2) contrast(1.05); }

.cta-band { background:var(--brand-gradient); color:#fff; border-radius:var(--r-xl); padding:clamp(2.2rem,5vw,3.4rem); text-align:center; position:relative; overflow:hidden; }
.cta-band::after { content:""; position:absolute; inset:0; background:radial-gradient(50% 80% at 80% 0%, rgba(255,255,255,.16), transparent 60%); pointer-events:none; }
.cta-band h2 { color:#fff; font-family:var(--font-display); }
.cta-band p { color:rgba(255,255,255,.92); margin:.8rem auto 1.6rem; max-width:60ch; }
.cta-band .btn-light { background:#fff; color:var(--brand-strong); }
.cta-band .trust { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:1.4rem; font-size:.9rem; color:rgba(255,255,255,.92); }

.page-hero {
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--brand-gradient); color:#fff;
  padding-block:calc(var(--header-h) + clamp(2rem,5vw,3.6rem)) clamp(2.4rem,5vw,3.8rem);
  text-align:center;
}

.page-hero::before {
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--hero-bg, none);
  background-size:cover; background-position:center;
}

.page-hero::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 90% at 80% 0%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg, rgba(30,64,175,.93) 0%, rgba(30,58,138,.94) 55%, rgba(23,37,84,.96) 100%);
}
.page-hero .page-hero__inner { max-width:760px; margin-inline:auto; }
.page-hero .section-tag {
  color:#fff; background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.3); backdrop-filter:blur(2px);
}
.page-hero .page-hero__title {
  font-family:var(--font-display); font-weight:800; color:#fff;
  font-size:clamp(2rem,5vw,3.1rem); line-height:1.18; margin-top:.4rem;
}
.page-hero .page-hero__sub {
  margin:1rem auto 0; max-width:60ch;
  color:rgba(255,255,255,.92); font-size:clamp(1rem,2.4vw,1.12rem);
}

.page-hero + .breadcrumb { padding-top:1.2rem; }

.breadcrumb { padding-block:1rem; }
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:0; margin:0; font-size:.88rem; }
.breadcrumb li { display:inline-flex; align-items:center; gap:.5rem; color:var(--text-muted); }
.breadcrumb li:not(:last-child)::after { content:"/"; color:var(--line); }
html[dir="rtl"] .breadcrumb li:not(:last-child)::after { content:"\\"; }
.breadcrumb a { color:var(--text-muted); }
.breadcrumb a:hover { color:var(--brand); }
.breadcrumb li[aria-current="page"] { color:var(--text); font-weight:600; }

.post-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.post-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.post-card__media { aspect-ratio:16/9; overflow:hidden; }
.post-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.post-card:hover .post-card__media img { transform:scale(1.05); }
.post-card__body { padding:1.3rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.post-card__meta { display:flex; flex-wrap:wrap; gap:.8rem; font-size:.8rem; color:var(--text-muted); }
.post-card__title { font-size:1.15rem; font-weight:800; line-height:1.4; }
.post-card__title a { color:var(--text); }
.post-card__title a:hover { color:var(--brand); }
.post-card__excerpt { color:var(--text-muted); font-size:.93rem; flex:1; }

.article__body { font-size:1.07rem; line-height:1.95; color:var(--text); max-width:75ch; }
.article__body > * + * { margin-top:1.2em; }
.article__body h2 { font-family:var(--font-display); font-size:clamp(1.4rem,3vw,1.9rem); margin-top:2em; scroll-margin-top:calc(var(--header-h) + 1rem); }
.article__body h3 { font-size:clamp(1.15rem,2.4vw,1.45rem); margin-top:1.6em; scroll-margin-top:calc(var(--header-h) + 1rem); }
.article__body h2,.article__body h3 { color:var(--text); position:relative; }
.article__body h2::before { content:""; display:inline-block; width:.5em; height:.5em; margin-inline-end:.5em; border-radius:3px; background:var(--brand-gradient); vertical-align:middle; }
.article__body p { color:var(--text); }
.article__body a { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.article__body ul,.article__body ol { padding-inline-start:1.5em; display:grid; gap:.5em; }
.article__body li { color:var(--text); }
.article__body img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--shadow); margin-block:1.6em; }
.article__body blockquote {
  margin:1.6em 0; padding:1.1em 1.4em; border-inline-start:4px solid var(--brand);
  background:var(--brand-soft); border-radius:var(--r); color:var(--text); font-style:normal; font-weight:500;
}
.article__body code { background:var(--surface-soft); border:1px solid var(--line); border-radius:6px; padding:.1em .4em; font-size:.9em; }
.article__body pre { background:var(--ink-900); color:#e8eefb; padding:1.1em; border-radius:var(--r); overflow:auto; }
.article__body pre code { background:none; border:0; color:inherit; }
.article__body table { width:100%; border-collapse:collapse; }
.article__body th,.article__body td { border:1px solid var(--line); padding:.6em .8em; text-align:start; }
.article__body th { background:var(--brand-soft); color:var(--brand); }

.article-meta { display:flex; flex-wrap:wrap; gap:1rem; color:var(--text-muted); font-size:.9rem; }
.article-meta .dot { width:4px; height:4px; border-radius:50%; background:var(--text-muted); align-self:center; }

.page-hero--article::after {
  background:
    radial-gradient(70% 90% at 80% 0%, rgba(255,255,255,.1), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.55) 0%, rgba(23,37,84,.78) 100%);
}
.article-meta--hero { justify-content:center; margin-top:1rem; color:rgba(255,255,255,.92); }
.article-meta--hero .dot { background:rgba(255,255,255,.7); }

.toc { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.3rem 1.4rem; box-shadow:var(--shadow-sm); position:sticky; top:calc(var(--header-h) + 1rem); }
.toc__title { font-weight:800; margin-bottom:.8rem; display:flex; align-items:center; gap:.5em; }
.toc ol { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.toc a { color:var(--text-muted); font-size:.92rem; display:block; padding:.3em .5em; border-radius:6px; border-inline-start:2px solid transparent; }
.toc a:hover,.toc a.is-active { color:var(--brand); background:var(--brand-soft); border-inline-start-color:var(--brand); }
.toc li.lvl-h3 a { padding-inline-start:1.4em; font-size:.86rem; }

.share { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.share__label { font-weight:700; color:var(--text-muted); font-size:.9rem; }
.share a { width:42px; height:42px; border-radius:var(--r-pill); display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--text); transition:transform .2s ease, color .2s, border-color .2s; }
.share a:hover { transform:translateY(-3px); color:var(--brand); border-color:var(--brand); }
.share a.wa:hover { color:var(--wa-strong); border-color:var(--wa); }
.author-box { display:flex; gap:1.1rem; align-items:center; padding:1.4rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); }
.author-box img { width:64px; height:64px; border-radius:50%; object-fit:cover; aspect-ratio:1; border:2px solid var(--brand); }

.wa-fab {
  position:fixed; inset-block-end:1.4rem; inset-inline-end:1.4rem; z-index:120;
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:var(--wa); color:#fff; box-shadow:0 14px 32px rgba(37,211,102,.45);
  transition:transform .25s var(--ease);
}
.wa-fab:hover { color:#fff; transform:scale(1.08); }
.wa-fab svg { width:30px; height:30px; }
@media (prefers-reduced-motion: no-preference) { .wa-fab { animation:waPulse 2.6s ease-in-out infinite; } }
@keyframes waPulse { 0%,100%{box-shadow:0 14px 32px rgba(37,211,102,.45)} 50%{box-shadow:0 14px 32px rgba(37,211,102,.45),0 0 0 12px rgba(37,211,102,.12)} }

.to-top { position:fixed; inset-block-end:1.4rem; inset-inline-start:1.4rem; z-index:115; width:46px; height:46px; border-radius:50%; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); color:var(--brand); font-size:1.2rem; display:none; }
.to-top.is-visible { display:grid; place-items:center; }

.modal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:1.2rem;
  background:rgba(11,18,32,.55); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
.modal.is-open { opacity:1; visibility:visible; }
.modal__box {
  width:100%; max-width:560px; max-height:92dvh; overflow-y:auto;
  background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
  padding:clamp(1.4rem,4vw,2.2rem); transform:translateY(18px) scale(.98);
  transition:transform .35s var(--ease);
}
.modal.is-open .modal__box { transform:none; }
.modal__head { text-align:center; margin-bottom:1.4rem; }
.modal__head h2 { font-family:var(--font-display); font-size:1.6rem; }
.modal__head p { color:var(--text-muted); margin-top:.4rem; font-size:.95rem; }
.modal__close { position:absolute; top:1rem; inset-inline-end:1rem; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--surface-soft); color:var(--text); }
.modal__close:hover { background:var(--brand-soft); color:var(--brand); }
.modal__box { position:relative; }
.modal__foot { text-align:center; font-size:.85rem; color:var(--text-muted); margin-top:1rem; }

.site-footer { background:var(--ink-950); color:#cdd9ef; padding-block:clamp(3rem,6vw,4.5rem) 0; margin-top:clamp(3rem,6vw,5rem); }
[data-theme="dark"] .site-footer { border-top:1px solid var(--line); }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.2rem; padding-bottom:2.6rem; }
.footer-brand { display:flex; align-items:center; gap:.7rem; }
.footer-brand .mark { width:48px; height:48px; border-radius:var(--r); display:grid; place-items:center; font-family:var(--font-display); font-weight:900; font-size:1.3rem; color:#fff; background:var(--brand-gradient); }
.footer-brand strong { color:#fff; font-size:1.15rem; }
.footer-about { color:#9fb1d4; font-size:.95rem; margin-top:1rem; max-width:38ch; }
.footer-col h3 { color:#fff; font-size:1.05rem; margin-bottom:1rem; }
.footer-links,.footer-contact { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.footer-links a,.footer-contact a { color:#9fb1d4; font-size:.94rem; }
.footer-links a:hover,.footer-contact a:hover { color:#fff; }
.footer-contact li { display:flex; align-items:center; gap:.6rem; color:#9fb1d4; font-size:.94rem; }
.footer-contact svg { width:18px; height:18px; color:var(--blue-400); flex:none; }
.footer-contact bdi { direction:ltr; unicode-bidi:embed; }
.footer-socials { display:flex; gap:.6rem; margin-top:1rem; }
.footer-socials a { width:40px; height:40px; border-radius:var(--r); display:grid; place-items:center; background:rgba(255,255,255,.06); color:#cdd9ef; transition:background .2s ease, color .2s ease, transform .2s ease; }
.footer-socials a:hover { background:var(--brand); color:#fff; transform:translateY(-2px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-block:1.4rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.86rem; color:#8a9bbd; }

.error-page { min-height:70vh; display:grid; place-items:center; text-align:center; padding:3rem 1rem; }
.error-page .code { font-family:var(--font-display); font-size:clamp(5rem,18vw,9rem); font-weight:900; line-height:1; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.error-page h1 { font-size:1.6rem; margin:.6rem 0; }
.error-page p { color:var(--text-muted); margin-bottom:1.6rem; }
.error-page .actions { display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

@media (prefers-reduced-motion: no-preference) {

@keyframes fadeIn      { from{opacity:0} to{opacity:1} }
  @keyframes fadeInUp    { from{opacity:0; transform:translateY(42px)} to{opacity:1; transform:none} }
  @keyframes fadeInDown  { from{opacity:0; transform:translateY(-42px)} to{opacity:1; transform:none} }
  @keyframes fadeInLeft  { from{opacity:0; transform:translateX(-52px)} to{opacity:1; transform:none} }
  @keyframes fadeInRight { from{opacity:0; transform:translateX(52px)} to{opacity:1; transform:none} }
  @keyframes zoomIn      { from{opacity:0; transform:scale(.86)} to{opacity:1; transform:none} }
  @keyframes zoomOutIn   { from{opacity:0; transform:scale(1.12)} to{opacity:1; transform:none} }
  @keyframes blurIn      { from{opacity:0; filter:blur(12px)} to{opacity:1; filter:blur(0)} }
  @keyframes flipIn      { from{opacity:0; transform:perspective(900px) rotateX(28deg)} to{opacity:1; transform:none} }
  @keyframes tiltIn      { from{opacity:0; transform:rotate(-4deg) translateY(34px)} to{opacity:1; transform:none} }
  @keyframes slideInLeftBig  { from{opacity:0; transform:translateX(-90px)} to{opacity:1; transform:none} }
  @keyframes slideInRightBig { from{opacity:0; transform:translateX(90px)} to{opacity:1; transform:none} }

.js [data-anim] { opacity:0; will-change:transform, opacity; }
  .js [data-anim].in-view {
    opacity:1;
    animation-duration:var(--dur);
    animation-timing-function:var(--ease);
    animation-fill-mode:both;
  }
  .js [data-anim="up"].in-view        { animation-name:fadeInUp; }
  .js [data-anim="down"].in-view      { animation-name:fadeInDown; }
  .js [data-anim="left"].in-view      { animation-name:fadeInLeft; }
  .js [data-anim="right"].in-view     { animation-name:fadeInRight; }
  .js [data-anim="start"].in-view     { animation-name:fadeInLeft; }
  .js [data-anim="end"].in-view       { animation-name:fadeInRight; }
  [dir="rtl"].js [data-anim="start"].in-view { animation-name:fadeInRight; }
  [dir="rtl"].js [data-anim="end"].in-view   { animation-name:fadeInLeft; }
  .js [data-anim="zoom"].in-view      { animation-name:zoomIn; }
  .js [data-anim="zoom-out"].in-view  { animation-name:zoomOutIn; }
  .js [data-anim="fade"].in-view      { animation-name:fadeIn; }
  .js [data-anim="blur"].in-view      { animation-name:blurIn; }
  .js [data-anim="flip"].in-view      { animation-name:flipIn; }
  .js [data-anim="tilt"].in-view      { animation-name:tiltIn; }
  .js [data-anim="slide-left"].in-view  { animation-name:slideInLeftBig;  animation-duration:1s; }
  .js [data-anim="slide-right"].in-view { animation-name:slideInRightBig; animation-duration:1s; }

.js [data-anim][data-delay="100"].in-view { animation-delay:.10s; }
  .js [data-anim][data-delay="200"].in-view { animation-delay:.20s; }
  .js [data-anim][data-delay="300"].in-view { animation-delay:.30s; }
  .js [data-anim][data-delay="400"].in-view { animation-delay:.40s; }
  .js [data-anim][data-delay="500"].in-view { animation-delay:.50s; }
  .js [data-anim][data-delay="600"].in-view { animation-delay:.60s; }

.js .reveal,.js .reveal-left,.js .reveal-right,.js .reveal-scale,.js .reveal-fade {
    opacity:0; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); will-change:transform, opacity;
  }
  .js .reveal       { transform:translateY(42px); }
  .js .reveal-right { transform:translateX(60px); }
  .js .reveal-left  { transform:translateX(-60px); }
  .js .reveal-scale { transform:scale(.88); }
  .js .reveal-fade  { transform:none; }
  [dir="rtl"].js .reveal-right { transform:translateX(-60px); }
  [dir="rtl"].js .reveal-left  { transform:translateX(60px); }
  .js .reveal.is-revealed,.js .reveal-left.is-revealed,.js .reveal-right.is-revealed,
  .js .reveal-scale.is-revealed,.js .reveal-fade.is-revealed { opacity:1; transform:none; }

.js .stagger > * {
    opacity:0; transform:translateY(36px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
  }
  .js .stagger.dir-zoom > *  { transform:scale(.9); }
  .js .stagger.dir-left > *  { transform:translateX(-50px); }
  .js .stagger.dir-right > * { transform:translateX(50px); }
  [dir="rtl"].js .stagger.dir-left > *  { transform:translateX(50px); }
  [dir="rtl"].js .stagger.dir-right > * { transform:translateX(-50px); }
  .js .stagger.dir-zigzag > *:nth-child(odd)  { transform:translateX(-60px) translateY(18px); }
  .js .stagger.dir-zigzag > *:nth-child(even) { transform:translateX(60px) translateY(18px); }
  [dir="rtl"].js .stagger.dir-zigzag > *:nth-child(odd)  { transform:translateX(60px) translateY(18px); }
  [dir="rtl"].js .stagger.dir-zigzag > *:nth-child(even) { transform:translateX(-60px) translateY(18px); }

  .js .stagger.is-revealed > * { opacity:1; transform:none; }
  .js .stagger.is-revealed > *:nth-child(1) { transition-delay:.08s; }
  .js .stagger.is-revealed > *:nth-child(2) { transition-delay:.18s; }
  .js .stagger.is-revealed > *:nth-child(3) { transition-delay:.28s; }
  .js .stagger.is-revealed > *:nth-child(4) { transition-delay:.38s; }
  .js .stagger.is-revealed > *:nth-child(5) { transition-delay:.48s; }
  .js .stagger.is-revealed > *:nth-child(6) { transition-delay:.58s; }
  .js .stagger.is-revealed > *:nth-child(7) { transition-delay:.68s; }
  .js .stagger.is-revealed > *:nth-child(8) { transition-delay:.78s; }
  .js .stagger.is-revealed > *:nth-child(n+9) { transition-delay:.88s; }

.js .section:not([data-anim]):not(.no-anim),
  .js .cta-band:not([data-anim]),
  .js .page-hero:not([data-anim]) {
    opacity:0; transform:translateY(28px);
    transition:opacity 1s var(--ease), transform 1s var(--ease);
  }
  .js .section:not([data-anim]):not(.no-anim).in-view,
  .js .cta-band:not([data-anim]).in-view,
  .js .page-hero:not([data-anim]).in-view { opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-anim],
  .js .reveal,.js .reveal-left,.js .reveal-right,.js .reveal-scale,.js .reveal-fade,
  .js .stagger > *,
  .js .section,.js .cta-band,.js .page-hero {
    opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; transition:none !important;
  }
}

html:not(.js) [data-anim],
html:not(.js) .reveal,
html:not(.js) .stagger > * { opacity:1; transform:none; }

@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (min-width:881px) {
  .mobile-drawer,
  .drawer-overlay { display:none !important; }
}
@media (max-width:880px) {
  .primary-nav { display:none; }
  .nav-toggle { display:flex; }
  .lang-toggle.desktop-only,.theme-toggle.desktop-keep { }
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero-cta,.hero-social { justify-content:center; }
  .hero-tagline { margin-inline:auto; }
  .hero-media { order:2; margin-top:1.5rem; }  
  .hero-badge--years { inset-inline-start:2%; }
  .hero-badge--premium { inset-inline-end:2%; }
  .article-grid { grid-template-columns:1fr; }
  .toc { position:static; }
}
@media (max-width:560px) {
  :root { --header-h:64px; }
  .form-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .brand__name { font-size:1rem; }
}

.article-grid { display:grid; grid-template-columns:1fr 280px; gap:2.4rem; align-items:start; }
.article-grid .article__body { order:1; }  
.article-grid .toc { order:2; }            
html[dir="ltr"] .article-grid { grid-template-columns:280px 1fr; }
html[dir="ltr"] .article-grid .article__body { order:2; }
html[dir="ltr"] .article-grid .toc { order:1; }
@media (max-width:880px) { .article-grid { grid-template-columns:1fr; } }

.text-center { text-align:center; }
.mt-2 { margin-top:2rem; } .mt-3 { margin-top:3rem; }
.flex-center { display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:wrap; }
.muted { color:var(--text-muted); }
.hidden { display:none !important; }

.tool-page{
  --primary:var(--brand); --primary-color:var(--brand);
  --primary-soft:var(--brand-soft); --primary-color-soft:var(--brand-soft);
  --card-bg:var(--surface); --bg-page:transparent; --dark-bg:transparent;
  --input-bg:var(--surface-soft); --text-color:var(--text); --text-head:var(--text);
  --text-muted:var(--text-muted); --border:var(--line); --border-color:var(--line);
  --radius-sq:var(--r-xl); --success:#16a34a;
}
.tool-page .tool-wrapper,
.tool-page .tool-main-wrapper{ padding:clamp(1.5rem,4vw,2.5rem) 0 1rem; }
.tool-page .tool-header,
.tool-page .tool-header-box{ display:none; } 

.tool-page .tool-workspace-card,
.tool-page .cpm-card,
.tool-page .color-card,
.tool-page .input-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(1.4rem,3vw,2.2rem); max-width:840px; margin:0 auto 2rem; box-shadow:var(--shadow-sm);
  text-align:start;
}
.tool-page .preview-card{
  background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(1.4rem,3vw,2rem);
}

.tool-page .rouby-input,
.tool-page .rouby-textarea,
.tool-page .form-control{
  width:100%; padding:.95rem 1rem; border:2px solid var(--line); border-radius:var(--r-md);
  background:var(--surface-soft); color:var(--text); font:inherit; font-size:1rem; outline:none;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.tool-page .rouby-input:focus,
.tool-page .rouby-textarea:focus,
.tool-page .form-control:focus{ border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); }
.tool-page .rouby-textarea,
.tool-page textarea.form-control{ resize:vertical; min-height:140px; line-height:1.6; }
.tool-page .input-group{ margin-bottom:1.2rem; }
.tool-page .input-label,
.tool-page .control-label,
.tool-page .form-group label,
.tool-page label{ font-weight:700; color:var(--text); display:block; margin-bottom:.5rem; }
.tool-page .input-hint,
.tool-page .char-count,
.tool-page .counter{ font-size:.82rem; color:var(--text-muted); font-weight:500; }

.tool-page .action-btn,
.tool-page .btn-calc{
  width:100%; background:var(--brand-gradient); color:#fff; border:none; padding:1rem 1.2rem;
  border-radius:var(--r-md); font:inherit; font-weight:800; font-size:1.05rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.tool-page .action-btn:hover,
.tool-page .btn-calc:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }

.tool-page .copy-btn,
.tool-page .download-btn,
.tool-page .btn-copy,
.tool-page .btn-clear,
.tool-page .copy-btn-overlay{
  background:var(--surface); color:var(--brand); border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));
  padding:.8rem 1.2rem; border-radius:var(--r-md); font:inherit; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.tool-page .copy-btn{ width:100%; }
.tool-page .copy-btn:hover,
.tool-page .download-btn:hover,
.tool-page .btn-copy:hover,
.tool-page .btn-clear:hover,
.tool-page .copy-btn-overlay:hover{ background:var(--brand-soft); }
.tool-page .actions-bar{ display:flex; gap:.8rem; margin-top:1.2rem; }
.tool-page .actions-bar .action-btn{ flex:1; }

.tool-page .result-box,
.tool-page .result-area,
.tool-page .slug-box,
.tool-page .code-box,
.tool-page .result-wrapper{ margin-top:1.4rem; }
.tool-page .result-box{
  background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 22%,var(--line));
  border-radius:var(--r-lg); padding:1.4rem; text-align:center; color:var(--text);
}
.tool-page .result-value,
.tool-page .result-val{ color:var(--brand); font-weight:900; font-size:clamp(1.8rem,5vw,2.4rem); display:block; }
.tool-page .result-label{ color:var(--text-muted); }
.tool-page .slug-box,
.tool-page .code-box{
  background:var(--surface-soft); color:var(--text); padding:1.1rem 1.2rem; border-radius:var(--r-md);
  font-family:'Consolas','Monaco',monospace; word-break:break-all; direction:ltr; text-align:left;
  border:1px dashed color-mix(in srgb,var(--brand) 30%,var(--line)); line-height:1.6; white-space:pre-wrap;
}
.tool-page .result-wrapper{ position:relative; }
.tool-page .copy-btn-overlay{ position:absolute; top:.6rem; inset-inline-end:.6rem; padding:.35rem .8rem; font-size:.8rem; }

.tool-page .calc-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-bottom:1.5rem; }
.tool-page .tab-btn{
  background:var(--surface-soft); color:var(--text); border:1px solid var(--line); padding:.6rem 1.1rem;
  font:inherit; font-weight:700; cursor:pointer; border-radius:999px; transition:all .2s var(--ease);
}
.tool-page .tab-btn.active{ background:var(--brand-gradient); color:#fff; border-color:transparent; }
.tool-page .tab-btn:hover:not(.active){ border-color:var(--brand); color:var(--brand); }

.tool-page .inputs-grid,
.tool-page .controls-grid,
.tool-page .input-grid,
.tool-page .stats-grid,
.tool-page .codes-grid,
.tool-page .serp-grid{ display:grid; gap:1.2rem; margin-bottom:1.4rem; }
.tool-page .inputs-grid,
.tool-page .controls-grid{ grid-template-columns:1fr 1fr; }
.tool-page .stats-grid{ grid-template-columns:repeat(3,1fr); }
.tool-page .codes-grid{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.tool-page .serp-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
@media (max-width:768px){
  .tool-page .inputs-grid,.tool-page .controls-grid,.tool-page .stats-grid,.tool-page .serp-grid{ grid-template-columns:1fr; }
}

.tool-page .stat-box{ background:var(--surface-soft); padding:1.2rem; border-radius:var(--r-md); border:1px solid var(--line); text-align:center; }
.tool-page .stat-value{ display:block; font-size:1.9rem; font-weight:800; color:var(--brand); }
.tool-page .stat-label{ color:var(--text-muted); font-size:.9rem; font-weight:700; }

.tool-page .calc-row{ display:flex; align-items:center; justify-content:center; gap:.9rem; flex-wrap:wrap; font-size:1.15rem; color:var(--text); background:var(--surface-soft); padding:1.4rem; border-radius:var(--r-md); border:1px solid var(--line); margin-bottom:1.4rem; }
.tool-page .calc-row .rouby-input{ width:120px; text-align:center; }

.tool-page .rouby-range{ width:100%; accent-color:var(--brand); cursor:pointer; }
.tool-page .rouby-checkbox{ width:20px; height:20px; accent-color:var(--brand); cursor:pointer; }
.tool-page .length-val{ background:var(--brand); color:#fff; padding:.1rem .55rem; border-radius:6px; font-size:.85rem; }
.tool-page .control-item{ display:flex; align-items:center; justify-content:space-between; }
.tool-page .control-label{ display:flex; align-items:center; gap:.5rem; margin-bottom:0; }

.tool-page .password-display-box{ position:relative; margin-bottom:1.8rem; }
.tool-page .password-output{ width:100%; padding:1.2rem; font-family:'Consolas','Monaco',monospace; font-size:1.4rem; color:var(--brand); background:var(--surface-soft); border:2px dashed color-mix(in srgb,var(--brand) 30%,var(--line)); border-radius:var(--r-lg); text-align:center; word-break:break-all; cursor:pointer; }
.tool-page .copy-hint{ position:absolute; bottom:-1.4rem; inset-inline-start:50%; transform:translateX(-50%); font-size:.85rem; color:var(--text-muted); opacity:0; transition:opacity .3s var(--ease); }
.tool-page .password-display-box:hover .copy-hint{ opacity:1; }

.tool-page .color-preview-box{ width:100%; height:180px; border-radius:var(--r-lg); margin-bottom:1.6rem; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.tool-page .color-preview-box span{ background:rgba(0,0,0,.45); color:#fff; font-family:monospace; font-size:1.4rem; padding:.3rem .8rem; border-radius:8px; }
.tool-page .controls-area{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.tool-page input[type="color"]{ -webkit-appearance:none; appearance:none; border:none; width:90px; height:90px; cursor:pointer; background:none; padding:0; border-radius:50%; overflow:hidden; box-shadow:0 0 0 4px var(--line); }
.tool-page input[type="color"]:hover{ box-shadow:0 0 0 4px var(--brand); }
.tool-page input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
.tool-page input[type="color"]::-webkit-color-swatch{ border:none; border-radius:50%; }
.tool-page .code-item{ background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--r-md); padding:.9rem 1.1rem; display:flex; justify-content:space-between; align-items:center; cursor:pointer; transition:border-color .2s var(--ease),transform .2s var(--ease); }
.tool-page .code-item:hover{ border-color:var(--brand); transform:translateY(-2px); }
.tool-page .code-label{ font-size:.78rem; color:var(--text-muted); display:block; }
.tool-page .code-val{ font-family:monospace; font-size:1.05rem; color:var(--text); }
.tool-page .btn-copy-icon{ background:none; border:none; color:var(--brand); cursor:pointer; font-size:1.05rem; }

.tool-page .preview-header{ font-size:1.05rem; color:var(--text); display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; font-weight:700; }
.tool-page .g-container{ font-family:arial,sans-serif; max-width:600px; text-align:left; direction:ltr; }
.tool-page .g-container.rtl{ text-align:right; direction:rtl; }
.tool-page .g-cite{ color:var(--text-muted); font-size:.82rem; display:flex; align-items:center; gap:.4rem; margin-bottom:.2rem; }
.tool-page .g-title{ color:#1a0dab; font-size:20px; line-height:1.3; cursor:pointer; display:block; margin-bottom:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-theme="dark"] .tool-page .g-title{ color:#8ab4f8; }
.tool-page .g-desc{ color:var(--text-muted); font-size:.9rem; line-height:1.5; }
.tool-page .progress-bar{ height:4px; background:var(--line); border-radius:4px; margin-top:.5rem; overflow:hidden; }
.tool-page .progress-fill{ height:100%; width:0; background:var(--brand); transition:width .3s var(--ease); }
.tool-page .progress-fill.good{ background:#16a34a; }
.tool-page .progress-fill.warn{ background:#d97706; }
.tool-page .progress-fill.bad{ background:#dc2626; }

.tool-page .tool-info-section,
.tool-page .info-section{ max-width:840px; margin:0 auto; color:var(--text-muted); line-height:1.85; }
.tool-page .tool-info-section h2,
.tool-page .tool-info-section h3,
.tool-page .info-section h3{ color:var(--text); margin-top:1.8rem; display:flex; align-items:center; gap:.6rem; }
.tool-page .faq-box{ background:var(--surface-soft); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem 1.6rem; margin-top:1.6rem; }
.tool-page .faq-item{ margin-bottom:1.1rem; }
.tool-page .faq-item:last-child{ margin-bottom:0; }
.tool-page .faq-item h3{ font-size:1.05rem; color:var(--text); margin:0 0 .3rem; display:block; }
.tool-page .math-formula{ background:var(--brand-soft); color:var(--brand); display:inline-block; padding:.7rem 1.2rem; border-radius:var(--r-md); font-weight:700; }
.tool-page code{ background:var(--surface-soft); padding:.1rem .4rem; border-radius:5px; font-family:'Consolas',monospace; color:var(--brand); }