/* ===========================================================================
   CampusOS — public site  (v2 "bright & friendly")
   ---------------------------------------------------------------------------
   DIRECTION
   The audience is a principal or trustee in an Indian town who compares this
   against Fedena, Entab and MyClassCampus — all bright, busy and screenshot-led.
   So: blue for trust, teal for freshness, and a warm amber that keeps the page
   approachable rather than corporate. Colour is used in blocks — tinted section
   bands and tinted icon chips — so the page reads visual rather than austere.

   TYPE
   Poppins (display) and Mukta (Devanagari) are both Indian Type Foundry faces
   that share proportions, so the planned Hindi articles sit inside the same
   system instead of being bolted on. Figtree carries body copy: warmer than
   Inter, still clean at 15px.

   SIGNATURE
   "One day at your institution" — a strip of a real school day, each moment a
   coloured card tied to the module that handles it. The structure encodes
   something true (this product is a day's operations) rather than decorating.

   Generous radii and soft blue-tinted shadows do the friendliness; the
   restraint is in sticking to three accent colours and never mixing more than
   two in one band.
   =========================================================================== */

:root{
  --ink:     #0F2440;
  --ink-2:   #26405E;
  --slate:   #5B7189;
  --muted:   #8CA0B8;

  --blue:    #1B7FD4;
  --blue-d:  #1565AC;
  --blue-t:  #EAF4FD;

  --teal:    #0FA9A0;
  --teal-d:  #0B8880;
  --teal-t:  #E4F6F4;

  --amber:   #F5A524;
  --amber-t: #FFF5E2;

  --coral:   #F2685C;
  --coral-t: #FDEEEC;

  --sky:     #F2F8FD;
  --white:   #FFFFFF;
  --line:    #E2EAF2;
  --line-2:  #CFDEEC;

  --sh-s: 0 1px 2px rgba(15,36,64,.05), 0 4px 12px rgba(27,127,212,.06);
  --sh:   0 2px 6px rgba(15,36,64,.06), 0 14px 34px rgba(27,127,212,.10);
  --sh-l: 0 4px 10px rgba(15,36,64,.07), 0 28px 64px rgba(27,127,212,.16);

  --r-s: 10px;
  --r:   16px;
  --r-l: 22px;
  --r-p: 100px;

  --display: "Poppins","Mukta",system-ui,sans-serif;
  --body:    "Figtree","Mukta",system-ui,-apple-system,sans-serif;

  --nav-h: 74px;
  --wrap:  1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{margin:0;background:var(--white);color:var(--ink-2);font-family:var(--body);
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-d)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;line-height:1.18;
  letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(33px,5.1vw,56px);line-height:1.08}
h2{font-size:clamp(26px,3.5vw,40px)}
h3{font-size:clamp(18px,2vw,22px);font-weight:600;letter-spacing:-.01em}
p{margin:0 0 16px}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0;top:0}

