/*
Theme Name: Zoetech Medical
Theme URI: https://example.com
Author: ZOETECH
Description: Modern, animated WordPress theme for ZOETECH MEDICAL SUPPLIES L.L.C (hearing aids & medical equipment trading).
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: zoetech
*/

/* Base reset */
:root{
  --primary:#4EC6D8; /* extracted from logo */
  --ink:#0b1220;
  --muted:#5b6475;
  --bg:#f7f9fc;
  --card:#ffffff;
  --border:rgba(15,23,42,.10);
  --shadow:0 18px 45px rgba(2,6,23,.10);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:#0f172a
}
a{color:inherit}
img{max-width:100%;height:auto}

/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:84px 0}
.grid{display:grid;gap:22px}

/* Fix content under fixed header:
   - Homepage hero لازم يضل ورا الهيدر (بدون padding)
   - باقي الصفحات لازم تنزل تحت الهيدر */
#site{ position:relative; }
body:not(.home) #site{ padding-top:72px; }

/* =========================
   HEADER (Z HEADER)
   المطلوب:
   - فوق الهيرو: شفاف + كل شيء أبيض
   - بعد السكرول: أبيض + النص غامق/أصلي
   ========================= */

.z-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 9999;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow:none;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.z-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:72px;
}

/* Logo */
.z-brand{ display:flex; align-items:center; text-decoration:none; }
.z-brand img{ height:34px; width:auto; display:block; }

/* Nav */
.z-nav{ flex:1; display:flex; justify-content:center; }
.z-nav-list{
  display:flex;
  align-items:center;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}

.z-nav-list a{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  transition: background .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}

/* CTA (Request a Quote) — يعتمد على .btn.primary الموجود عندك */
.z-header-actions{ display:flex; align-items:center; gap:10px; }

/* Burger */
.z-burger{
  width:44px;height:44px;border-radius:12px;
  display:none;
  align-items:center;justify-content:center;
  gap:4px;flex-direction:column;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease;
}
.z-burger span{
  width:18px;height:2px;border-radius:99px;
  display:block;
}

/* Mobile menu container (إذا عندك) */
.z-mobile{
  border-top: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
}
.z-mobile-inner{ padding:14px 0 18px; }

/* ===== الحالة 1: فوق الهيرو (شفاف + أبيض) ===== */
.z-header.z-header--transparent:not(.is-solid){
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow:none !important;
}

/* روابط فوق الهيرو */
.z-header.z-header--transparent:not(.is-solid) .z-nav-list a{
  color: rgba(255,255,255,.92) !important;
}
.z-header.z-header--transparent:not(.is-solid) .z-nav-list a:hover{
  color:#fff !important;
  background: rgba(255,255,255,.14);
  transform: translateY(-1px);
}

/* زر فوق الهيرو */
.z-header.z-header--transparent:not(.is-solid) .btn.primary{
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.z-header.z-header--transparent:not(.is-solid) .btn.primary:hover{
  background: rgba(255,255,255,.26) !important;
  border-color: rgba(255,255,255,.34) !important;
}

/* Burger فوق الهيرو */
.z-header.z-header--transparent:not(.is-solid) .z-burger{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
}
.z-header.z-header--transparent:not(.is-solid) .z-burger span{
  background:#fff;
}

/* ===== الحالة 2: بعد السكرول (أبيض + نص غامق) ===== */
.z-header.is-solid{
  background: rgba(255,255,255,.92) !important;
  border-bottom-color: rgba(15,23,42,.08) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(15,23,42,.08) !important;
}

/* روابط بعد السكرول */
.z-header.is-solid .z-nav-list a{
  color: rgba(15,23,42,.78) !important;
}
.z-header.is-solid .z-nav-list a:hover{
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.92) !important;
  transform: translateY(-1px);
}

/* زر بعد السكرول يرجع طبيعي */
.z-header.is-solid .btn.primary{
  background: var(--primary) !important;
  color:#06121a !important;
  border-color: transparent !important;
  box-shadow: 0 18px 40px rgba(78,198,216,.25) !important;
}

/* Burger بعد السكرول */
.z-header.is-solid .z-burger{
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(15,23,42,.10);
}
.z-header.is-solid .z-burger span{
  background: rgba(15,23,42,.7);
}

/* Responsive header */
@media (max-width: 980px){
  .z-nav{ display:none; }
  .z-burger{ display:flex; }
}

/* =========================
   HERO
   ========================= */
