/* ============================================================
   BITA v4 — Colour palette derived from logo
   Logo colours:
     Cloud interior dark:  #122113 / #132415
     Cloud gradient:       #e84039 (red) → #e6ae62 (amber) → #a9be38 (yellow-green)
     Arrow blue/cyan:      #0b92d6 → #009ee1
     Binary green:         #086c37 → #61ba46
     White page bg for readability
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800;900&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Logo-exact greens */
  --g-900: #0a1a0d;
  --g-800: #122113;
  --g-700: #1a3520;
  --g-600: #086c37;
  --g-500: #0f9f48;
  --g-400: #35ac58;
  --g-300: #61ba46;
  --g-200: #a8d48a;
  --g-100: #d4f0c4;
  --g-50:  #f0fdf4;

  /* Logo arrow blue/cyan */
  --b-700: #0069a8;
  --b-600: #0b92d6;
  --b-500: #009ee1;
  --b-400: #22b8f0;
  --b-200: #7dd8f8;
  --b-100: #cff2fd;
  --b-50:  #e8f9ff;

  /* Logo cloud gradient colours */
  --red:    #e84039;
  --amber:  #e6ae62;
  --yellow: #a9be38;
  --lime:   #61ba46;

  /* Neutrals */
  --n-900: #0d1510;
  --n-800: #1c2a1f;
  --n-700: #374151;
  --n-600: #4b5563;
  --n-500: #6b7280;
  --n-400: #9ca3af;
  --n-300: #d1d5db;
  --n-200: #e5e7eb;
  --n-100: #f3f4f6;
  --n-50:  #f9fafb;

  /* Active palette — mapped to logo colours */
  --clr-primary:       var(--b-600);     /* arrow blue */
  --clr-primary-dark:  var(--b-700);
  --clr-primary-light: var(--b-50);
  --acc:               var(--g-300);     /* lime green accent */
  --acc-light:         var(--g-50);
  --acc-bg:            var(--g-50);
  --acc-mid:           var(--g-100);
  --acc-border:        var(--g-200);
  --acc-dark:          var(--g-600);
  --acc-text:          var(--g-700);

  /* Backgrounds */
  --bg-page:  #ffffff;
  --bg-alt:   var(--n-50);
  --bg-dark:  var(--g-800);   /* logo interior dark */
  --bg-green: var(--g-50);

  /* Text */
  --txt-head:  var(--n-900);
  --txt-body:  var(--n-700);
  --txt-muted: var(--n-500);

  --border: var(--n-200);

  /* Fonts */
  --font-body: 'Inter','Segoe UI',Arial,sans-serif;
  --font-head: 'Plus Jakarta Sans','Inter',Arial,sans-serif;

  /* Shadows */
  --shd-sm:   0 2px 8px rgba(0,0,0,.05);
  --shd-md:   0 6px 20px rgba(0,0,0,.07);
  --shd-lg:   0 14px 44px rgba(0,0,0,.08);
  --shd-blue: 0 4px 18px rgba(11,146,214,.22);
  --shd-grn:  0 4px 18px rgba(97,186,70,.18);

  /* Border radii */
  --r-xs:   4px;  --r-sm:  8px;  --r-md:   12px;
  --r-lg:   18px; --r-xl:  24px; --r-pill: 9999px;

  /* Spacing */
  --s2:.5rem; --s3:.75rem; --s4:1rem;   --s5:1.25rem;
  --s6:1.5rem;--s8:2rem;   --s10:2.5rem;--s12:3rem;
  --s16:4rem; --s20:clamp(3rem,5vw,5rem);

  --ease: all 0.2s ease;
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--font-body);
  font-size:clamp(.9rem,1.5vw,1rem);
  color:var(--txt-body);
  background:var(--bg-page);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── TYPOGRAPHY ──────────────────────────────────────────── */
h1,h2,h3,h4,h5{font-family:var(--font-head);font-weight:800;line-height:1.2;color:var(--txt-head)}
h1{font-size:clamp(1.7rem,4.5vw,3rem)}
h2{font-size:clamp(1.35rem,3vw,2.2rem)}
h3{font-size:clamp(1.05rem,2vw,1.45rem)}
h4{font-size:clamp(.95rem,1.5vw,1.15rem)}
p{margin-bottom:var(--s4);line-height:1.72}
p:last-child{margin-bottom:0}
a{color:var(--b-600);text-decoration:none;transition:var(--ease)}
a:hover{color:var(--b-700)}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}

