:root{
    --blue:#1852BD;
    --blue-deep:#0A1F4D;
    --blue-soft:#EAF0FB;
    --orange:#F26A28;
    --orange-soft:#FFE9DC;
    --ink:#0E1420;
    --muted:#6B7280;
    --paper:#FBFBF9;
    --card:#FFFFFF;
    --line:#EEF0F3;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--paper);color:var(--ink);font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
  body{min-height:100vh;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}

  /* --- Hero placeholder so scroll behavior makes sense --- */
  .hero{
    min-height:80vh;
    padding:80px 8vw 40px;
    display:flex;flex-direction:column;justify-content:center;
    max-width:1400px;margin:0 auto;
  }
  .hero .kicker{
    font-size:13px;letter-spacing:.02em;color:var(--muted);
    display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
  }
  .hero .kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 6px rgba(242,106,40,.15)}
  .hero h1{
    font-size:clamp(40px,6.4vw,88px);line-height:1.02;font-weight:800;letter-spacing:-.02em;
    max-width:14ch;color:var(--blue-deep)
  }
  .hero h1 em{font-style:normal;color:var(--orange);font-weight:800}
  .hero p{margin-top:22px;max-width:56ch;font-size:17px;line-height:1.6;color:var(--muted)}
  .hero .scroll-cue{margin-top:64px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:12px}
  .hero .scroll-cue .line{width:64px;height:1px;background:var(--muted);opacity:.35;position:relative;overflow:hidden}
  .hero .scroll-cue .line::after{content:"";position:absolute;inset:0;background:var(--orange);transform:translateX(-100%);animation:sweep 2.6s ease-in-out infinite}
  @keyframes sweep{
    0%{transform:translateX(-100%)}
    55%{transform:translateX(100%)}
    100%{transform:translateX(100%)}
  }

  .spacer{height:20vh}

  /* --- Footer wrapper --- */
  .footer{
    position:relative;
    padding:0 3vw 40px;
    background:var(--paper);
  }

  /* rounded white card that holds all footer content */
  .footer-card{
    position:relative;
    z-index:2;
    background:var(--card);
    border-radius:36px;
    overflow:hidden;
    box-shadow:
      0 -1px 0 rgba(10,31,77,.04),
      0 30px 60px -30px rgba(10,31,77,.15),
      0 12px 30px -18px rgba(10,31,77,.08);
  }

  /* animated gradient top band */
  .top-band{
    position:relative;
    height:120px;
    border-radius:36px 36px 0 0;
    overflow:hidden;
    background:linear-gradient(120deg,var(--blue) 0%,#3F7BE0 30%,var(--orange) 65%,#FFB27A 100%);
    background-size:220% 220%;
    animation:bandShift 12s ease-in-out infinite;
  }
  @keyframes bandShift{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
  }
  .top-band::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(1200px 220px at 20% 120%, rgba(255,255,255,.35), transparent 60%),
      radial-gradient(900px 200px at 85% -20%, rgba(255,255,255,.25), transparent 60%);
    pointer-events:none;
  }
  .band-mark{
    position:absolute;left:5vw;top:50%;transform:translateY(-50%);
    display:flex;align-items:baseline;gap:6px;
    color:#fff;font-weight:800;letter-spacing:-.01em;
    font-size:clamp(22px,2.4vw,30px);
    text-shadow:0 1px 0 rgba(10,31,77,.08);
  }
  .band-mark .deg{
    display:inline-block;font-weight:700;font-size:.9em;transform-origin:50% 55%;
    animation:degSpin 6s linear infinite;
  }
  @keyframes degSpin{to{transform:rotate(360deg)}}
  .band-cta{
    position:absolute;right:5vw;top:50%;transform:translateY(-50%);
    color:#fff;font-size:14px;font-weight:600;
    display:inline-flex;align-items:center;gap:10px;
    padding:10px 18px;border:1px solid rgba(255,255,255,.5);border-radius:999px;
    transition:background .25s ease,transform .25s ease;
  }
  .band-cta:hover{background:rgba(255,255,255,.15);transform:translateY(-50%) translateX(-2px)}

  /* --- Main footer body: 5 columns --- */
  .footer-body{
    display:grid;
    grid-template-columns: 1.35fr 1fr 1.1fr 1.15fr .85fr;
    gap:44px 40px;
    padding:60px 5vw 44px;
  }

  /* Lead column: brand card, description, socials, contact */
  .fb-lead .brand-mark{
    display:flex;align-items:center;gap:12px;margin-bottom:20px;
  }
  .fb-lead .brand-mark .ico{width:44px;height:54px;position:relative;flex-shrink:0}
  .fb-lead .brand-mark .ico img{width:100%;height:100%;object-fit:contain}
  .fb-lead .brand-mark .ico::after{
    content:"";position:absolute;inset:-6px;border-radius:50%;
    background:radial-gradient(closest-side,rgba(242,106,40,.4),transparent 70%);
    filter:blur(8px);opacity:.55;animation:starPulse 3.2s ease-in-out infinite;
    pointer-events:none;z-index:-1;
  }
  @keyframes starPulse{
    0%,100%{opacity:.35;transform:scale(1)}
    50%{opacity:.75;transform:scale(1.1)}
  }
  .fb-lead .brand-mark .wordmark{
    display:flex;flex-direction:column;line-height:1.1;
  }
  .fb-lead .brand-mark .wordmark strong{font-size:19px;font-weight:800;color:var(--blue-deep);letter-spacing:-.01em}
  .fb-lead .brand-mark .wordmark strong span{color:var(--orange)}
  .fb-lead .brand-mark .wordmark small{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.04em;margin-top:2px}

  .fb-lead p.desc{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:34ch;margin-bottom:22px}

  .fb-lead .socials{display:flex;gap:10px;margin-bottom:22px}
  .fb-lead .socials a{
    width:36px;height:36px;border-radius:10px;
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--blue-deep);background:#F1F4FA;transition:all .25s ease;
  }
  .fb-lead .socials a:hover{background:var(--orange);color:#fff;transform:translateY(-2px)}
  .fb-lead .socials svg{width:16px;height:16px}

  .fb-lead .contact{display:flex;flex-direction:column;gap:8px}
  .fb-lead .contact a,.fb-lead .contact span{
    font-size:14.5px;color:var(--blue-deep);font-weight:500;
    display:inline-flex;align-items:center;gap:8px;
    transition:color .2s ease;
  }
  .fb-lead .contact a:hover{color:var(--orange)}
  .fb-lead .contact .wa{
    color:var(--blue-deep);font-weight:600;
  }
  .fb-lead .contact .wa svg{width:15px;height:15px;color:#25D366}

  /* Link columns */
  .fb-col h4{
    font-size:12px;font-weight:700;color:var(--blue-deep);letter-spacing:.08em;
    text-transform:uppercase;margin-bottom:20px;
  }
  .fb-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
  .fb-col a{
    font-size:14.5px;color:#4B5468;font-weight:500;
    position:relative;padding-bottom:1px;transition:color .2s ease;
    display:inline-block;
  }
  .fb-col a::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:var(--orange);transform:scaleX(0);transform-origin:left;
    transition:transform .3s ease;
  }
  .fb-col a:hover{color:var(--orange)}
  .fb-col a:hover::after{transform:scaleX(1)}

  /* staggered reveal on scroll into view */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:translateY(0)}
  .reveal.d1{transition-delay:.05s}
  .reveal.d2{transition-delay:.15s}
  .reveal.d3{transition-delay:.25s}
  .reveal.d4{transition-delay:.35s}

  /* footer meta row */
  .footer-meta{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:22px 5vw 30px;border-top:1px solid var(--line);flex-wrap:wrap;
  }
  .footer-meta .copy{font-size:12.5px;color:var(--muted)}
  .footer-meta .credits{font-size:12.5px;color:var(--muted)}
  .footer-meta .credits a{color:var(--blue-deep);font-weight:600}
  .footer-meta .credits a:hover{color:var(--orange)}

  /* --- THE GIANT REVEAL WORDMARK --- */
  /* Mega text is sticky at BOTTOM of viewport (z-index 0). The card
     (z-index 2) sits above and scrolls UP normally. As the card scrolls
     up, more of the viewport is exposed BELOW where the card was, and
     the sticky mega text fills that revealed area — the card IS the
     layer that scrolls up to reveal the text. */
  .footer-wordmark-wrap{
    position:sticky;
    bottom:20px;
    z-index:0;
    padding:30px 2vw;
    overflow:hidden;
    pointer-events:none;
  }
  .footer{
    position:relative;
    padding:0 3vw 15vh;              /* moderate scroll room, less bottom whitespace */
  }
  .footer-wordmark{
    font-family:"Poppins",sans-serif;
    font-weight:900;
    font-size:clamp(56px,16.5vw,250px);
    line-height:1;
    letter-spacing:-.06em;
    text-align:center;
    white-space:nowrap;
    padding:.08em 0 .12em;
    background:linear-gradient(92deg,
      #D7E3F5 0%,
      #C7D6EE 30%,
      #C8D5EE 55%,
      #EED4C2 82%,
      #F1DDCB 100%);
    background-size:180% 100%;
    background-position:50% 50%;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    animation:footerMegaDrift 22s ease-in-out infinite;
    user-select:none;
    will-change:transform;
  }
  @keyframes footerMegaDrift{
    0%,100%{background-position:35% 50%}
    50%{background-position:65% 50%}
  }

  /* --- responsive --- */
  @media (max-width:1180px){
    .footer-body{grid-template-columns:1fr 1fr 1fr;gap:44px 32px}
    .fb-lead{grid-column:1/-1}
  }
  @media (max-width:820px){
    .footer-body{grid-template-columns:1fr 1fr}
    .band-cta{display:none}
    .top-band{height:96px}
    .band-mark{font-size:20px;left:6vw}
  }
  @media (max-width:520px){
    .footer-body{grid-template-columns:1fr;gap:36px}
    .footer-meta{justify-content:flex-start}
    .footer-wordmark{padding-bottom:.15em}
  }

  /* reduced motion */
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .footer-wordmark{transform:none!important}
  }

  /* =========================================================
     v19 footer tidy-up
     - new logo image in the brand block
     - 4-column grid matching the columns actually present
       (the 5-column grid left a large empty area)
     - less empty space below the giant wordmark
     ========================================================= */
  .fb-lead .brand-mark{margin-bottom:22px}
  .fb-lead .brand-mark .footer-logo{display:block;height:52px;width:auto}
  .footer-body{grid-template-columns:1.5fr 1fr 1fr .8fr;gap:44px 56px}
  .footer{padding-bottom:24px}
  .footer-wordmark-wrap{padding:12px 2vw 0}
  .footer-wordmark{padding:.04em 0 .06em}
  @media (max-width:1180px){
    .footer-body{grid-template-columns:1fr 1fr 1fr;gap:44px 32px}
  }
  @media (max-width:820px){
    .footer-body{grid-template-columns:1fr 1fr}
  }
  @media (max-width:520px){
    .footer-body{grid-template-columns:1fr;gap:36px}
    .fb-lead .brand-mark .footer-logo{height:44px}
  }