/* ============================================================
   UDAAR — main.css
   Palette driven by CSS variables set in functions.php
   (Customizer: Ultraviolet / Signal Teal / Sindh Sunset)
   ============================================================ */

:root{
  --u-a:#c2410c;            /* accent */
  --u-light:#fdba74;        /* accent light (on dark) */
  --u-glow:rgba(234,88,12,.12);
  --u-shadow:rgba(194,65,12,.25);
  --u-ink:#101018;
  --u-body:#50505e;
  --u-mute:#787685;
  --u-faint:#9a97a5;
  --u-bg:#fcfcfe;
  --u-panel:#f4f3f8;
  --u-line:rgba(16,16,24,.09);
  --u-font-sans:"Instrument Sans",system-ui,sans-serif;
  --u-font-mono:"IBM Plex Mono",monospace;
  --u-font-sindhi:"Noto Naskh Arabic",serif;
}

*{box-sizing:border-box}
body{margin:0;background:var(--u-bg);color:var(--u-ink);font-family:var(--u-font-sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--u-a);outline-offset:3px;border-radius:6px}

@keyframes udaar-pulse{0%,100%{box-shadow:0 0 0 0 rgba(31,169,113,.45)}50%{box-shadow:0 0 0 7px rgba(31,169,113,0)}}
@keyframes udaar-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Shared ───────────────────────────────────────────── */
.u-wrap{max-width:1280px;margin:0 auto;padding:clamp(52px,7vw,84px) clamp(22px,4vw,56px)}
.u-mono{font-family:var(--u-font-mono)}
.u-sindhi{font-family:var(--u-font-sindhi)}
.u-eyebrow{font-family:var(--u-font-mono);font-size:12px;letter-spacing:.08em;color:var(--u-a)}
.u-h2{margin:0;font-size:calc(clamp(30px,3.4vw,40px) * var(--u-s-h2,1));font-weight:600;letter-spacing:-.02em}
.u-section-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-bottom:42px}
.u-section-head .u-col{display:flex;flex-direction:column;gap:10px}