/* --- eyebrow: a friendly pill, not a hairline ---------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
  font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue);background:var(--blue-t);border-radius:var(--r-p);
  padding:7px 15px;margin:0 0 18px}
.eyebrow svg{width:15px;height:15px;flex:none}
.eyebrow.t{color:var(--teal-d);background:var(--teal-t)}
.eyebrow.a{color:#9A6206;background:var(--amber-t)}
.eyebrow.w{color:#fff;background:rgba(255,255,255,.16)}

/* --- buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-size:15.5px;font-weight:600;line-height:1;
  padding:16px 26px;border-radius:var(--r-p);border:2px solid transparent;cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .15s,color .15s,border-color .15s;text-align:center}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 6px 18px rgba(27,127,212,.30)}
.btn-primary:hover{background:var(--blue-d);border-color:var(--blue-d);color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(27,127,212,.38)}
.btn-teal{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:0 6px 18px rgba(15,169,160,.28)}
.btn-teal:hover{background:var(--teal-d);border-color:var(--teal-d);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-white{background:#fff;color:var(--blue);border-color:#fff}
.btn-white:hover{color:var(--blue-d);transform:translateY(-2px)}
.btn-block{width:100%}
.btn[disabled]{opacity:.6;cursor:default;transform:none}

/* --- header -------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:100;height:var(--nav-h);background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:30px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-mark{width:38px;height:38px;border-radius:11px;flex:none;
  background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:18px;box-shadow:0 4px 12px rgba(27,127,212,.32)}
.brand-name{font-family:var(--display);font-weight:700;font-size:21px;color:var(--ink);letter-spacing:-.03em}
.brand-name span{color:var(--teal)}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a{font-size:15px;font-weight:500;color:var(--slate);font-family:var(--display)}
.nav a:hover,.nav a[aria-current]{color:var(--blue)}
.nav .btn{padding:12px 22px;font-size:14.5px;color:#fff}
.nav-toggle{display:none;margin-left:auto;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-s);padding:10px 12px;cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
.nav-toggle span+span{margin-top:4px}
@media(max-width:940px){
  .nav-toggle{display:block}
  .nav{position:fixed;inset:var(--nav-h) 0 auto;background:#fff;flex-direction:column;align-items:stretch;
    gap:0;padding:10px 20px 22px;border-bottom:1px solid var(--line);box-shadow:var(--sh);display:none}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16.5px}
  .nav .btn{margin-top:16px;border-bottom:0}
}

/* --- bands & colour blocks ---------------------------------------------- */
.band{padding:clamp(56px,7.5vw,104px) 0}
.band--sky{background:var(--sky)}
.band--blue{background:var(--blue-t)}
.band--teal{background:var(--teal-t)}
.band--amber{background:var(--amber-t)}
.band--ink{background:linear-gradient(150deg,#0F2440 0%,#153A63 55%,#0D5C6B 100%);color:#C6D8EA}
.band--ink h2,.band--ink h3,.band--ink h4{color:#fff}
.band--ink p{color:#A8C0D8}
.band-head{max-width:62ch;margin-bottom:clamp(34px,4.5vw,54px)}
.band-head.mid{margin-inline:auto;text-align:center}
.band-head p{color:var(--slate);font-size:clamp(16.5px,1.8vw,19px);margin:16px 0 0}
.band--ink .band-head p{color:#A8C0D8}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:clamp(44px,6vw,80px) 0 clamp(52px,6vw,88px);
  background:radial-gradient(760px 460px at 88% 6%, rgba(15,169,160,.14), transparent 62%),
             radial-gradient(700px 420px at 6% 0%, rgba(27,127,212,.13), transparent 60%),
             linear-gradient(180deg,var(--sky) 0%,#fff 82%)}
.hero-grid{display:grid;grid-template-columns:1.02fr 1.08fr;gap:clamp(32px,4.5vw,60px);align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero h1{margin-bottom:20px;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--blue);white-space:nowrap;
  background-image:linear-gradient(rgba(245,165,36,.32),rgba(245,165,36,.32));
  background-repeat:no-repeat;background-size:100% .24em;background-position:0 88%;
  padding:0 .04em;border-radius:3px}
.hero-lead{font-size:clamp(17px,1.9vw,19.5px);color:var(--slate);max-width:50ch;margin-bottom:28px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.hero-trust span{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--slate);font-weight:500}
.hero-trust svg{width:17px;height:17px;color:var(--teal);flex:none}

/* --- screenshot frame ---------------------------------------------------- */
.shot{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-l)}
.shot-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#F7FAFD;border-bottom:1px solid var(--line)}
.shot-dot{width:10px;height:10px;border-radius:50%;flex:none}
.shot-dot:nth-child(1){background:#FF6058}
.shot-dot:nth-child(2){background:#FFBD2E}
.shot-dot:nth-child(3){background:#28C840}
.shot-url{flex:1;margin-left:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-p);
  padding:6px 14px;font-size:12.5px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot-url b{color:var(--blue);font-weight:600}
.shot-img{width:100%;display:block;background:var(--sky)}

/* Placeholder shown only while a real screenshot is missing. Designed to look
   deliberate rather than broken — but it is not a product screenshot and must
   be replaced before launch. */
.shot-ph{aspect-ratio:16/10;display:grid;place-content:center;gap:10px;text-align:center;padding:26px;
  background:linear-gradient(135deg,var(--blue-t),var(--teal-t))}
.shot-ph b{font-family:var(--display);font-size:16px;color:var(--ink)}
.shot-ph span{font-size:13.5px;color:var(--slate);max-width:34ch}
.shot-ph .ic{width:46px;height:46px;border-radius:14px;background:#fff;display:grid;place-items:center;
  margin:0 auto;box-shadow:var(--sh-s);color:var(--blue)}
.shot-ph .ic svg{width:22px;height:22px}

/* floating stat cards over the hero screenshot */
.hero-shot{position:relative}
.float{position:absolute;background:#fff;border-radius:var(--r);box-shadow:var(--sh);
  padding:13px 17px;display:flex;align-items:center;gap:12px;border:1px solid var(--line)}
.float .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.float .ic svg{width:19px;height:19px}
.float b{display:block;font-family:var(--display);font-size:15px;color:var(--ink);line-height:1.25}
.float span{font-size:12.5px;color:var(--muted)}
.float--a{left:-26px;top:10%}
.float--b{right:-22px;bottom:8%}
@media(max-width:1120px){.float--a{left:-10px}.float--b{right:-8px}}
@media(max-width:960px){.float{display:none}}

/* --- icon chips ---------------------------------------------------------- */
.chip{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px}
.chip svg{width:24px;height:24px}
.chip.b{background:var(--blue-t);color:var(--blue)}
.chip.t{background:var(--teal-t);color:var(--teal-d)}
.chip.a{background:var(--amber-t);color:#B77708}
.chip.c{background:var(--coral-t);color:#D2493C}

/* --- cards --------------------------------------------------------------- */
.cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.cards-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.cards-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards-4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(22px,2.6vw,30px);
  transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:transparent}
.card h3{margin-bottom:9px}
.card p{color:var(--slate);font-size:15px;margin:0}

/* --- the day strip: signature ------------------------------------------- */
.day{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
@media(max-width:900px){.day{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.day{grid-template-columns:1fr}}
.day-card{background:#fff;border-radius:var(--r-l);padding:24px;border:1px solid var(--line);
  position:relative;overflow:hidden}
.day-card::before{content:"";position:absolute;inset:0 0 auto;height:5px}
.day-card.b::before{background:var(--blue)}
.day-card.t::before{background:var(--teal)}
.day-card.a::before{background:var(--amber)}
.day-card.c::before{background:var(--coral)}
.day-time{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.05em;
  color:var(--muted);margin:6px 0 12px;display:block}
.day-card h3{font-size:18px;margin-bottom:8px}
.day-card p{font-size:14.5px;color:var(--slate);margin:0 0 14px}
.day-tag{display:inline-block;font-size:12px;font-weight:600;font-family:var(--display);
  padding:5px 12px;border-radius:var(--r-p);background:var(--sky);color:var(--slate)}

/* --- module grid with icons --------------------------------------------- */
.mods{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.mod{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px;transition:transform .18s,box-shadow .18s,border-color .18s}
.mod:hover{transform:translateY(-3px);box-shadow:var(--sh-s);border-color:var(--blue)}
.mod .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.mod .ic svg{width:18px;height:18px}
.mod b{font-family:var(--display);font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3}
.mod span{display:block;font-size:12px;color:var(--muted);margin-top:1px}

/* --- split feature rows -------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,68px);align-items:center}
.split.rev>*:first-child{order:2}
@media(max-width:900px){.split,.split.rev{grid-template-columns:1fr;gap:32px}.split.rev>*:first-child{order:0}}
.ticks{list-style:none;margin:22px 0 0;padding:0}
.ticks li{position:relative;padding:9px 0 9px 34px;font-size:15.5px;color:var(--ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:13px;width:21px;height:21px;border-radius:50%;
  background:var(--teal-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B8880' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}
.band--ink .ticks li{color:#C6D8EA}

/* --- stats band ---------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);gap:28px}}
.stat .n{font-family:var(--display);font-size:clamp(32px,4.4vw,48px);font-weight:700;color:#fff;line-height:1}
.stat .l{font-size:14.5px;color:#A8C0D8;margin-top:8px}

/* --- faq ----------------------------------------------------------------- */
.faq{max-width:82ch;margin-inline:auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;
  transition:box-shadow .18s,border-color .18s}
.faq details[open]{box-shadow:var(--sh-s);border-color:var(--blue)}
.faq summary{cursor:pointer;list-style:none;padding:20px 56px 20px 22px;position:relative;
  font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:20px;width:24px;height:24px;border-radius:50%;
  background:var(--blue-t) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7FD4' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/13px no-repeat;
  transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:0 22px 22px;color:var(--slate);font-size:15.5px}
.faq .answer p:last-child{margin-bottom:0}

/* --- forms --------------------------------------------------------------- */
.form-card{background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-l);padding:clamp(24px,3vw,34px)}
.form-card h3{font-size:22px;margin-bottom:6px}
.form-card .sub{color:var(--slate);font-size:15px;margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px;font-family:var(--display)}
.field .req{color:var(--coral)}
.field input,.field select,.field textarea{width:100%;font-family:var(--body);font-size:15.5px;color:var(--ink);
  background:var(--sky);border:2px solid transparent;border-radius:var(--r-s);padding:13px 15px;transition:border-color .15s,background .15s}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;background:#fff;border-color:var(--blue)}
.field .err{display:none;font-size:13px;color:var(--coral);margin-top:6px}
.field.has-error input,.field.has-error select{border-color:var(--coral);background:var(--coral-t)}
.field.has-error .err{display:block}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{font-size:12.5px;color:var(--muted);margin:14px 0 0;line-height:1.6;text-align:center}
.form-msg{display:none;border-radius:var(--r-s);padding:14px 16px;font-size:15px;margin-bottom:18px}
.form-msg.show{display:block}
.form-msg.ok{background:var(--teal-t);color:var(--teal-d);border:1px solid #B6E5E0}
.form-msg.bad{background:var(--coral-t);color:#C63F32;border:1px solid #F7C9C4}

/* --- cta ----------------------------------------------------------------- */
.cta-grid{display:grid;grid-template-columns:1fr 480px;gap:clamp(30px,4vw,58px);align-items:center}
@media(max-width:980px){.cta-grid{grid-template-columns:1fr}}

/* --- blog ---------------------------------------------------------------- */
.post-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;transition:transform .2s,box-shadow .2s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.post-card .thumb{aspect-ratio:16/9;width:100%;object-fit:cover;background:linear-gradient(135deg,var(--blue-t),var(--teal-t))}
.post-card .pc-body{padding:22px}
.post-card h3{font-size:18.5px;margin-bottom:9px}
.post-card p{font-size:14.5px;color:var(--slate);margin:0}
.post-meta{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  font-family:var(--display);color:var(--blue);background:var(--blue-t);padding:5px 12px;
  border-radius:var(--r-p);margin-bottom:12px}
.cat-nav{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px}
.cat-nav a{font-size:14px;font-weight:500;padding:9px 18px;border:1px solid var(--line);
  border-radius:var(--r-p);color:var(--slate);background:#fff}
.cat-nav a:hover,.cat-nav a[aria-current]{border-color:var(--blue);color:#fff;background:var(--blue)}
.pager{display:flex;gap:9px;justify-content:center;margin-top:40px}
.pager a,.pager span{font-family:var(--display);font-size:14.5px;font-weight:600;padding:11px 17px;
  border:1px solid var(--line);border-radius:var(--r-s);color:var(--slate);background:#fff}
.pager span{background:var(--blue);border-color:var(--blue);color:#fff}

.article{max-width:70ch;margin-inline:auto}
.article h2{font-size:clamp(23px,2.7vw,31px);margin:40px 0 15px}
.article h3{margin:30px 0 11px;font-size:21px}
.article p{font-size:17.5px;color:var(--ink-2);margin-bottom:19px}
.article ul,.article ol{padding-left:24px;margin-bottom:19px}
.article li{margin-bottom:9px}
.article blockquote{border-left:4px solid var(--teal);background:var(--teal-t);margin:28px 0;
  padding:18px 24px;border-radius:0 var(--r) var(--r) 0;color:var(--ink-2)}
.article img{border-radius:var(--r);margin:28px 0}
.article table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15.5px}
.article th,.article td{padding:13px 15px;border-bottom:1px solid var(--line);text-align:left}
.article th{background:var(--sky);font-weight:600;color:var(--ink);font-family:var(--display)}
html[lang^="hi"] .article p,html[lang^="hi"] .article li{line-height:1.95}

.crumb{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.crumb a{color:var(--slate)}
.crumb i{font-style:normal;padding:0 8px;color:var(--line-2)}

/* --- footer -------------------------------------------------------------- */
.ftr{background:var(--ink);color:#8FA8C4;padding:clamp(50px,6vw,74px) 0 28px;font-size:14.5px}
.ftr-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:clamp(26px,3vw,44px)}
@media(max-width:940px){.ftr-grid{grid-template-columns:1fr 1fr}.ftr-grid>div:first-child{grid-column:1/-1}}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr}}
.ftr h4{color:#fff;font-size:14.5px;font-family:var(--display);font-weight:600;margin:0 0 14px}
.ftr a{display:block;color:#8FA8C4;padding:6px 0;font-size:14px}
.ftr a:hover{color:#fff}
.ftr .brand-name{color:#fff}
.ftr p{color:#7E96B2;font-size:14px;line-height:1.75}
.ftr-btm{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.11);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:#6F87A3}

/* --- 404 / legal --------------------------------------------------------- */
.nf{padding:clamp(72px,10vw,132px) 0;text-align:center}
.nf .big{font-family:var(--display);font-size:clamp(70px,13vw,132px);font-weight:700;line-height:1;
  background:linear-gradient(135deg,var(--blue),var(--teal));-webkit-background-clip:text;
  background-clip:text;color:transparent;margin-bottom:10px}
.nf p{max-width:52ch;margin:16px auto 28px;color:var(--slate)}
.legal{max-width:74ch;margin-inline:auto}
.legal h2{font-size:clamp(21px,2.4vw,27px);margin:36px 0 13px}
.legal p,.legal li{color:var(--slate);font-size:16px}