/* ==========================================================================
   OptiFuturz Career Lab — stylesheet
   File: assets/css/style.css
   Loaded after Bootstrap 5, so these rules win where they overlap.
   Edit the tokens in section 1 to re-skin the whole site.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   All brand colours are declared once here. Change them in one place and the
   whole page follows.
   ========================================================================== */
:root{
  --blue-900:#0A2E5C;   /* headline navy, taken from the logo wordmark */
  --blue-700:#0B4DA2;   /* primary brand blue */
  --blue-500:#1B7BE0;   /* bright blue, links + accents */
  --blue-050:#EAF3FF;   /* tinted blue surface */
  --green-600:#1E9E52;  /* primary brand green */
  --green-500:#33B36B;  /* bright green */
  --green-050:#E8F8EF;  /* tinted green surface */
  --amber-500:#F2921D;  /* accent from the logo compass, used sparingly */
  --ink:#12233B;        /* body text */
  --muted:#5C6E88;      /* secondary text */
  --line:#E3EAF3;       /* hairline borders */
  --surface:#F5F8FC;    /* page section background */
  --white:#FFFFFF;

  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;

  --shadow-sm:0 4px 14px rgba(10,46,92,.06);
  --shadow:0 12px 34px rgba(10,46,92,.09);
  --shadow-lg:0 24px 60px rgba(10,46,92,.14);

  --grad-brand:linear-gradient(115deg,var(--blue-700) 0%,var(--blue-500) 55%,var(--green-600) 100%);

  --nav-h:78px;         /* used as the scroll offset for anchor links */
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*{ -webkit-tap-highlight-color:transparent; }

html{
  scroll-behavior:smooth;          /* smooth scrolling */
  scroll-padding-top:var(--nav-h); /* stops the sticky navbar covering headings */
}
body{
  font-family:'Poppins',system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--white);
  font-size:1rem;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;   /* crisp type on high-DPI / retina screens */
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{ font-weight:700; color:var(--blue-900); letter-spacing:-.02em; line-height:1.25; }
h2{ font-size:clamp(1.75rem,3.4vw,2.7rem); }
h3{ font-size:clamp(1.15rem,1.8vw,1.4rem); }
p{ color:var(--muted); margin-bottom:0; }
a{ text-decoration:none; }
img{ max-width:100%; height:auto; }

/* Reusable helpers ------------------------------------------------------- */
.section{ padding:clamp(56px,7vw,104px) 0; }
.section--tint{ background:var(--surface); }
.text-brand-blue{ color:var(--blue-700)!important; }
.text-brand-green{ color:var(--green-600)!important; }
.lead-muted{ font-size:1.02rem; color:var(--muted); }

/* Eyebrow label above section titles: — HOW WE HELP STUDENTS — */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-600); margin-bottom:.85rem;
}
.eyebrow::before,.eyebrow::after{
  content:""; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--blue-500),var(--green-500));
}

