:root{
  /* brand palette */
  --navy:#061F3D;
  --blue:#01509B;
  --blue-light:#1a6fbd;
  --bg:#EFF4FB;

  --bg-soft:#ffffff;
  --surface:rgba(1,80,155,0.045);
  --surface-strong:rgba(1,80,155,0.09);
  --border:rgba(1,80,155,0.14);
  --border-soft:rgba(1,80,155,0.09);

  --blue-2:var(--blue-light);
  --cyan:var(--blue);
  --cyan-soft:rgba(1,80,155,0.12);

  --text:var(--navy);
  --text-dim:#3a5068;
  --text-faint:#6b8299;

  /* عناصر شاشة الجوال داخل الـ mockup تبقى دايمًا داكنة بغض النظر عن ثيم الصفحة */
  --screen-text:#EFF4FB;
  --screen-text-dim:#a8bdd4;
  --screen-text-faint:rgba(168,189,212,0.45);

  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:10px;

  --font-display:"Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-body:"IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  --gradient-brand:linear-gradient(90deg, var(--blue-light), var(--blue));
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100%;
}

body{overflow-x:hidden;}

a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
img{max-width:100%;display:block;}
svg{display:block;}
.wafii-icon{display:inline-block;line-height:1;vertical-align:middle;}

.visually-hidden{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* ---------------- ambient background ---------------- */
.bg-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 78% 8%, rgba(1,80,155,0.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 85%, rgba(6,31,61,0.08), transparent 62%);
}
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 75% 55% at 65% 15%, black 20%, transparent 72%);
  opacity:0.6;
}

/* ---------------- header ---------------- */
.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:16px clamp(20px, 5vw, 56px);
  background:rgba(239,244,251,0.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}

.brand{display:flex;}
.brand-chip{
  display:flex;align-items:center;
  background:#ffffff;
  border:1px solid var(--border);
  box-shadow:0 4px 14px -8px rgba(6,31,61,0.18);
  border-radius:999px;
  padding:8px 18px;
}
.brand-logo{height:22px;width:auto;}

.main-nav{
  display:flex;gap:28px;
}
.main-nav a{
  font-size:0.92rem;
  color:var(--text-dim);
  transition:color .18s ease;
  position:relative;
}
.main-nav a:hover,.main-nav a:focus-visible{color:var(--text);}
.main-nav a.active{color:var(--text);}
.main-nav a.active::after{transform:scaleX(1);}
.main-nav a::after{
  content:"";
  position:absolute;right:0;left:0;bottom:-6px;
  height:2px;background:var(--gradient-brand);
  transform:scaleX(0);transform-origin:center;
  transition:transform .2s ease;
}
.main-nav a:hover::after{transform:scaleX(1);}

.header-actions{
  display:flex;align-items:center;gap:10px;
}

.btn-header{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:9px 18px;
  font-size:0.88rem;
  color:var(--text);
  background:var(--surface);
  transition:border-color .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn-header:hover,.btn-header:focus-visible{
  border-color:var(--cyan);
  background:var(--surface-strong);
}
.btn-header-ghost{
  background:transparent;
  border-color:transparent;
  color:var(--text-dim);
  direction:ltr;
}
.btn-header-ghost:hover,.btn-header-ghost:focus-visible{
  color:var(--cyan);
  border-color:transparent;
  background:transparent;
}

/* ---------------- shared section layout ---------------- */
main{position:relative;z-index:2;}

.section{
  max-width:1240px;
  margin:0 auto;
  padding:96px clamp(20px, 5vw, 56px);
}

.section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 52px;
}
.section-eyebrow{
  display:inline-block;
  font-size:0.85rem;
  color:var(--cyan);
  background:var(--cyan-soft);
  border:1px solid rgba(1,80,155,0.28);
  padding:5px 16px;
  border-radius:999px;
  margin:0 0 18px;
}
.section-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.8rem, 3vw, 2.4rem);
  margin:0 0 12px;
}
.section-sub{
  color:var(--text-dim);
  font-size:1rem;
  margin:0;
}

/* ---------------- hero ---------------- */
.hero{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(340px, 560px) 1fr;
  align-items:center;
  gap:32px;
  max-width:1320px;
  margin:0 auto;
  padding:64px clamp(20px, 5vw, 56px) 40px;
}