.u-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:99px;font-weight:600;cursor:pointer;border:0;transition:transform .25s,box-shadow .25s,border-color .25s}
.u-btn--primary{height:52px;padding:0 28px;background:var(--u-a);color:#fff;font-size:calc(16px * var(--u-s-btn,1));box-shadow:0 10px 24px var(--u-shadow)}
.u-btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px var(--u-shadow)}
.u-btn--ghost{height:52px;padding:0 24px;border:1px solid rgba(16,16,24,.14);background:#fff;color:var(--u-ink);font-size:calc(16px * var(--u-s-btn,1))}
.u-btn--ghost:hover{border-color:var(--u-a)}
.u-btn--small{height:42px;padding:0 20px;border:1px solid rgba(16,16,24,.14);background:transparent;color:var(--u-ink);font-size:14px}
.u-btn--small:hover{border-color:var(--u-a)}
.u-btn--nav{height:42px;padding:0 22px;background:var(--u-a);color:#fff;font-size:14.5px}
.u-btn--nav:hover{transform:translateY(-1px);box-shadow:0 8px 18px var(--u-shadow)}
.u-btn--white{height:48px;padding:0 24px;background:#fff;color:var(--u-ink);font-size:15px;align-self:flex-start}
.u-btn--white:hover{transform:translateY(-2px)}
.u-btn--accent{height:48px;padding:0 24px;background:var(--u-a);color:#fff;font-size:15px;align-self:flex-start}
.u-btn--accent:hover{transform:translateY(-2px);box-shadow:0 10px 22px var(--u-shadow)}

/* scroll reveal */
.u-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.u-reveal.is-in{opacity:1;transform:none}
.no-js .u-reveal{opacity:1;transform:none}

/* ── Nav ──────────────────────────────────────────────── */
.u-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,4vw,56px);height:72px;border-bottom:1px solid rgba(16,16,24,.08);background:rgba(252,252,254,.88);backdrop-filter:blur(12px)}
.u-brand{display:flex;align-items:center;gap:10px}
.u-brand__sindhi{font-family:var(--u-font-sindhi);font-size:26px;font-weight:700;color:var(--u-a);line-height:1}
.u-brand__latin{font-weight:700;font-size:14px;letter-spacing:.16em}
.u-nav__links{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:500;color:var(--u-body);margin:0;padding:0;list-style:none}
.u-nav__links a{display:block;padding:8px 14px;border-radius:99px;transition:background .25s}
.u-nav__links a:hover{background:rgba(16,16,24,.05)}
.u-nav__right{display:flex;align-items:center;gap:14px}
.u-nav__phone{font-family:var(--u-font-mono);font-size:13px;color:var(--u-body)}
.u-menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid rgba(16,16,24,.12);border-radius:99px;font-size:16px;background:transparent;cursor:pointer}
.u-nav__mobile{display:none;flex-direction:column;gap:2px;padding:14px clamp(22px,4vw,56px) 20px;background:rgba(252,252,254,.98);border-bottom:1px solid rgba(16,16,24,.08)}
.u-nav__mobile.is-open{display:flex}
.u-nav__mobile a{padding:12px 4px;font-size:16px;font-weight:500;border-bottom:1px solid rgba(16,16,24,.06)}

/* ── Hero ─────────────────────────────────────────────── */
.u-hero{position:relative;overflow:hidden}
.u-hero__dots{position:absolute;inset:0;background-image:radial-gradient(rgba(16,16,24,.07) 1px,transparent 1px);background-size:24px 24px}
.u-hero__glow{position:absolute;inset:0;background:radial-gradient(760px 420px at 82% 8%,var(--u-glow),transparent 65%)}
.u-hero__grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:60px;padding:clamp(48px,7vw,88px) clamp(22px,4vw,56px);align-items:center;max-width:1280px;margin:0 auto}
.u-hero__copy{display:flex;flex-direction:column;gap:24px}
.u-pill{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 14px;background:#fff;border:1px solid rgba(16,16,24,.1);border-radius:99px;font-family:var(--u-font-mono);font-size:11.5px;color:var(--u-body);align-self:flex-start;box-shadow:0 1px 3px rgba(16,16,24,.05)}
.u-pill__dot{width:7px;height:7px;border-radius:50%;background:var(--u-a)}
.u-hero h1{margin:0;font-size:calc(clamp(30px,4.6vw,64px) * var(--u-s-h1,1));line-height:1.08;letter-spacing:-.03em;font-weight:600;text-wrap:balance;overflow-wrap:break-word}
.u-hero h1 em{font-style:normal;color:var(--u-a)}
.u-hero__sub{margin:0;font-size:calc(clamp(15.5px,1.4vw,17.5px) * var(--u-s-sub,1));line-height:1.65;color:var(--u-body);max-width:480px;text-wrap:pretty}
.u-hero__ctas{display:flex;align-items:center;gap:14px;margin-top:4px}
.u-hero__stats{display:flex;gap:40px;margin-top:16px;padding-top:24px;border-top:1px solid rgba(16,16,24,.09)}
.u-stat{display:flex;flex-direction:column;gap:3px}
.u-stat__n{font-size:25px;font-weight:700;letter-spacing:-.01em;min-width:58px}
.u-stat__label{font-family:var(--u-font-mono);font-size:11px;color:var(--u-mute)}
.u-hero__media{position:relative}
.u-hero__photo{aspect-ratio:1/1.05;border-radius:20px;background:linear-gradient(160deg,#ecebf2,#f5f4f9);border:1px solid var(--u-line);display:flex;align-items:center;justify-content:center;box-shadow:0 24px 60px rgba(16,16,24,.1);overflow:hidden}
.u-hero__photo img{width:100%;height:100%;object-fit:cover}
.u-hero__placeholder{font-family:var(--u-font-mono);font-size:12px;color:#8d8a95}
.u-float{position:absolute;background:rgba(255,255,255,.94);border:1px solid rgba(16,16,24,.08);border-radius:14px;padding:13px 18px;box-shadow:0 14px 34px rgba(16,16,24,.12)}
.u-float--live{left:-16px;bottom:44px;display:flex;align-items:center;gap:12px}
.u-float--earn{right:-10px;top:36px;display:flex;flex-direction:column;gap:2px}
.u-live-dot{width:10px;height:10px;border-radius:50%;background:#1fa971;animation:udaar-pulse 2.2s ease-out infinite}
.u-float__title{font-size:14px;font-weight:600}
.u-float__meta{font-family:var(--u-font-mono);font-size:10.5px;color:var(--u-mute)}
.u-float__big{font-size:20px;font-weight:700;color:var(--u-a)}

/* ── Partners marquee ─────────────────────────────────── */
.u-partners{border-top:1px solid rgba(16,16,24,.08);padding:30px 0;overflow:hidden}
.u-partners__track{display:flex;width:max-content;gap:72px;animation:udaar-marquee 30s linear infinite;padding-left:72px}
.u-partner{display:flex;flex-direction:column;align-items:center;gap:3px;opacity:.7;flex:none}
.u-partner__name{font-size:17px;font-weight:700;letter-spacing:.02em;color:#3a3946;white-space:nowrap}
.u-partner__sub{font-family:var(--u-font-mono);font-size:10px;color:var(--u-faint);white-space:nowrap}

/* ── Courses ──────────────────────────────────────────── */
.u-courses{border-top:1px solid rgba(16,16,24,.08)}
.u-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.u-card{display:flex;flex-direction:column;gap:20px;padding:28px;background:#fff;border:1px solid var(--u-line);border-radius:18px;transition:transform .35s,box-shadow .35s,border-color .35s}
.u-card:hover{transform:translateY(-4px);border-color:var(--u-a);box-shadow:0 14px 34px rgba(16,16,24,.09)}
.u-card__top{display:flex;align-items:center;justify-content:space-between}
.u-card__glyph{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;font-family:var(--u-font-mono);font-size:14px}
.u-card__tag{font-family:var(--u-font-mono);font-size:10.5px;color:var(--u-faint)}
.u-card__title{font-size:19px;font-weight:600}
.u-card__blurb{font-size:calc(14px * var(--u-s-body,1));line-height:1.55;color:var(--u-body);text-wrap:pretty;margin:6px 0 0}

/* ── Outcomes (dark) ──────────────────────────────────── */
.u-dark{position:relative;background:var(--u-ink);color:var(--u-bg);overflow:hidden}
.u-dark__glow{position:absolute;inset:0;background:radial-gradient(700px 400px at 15% 110%,var(--u-glow),transparent 65%)}
.u-outcomes__grid{position:relative;display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(36px,5vw,64px);align-items:center}
.u-outcomes__copy{display:flex;flex-direction:column;gap:16px}
.u-outcomes__copy .u-eyebrow{color:var(--u-light)}
.u-outcomes__copy p{margin:0;font-size:16px;line-height:1.65;color:rgba(252,252,254,.62);text-wrap:pretty}
.u-bars{display:flex;flex-direction:column;gap:26px}
.u-bar-row{display:flex;flex-direction:column;gap:9px}
.u-bar-row__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.u-bar-row__label{font-size:15.5px;font-weight:500;color:rgba(252,252,254,.85)}
.u-bar-row__pct{font-family:var(--u-font-mono);font-size:22px;color:var(--u-light)}
.u-bar{height:8px;border-radius:99px;background:rgba(252,252,254,.12);overflow:hidden}
.u-bar__fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--u-a),var(--u-light));transition:width 1.3s cubic-bezier(.22,1,.36,1)}
.no-js .u-bar__fill{width:var(--pct,0%)}

/* ── Milestones gallery ───────────────────────────────── */
.u-gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:250px 250px;gap:16px}
.u-tile{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(155deg,#e4e2ea,#f0eff5);border:1px solid var(--u-line);display:flex;align-items:center;justify-content:center;transition:transform .35s,box-shadow .35s}
.u-tile:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(16,16,24,.12)}
.u-tile--lead{grid-column:span 2;grid-row:span 2}
.u-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.u-tile__caption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(transparent,rgba(16,16,24,.78));display:flex;flex-direction:column;gap:2px}
.u-tile--lead .u-tile__caption{padding:22px 24px;gap:4px}
.u-tile__title{font-size:15px;font-weight:600;color:#fff}
.u-tile--lead .u-tile__title{font-size:20px}
.u-tile__meta{font-family:var(--u-font-mono);font-size:10px;color:rgba(255,255,255,.7)}
.u-tile--lead .u-tile__meta{font-size:11px}
.u-link-accent{font-size:14.5px;font-weight:600;color:var(--u-a)}

/* ── Stories ──────────────────────────────────────────── */
.u-stories{background:var(--u-panel);border-top:1px solid rgba(16,16,24,.06)}
.u-story{display:flex;flex-direction:column;background:#fff;border:1px solid var(--u-line);border-radius:18px;overflow:hidden;transition:transform .35s,box-shadow .35s}
.u-story:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(16,16,24,.09)}
.u-story__photo{height:190px;background:linear-gradient(150deg,#e6e4ec,#efeef4);display:flex;align-items:center;justify-content:center;overflow:hidden}
.u-story__photo img{width:100%;height:100%;object-fit:cover}
.u-story__body{display:flex;flex-direction:column;gap:10px;padding:24px 26px 28px}
.u-story__amount{font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--u-a)}
.u-story__text{font-size:calc(14.5px * var(--u-s-body,1));line-height:1.6;color:var(--u-body);text-wrap:pretty;margin:0}
.u-story__who{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.u-story__name{font-size:15px;font-weight:600}
.u-story__city{font-family:var(--u-font-mono);font-size:11px;color:var(--u-faint)}

/* ── Free classes + software split ────────────────────── */
.u-split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.u-panel-dark{position:relative;display:flex;flex-direction:column;gap:14px;padding:38px;border-radius:20px;background:var(--u-ink);color:var(--u-bg);overflow:hidden}
.u-panel-dark__glow{position:absolute;inset:0;background:radial-gradient(420px 260px at 90% -20%,var(--u-glow),transparent 70%)}
.u-panel-dark>*{position:relative}
.u-panel-dark .u-eyebrow{color:var(--u-light)}
.u-panel-light{display:flex;flex-direction:column;gap:14px;padding:38px;border-radius:20px;border:1px solid var(--u-line);background:#fff}
.u-panel__title{font-size:clamp(22px,2.2vw,27px);font-weight:600;letter-spacing:-.015em}
.u-panel__text{font-size:calc(15px * var(--u-s-body,1));line-height:1.6}
.u-panel-dark .u-panel__text{color:rgba(252,252,254,.62)}
.u-panel-light .u-panel__text{color:var(--u-body)}

/* ── Footer ───────────────────────────────────────────── */
.u-footer{position:relative;background:var(--u-ink);color:var(--u-bg);overflow:hidden}
.u-footer__glow{position:absolute;inset:0;background:radial-gradient(760px 400px at 50% 130%,var(--u-glow),transparent 70%)}
.u-footer__inner{position:relative;padding-bottom:52px}
.u-footer__cta{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;padding-bottom:60px;border-bottom:1px solid rgba(252,252,254,.12)}
.u-footer__sindhi{font-family:var(--u-font-sindhi);font-size:22px;color:rgba(252,252,254,.55)}
.u-footer__cta h2{margin:0;font-size:clamp(32px,4vw,46px);font-weight:600;letter-spacing:-.025em;max-width:680px;line-height:1.1;text-wrap:balance}
.u-footer__cta .u-btn--primary{height:54px;padding:0 32px;font-size:16.5px;margin-top:6px}
.u-footer__bottom{display:flex;align-items:center;justify-content:space-between;padding-top:26px;font-size:13.5px;color:rgba(252,252,254,.5)}
.u-footer__brand{display:flex;align-items:center;gap:9px}
.u-footer__brand .u-sindhi{font-size:20px;font-weight:700;color:#fff}
.u-footer__links{display:flex;gap:26px;flex-wrap:wrap}
.u-footer__links a:hover{color:#fff}

/* ── Inner pages (blog etc.) ──────────────────────────── */
.u-page{max-width:820px;margin:0 auto;padding:clamp(48px,6vw,72px) 22px}
.u-page h1{font-size:clamp(32px,4vw,46px);letter-spacing:-.025em;font-weight:600;line-height:1.1}
.u-page .entry-content{font-size:17px;line-height:1.75;color:#2c2c36}
.u-archive-list{display:flex;flex-direction:column;gap:16px;list-style:none;margin:0;padding:0}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width:1020px){
  .u-nav__links,.u-nav__phone{display:none}
  .u-menu-toggle{display:inline-flex}
  .u-hero__grid{grid-template-columns:1fr;gap:44px}
  .u-grid-3{grid-template-columns:1fr 1fr}
  .u-gallery{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:220px}
  .u-tile--lead{grid-column:span 2;grid-row:span 1}
  .u-split,.u-outcomes__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .u-wrap{padding-left:22px;padding-right:22px}
  .u-grid-3,.u-gallery{grid-template-columns:1fr}
  .u-tile--lead{grid-column:span 1}
  .u-hero__stats{gap:22px}
  .u-hero__ctas{flex-direction:column;align-items:stretch}
  .u-footer__bottom{flex-direction:column;gap:14px}
  .u-float--live{left:8px}
  .u-float--earn{right:8px}
}

/* ── Builder Zone ─────────────────────────────────────── */
.u-builder-zone{max-width:1280px;margin:0 auto;padding:clamp(52px,7vw,84px) clamp(22px,4vw,56px)}
.u-builder-zone .elementor{margin-left:calc(-1 * clamp(22px,4vw,56px));margin-right:calc(-1 * clamp(22px,4vw,56px))}

/* ── Next batch band ──────────────────────────────────── */
.u-batch{position:relative;background:var(--u-ink);color:var(--u-bg);overflow:hidden;border-top:1px solid rgba(16,16,24,.08)}
.u-batch__grid{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,5vw,60px);align-items:center;padding-top:clamp(40px,5vw,60px);padding-bottom:clamp(40px,5vw,60px)}
.u-batch__copy{display:flex;flex-direction:column;gap:14px}
.u-batch__sub{margin:0;font-size:15.5px;line-height:1.6;color:rgba(252,252,254,.62);max-width:460px}
.u-batch__meta{display:flex;gap:26px;font-family:var(--u-font-mono);font-size:12px;letter-spacing:.06em;color:var(--u-light)}
.u-batch__side{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.u-countdown{display:flex;gap:12px}
.u-count{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:66px;padding:14px 10px;background:rgba(252,252,254,.07);border:1px solid rgba(252,252,254,.14);border-radius:14px}
.u-count span{font-family:var(--u-font-mono);font-size:26px;font-weight:500;color:#fff}
.u-count em{font-style:normal;font-family:var(--u-font-mono);font-size:9.5px;letter-spacing:.1em;color:rgba(252,252,254,.5)}
.u-blog .u-story__body{gap:8px}
@media (max-width:1020px){.u-batch__grid{grid-template-columns:1fr}}
@media (max-width:640px){.u-countdown{width:100%;justify-content:space-between}.u-count{min-width:0;flex:1}}


/* ── Long-content safety (v1.2.1) ─────────────────────── */
h1,h2,h3,.u-h2,.u-panel__title,.u-card__title{overflow-wrap:break-word}
@media (max-width:640px){
  .u-hero h1{font-size:calc(clamp(26px,8.5vw,34px) * var(--u-s-h1,1))}
  .u-hero__grid{padding-left:20px;padding-right:20px;gap:36px}
  .u-h2{font-size:calc(clamp(24px,7vw,30px) * var(--u-s-h2,1))}
  .u-footer__cta h2{font-size:clamp(26px,8vw,34px)}
  .u-hero__sub{font-size:calc(15px * var(--u-s-sub,1))}
  .u-batch__grid{padding-left:0;padding-right:0}
}
@media (max-width:400px){
  .u-hero h1{font-size:calc(24px * var(--u-s-h1,1))}
  .u-hero__stats{flex-wrap:wrap;gap:18px}
}

/* ── Certification badge (hero) ───────────────────────── */
.u-float--cert{left:50%;transform:translateX(-50%);bottom:-22px;display:flex;align-items:center;gap:11px;border:1px solid var(--u-glow)}
.u-float__shield{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--u-a);color:#fff;font-size:15px;font-weight:700;flex:none}
@media (max-width:640px){.u-float--cert{bottom:-18px;width:max-content;max-width:92%}}