/* Buttons ---------------------------------------------------------------- */
.btn{ font-weight:600; border-radius:999px; padding:.72rem 1.5rem; transition:.25s ease; }
.btn-brand{ background:var(--blue-700); color:#fff; border:1px solid var(--blue-700); box-shadow:0 8px 20px rgba(11,77,162,.25); }
.btn-brand:hover{ background:var(--blue-900); border-color:var(--blue-900); color:#fff; transform:translateY(-2px); }
.btn-brand-green{ background:var(--green-600); color:#fff; border:1px solid var(--green-600); box-shadow:0 8px 20px rgba(30,158,82,.25); }
.btn-brand-green:hover{ background:#178644; border-color:#178644; color:#fff; transform:translateY(-2px); }
.btn-outline-brand{ background:transparent; color:var(--blue-700); border:1.5px solid var(--blue-700); }
.btn-outline-brand:hover{ background:var(--blue-700); color:#fff; transform:translateY(-2px); }
.btn-light-ghost{ background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.btn-light-ghost:hover{ background:#fff; color:var(--blue-700); }
.btn-lg-brand{ padding:.85rem 1.9rem; font-size:1rem; }

/* Cards ------------------------------------------------------------------ */
.card-soft{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); height:100%; transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card-soft:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:#CFE0F5; }

/* Vector icon tile — SVG/icon-font based so it stays sharp at any resolution */
.icon-tile{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  font-size:1.45rem; flex:0 0 auto;
}
.icon-tile--blue{ background:var(--blue-050); color:var(--blue-700); }
.icon-tile--green{ background:var(--green-050); color:var(--green-600); }
.icon-tile--amber{ background:#FFF3E2; color:var(--amber-500); }

/* Image placeholder frames ------------------------------------------------
   Every photo on the page is a marked placeholder. If a file is missing the
   frame still renders as a clean branded block instead of a broken image. */
.img-frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(135deg,var(--blue-050),var(--green-050));
  box-shadow:var(--shadow);
}
.img-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.img-frame--ratio{ aspect-ratio:16/10; }
.img-frame--wide{ aspect-ratio:21/8; }
@media (max-width:767.98px){ .img-frame--wide{ aspect-ratio:16/9; } }

/* ==========================================================================
   3. NAVBAR
   ========================================================================== */
.navbar-brandline{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s ease, border-color .3s ease, padding .3s ease;
  padding-top:.55rem; padding-bottom:.55rem;
}
.navbar-brandline.is-scrolled{ box-shadow:var(--shadow-sm); border-bottom-color:var(--line); }
.navbar-brandline .navbar-brand img{ height:46px; width:auto; }
.navbar-brandline .nav-link{
  font-weight:500; color:var(--ink); padding:.5rem .95rem!important; border-radius:999px; position:relative;
}
.navbar-brandline .nav-link:hover,
.navbar-brandline .nav-link.active{ color:var(--blue-700); }
.navbar-brandline .nav-link.active::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:.15rem;
  width:18px; height:3px; border-radius:3px; background:var(--green-500);
}
.navbar-toggler{ border:1px solid var(--line); border-radius:12px; padding:.35rem .6rem; }
.navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(27,123,224,.25); }

/* ==========================================================================
   4. HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 420px at 88% 8%, rgba(27,123,224,.10), transparent 62%),
    radial-gradient(720px 420px at 6% 92%, rgba(30,158,82,.10), transparent 60%),
    var(--white);
  padding-top:clamp(40px,6vw,70px); padding-bottom:clamp(40px,6vw,70px);
}
.hero h1{
  font-size:clamp(2.1rem,4.6vw,3.5rem); font-weight:800; line-height:1.12; letter-spacing:-.03em;
}
.hero h1 span{ display:block; }
.hero-visual{
  position:relative; border-radius:28px; overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:4/3; background:linear-gradient(135deg,var(--blue-050),var(--green-050));
}
.hero-visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-visual::after{ /* soft brand wash so any photo sits in the palette */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,46,92,.05) 0%,rgba(10,46,92,.30) 100%);
}
.hero-badge{
  position:absolute; left:18px; bottom:18px; z-index:2;
  background:rgba(255,255,255,.94); border-radius:14px; padding:.6rem .9rem;
  display:flex; align-items:center; gap:.6rem; box-shadow:var(--shadow-sm);
  font-size:.82rem; font-weight:600; color:var(--blue-900);
}
.hero-badge i{ color:var(--green-600); font-size:1.1rem; }

/* Highlight strip under the hero */
.highlight-strip{
  background:var(--grad-brand); border-radius:var(--radius-lg); color:#fff;
  box-shadow:var(--shadow-lg); padding:1.6rem 1rem; margin-top:-10px;
}
.highlight-item{ display:flex; align-items:center; gap:.9rem; justify-content:center; padding:.6rem 0; }
.highlight-item i{ font-size:1.5rem; }
.highlight-item .ttl{ font-weight:700; font-size:1.02rem; line-height:1.2; }
.highlight-item .sub{ font-size:.8rem; opacity:.85; }
.highlight-divider{ border-right:1px solid rgba(255,255,255,.25); }

/* ==========================================================================
   5. FEATURE / PROGRAM CARDS
   ========================================================================== */
.feature-card{ padding:1.7rem 1.55rem; }
.feature-step{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  font-weight:700; font-size:.9rem; color:#fff; margin-bottom:1rem;
}
.feature-card h3{ font-size:1.12rem; margin-bottom:.5rem; }
.feature-card p{ font-size:.93rem; }

/* Product cards — the six OptiFuturz programs */
.product-card{ padding:3.1rem 1.6rem 1.8rem; text-align:center; position:relative; overflow:visible; }
.product-card--green{ border-top:3px solid var(--green-600); }
.product-card--blue{ border-top:3px solid var(--blue-700); }
.product-icon{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  font-size:1.85rem; background:var(--white); box-shadow:0 6px 18px rgba(10,46,92,.10);
  border:1px solid var(--line);
}
.product-icon--green{ color:var(--green-600); }
.product-icon--blue{ color:var(--blue-700); }
.product-title{ font-size:1.25rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; margin-bottom:.2rem; }
.product-sub{ font-size:.92rem; font-weight:600; color:var(--blue-900); margin-bottom:1rem; }
.product-list{
  list-style:none; padding:1rem 0 0; margin:0; text-align:left;
  border-top:1px solid var(--line);
}
.product-list li{ display:flex; align-items:flex-start; gap:.2rem; font-size:.93rem; color:var(--ink); padding:.28rem 0; }
.product-list i{ font-size:1.35rem; line-height:1.25; flex:0 0 auto; }
.product-card--green .product-list i{ color:var(--green-600); }
.product-card--blue .product-list i{ color:var(--blue-700); }

/* Trust chips row */
.trust-chip{ display:flex; align-items:center; gap:.8rem; padding:.55rem 0; }
.trust-chip span{ font-weight:600; color:var(--blue-900); font-size:.95rem; }

/* Ecosystem section */
.eco-card{ padding:1.6rem 1.45rem; display:flex; flex-direction:column; gap:.9rem; }
.eco-card h3{ font-size:1.06rem; margin:0; }
.eco-card p{ font-size:.92rem; }
.eco-tag{
  align-self:flex-start; font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue-700); background:var(--blue-050); border-radius:999px; padding:.25rem .7rem;
}

/* Why schools partner — checklist */
.check-list{ list-style:none; padding:0; margin:0; }
.check-list li{ display:flex; gap:.7rem; align-items:flex-start; padding:.45rem 0; color:var(--ink); font-size:.96rem; }
.check-list i{ color:var(--green-600); font-size:1.1rem; line-height:1.5; flex:0 0 auto; }

/* ==========================================================================
   6. PRICING
   ========================================================================== */
.price-card{ padding:1.9rem 1.6rem; text-align:center; position:relative; }
.price-tier{
  display:inline-block; background:var(--blue-700); color:#fff; font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; border-radius:999px; padding:.32rem 1.1rem; margin-bottom:1.1rem;
}
.price-card--featured{
  border:2px solid var(--green-500); box-shadow:var(--shadow-lg);
  background:linear-gradient(180deg,#fff 0%,var(--green-050) 100%);
}
.price-card--featured .price-tier{ background:var(--green-600); }
.ribbon{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--green-600); color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:.35rem 1.05rem; border-radius:999px; box-shadow:var(--shadow-sm); white-space:nowrap;
}
.payer-label{ font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.price-row{ padding:.75rem 0; border-bottom:1px dashed var(--line); }
.price-row:last-of-type{ border-bottom:0; }
.price-row .label{ font-size:.82rem; color:var(--muted); display:block; }
.price-row .amount{ font-size:1.6rem; font-weight:700; color:var(--blue-900); letter-spacing:-.02em; }
.price-card--featured .price-row .amount{ color:var(--green-600); }
.price-note{ font-size:.75rem; color:var(--muted); }
.price-features{ list-style:none; padding:0; margin:1.1rem 0 0; text-align:left; }
.price-features li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; padding:.35rem 0; color:var(--ink); }
.price-features i{ color:var(--green-600); flex:0 0 auto; line-height:1.6; }

/* ==========================================================================
   7. EXPERTS
   ========================================================================== */
.expert-card{ overflow:hidden; }
.expert-photo{
  aspect-ratio:1/1; background:linear-gradient(135deg,var(--blue-050),var(--green-050));
  position:relative; overflow:hidden;
}
.expert-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.expert-body{ padding:1.3rem 1.35rem 1.6rem; }
.expert-body h3{ font-size:1.08rem; margin-bottom:.15rem; }
.expert-role{ font-size:.86rem; font-weight:600; color:var(--green-600); margin-bottom:.6rem; display:block; }
.expert-body p{ font-size:.9rem; }
.expert-creds{ list-style:none; padding:0; margin:0 0 .75rem; display:flex; flex-wrap:wrap; gap:.35rem; }
.expert-creds li{
  font-size:.76rem; font-weight:600; color:var(--blue-700); background:var(--blue-050);
  border-radius:999px; padding:.22rem .65rem; line-height:1.4;
}

/* ==========================================================================
   8. YEAR-ROUND TIMELINE (horizontal scroll on mobile)
   ========================================================================== */
.timeline-marquee{
  position:relative; overflow:hidden; padding:1.5rem 0 1.25rem;
  /* fade the strip out at both edges so items enter and leave softly */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.timeline-track{
  display:flex; gap:.9rem; width:max-content;
  animation:marquee 48s linear infinite;
}
.timeline-marquee:hover .timeline-track,
.timeline-marquee:focus-within .timeline-track,
.timeline-marquee.is-paused .timeline-track{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-50% - .45rem)); }  /* half the duplicated track */
}
.timeline-item{
  flex:0 0 150px; text-align:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:1.1rem .75rem; box-shadow:var(--shadow-sm); transition:.25s ease;
}
.timeline-item:hover{ transform:translateY(-5px); border-color:var(--green-500); box-shadow:var(--shadow); }
.timeline-item i{ font-size:1.35rem; color:var(--blue-500); }
.timeline-month{
  display:block; margin:.5rem 0 .25rem; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  color:var(--green-600); text-transform:uppercase;
}
.timeline-item span.act{ font-size:.83rem; font-weight:500; color:var(--blue-900); line-height:1.35; display:block; }

