:root{
    /* Official savi brand palette (Brand Guidelines v2.0) */
    --savi-green: #224B50;      /* primary / bg */
    --savi-green-deep: #172F33; /* derived darker tint, for card depth */
    --savi-green-mid: #1C3D42;  /* derived mid tint, for stripes */
    --savi-mint: #4DFFA8;       /* savi light green */
    --savi-blue: #00CCCC;       /* savi blue */
    --savi-grey: #F6F6EE;       /* savi grey */
    --savi-white: #FFFFFF;

    --font-display: Arial, Helvetica, sans-serif;   /* CSP-safe local/system fallback */
    --font-body: Arial, Helvetica, sans-serif;      /* CSP-safe local/system fallback */

    --maxw: 1180px;
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    background: var(--savi-green);
    color: var(--savi-white);
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img{ display:block; max-width:100%; }
  a{ color: inherit; text-decoration:none; }
  .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
  ::selection{ background: var(--savi-mint); color: var(--savi-green); }
  :focus-visible{ outline: 2px solid var(--savi-mint); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  }

  /* Brand rule 1.3: savi is always written all lowercase, bold italic in body copy */
  .savi-name{ font-style: italic; font-weight: 700; }

  /* ---------- RIBBON BACKGROUND (brand graphic device 4.1) ---------- */
  /* Diagonal bands, single consistent angle/weight, low-contrast tonal variation */
  .ribbon-bg{
    position: absolute; inset:0;
    overflow: hidden;
    z-index: 0;
    background:
      repeating-linear-gradient(
        -34deg,
        var(--savi-green-mid) 0px, var(--savi-green-mid) 46px,
        var(--savi-green) 46px, var(--savi-green) 130px
      );
    opacity: 0.6;
  }
  .ribbon-fade{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(34,75,80,0) 0%, var(--savi-green) 92%);
  }

  /* ---------- TOP BAR ---------- */
  header.site{
    position: relative; z-index: 5;
    padding: 28px 0 0;
  }
  header.site .wrap{
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
  .logo-mark img{ height: 34px; width:auto; }
  .header-right{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  }
  .login-btn{
    display:inline-flex; align-items:center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--savi-green);
    background: var(--savi-mint);
    padding: 9px 20px;
    border-radius: 999px;
    transition: background .18s ease, transform .18s ease;
  }
  .login-btn:hover{
    background: var(--savi-white);
    transform: translateY(-1px);
  }
  .status-pill{
    display:inline-flex; align-items:center; gap:8px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--savi-grey);
    background: rgba(246,246,238,0.08);
    border: 1px solid rgba(246,246,238,0.18);
    padding: 8px 16px;
    border-radius: 999px;
  }
  .status-pill .blip{
    width:7px; height:7px; border-radius:50%;
    background: var(--savi-mint);
    box-shadow: 0 0 0 0 rgba(77,255,168,0.6);
    animation: blip 2s infinite;
  }
  @keyframes blip{
    0%{ box-shadow: 0 0 0 0 rgba(77,255,168,0.5); }
    70%{ box-shadow: 0 0 0 7px rgba(77,255,168,0); }
    100%{ box-shadow: 0 0 0 0 rgba(77,255,168,0); }
  }

  /* ---------- HERO ---------- */
  .hero{
    position: relative;
    padding: 64px 0 8px;
    text-align:center;
  }
  .hero .wrap{ position:relative; z-index:2; }
  h1{
    font-family: var(--font-display);
    font-weight: 800;
    font-style: italic;
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    max-width: 16ch;
    margin: 0 auto 22px;
  }
  h1 .accent{ color: var(--savi-mint); }
  .hero-sub{
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: rgba(246,246,238,0.85);
    max-width: 34ch;
    margin: 0 auto;
  }
  .hero-sub .c-blue{ color: var(--savi-blue); font-weight:600; }
  .hero-sub .c-mint{ color: var(--savi-mint); font-weight:600; }

  /* ---------- NOTICE / COUNTRY SELECT ---------- */
  .notice{
    position: relative; z-index: 2;
    margin: 44px 0 0;
  }
  .notice-card{
    background: rgba(23,47,51,0.72);
    border: 1px solid rgba(246,246,238,0.14);
    border-radius: 20px;
    padding: 40px clamp(20px, 5vw, 48px);
    backdrop-filter: blur(6px);
  }
  .notice-eyebrow{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--savi-mint);
    margin-bottom: 14px;
  }
  .notice h2{
    font-family: var(--font-display);
    font-weight: 800;
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.05rem);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
  }
  .notice p{
    color: rgba(246,246,238,0.8);
    max-width: 56ch;
    margin-bottom: 30px;
    font-size: 1rem;
  }
  .country-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
  }
  .country-link{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background: rgba(246,246,238,0.06);
    border: 1px solid rgba(246,246,238,0.16);
    border-radius: 12px;
    padding: 16px 18px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.98rem;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
  }
  .country-link:hover{
    transform: translateY(-2px);
    border-color: var(--savi-mint);
    background: rgba(77,255,168,0.08);
  }
  .country-link .go{
    color: var(--savi-mint);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 800;
  }
  .country-link.disabled{
    opacity: 0.45;
    pointer-events: none;
  }
  .country-note{
    margin-top: 20px;
    font-size: 0.85rem;
    color: rgba(246,246,238,0.55);
  }
  .country-note a{ color: var(--savi-mint); text-decoration: underline; }

  /* ---------- SECTIONS ---------- */
  section{ position: relative; z-index: 2; padding: 88px 0; }
  .section-head{ text-align:center; max-width: 640px; margin: 0 auto 48px; }
  .section-head .kicker{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--savi-blue);
    margin-bottom: 14px;
  }
  .section-head h2{
    font-family: var(--font-display);
    font-weight: 800;
    font-style: italic;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: -0.01em;
  }

  /* ---------- CAPABILITIES GRID ---------- */
  .cap-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 40px;
    max-width: 860px;
    margin: 0 auto;
  }
  .cap-item{
    display:flex; align-items:center; gap:18px;
  }
  .cap-icon{
    flex: none;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1.5px solid var(--savi-mint);
    display:flex; align-items:center; justify-content:center;
    color: var(--savi-mint);
  }
  .cap-icon svg{ width: 24px; height: 24px; }
  .cap-item h3{
    font-family: var(--font-display);
    font-weight: 800;
    font-style: italic;
    font-size: 1.08rem;
    letter-spacing: -0.005em;
  }

  /* ---------- STATS STRIP ---------- */
  .stats-wrap{ padding-top: 0; padding-bottom: 0; }
  .stats-card{
    background: var(--savi-green-deep);
    border: 1px solid rgba(246,246,238,0.1);
    border-radius: 18px;
    padding: 40px clamp(20px, 5vw, 48px);
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .stat{ }
  .stat .num{
    font-family: var(--font-display);
    font-weight: 800;
    font-style: italic;
    color: var(--savi-mint);
    font-size: clamp(1.8rem, 3.4vw, 2.5rem);
    line-height: 1;
    margin-bottom: 10px;
  }
  .stat .label{
    font-size: 0.92rem;
    color: rgba(246,246,238,0.75);
    max-width: 24ch;
  }

  /* ---------- TRUST + DEMO ---------- */
  .trust-demo{
    display:flex; align-items:center; justify-content:space-between;
    gap: 32px; flex-wrap: wrap;
  }
  .trust-line{
    display:flex; align-items:flex-start; gap:14px;
    max-width: 46ch;
  }
  .trust-line svg{ flex:none; width:28px; height:28px; color: var(--savi-mint); margin-top:2px; }
  .trust-line p{
    font-size: 0.98rem;
    color: rgba(246,246,238,0.85);
  }
  .trust-line .c-mint{ color: var(--savi-mint); font-weight:600; }

  .demo{
    display:flex; align-items:center; gap: 16px;
  }
  .qr{
    width: 96px; height: 96px;
    background: var(--savi-white);
    border-radius: 10px;
    padding: 8px;
    flex: none;
  }
  .qr svg,
  .qr img{ width:100%; height:100%; object-fit:contain; }
  .demo-text{
    font-family: var(--font-display);
    font-weight: 800;
    font-style: italic;
    font-size: 1.15rem;
  }
  .demo-text span{ color: var(--savi-mint); text-decoration: underline; }

  /* ---------- FOOTER ---------- */
  footer{
    position: relative; z-index: 2;
    border-top: 1px solid rgba(246,246,238,0.12);
    padding: 40px 0;
  }
  footer .wrap{
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap: wrap; gap: 16px;
  }
  footer .logo-mark img{ height: 22px; }
  footer .legal{
    font-size: 0.78rem;
    color: rgba(246,246,238,0.55);
    text-align: right;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 760px){
    .cap-grid{ grid-template-columns: 1fr; max-width: 420px; }
    .stats-card{ grid-template-columns: 1fr; }
    .trust-demo{ flex-direction: column; align-items: flex-start; }
    section{ padding: 64px 0; }
    footer .wrap{ flex-direction: column; align-items:flex-start; }
    footer .legal{ text-align: left; }
  }