.hero-copy{max-width:560px;}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:0.9rem;color:var(--cyan);
  background:var(--cyan-soft);
  border:1px solid rgba(1,80,155,0.28);
  padding:7px 18px;border-radius:999px;
  margin:0 0 26px;
}
.eyebrow-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px 2px var(--cyan);
}

.headline{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.2rem, 4.4vw, 3.4rem);
  line-height:1.22;
  margin:0 0 24px;
}
.headline-accent{
  display:block;
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-top:4px;
}

.lede{
  font-size:1.04rem;
  line-height:1.9;
  color:var(--text-dim);
  margin:0 0 16px;
  max-width:490px;
}

.hero-actions{margin-top:28px;}

.btn-primary{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gradient-brand);
  color:#ffffff;
  border:none;border-radius:12px;
  height:54px;padding:0 28px;
  font-weight:700;font-size:1rem;
  cursor:pointer;white-space:nowrap;
  box-shadow:0 14px 30px -12px rgba(1,80,155,0.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover,.btn-primary:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 18px 36px -12px rgba(1,80,155,0.55);
}
.btn-primary:focus-visible{outline:2px solid var(--text);outline-offset:3px;}
.btn-primary .wafii-icon{position:relative;top:1px;}

.tagline{
  margin:18px 0 0;
  font-weight:600;
  color:var(--text);
  font-size:0.98rem;
}

.hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.hero-banner-image{
  display:block;
  width:100%;
  max-width:520px;
  height:auto;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);
  box-shadow:0 28px 56px -32px rgba(6,31,61,0.3);
  object-fit:cover;
}

/* ---------------- hero visual: showcase panel + device cluster ---------------- */
.hero-showcase{
  position:relative;
  width:100%;
  max-width:540px;
  min-height:460px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(36px, 6vw, 56px) clamp(24px, 4vw, 40px);
  border-radius:28px;
  background:linear-gradient(165deg, #ffffff 0%, var(--bg) 55%, rgba(239,244,251,0.95) 100%);
  border:1px solid var(--border-soft);
  box-shadow:
    0 32px 64px -40px rgba(6,31,61,0.28),
    inset 0 1px 0 rgba(255,255,255,0.85);
  overflow:hidden;
  perspective:1400px;
}

.hero-showcase-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 85% 70% at 50% 45%, black 15%, transparent 72%);
  opacity:0.85;
}
.hero-showcase-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 60% 50% at 70% 20%, rgba(1,80,155,0.08), transparent 65%);
}

.device-cluster{
  position:relative;
  z-index:1;
  width:100%;max-width:340px;
  transform-style:preserve-3d;
  will-change:transform;
}

.phone-mock{
  position:relative;
  margin:0 auto;
  width:250px;
  border-radius:34px;
  padding:14px;
  background:linear-gradient(160deg, #ffffff, var(--bg));
  border:1px solid var(--border);
  box-shadow:0 40px 70px -30px rgba(6,31,61,0.22), 0 4px 14px -6px rgba(1,80,155,0.12);
  transform:translateZ(30px);
}
.phone-notch{
  width:70px;height:6px;
  background:rgba(1,80,155,0.16);
  border-radius:999px;
  margin:0 auto 14px;
}
.phone-screen{
  background:var(--navy);
  border-radius:24px;
  padding:22px 18px 20px;
  display:flex;flex-direction:column;
  gap:6px;
}
.mock-brand{
  display:flex;align-items:center;gap:8px;
  font-size:0.8rem;color:var(--screen-text);
  margin-bottom:10px;
}
.mock-brand-mark{
  width:22px;height:22px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gradient-brand);
  color:#ffffff;font-weight:800;font-size:0.75rem;
}
.mock-label{
  font-size:0.78rem;color:var(--screen-text-faint);
  margin:4px 0 2px;
}
.mock-amount{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  margin-bottom:14px;
}
.mock-num{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem, 5vw, 2.45rem);
  line-height:1;
  color:var(--screen-text);
}
.mock-unit{
  font-size:0.88rem;
  color:var(--screen-text-dim);
}
.mock-progress{
  height:7px;border-radius:999px;
  background:rgba(255,255,255,0.12);
  overflow:hidden;margin-bottom:12px;
}
.mock-progress-fill{
  width:62%;height:100%;
  background:var(--blue);
  border-radius:999px;
}
.mock-note{
  font-size:0.72rem;color:var(--screen-text-faint);
  margin:0 0 14px;
}
.mock-cta{
  text-align:center;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:11px 10px;
  font-size:0.82rem;font-weight:600;
  color:var(--screen-text);
}