/* ==========================================================================
   9. LEAD FORM + CTA
   ========================================================================== */
.cta-band{ background:var(--grad-brand); color:#fff; position:relative; overflow:hidden; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.86); }
.cta-band::before{ /* subtle dotted texture, pure CSS so it stays sharp when zoomed */
  content:""; position:absolute; inset:0; opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);
  background-size:22px 22px;
}
.cta-band > .container{ position:relative; z-index:1; }

.form-card{
  background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:clamp(1.4rem,3vw,2.4rem); border:1px solid var(--line);
}
.form-label{ font-size:.85rem; font-weight:600; color:var(--blue-900); margin-bottom:.35rem; }
.form-control,.form-select{
  border-radius:12px; border:1.5px solid var(--line); padding:.7rem .9rem; font-size:.94rem; color:var(--ink);
}
.form-control:focus,.form-select:focus{ border-color:var(--blue-500); box-shadow:0 0 0 .2rem rgba(27,123,224,.15); }
.input-group-text{ background:var(--blue-050); border:1.5px solid var(--line); border-right:0; border-radius:12px 0 0 12px; color:var(--blue-700); font-weight:600; }
.input-group .form-control{ border-top-left-radius:0; border-bottom-left-radius:0; }
.invalid-feedback{ font-size:.78rem; }
.form-success{
  display:none; border-radius:var(--radius); background:var(--green-050);
  border:1px solid var(--green-500); padding:1.4rem; text-align:center;
}
.form-success i{ font-size:2.4rem; color:var(--green-600); }