.hero{
  min-height:100vh; /* خليها 100vh لأن الهيدر فوقه */
  display:grid;
  align-items:center;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(78,198,216,.25), transparent 55%),
    radial-gradient(40% 40% at 12% 18%, rgba(11,18,32,.08), transparent 60%);
}
.hero-inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:30px;
  align-items:center;
  padding:56px 0
}
.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.7);
  width:max-content
}
.dot{
  width:10px;height:10px;border-radius:999px;
  background:var(--primary);
  box-shadow:0 0 0 6px rgba(78,198,216,.18)
}
.hero h1{
  margin:14px 0 12px;
  font-size:clamp(34px,5vw,64px);
  line-height:1.05;
  letter-spacing:-.02em;
  color:#ffffff; /* أبيض فوق الفيديو */
}
.hero p{
  margin:0 0 22px;
  color: rgba(169,169,169,.85);
  font-size:18px;
  max-width:60ch
}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:18px;
  text-decoration:none;
  font-weight:700
}
.btn.primary{background:var(--primary);color:#06202a;box-shadow:0 18px 40px rgba(78,198,216,.25)}
.btn.ghost{border:1px solid var(--border);background:rgba(255,255,255,.7)}

.hero-card{
  background:rgba(255,255,255,.78);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px
}
.hero-card .mini{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px
}
.pill{
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.8)
}
.pill strong{display:block;color:var(--ink)}
.pill span{color:var(--muted);font-size:14px}

@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr;}
}

/* Cards */
.h2{margin:0 0 10px;font-size:34px;letter-spacing:-.02em;color:var(--ink)}
.lead{margin:0 0 28px;color:var(--muted);max-width:70ch}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:0 14px 40px rgba(2,6,23,.08);
  transition:transform .35s, box-shadow .35s
}
.card:hover{transform:translateY(-8px);box-shadow:0 22px 55px rgba(2,6,23,.12)}
.card h3{margin:0 0 10px;color:var(--ink)}
.card p{margin:0;color:var(--muted)}

@media (max-width: 980px){
  .cards{grid-template-columns:1fr}
}

/* Split section */
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.panel{background:rgba(255,255,255,.78);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.list{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.list li{display:flex;gap:10px;align-items:flex-start;color:var(--muted)}
.check{width:18px;height:18px;border-radius:6px;background:rgba(78,198,216,.22);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:2px}
.check:before{content:"✓";font-weight:900;color:#0b1220;font-size:12px}
@media (max-width: 960px){
  .split{grid-template-columns:1fr}
}

/* Contact */
.contact-card{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.contact-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:0 14px 40px rgba(2,6,23,.08)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input,textarea{width:100%;padding:14px 14px;border-radius:16px;border:1px solid rgba(15,23,42,.15);background:rgba(255,255,255,.85);font:inherit}
textarea{min-height:120px;resize:vertical}
.small{font-size:14px;color:var(--muted)}

@media (max-width: 980px){
  .contact-card{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}

/* Footer */
.site-footer{background:linear-gradient(180deg,#07101f,#050a14);color:#e5e7eb}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px;padding:54px 0}
.site-footer a{color:#e5e7eb;opacity:.9;text-decoration:none}
.site-footer a:hover{opacity:1}
.footer-brand img{height:34px;filter:brightness(1.05)}
.copyright{border-top:1px solid rgba(229,231,235,.15);padding:16px 0;color:rgba(229,231,235,.75);font-size:14px}
@media (max-width: 980px){
  .footer-grid{grid-template-columns:1fr}
}

/* Page transition overlay */
.page-transition{
  position:fixed;inset:0;pointer-events:none;z-index:200;
  background:radial-gradient(60% 50% at 50% 10%, rgba(78,198,216,.35), rgba(5,10,20,.98) 70%);
  opacity:0;transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}
.page-transition.active{opacity:1;transform:translateY(0)}

/* Fade-in for main content */
#site{opacity:0;transform:translateY(10px);transition:opacity .45s ease, transform .45s ease}
body.is-ready #site{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;scroll-behavior:auto}
  #site{opacity:1;transform:none}
  .page-transition{display:none}
}

/* ===== Products Slider (6 cards) ===== */
.z-slider{ position: relative; margin-top: 22px; }

.z-track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 8px;
  padding: 8px;
  border-radius: 18px;
  scrollbar-width: none;
}
.z-track::-webkit-scrollbar{ display:none; }

.z-card{
  scroll-snap-align: start;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.12);
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease;
  background: #0b1220;
  display:block;
}

.z-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
}

.z-card-media{
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: #0b1220;
}

.z-card-media:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 400px at 40% 20%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.55));
  opacity: .9;
  pointer-events:none;
}

.z-card-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.20) 45%,
    rgba(0,0,0,0.45) 100%
  );
  transition: background .25s ease;
}

