:root{
      --brand:#0C1A3D;
      --bg:#ffffff;
      --ink:#1d1f23;
      --muted:#6b7280;
      --card:#ffffff;
      --ring:rgba(12,26,61,.08);
      --shadow:0 10px 30px rgba(16,24,40,.08);
      --radius:16px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
      color:var(--ink);
      background:var(--bg);
    }

    .container{width:min(1200px,92vw); margin-inline:auto}
    .section{padding:clamp(56px,8vw,96px) 0}
    .section-white{background:#fff}
    .section-head{max-width:760px; margin:0 auto 32px; text-align:center}
    .section-title{
      font:800 clamp(28px,4vw,40px)/1.1 Poppins,Inter,sans-serif;
      color:var(--ink);
    }
    .section-sub{color:var(--muted); margin-top:8px}

    /* -------- Navbar -------- */
    .navbar{
      position:sticky; top:0; z-index:40;
      background:var(--brand); color:#fff;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .nav-inner{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
    }
    .brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none}
    .brand-logo{width:34px; height:34px; object-fit:contain; border-radius:8px}
    .brand-name{font:700 18px/1 Poppins,Inter,sans-serif; letter-spacing:.2px}

    .nav-links{display:flex; align-items:center; gap:22px}
    .nav-links a{color:#fff; text-decoration:none; font-weight:500; opacity:.95}
    .nav-links a:hover{opacity:1}

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:8px; padding:10px 16px; border-radius:10px;
      background:var(--brand); color:#fff; border:1px solid rgba(255,255,255,.22);
      box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
      cursor:pointer; text-decoration:none; font-weight:600;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:active{transform:translateY(0)}
    .btn-hero{background:#fff; color:var(--brand); border-color:#fff}
    .btn-ghost{
      background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff;
    }
    .btn-outline{
      background:transparent; border:1px solid rgba(255,255,255,.5);
    }
    .btn-sm{padding:8px 12px; font-size:.95rem}
    .btn-lg{padding:14px 20px; border-radius:12px}

    /* mobile nav button */
    .nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0}
    .nav-toggle span{width:22px; height:2px; background:#fff; display:block; border-radius:2px}

    /* -------- Hero -------- */
    .hero{
      background:linear-gradient(180deg, var(--brand) 0%, #112459 100%);
      color:#fff;
      min-height:100vh; display:flex; align-items:center;
    }
    .hero-inner{display:grid; grid-template-columns:1fr; align-items:center}
    .hero-title{margin:0 0 10px}
    .hero-sub{color:#dbe2ff; font-size:clamp(16px,2.4vw,18px); margin:10px 0 6px}
    .hero-desc{color:#e7ebff; opacity:.9; max-width:840px}
    .hero-cta{margin-top:24px; display:flex; gap:12px; flex-wrap:wrap}

    /* -------- Cards / Grid -------- */
    .grid{display:grid; gap:20px}
    .cards-4{grid-template-columns:repeat(4,1fr)}
    .card{
      background:var(--card); border:1px solid var(--ring); border-radius:var(--radius);
      padding:22px; box-shadow:var(--shadow); text-align:left;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .card h3{font:600 18px/1.25 Inter, sans-serif; margin:0 0 6px}
    .card p{color:#4b5563; margin:0}
    .card:hover{transform:translateY(-4px); box-shadow:0 14px 36px rgba(16,24,40,.12)}

    /* Section note */
    .section-note{
      text-align:center; color:#475569; max-width:820px; margin:40px auto 0;
    }

    /* -------- Footer -------- */
    .footer{
      background:#f8fafc; border-top:1px solid #e5e7eb; color:#111827;
    }
    .footer-inner{padding:32px 0; text-align:center}
    .footer-brand{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px}
    .footer-tag{color:#4b5563; margin:6px 0 16px}
    .footer-links{display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; color:#0f172a}
    .footer-links a{color:#0f172a; text-decoration:none; font-weight:600}
    .footer-links a:hover{text-decoration:underline}
    .copy{color:#6b7280; margin-top:10px}

    /* -------- Pages -------- */
    .page{min-height:100vh; display:flex; align-items:center}
    .page-inner{width:min(840px,92vw); margin-inline:auto}
    .page-title{font:700 clamp(28px,4vw,36px)/1.15 Poppins,Inter,sans-serif; margin:0 0 10px}
    .page-lead{color:#475569; margin:0 0 18px}
    .page-body{color:#374151; line-height:1.8}

    /* -------- Animations -------- */
    .reveal{opacity:0; transform:translateY(14px)}
    .reveal.in-view{opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease}
    .fade-in{} /* hook only */
    .slide-up{} /* hook only */

    /* -------- Responsive -------- */
    @media (max-width: 1100px){
      .cards-4{grid-template-columns:repeat(3,1fr)}
    }
    @media (max-width: 820px){
      .cards-4{grid-template-columns:repeat(2,1fr)}
      .nav-links{display:none}
      .nav-toggle{display:flex}
    }
    @media (max-width: 520px){
      .cards-4{grid-template-columns:1fr}
      .btn-hero, .btn-ghost{width:100%}
    }

    /* ===== Toast (center bottom, pill style) ===== */
    #toast-container {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
      z-index: 99999;
    }

    .toast {
      pointer-events: auto;
      display: inline-block;
      max-width: min(92vw, 420px); 
      width: auto;
      background: rgba(0,0,0,0.85);
      color: #fff;
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 14px;
      text-align: center;
      box-shadow: 0 8px 28px rgba(16,24,40,0.18);
      transform: translateY(18px);
      opacity: 0;
      transition: transform .28s cubic-bezier(.2,.9,.22,1), opacity .28s ease;
      word-break: break-word;
      white-space: normal;
      line-height: 1.3;
    }

    .toast.show {
      transform: translateY(0);
      opacity: 1;
    }

    .toast.success { background: #16a34a; }
    .toast.error   { background: #ef4444; }

    .toast .icon { margin-right: 8px; vertical-align: middle; }

    .social-links {
      margin: 1.5rem 0;
      display: flex;
      justify-content: center;
      gap: 1.5rem;
    }

    .social-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease;
    }

    .social-links a img {
      width: 36px;
      height: 36px;
      transition: transform 0.2s ease;
    }

    .social-links a:hover img {
      transform: translateY(-3px);
    }


    .bottom-bar {
      background: #fff;
      color: #333;
      text-align: center;
      padding: 0.75rem;
      font-size: 0.95rem;
      border-top: 1px solid #eee;
    }

    .bottom-bar a {
      color: #252525;
      font-weight: 600;
      text-decoration: none;
    }

    .bottom-bar a:hover {
      text-decoration: underline;
    }