/* ── LAYOUT ──────────────────────────────────────────────── */
.container{width:100%;max-width:1160px;margin:0 auto;padding:0 clamp(1rem,3vw,1.5rem)}
.section{padding:var(--s20) 0}
.section-alt{background:var(--bg-alt)}
.section-green{background:var(--g-50)}
.section-dark{background:var(--g-800);color:#fff}

/* ── FLUID GRID ──────────────────────────────────────────── */
.grid-2   {display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
.grid-3   {display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.grid-4   {display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(285px,100%),1fr));gap:var(--s6)}
.grid-auto-sm{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(262px,100%),1fr));gap:var(--s5)}
.form-row {display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.grid-2>*,.grid-3>*,.grid-4>*,.grid-auto>*,.grid-auto-sm>*,.form-row>*{min-width:0}

/* ── SECTION HEADER ─────────────────────────────────────── */
.sec-hdr{text-align:center;margin-bottom:clamp(2rem,5vw,3rem)}
.sec-hdr h2{margin-bottom:var(--s3)}
.sec-hdr p{color:var(--txt-muted);max-width:560px;margin:0 auto;font-size:clamp(.9rem,1.5vw,1.05rem)}

/* ── TAGS ───────────────────────────────────────────────── */
.sec-tag{display:inline-block;padding:.3rem 1rem;border-radius:var(--r-pill);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:var(--s4)}
.tag-blue{background:var(--b-100);color:var(--b-700);border:1px solid var(--b-200)}
.tag-green{background:var(--g-100);color:var(--g-700);border:1px solid var(--g-200)}
.tag-sky{background:var(--b-50);color:var(--b-600);border:1px solid var(--b-200)}
.tag-acc{background:var(--g-100);color:var(--acc-text);border:1px solid var(--acc-border)}

/* ── BADGES ─────────────────────────────────────────────── */
.badge{display:inline-block;padding:.28rem .75rem;border-radius:var(--r-pill);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.badge-hot {background:#e84039;color:#fff}
.badge-new {background:var(--g-500);color:#fff}
.badge-best{background:var(--b-600);color:#fff}
.badge-acc {background:var(--g-600);color:#fff}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.72rem clamp(.9rem,2vw,1.6rem);border-radius:var(--r-md);font-family:var(--font-body);font-size:clamp(.82rem,1.4vw,.95rem);font-weight:700;cursor:pointer;border:2px solid transparent;transition:var(--ease);text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--b-600);color:#fff;border-color:var(--b-600);box-shadow:var(--shd-blue)}
.btn-primary:hover{background:var(--b-700);border-color:var(--b-700);color:#fff;transform:translateY(-2px)}
.btn-accent{background:var(--g-300);color:var(--n-900);border-color:var(--g-300);box-shadow:var(--shd-grn)}
.btn-accent:hover{background:var(--g-600);border-color:var(--g-600);color:#fff;transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--b-600);border-color:var(--b-400)}
.btn-outline:hover{background:var(--b-50);color:var(--b-700)}
.btn-dark{background:var(--g-800);color:#fff;border-color:var(--g-800)}
.btn-dark:hover{background:var(--g-700);color:#fff;transform:translateY(-2px)}
.btn-lg{padding:.88rem clamp(1.2rem,3vw,2rem);font-size:clamp(.9rem,1.6vw,1.05rem)}
.btn-sm{padding:.42rem .95rem;font-size:.82rem}

/* ── DIVIDER ────────────────────────────────────────────── */
.divider-grad{height:3px;background:linear-gradient(90deg,#e84039,#e6ae62,#a9be38,#0b92d6,#a9be38,#e84039);border:none;margin:0}

/* ── FORMS ──────────────────────────────────────────────── */
.form-group{margin-bottom:var(--s5)}
.form-group label{display:block;font-size:.79rem;font-weight:700;color:var(--n-700);margin-bottom:.38rem;text-transform:uppercase;letter-spacing:.04em}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.7rem 1rem;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:var(--font-body);font-size:.95rem;color:var(--txt-body);background:#fff;transition:var(--ease);outline:none;min-width:0}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--b-500);box-shadow:0 0 0 3px rgba(11,146,214,.12)}
.form-group textarea{resize:vertical;min-height:120px}

/* ── UTILITIES ──────────────────────────────────────────── */
.text-center{text-align:center} .text-muted{color:var(--txt-muted)}
.txt-blue{color:var(--b-600)}   .txt-green{color:var(--g-600)}
.txt-acc{color:var(--acc-text)} .txt-sky{color:var(--b-600)}
.mt-4{margin-top:var(--s4)} .mt-6{margin-top:var(--s6)}
.mt-8{margin-top:var(--s8)} .mt-12{margin-top:var(--s12)}
.mb-4{margin-bottom:var(--s4)} .mb-8{margin-bottom:var(--s8)}
.flex{display:flex} .flex-wrap{flex-wrap:wrap}
.items-center{align-items:center} .justify-between{justify-content:space-between}
.justify-center{justify-content:center}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .container{padding:0 var(--s4)}.section{padding:clamp(2rem,6vw,3rem) 0}
  .grid-2,.grid-3,.grid-4,.grid-auto,.grid-auto-sm{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}
@media(max-width:600px){.btn{padding:.65rem 1rem;font-size:.85rem}.btn-lg{padding:.72rem 1.2rem;font-size:.9rem}}
@media(max-width:480px){
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{justify-content:center}
}



/* ── BINARY RAIN BACKGROUND ── */
#bita-rain {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: -1;
}