.z-card:hover .z-card-overlay{
  background: linear-gradient(180deg,
    rgba(0,0,0,0.00) 0%,
    rgba(0,0,0,0.45) 45%,
    rgba(0,0,0,0.72) 100%
  );
}

.z-card-text{
  width:100%;
  padding: 18px 18px 16px;
  transform: translateY(26px);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}

.z-card:hover .z-card-text{
  transform: translateY(0);
  opacity: 1;
}

.z-card-text h3{
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
  letter-spacing: -0.02em;
}

.z-card-text p{
  margin:0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,.86);
}

/* Arrows */
.z-arrow{
  position:absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(11,18,32,.35);
  backdrop-filter: blur(10px);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.z-arrow:hover{ background: rgba(11,18,32,.5); }
.z-arrow.prev{ left: -6px; }
.z-arrow.next{ right: -6px; }

/* Dots */
.z-dots{
  display:flex;
  gap: 10px;
  justify-content:center;
  margin-top: 14px;
}
.z-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.25);
  background: rgba(15,23,42,.20);
  cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.z-dot.active{
  background: rgba(15,23,42,.85);
  transform: scale(1.35);
}

/* Responsive */
@media (max-width: 980px){
  .z-track{ grid-auto-columns: calc((100% - 24px) / 2); }
  .z-arrow.prev{ left: 6px; }
  .z-arrow.next{ right: 6px; }
}
@media (max-width: 640px){
  .z-track{ grid-auto-columns: 100%; }
}

/* Video support */
.z-card-media.is-video{ background-image: none !important; }
.z-card-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.02);
}

/* ✅ الفيديو: overlay خفيف افتراضي + أغمق على hover (عشان النص يبين) */
.z-card-media.is-video:before{
  transition: opacity .25s ease;
  opacity: .25; /* خفيف */
}
.z-card:hover .z-card-media.is-video:before{
  opacity: .70; /* أغمق عند hover */
}

/* ===== Overview Section ===== */
.z-overview{ padding-top: 10px; }

.z-overview-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;
}

.z-overview-copy .h2{ margin-top: 10px; }

.z-overview-points{
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.z-point{
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.06);
}
.z-point strong{
  display:block;
  color: var(--ink);
  font-size: 15px;
  margin-bottom: 4px;
}
.z-point span{
  display:block;
  color: rgba(15,23,42,0.72);
  font-size: 14px;
  line-height: 1.5;
}

/* Visual side */
.z-overview-visual{
  position: relative;
  min-height: 360px;
}

.z-visual-card{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 28px 70px rgba(15,23,42,.12);
  padding: 16px;
  transform: translateY(0);
  animation: zFloatCard 6.5s ease-in-out infinite;
}