/* Enquiry form switcher (Institution / Individual) */
.enquiry-tabs{ display:flex; gap:.5rem; background:var(--blue-050); border-radius:999px; padding:.3rem; margin-bottom:1.4rem; }
.enquiry-tab{
  flex:1; border:0; background:transparent; border-radius:999px; padding:.6rem 1rem;
  font-weight:600; font-size:.92rem; color:var(--blue-700); transition:.2s ease;
}
.enquiry-tab.is-active{ background:var(--blue-700); color:#fff; box-shadow:0 6px 16px rgba(11,77,162,.22); }
.enquiry-tab:not(.is-active):hover{ background:rgba(11,77,162,.08); }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.site-footer{ background:var(--blue-900); color:rgba(255,255,255,.72); padding-top:64px; }
.site-footer h4{ color:#fff; font-size:1rem; margin-bottom:1.1rem; letter-spacing:0; }
.site-footer a{ color:rgba(255,255,255,.72); font-size:.92rem; display:inline-block; padding:.22rem 0; transition:.2s; }
.site-footer a:hover{ color:var(--green-500); transform:translateX(3px); }
.footer-logo{ height:52px; width:auto; background:#fff; border-radius:12px; padding:6px 10px; }
.footer-contact{ display:flex; gap:.7rem; align-items:flex-start; font-size:.92rem; padding:.3rem 0; }
.footer-contact i{ color:var(--green-500); line-height:1.6; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding:20px 0; font-size:.85rem; }
.social-dot{
  width:38px; height:38px; border-radius:50%; display:inline-grid; place-items:center;
  background:rgba(255,255,255,.09); color:#fff; margin-right:.4rem;
}
.social-dot:hover{ background:var(--green-600); color:#fff; transform:translateY(-3px); }

/* Back-to-top */
#backToTop{
  position:fixed; right:18px; bottom:18px; z-index:1030; width:46px; height:46px; border:0; border-radius:50%;
  background:var(--blue-700); color:#fff; box-shadow:var(--shadow); display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:.3s ease;
}
#backToTop.show{ opacity:1; visibility:visible; }

/* ==========================================================================
   11. SCROLL REVEAL ANIMATION
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   12. RESPONSIVE TWEAKS
   ========================================================================== */
@media (max-width:991.98px){
  .navbar-brandline .navbar-collapse{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:1rem; margin-top:.7rem; box-shadow:var(--shadow);
  }
  .navbar-brandline .nav-link.active::after{ display:none; }
  .highlight-divider{ border-right:0; }
  .hero{ text-align:center; }
  .hero .hero-actions{ justify-content:center; }
}
@media (max-width:575.98px){
  body{ font-size:.96rem; }
  .btn{ width:100%; }
  .btn.w-auto-sm{ width:auto; }
  .navbar-brandline .navbar-brand img{ height:38px; }
  .price-row .amount{ font-size:1.42rem; }
}

/* Accessibility: honour reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  /* stop the calendar strip and let it be scrolled by hand instead */
  .timeline-track{ animation:none; }
  .timeline-marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}
:focus-visible{ outline:3px solid var(--blue-500); outline-offset:2px; border-radius:6px; }

/* ==========================================================================
   Announcement popup — CBSE career-counselling notice
   Shown once per browser session, closable, backdrop-dismissible.
   ========================================================================== */
.site-popup-overlay{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(10,20,40,.6);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .25s ease;
}
.site-popup-overlay.is-visible{
  display:flex;
  opacity:1;
}
.site-popup{
  position:relative;
  width:100%;
  max-width:560px;
  max-height:90vh;
  overflow:auto;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  transform:translateY(14px) scale(.97);
  opacity:0;
  transition:transform .3s ease, opacity .3s ease;
}
.site-popup-overlay.is-visible .site-popup{
  transform:translateY(0) scale(1);
  opacity:1;
}
.site-popup__link{ display:block; line-height:0; }
.site-popup__link img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius-lg);
}
.site-popup__close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:50%;
  background:rgba(10,46,92,.55);
  color:var(--white);
  font-size:1rem;
  cursor:pointer;
  z-index:2;
  transition:background .2s ease, transform .2s ease;
}
.site-popup__close:hover{
  background:var(--blue-900);
  transform:scale(1.06);
}
@media (max-width:575.98px){
  .site-popup-overlay{ padding:12px; }
  .site-popup{ max-width:100%; max-height:88vh; }
  .site-popup__close{ width:32px; height:32px; top:10px; right:10px; font-size:.9rem; }
}

/* Hero pillars line: Discover · Align · Achieve */
.hero-pillars{ display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .35rem; font-size:clamp(1.05rem,1.6vw,1.3rem); font-weight:700; color:var(--blue-900); letter-spacing:.02em; }
.hero-pillars i{ color:var(--green-600); font-size:1.4em; line-height:1; }
@media (max-width:991.98px){ .hero-pillars{ justify-content:center; } }