.chip{
  position:absolute;
  display:flex;align-items:center;gap:8px;
  background:#ffffff;
  border:1px solid var(--border-soft);
  border-radius:16px;
  padding:11px 16px;
  font-size:0.82rem;font-weight:600;
  color:var(--navy);
  box-shadow:0 16px 36px -18px rgba(6,31,61,0.35);
  animation:float-chip 5s ease-in-out infinite;
}
.chip .wafii-icon{color:var(--blue);flex:none;}

.chip-approve{
  top:6%;right:-6%;
  transform:translateZ(70px);
  animation-delay:0s;
}
.chip-nodown{
  bottom:14%;left:-10%;
  transform:translateZ(55px);
  animation-delay:-1.6s;
}
.chip-months{
  top:44%;left:-14%;
  transform:translateZ(90px);
  animation-delay:-3.2s;
}
.chip-num{
  font-family:var(--font-display);
  font-weight:800;font-size:1.1rem;
  color:var(--blue);
}
.chip-months .chip-num{margin-left:2px;}

@keyframes float-chip{
  0%,100%{translate:0 0;}
  50%{translate:0 -10px;}
}

/* ---------------- feature grid ---------------- */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}

.tilt-card{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .12s ease-out, border-color .2s ease, background .2s ease;
}

.feature-card{
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:28px 22px;
  box-shadow:0 12px 30px -20px rgba(6,31,61,0.14);
}
.feature-card:hover{
  border-color:rgba(1,80,155,0.35);
  background:var(--surface-strong);
}
.feature-icon{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  border-radius:13px;
  background:var(--cyan-soft);
  color:var(--cyan);
  margin-bottom:18px;
  transform:translateZ(20px);
}
.feature-card h3{
  font-family:var(--font-display);
  font-size:1.05rem;font-weight:700;
  margin:0 0 8px;
  transform:translateZ(15px);
}
.feature-card p{
  font-size:0.9rem;color:var(--text-dim);
  line-height:1.7;margin:0;
  transform:translateZ(10px);
}

/* ---------------- categories ---------------- */
.category-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

/* ---------------- branches ---------------- */
.branch-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
  max-width:900px;
  margin:0 auto;
}
.branch-card{
  display:flex;align-items:flex-start;gap:16px;
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:24px 22px;
  box-shadow:0 12px 30px -20px rgba(6,31,61,0.14);
}
.branch-icon{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;
  border-radius:12px;
  background:var(--cyan-soft);
  color:var(--cyan);
  transform:translateZ(20px);
}
.branch-card h3{
  font-family:var(--font-display);
  font-size:1.02rem;font-weight:700;
  margin:0 0 6px;
}
.branch-card p{
  font-size:0.88rem;color:var(--text-dim);
  margin:0;line-height:1.7;
}

.category-card{
  position:relative;
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:26px 22px;
  overflow:hidden;
  box-shadow:0 12px 30px -20px rgba(6,31,61,0.14);
}
.category-card::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 85% -10%, rgba(1,80,155,0.14), transparent 55%);
  opacity:0;transition:opacity .25s ease;
}
.category-card:hover{border-color:rgba(1,80,155,0.35);background:var(--surface-strong);}
.category-card:hover::before{opacity:1;}