@keyframes zFloatCard{
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.z-visual-badge{
  position:absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(15,23,42,.92);
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(8px);
}

.z-visual-media{
  height: 220px;
  border-radius: 18px;
  background:
    radial-gradient(1200px 500px at 30% 20%, rgba(34,211,238,.25), transparent 55%),
    radial-gradient(1200px 500px at 75% 40%, rgba(99,102,241,.20), transparent 55%),
    linear-gradient(180deg, rgba(15,23,42,.08), rgba(15,23,42,.02));
  position: relative;
  overflow: hidden;
}

/* subtle animated shine */
.z-visual-media:after{
  content:"";
  position:absolute;
  inset:-40% -40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  transform: translateX(-40%) rotate(10deg);
  animation: zShine 5.2s linear infinite;
  opacity:.7;
}
@keyframes zShine{
  0% { transform: translateX(-55%) rotate(10deg); }
  100% { transform: translateX(55%) rotate(10deg); }
}

.z-visual-stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.z-stat{
  border-radius: 16px;
  padding: 12px 10px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(15,23,42,.08);
  text-align: center;
}
.z-stat strong{
  display:block;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.z-stat span{
  display:block;
  font-size: 12px;
  color: rgba(15,23,42,.68);
  margin-top: 2px;
}

/* Floating decor */
.z-float{ position:absolute; border-radius: 999px; opacity: .9; pointer-events:none; }
.z-float-1{
  width: 110px; height: 110px;
  right: -18px; top: 14px;
  background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.35), rgba(34,211,238,.10));
  animation: zFloat1 7s ease-in-out infinite;
}
.z-float-2{
  width: 140px; height: 140px;
  left: -18px; bottom: 18px;
  background: radial-gradient(circle at 30% 30%, rgba(99,102,241,.30), rgba(99,102,241,.10));
  animation: zFloat2 8.2s ease-in-out infinite;
}
@keyframes zFloat1{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
@keyframes zFloat2{ 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }

@media (max-width: 980px){
  .z-overview-grid{ grid-template-columns: 1fr; }
  .z-overview-visual{ min-height: 320px; }
}

/* ===== Full-width Cover Section ===== */
.z-cover{
  position: relative;
  width: 100%;
  padding: 56px 0;
  margin: 10px 0 6px;
  overflow: hidden;
  border-top: 1px solid rgba(15,23,42,.06);
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.z-cover-photo{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.22;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.02);
  z-index: 0;
}

.z-cover-bg{
  position:absolute;
  inset:-2px;
  z-index:1;
  background:
    radial-gradient(900px 420px at 18% 30%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(900px 420px at 80% 60%, rgba(99,102,241,.18), transparent 62%),
    linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.00));
  filter: saturate(1.05) contrast(1.02);
}
.z-cover-bg:after{
  content:"";
  position:absolute;
  inset:-40% -40%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-55%) rotate(8deg);
  animation: zCoverSheen 6.8s linear infinite;
  opacity:.7;
}
@keyframes zCoverSheen{
  0%   { transform: translateX(-55%) rotate(8deg); }
  100% { transform: translateX(55%) rotate(8deg); }
}

.z-cover:before{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(15,23,42,.05) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.18;
  pointer-events:none;
  z-index:1;
}

.z-cover .container{ position: relative; z-index: 2; }

.z-cover-inner{ max-width: 980px; padding: 8px 0; }

.z-cover-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
  font-weight: 700;
  font-size: 12px;
  color: rgba(15,23,42,.75);
}

.z-cover-title{
  margin: 16px 0 10px;
  font-size: clamp(28px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.z-cover-sub{
  margin: 0;
  max-width: 760px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(15,23,42,.72);
}

.z-cover-actions{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 760px){
  .z-cover{ padding: 44px 0; }
  .z-cover-title{ line-height: 1.08; }
}
/* ===== Logo swap: white on transparent, normal on solid ===== */
.z-brand{ position:relative; display:inline-flex; align-items:center; }
.z-logo{ height:34px; width:auto; display:block; }

.z-logo--white{ display:none; }

/* فوق الهيرو (شفاف) = أبيض */
.z-header.z-header--transparent:not(.is-solid) .z-logo--dark{ display:none; }
.z-header.z-header--transparent:not(.is-solid) .z-logo--white{ display:block; }

/* بعد السكرول (is-solid) = طبيعي */
.z-header.is-solid .z-logo--dark{ display:block; }
.z-header.is-solid .z-logo--white{ display:none; }

/* ===== Internal Pages ===== */
.z-page-hero{
  padding: 120px 0 34px;
  background:
    radial-gradient(900px 420px at 18% 30%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(900px 420px at 80% 60%, rgba(99,102,241,.14), transparent 62%);
}
.z-page-hero .kicker{ margin-bottom: 14px; }
.z-page-title{
  margin: 0 0 10px;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.z-page-sub{
  margin: 0;
  max-width: 70ch;
  color: rgba(15,23,42,.72);
  font-size: 16px;
  line-height: 1.7;
}

.z-page-wrap{ padding: 46px 0 90px; }
.z-page-grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 24px;
  align-items: start;
}
.z-box{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(2,6,23,.08);
  padding: 22px;
}
.z-box h3{ margin:0 0 8px; color:var(--ink); }
.z-box p{ margin:0; color: rgba(15,23,42,.72); line-height:1.7; }

.z-list{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.z-list li{
  display:flex; gap:10px; align-items:flex-start;
  color: rgba(15,23,42,.72);
}
.z-bullet{
  width:18px; height:18px; border-radius:6px;
  background: rgba(78,198,216,.22);
  display:inline-flex; align-items:center; justify-content:center;
  flex: 0 0 auto; margin-top: 2px;
}
.z-bullet:before{ content:"✓"; font-weight:900; color:#0b1220; font-size:12px; }

@media (max-width: 980px){
  .z-page-grid{ grid-template-columns: 1fr; }
}