.category-badge{
  position:absolute;top:18px;left:18px;
  background:var(--gradient-brand);
  color:#ffffff;
  font-size:0.72rem;font-weight:700;
  padding:4px 12px;border-radius:999px;
}
.category-icon{
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;
  border-radius:14px;
  background:var(--cyan-soft);
  color:var(--cyan);
  margin-bottom:18px;
  transform:translateZ(20px);
}
.category-card h3{
  font-family:var(--font-display);
  font-size:1.1rem;font-weight:700;
  margin:0 0 8px;
  transform:translateZ(15px);
}
.category-price{
  font-size:0.88rem;color:var(--text-dim);
  margin:0;
  transform:translateZ(10px);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.category-price b{
  color:var(--cyan);
  font-weight:700;
  font-size:1rem;
}

/* ---------------- link hub (Linktree-style) ---------------- */
.link-hub-section{
  padding-top:72px;
  padding-bottom:72px;
}
.link-hub-shell{
  max-width:920px;
  margin:0 auto;
  padding:clamp(28px, 5vw, 44px);
  border-radius:32px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(239,244,251,0.75));
  border:1px solid var(--border);
  box-shadow:
    0 32px 64px -40px rgba(6,31,61,0.35),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position:relative;
  overflow:hidden;
}
.link-hub-shell::before{
  content:"";
  position:absolute;
  inset:-40% -20% auto -20%;
  height:55%;
  background:radial-gradient(ellipse 70% 80% at 50% 0%, rgba(1,80,155,0.12), transparent 70%);
  pointer-events:none;
}
.link-hub-intro{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  margin-bottom:40px;
  position:relative;
  z-index:1;
}
.link-hub-head{
  margin:0;
  text-align:right;
  max-width:none;
}
.link-hub-orbit{
  position:relative;
  width:112px;height:112px;
  flex:none;
}
.orbit-ring{
  position:absolute;inset:0;
  border-radius:50%;
  border:1px dashed rgba(1,80,155,0.25);
  animation:orbit-spin 18s linear infinite;
}
.orbit-ring--2{
  inset:14px;
  border-style:solid;
  border-color:rgba(6,31,61,0.12);
  animation-direction:reverse;
  animation-duration:24s;
}
.orbit-core{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--blue);
}
@keyframes orbit-spin{
  to{transform:rotate(360deg);}
}
.link-hub-group{
  position:relative;
  z-index:1;
  margin-bottom:36px;
}
.link-hub-group:last-of-type{margin-bottom:20px;}
.link-hub-group-head{
  margin:0 0 16px;
}
.link-hub-group-head h3{
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:800;
  margin:0 0 4px;
  color:var(--navy);
}
.link-hub-group-head p{
  margin:0;
  font-size:0.88rem;
  color:var(--text-dim);
}
.link-hub-grid{
  display:grid;
  gap:12px;
}
.link-hub-grid--stores{
  grid-template-columns:1fr;
}
.link-hub-grid--social{
  grid-template-columns:repeat(2, 1fr);
}
.link-hub-grid--apps{
  grid-template-columns:repeat(2, 1fr);
}
.link-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:var(--radius-md);
  background:var(--bg-soft);
  border:1px solid var(--border-soft);
  box-shadow:0 10px 28px -22px rgba(6,31,61,0.2);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}
.link-card:hover,.link-card:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(1,80,155,0.35);
  box-shadow:0 20px 40px -24px rgba(1,80,155,0.35);
  background:#ffffff;
}
.link-card--featured{
  padding:20px 20px;
  background:linear-gradient(120deg, rgba(1,80,155,0.06), rgba(239,244,251,0.9));
}
.link-card--featured .link-card-title{
  font-size:1.08rem;
}
.link-card-icon{
  flex:none;
  width:46px;height:46px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cyan-soft);
  color:var(--blue);
}
.link-card--navy .link-card-icon{
  background:rgba(6,31,61,0.08);
  color:var(--navy);
}
.link-card--social .link-card-icon{
  border-radius:50%;
}
.link-card--app .link-card-icon{
  background:var(--navy);
  color:#EFF4FB;
}
.link-card-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.link-card-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.98rem;
  color:var(--navy);
}
.link-card-desc{
  font-size:0.82rem;
  line-height:1.55;
  color:var(--text-dim);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.link-card-go{
  flex:none;
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  color:var(--blue);
  border:1px solid var(--border-soft);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.link-card:hover .link-card-go,.link-card:focus-visible .link-card-go{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
}
.link-hub-foot{
  text-align:center;
  margin:8px 0 0;
  position:relative;
  z-index:1;
}
.link-hub-linktree{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.88rem;
  font-weight:600;
  color:var(--text-dim);
  padding:10px 18px;
  border-radius:999px;
  border:1px dashed var(--border);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.link-hub-linktree:hover,.link-hub-linktree:focus-visible{
  color:var(--blue);
  border-color:rgba(1,80,155,0.4);
  background:rgba(1,80,155,0.06);
}

/* ---------------- cta band ---------------- */
.cta-band{
  position:relative;z-index:2;
  max-width:1240px;
  margin:0 auto 96px;
  padding:0 clamp(20px, 5vw, 56px);
}
.cta-band-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;
  background:linear-gradient(120deg, var(--navy), var(--blue) 45%, var(--blue-light));
  border:1px solid rgba(1,80,155,0.35);
  border-radius:28px;
  padding:44px clamp(24px, 4vw, 56px);
  color:#ffffff;
}
.cta-band-inner h2{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  font-weight:800;
  margin:0 0 10px;
  color:#ffffff;
}
.cta-band-inner p{
  color:rgba(255,255,255,0.85);
  margin:0;font-size:0.98rem;
}
.btn-light{
  background:#ffffff;
  color:var(--blue);
  box-shadow:0 14px 30px -12px rgba(6,31,61,0.25);
}
.btn-light:hover,.btn-light:focus-visible{
  box-shadow:0 18px 36px -12px rgba(6,31,61,0.32);
}

/* ---------------- footer ---------------- */
.site-footer{
  position:relative;z-index:2;
  border-top:1px solid var(--border-soft);
  padding:44px clamp(20px, 5vw, 56px) 28px;
}
.footer-top{
  max-width:1240px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding-bottom:28px;
  border-bottom:1px solid var(--border-soft);
}
.footer-brand{
  display:flex;align-items:center;gap:14px;
}
.footer-logo{height:24px;width:auto;}

.footer-contact{
  display:flex;align-items:center;gap:22px;
}
.footer-contact-item{
  display:flex;align-items:center;gap:7px;
  font-size:0.88rem;color:var(--text-dim);
  transition:color .2s ease;
}
.footer-contact-item:hover,.footer-contact-item:focus-visible{color:var(--cyan);}
.footer-brand p{
  color:var(--text-dim);font-size:0.9rem;margin:0;
}

.social-row{display:flex;gap:10px;flex-wrap:wrap;}
.social-link{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--text-dim);
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.social-link:hover,.social-link:focus-visible{
  color:var(--cyan);
  border-color:rgba(1,80,155,0.45);
  transform:translateY(-2px);
}

.footer-bottom{
  max-width:1240px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding-top:22px;
  color:var(--text-faint);font-size:0.82rem;
}
.made-in{margin:0;}

/* ---------------- responsive ---------------- */
@media (max-width:960px){
  .main-nav{display:none;}
  .btn-header-ghost{display:none;}
  .hero{grid-template-columns:1fr;text-align:center;padding-top:40px;}
  .hero-copy{max-width:100%;margin:0 auto;}
  .lede{margin-inline:auto;}
  .hero-actions{display:flex;flex-direction:column;align-items:center;}
  .hero-visual{order:-1;margin-bottom:8px;}
  .hero-showcase{max-width:100%;min-height:400px;}
  .feature-grid{grid-template-columns:repeat(2, 1fr);}
  .category-grid{grid-template-columns:repeat(2, 1fr);}
  .cta-band-inner{text-align:center;justify-content:center;flex-direction:column;}
  .link-hub-intro{grid-template-columns:1fr;text-align:center;}
  .link-hub-head{text-align:center;}
  .link-hub-orbit{margin:0 auto;}
}

@media (max-width:640px){
  .feature-grid{grid-template-columns:1fr;}
  .category-grid{grid-template-columns:1fr;}
  .branch-grid{grid-template-columns:1fr;}
  .btn-primary{width:100%;justify-content:center;}
  .chip{font-size:0.74rem;padding:8px 12px;}
  .chip-approve{right:-2%;}
  .chip-nodown{left:-2%;}
  .chip-months{left:-2%;}
  .link-hub-grid--social,
  .link-hub-grid--apps{grid-template-columns:1fr;}
  .link-hub-shell{border-radius:24px;padding:22px 18px;}

  .eyebrow{font-size:0.82rem;padding:6px 14px;}
  .headline{font-size:clamp(1.7rem, 7vw, 2.1rem);line-height:1.3;}
  .lede{font-size:0.95rem;line-height:1.75;}
  .tagline{font-size:0.9rem;}
  .section-eyebrow{font-size:0.78rem;}
  .section-title{font-size:clamp(1.4rem, 5.5vw, 1.8rem);}
  .section-sub{font-size:0.92rem;}
  .cta-band-inner h2{font-size:clamp(1.3rem, 5.5vw, 1.6rem);}
  .cta-band-inner p{font-size:0.9rem;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .chip{animation:none;}
  .tilt-card{transition:none;}
}