:root{
--bg:#0b141c; /* pozadinska tamno-plava */
--text:#E8F2FF; /* skoro bela */
--muted:#B5C7DA; /* sekundarni tekst */
--cyan:#2AA0FF; /* akcenat */
--cyan-2:#6DD6FF; /* svetliji akcenat */
--btn-blue:#1D71F2; /* dugme Login */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text); background:var(--bg);
}
.container{max-width:1280px; margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:24px}


/* ===== NAVBAR ===== */
.nav{position:fixed; inset:0 0 auto 0; z-index:60; backdrop-filter:saturate(140%) blur(10px);
background:linear-gradient(180deg, rgba(8,25,43,.86) 0%, rgba(8,25,43,.55) 60%, rgba(8,25,43,0) 100%);
border-bottom:1px solid rgba(255,255,255,.06);
}
.nav .container{height:78px}


/* Leva strana – logo */
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo{flex:0 0 auto}
.brand-text{font-weight:800; letter-spacing:.4px; font-size:30px; color:#eaf5ff}
.brand-accent{color:#7ED6FF}


/* LINKOVI u meniju – razmak i izgled kao na slici */
.links { margin-left:auto; margin-right:26px; display:flex; align-items:center; gap:44px; }
.links a{
  color:#EAF2FF;           /* belo */
  opacity:.9;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.14em;    /* raširena slova */
  font-size:15px;
  padding:12px 0;
  text-transform:uppercase;
}
.links a.active{ color:#79B7FF; }  /* HOME aktivan svetloplav */
.links a:hover{ opacity:1; }

/* DUGMAD desno */
.actions{ display:flex; align-items:center; gap:24px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px;       /* veličina kao na slici */
  line-height:1; border-radius:14px;
  font-weight:800; letter-spacing:.08em; text-decoration:none;
  transition:transform .12s ease, filter .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover{ transform:translateY(-1px); }

/* Get Started – OUTLINE varijanta sa duplim plavim obrubom */
.btn-primary{
  background:transparent;
  color:#EAF4FF;
  border:2px solid #2A86FF;                  /* glavni okvir */
  box-shadow:0 0 0 3px rgba(42,134,255,.25); /* spoljašnji “drugi” okvir/glow */
}
.btn-primary:hover{
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(42,134,255,.35);
}

/* Login – puno plavo dugme sa blagom senkom */
.btn-solid{
  background:linear-gradient(180deg,#1E7BFF,#0F66E8);
  color:#FFFFFF;
  border:none;
  box-shadow:0 10px 18px rgba(24,96,214,.28), inset 0 0 0 1px rgba(255,255,255,.12);
}
.btn-solid:hover{ filter:brightness(1.05); }

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -3;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7,22,40,.6); /* tamni filter preko videa */
  z-index: -2;
}

.hero-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 60%, rgba(96,170,255,.15) 0 2px, transparent 2px 120px),
    radial-gradient(circle at 50% 60%, rgba(96,170,255,.12) 0 2px, transparent 2px 220px),
    radial-gradient(circle at 50% 60%, rgba(96,170,255,.09) 0 2px, transparent 2px 320px);
  opacity: .45;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 55%, transparent 0 65%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.7) 100%);
}
/* ===== Compliance section (kao na screenshotu) ===== */
.compliance{
  background:#0B141C;      /* vrlo tamna plava */
  padding: 120px 0;
}

.compliance-wrap{
  max-width: 1320px;       /* malo šire da stane razmak kao na slici */
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(560px, 720px) minmax(520px, 640px);
  align-items: center;
  justify-content: space-between;
  gap: 88px;               /* prostor između teksta i slike */
}

/* LEVA strana */
.compl-left h2{
  margin: 0 0 28px;
  font-size: 47px;         /* veliki naslov */
  text-align: center;
  line-height: 1.05;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: .2px;
}
.compl-left p{
  margin: 0;
  max-width: 520px;
  font-size: 20px;
  line-height: 1.9;
  color: #D6DEE7;
  text-align: center;      /* centrirano ispod naslova */
}

/* DESNA strana – slika sa duplim plavim okvirom */
.compl-card{
  margin: 0;
  justify-self: end;       /* poravnaj na desnu ivicu */
}
.compl-card img{
  display: block;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 4 / 3;     /* proporcija kao na slici */
  object-fit: cover;
  border-radius: 18px;
  /* prvi (unutrašnji) okvir */
  border: 3px solid #6AAEFF;
  /* drugi (spoljašnji) okvir + meka senka */
  box-shadow:
    0 0 0 3px rgba(42,134,255,.30),
    0 14px 30px rgba(0,0,0,.35);
  background:#0c1824;
}

/* RESPONSIVE */
@media (max-width: 1200px){
  .compl-left h2{ font-size: 40px;
        text-align: center;
 }
  
}
@media (max-width: 980px){
  .compliance-wrap{
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .compl-card{ justify-self: center; }
  .compl-left h2{ font-size: 48px; }
  .compl-left p{ font-size: 18px; }
}

/* ===== Features (4 kartice sa hover grid efektom) ===== */
.features{
  background: transparent;
  padding: 60px 0 120px;
}

.features-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 36px 36px;
}

/* Osnovni izgled kartice */
.feature-card{
  position: relative;
  background: rgba(13, 23, 33, .85);
  border-radius: 20px;
  border: 2px solid rgba(86, 155, 255, .35);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  padding: 36px 34px 32px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

/* Grid pattern pozadina */
.feature-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(transparent, transparent 40%, rgba(255,255,255,.04) 41%, transparent 42%) repeat,
    linear-gradient(90deg, transparent, transparent 40%, rgba(255,255,255,.04) 41%, transparent 42%) repeat;
  background-size: 120px 120px, 120px 120px;
  opacity: .1;                                /* slabo vidljivo u startu */
  pointer-events: none;
  transition: opacity .3s ease, transform .35s ease;
}

/* Hover animacija */
.feature-card:hover{
  transform: translateY(-6px);
  border-color: #2A86FF;
  background: rgba(16, 28, 40, .9);
  box-shadow: 0 20px 36px rgba(0,0,0,.45);
}
.feature-card:hover::before{
  opacity: .25;                               /* jači grid */
  transform: translateY(-2px);
}

/* Ikonica */
.ficon{
  width: 54px; height: 54px;
  display:grid; place-items:center;
  border-radius: 50%;
  background: rgba(24, 37, 50, .9);
  color: #6FAFFF;
  box-shadow: inset 0 0 0 1px rgba(111,175,255,.25);
  margin-bottom: 22px;
}
.ficon svg{ width:26px; height:26px }

/* Naslov i tekst */
.feature-card h3{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  color: #F1F6FF;
}
.feature-card p{
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: #C6D2DE;
}

/* Responsive */
@media (max-width: 980px){
  .features-grid{ grid-template-columns: 1fr; }
}
:root{
  --card-bg:#121A1E;
  --stroke:rgba(86,155,255,.22);
  --stroke-strong:rgba(86,155,255,.46);
  --grad-top:#2A3A45F3;
  --grad-bot:#1E7BFFE9;
}

.different{ background:transparent;}

.different-inner{
  max-width:1100px;                 /* uže */
  margin:0 auto; padding:0 22px;
  display:grid;
  grid-template-columns:1.6fr 1fr;  /* i dalje levo veće */
  grid-template-areas:"head head" "left right";
  column-gap:24px; row-gap:24px;
  align-items:start;
}

/* Header iznad kartica */
.diff-header{ grid-area:head; text-align:center; max-width:860px; margin:0 auto 4px; }
.diff-header h2{ margin:0 0 10px; font:800 46px/1.12 "Inter",system-ui; color:#fff; }
.diff-header p{ margin:0; font-size:16px; line-height:1.8; color:#d2dbe5; }

/* ==== LEVA KARTICA (kompaktna) ==== */
/* ==== LEVA KARTICA (kompaktnija, naslov u 3 reda) ==== */
/* ===== VARS ===== */
:root{
  --card-bg:#121A1E;
  --stroke:rgba(86,155,255,.22);
  --stroke-strong:rgba(86,155,255,.46);
  --grad-top:#2A3A45F3;   /* ~95% opacity */
  --grad-bot:#1E7BFFE9;   /* ~91% opacity */
}

/* ===== LAYOUT ===== */
.different{ background:transparent; }
.different-inner {
  max-width:1320px;
  margin:0 auto; 
  padding:0 16px;                 /* manje margine sa leve i desne */
  display:grid;
  grid-template-columns:1.9fr 1.1fr;  /* leva šira, desna uža */
  grid-template-areas:
    "head head"
    "left right";
  column-gap:28px; 
  row-gap:32px;
  align-items:stretch;            /* iste visine */
}


/* Header iznad kartica */
.diff-header{
  grid-area:head; text-align:center;
  max-width:860px; margin:0 auto 4px;
}
.diff-header h2{
  margin:0 0 10px;
  font:800 46px/1.12 "Inter",system-ui; color:#fff;
}
.diff-header p{
  margin:0; font-size:16px; line-height:1.8; color:#d2dbe5;
}

/* ===== LEVA KARTICA (kompaktna, niža, šira) ===== */

.diff-left {
  grid-area:left;
  display:grid; 
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:center;
  background:var(--card-bg);
  border:2px solid var(--stroke);
  border-radius:28px;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  padding:32px 36px;
  overflow:hidden;
}
.diff-left__text h3{
  margin:0 0 16px;
  font:800 26px/1.25 "Inter",system-ui;   /* manji naslov */
  text-transform:uppercase; letter-spacing:.015em;
  color:#EEF6FF;
  max-width:420px;                        /* lomi u ~3 reda */
  word-break:break-word;
}
.diff-left__text p{
  margin:0 0 18px;
  max-width:500px;
  font-size:15px; line-height:1.7; color:#C9D3DE;
}
.diff-left__media{
  justify-self:end; align-self:center;
}
.diff-left__media img{
  display:block; width:100%; max-width:420px;  /* manja slika da ne diže visinu */
  height:auto; border-radius:12px; object-fit:cover;
  filter:saturate(106%);
}

/* Dugme (outline – kompaktno) */
.btn-outline-lg{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:12px;
  color:#EAF4FF; text-decoration:none; font-weight:800; letter-spacing:.06em; font-size:14px;
  border:2px solid #2A86FF; box-shadow:0 0 0 3px rgba(42,134,255,.24);
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-outline-lg:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(42,134,255,.34);
}

/* ===== DESNA KARTICA (kompaktna) ===== */

.diff-right {
  grid-area:right;
  padding:32px 24px;
  border-radius:28px;
  background:linear-gradient(180deg, var(--grad-top) 0%, var(--grad-bot) 100%);
  border:2px solid var(--stroke-strong);
  box-shadow:0 22px 40px rgba(0,0,0,.45);
}
.diff-right h3{
  margin:0 0 16px;
  font:800 24px/1.12 "Inter",system-ui;
  text-transform:uppercase; letter-spacing:.04em; color:#F2F7FF;
}
.diff-right p{
  margin:0; font-size:16px; line-height:1.7; color:#E2E9F2;
}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .diff-header h2{ font-size:40px; }
}
@media (max-width:980px){
  .different-inner{
    grid-template-columns:1fr;
    grid-template-areas:"head" "left" "right";
    max-width:720px;
  }
  .diff-left{
    grid-template-columns:1fr; gap:18px;
    padding:26px; border-radius:24px;
  }
  .diff-left__media{ justify-self:center; }
  .diff-right{ border-radius:24px; padding:26px 22px; }
}
/* Reverse layout */
.different.reverse .different-inner {
  grid-template-columns: 1.1fr 1.9fr;   /* desna šira sada */
  grid-template-areas: "head head" "right left"; 
}
/* ===== About / The secret of our success ===== */
.about{
  padding:200px 0 90px;                 /* zategnuti vertikalni razmaci */
}
.about-inner{
  max-width:1320px;
  margin:0 auto;
  padding:0 24px;                       /* malo uži unutrašnji padding */
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  align-items:start;
}

/* Left stacked plates (vizuelni panel) */
.about-media{
  position:relative;
  height:500px;                         /* niža ploča da tekst više “diše” */
  margin:0;
}
.about-plate{
  position:absolute;
  left:0;
  right:120px;
  border-radius:20px;
}
.about-plate--shadow{
  bottom:0;
  height:84px;
  background:rgba(0,0,0,.34);
  filter:blur(12px);
  transform:translateY(16px);
  border-radius:26px;
}
.about-plate--image{
  top:0;
  bottom:34px;
  background:linear-gradient(180deg, rgba(46,74,101,.18), rgba(46,74,101,.18));
  border:2px solid rgba(86,155,255,.32);
  box-shadow:0 24px 44px rgba(0,0,0,.45);
  overflow:hidden;
}
.about-plate--image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Right side copy — MANJA TIPOGRAFIJA */
.eyebrow{
  margin:0 0 8px;
  font-weight:700;
  letter-spacing:.12em;
  color:#9FB6CC;
  text-transform:uppercase;
  font-size:12px;                       /* manje */
}

.about-title{
  margin:0 0 14px;
  font-weight:800;
  font-size:40px;                       /* manje */
  line-height:1.2;
  color:#F3F7FD;
}

.about-lead{
  margin:0 0 18px;
  color:#D4DEE8;
  line-height:1.6;
  font-size:14px;                       /* manje */
  max-width:560px;                      /* prijatna širina čitanja */
}

/* Bullet lista sa check ikonama — MANJE */
.about-list{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:14px;
}
.about-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
}
.chk{
  width:28px; height:28px;              /* manji “kvadrat” */
  display:grid; place-items:center;
  border-radius:8px;
  color:#74B4FF;
  background:rgba(34,56,82,.6);
  box-shadow:inset 0 0 0 1px rgba(116,180,255,.3);
}
.chk svg{ width:16px; height:16px; }     /* manja ikonica */

.about-list h4{
  margin:0 0 2px;
  font-weight:700;
  letter-spacing:.04em;
  color:#F1F6FF;
  font-size:15px;                       /* manji podnaslov */
}
.about-list p{
  margin:0;
  color:#C7D2DE;
  line-height:1.6;
  font-size:13px;                       /* manji opis */
}

/* Responsive */
@media (max-width:1180px){
  .about-media{ height:440px; }
  .about-title{ font-size:36px; }
}
@media (max-width:980px){
  .about-inner{ grid-template-columns:1fr; gap:28px; }
  .about-media{ order:2; height:360px; }
  .about-title{ font-size:32px; }
  .about-lead{ font-size:13.5px; }
}
/* ===== CTA Affiliate ===== */
.cta-affiliate{
  padding:72px 0;                 /* prostor oko sekcije */
}
.cta-affiliate__inner{
  max-width:1320px;               /* poravnanje sa ostalim sekcijama */
  margin:0 auto;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}

.cta-affiliate__title{
  margin:0;
  font-weight:800;
  font-size:72px;                 /* veliki, mek naslov kao na slici */
  line-height:1.08;
  letter-spacing:.01em;
  color:#F3F7FD;
}

/* Dugme */
.btn-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:18px 28px;
  min-width:280px;                /* širina kao na slici */
  border-radius:16px;
  background:#2A86FF;
  color:#EAF4FF;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(42,134,255,.35), inset 0 -2px 0 rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(42,134,255,.42), inset 0 -2px 0 rgba(0,0,0,.12);
  background:#2E8FFF;
}

/* Responsive */
@media (max-width:1100px){
  .cta-affiliate__title{ font-size:50px; }
}
@media (max-width:820px){
  .cta-affiliate{ padding:48px 0; }
  .cta-affiliate__inner{
    flex-direction:column;
    text-align:left;              /* može i center ako želiš */
    align-items:flex-start;
  }
  .btn-cta{ min-width:unset; width:auto; }
}
/* Testimonials */
.testimonials{ padding:72px 0; }
.testi-wrap{ max-width:1320px; margin:0 auto; padding:0 28px; }

.testi-head{text-align:center; margin-bottom:48px;}
.testi-head h2{margin:0 0 10px; font:800 52px/1.1 "Inter",system-ui; color:#fff;}
.testi-head p{margin:0; color:#C9D3DE; font-size:18px; line-height:1.8;}

.testi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.testi-card{
  position:relative;
  background:rgba(15,22,28,.65);
  border:1px solid rgba(86,155,255,.35);
  border-radius:6px;
  padding:80px 24px 28px; /* ostavi prostor za sliku iznad */
  min-height:300px;
  text-align:left;
}

.testi-avatar{
  position:absolute;
  top:-60px;             /* koliko izlazi iznad */
  left:50%;
  transform:translateX(-50%);
  width:120px;           /* dimenzija slike */
  height:auto;
  object-fit:cover;
  border:none;           /* nema kruga */
}

.testi-body{ position:relative; }
.testi-quotes{
  position:absolute; top:0; right:0;
  font-size:64px; font-weight:800;
  color:#4ea6ff;
}
.testi-name{
  margin:0 0 10px; font:800 20px/1.2 "Inter",system-ui; color:#fff;
}
.testi-name span{font-weight:600; font-size:16px; color:#9FB0BF;}
.testi-body p{margin:0; font-size:16px; line-height:1.7; color:#C7D2DE;}

/* Responsive */
@media(max-width:1024px){
  .testi-grid{ grid-template-columns:1fr; }
  .testi-card{ padding:80px 22px 28px; }
}
.footer{
  background:#0d141c;
  padding:64px 0 40px;
  text-align:center;
}
.footer-inner{
  max-width:1320px;
  margin:0 auto;
  padding:0 28px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:32px;
  margin-bottom:48px;
  text-align:left;
}
.footer-logo{ max-width:180px; }

.footer-col h4{
  margin:0 0 14px;
  font-weight:700;
  font-size:18px;
  color:#fff;
  border-bottom:2px solid #2a86ff;
  display:inline-block;
  padding-bottom:6px;
}
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col ul li{ margin-bottom:10px; }
.footer-col ul li a{
  color:#d2dee8; text-decoration:none;
  transition:color .2s ease;
}
.footer-col ul li a:hover{ color:#2a86ff; }

.footer-col p{
  margin:6px 0;
  color:#d2dee8;
  font-size:15px;
}

.footer-social{
  margin-bottom:32px;
}
.footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  margin:0 6px;
  background:#fff;
  color:#000;
  font-size:18px;
  border-radius:6px;
  transition:all .2s ease;
}
.footer-social a:hover{
  background:#2a86ff;
  color:#fff;
}

.footer-download p{
  margin:0 0 12px;
  font-weight:700;
  font-size:18px;
  color:#fff;
}
.store-buttons img{
  height:46px;
  margin:0 8px;
}

@media(max-width:1024px){
  .footer-inner{ grid-template-columns:1fr 1fr; text-align:center; }
}
@media(max-width:680px){
  .footer-inner{ grid-template-columns:1fr; gap:28px; }
}
.logo-img {
  width: 164px;   /* prilagodi veličinu */
  height: auto;  /* proporcionalno */
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px; /* razmak između slike i teksta */
}


/* === Sirius brand tint pack === */
:root{
  --brand-300:#4FE8D8;
  --brand-500:#15D1C1;
  --brand-600:#0FB3A6;
  --brand-700:#0A8E8A;
  --ink-900:#0C141A;
  --surface:#0F1A22;
  --text:#E6F7F5;
  --muted:#9CCBC6;
}
a, .link { color: var(--brand-300); }
a:hover, .link:hover { color: var(--brand-500); }

.btn-primary, .btn.btn-primary{
  background: linear-gradient(180deg,var(--brand-500),var(--brand-600)) !important;
  color:#041314 !important;
  border:1px solid var(--brand-600) !important;
  box-shadow: 0 6px 20px rgba(21,209,193,.25) !important;
}
.btn-primary:hover, .btn.btn-primary:hover{
  background: linear-gradient(180deg,var(--brand-300),var(--brand-500)) !important;
  box-shadow: 0 8px 28px rgba(21,209,193,.35) !important;
}
.btn-outline, .btn.btn-outline{
  background: transparent !important;
  color: var(--brand-300) !important;
  border:1px solid var(--brand-700) !important;
}
.btn-outline:hover, .btn.btn-outline:hover{
  background: rgba(21,209,193,.08) !important;
  border-color: var(--brand-600) !important;
}

.card, .feature-card{
  background: var(--surface) !important;
  border:1px solid rgba(21,209,193,.18) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.25) !important;
}
.card:hover, .feature-card:hover{
  border-color: var(--brand-500) !important;
  box-shadow: 0 10px 38px rgba(21,209,193,.25) !important;
}

.icon-wrap, .icon-circle, .feature-icon{
  background: radial-gradient(60% 60% at 50% 40%, rgba(21,209,193,.35), rgba(21,209,193,.08));
  border:1px solid rgba(21,209,193,.35);
}

.section-title{
  position:relative;
}
.section-title::after{
  content:"";
  display:block;
  width:64px;height:2px;margin-top:.6rem;
  background: linear-gradient(90deg,var(--brand-300),var(--brand-600));
  border-radius:2px;
}

.navbar .nav-link.active,
.nav .nav-link.active{
  color:#fff !important;
}
.navbar .nav-link.active::after,
.nav .nav-link.active::after{
  content:"";
  display:block;height:2px;margin-top:6px;
  background: linear-gradient(90deg,var(--brand-300),var(--brand-600));
  border-radius:2px;
}

/* Hero tint overlays */
.hero, #hero{
  position:relative;
  background: radial-gradient(1000px 600px at 20% -10%, rgba(21,209,193,.10), transparent),
              radial-gradient(800px 500px at 90% 10%, rgba(10,142,138,.10), transparent);
}
.hero .media::after, #hero .media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(12,20,26,.35), rgba(12,20,26,.35)),
              linear-gradient(90deg, rgba(21,209,193,.15), rgba(10,142,138,.08));
  mix-blend-mode: multiply;
  pointer-events:none;
}

:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; }
::selection{ background: rgba(21,209,193,.35); color:#041314; }
/* === /Sirius brand tint pack === */



/* === Sirius gradient overlay (turquoise -> deep blue) === */
body{
  background-color: #0C141A;
  position: relative;
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(79,232,216,0.12), rgba(79,232,216,0) 60%),
    linear-gradient(180deg, rgba(21,209,193,0.10) 0%, rgba(6,18,32,0.0) 30%),
    radial-gradient(1000px 600px at 90% 10%, rgba(10,142,138,0.12), rgba(10,142,138,0) 60%),
    linear-gradient(120deg, rgba(10,30,60,0.35) 0%, rgba(4,12,24,0.75) 60%, rgba(3,10,20,0.95) 100%);
  pointer-events: none;
  z-index: -1;
}

/* === Features: timeline layout (icon left, text right, vertical flow) === */
#features .feature-list{ /* ensure container spans full width */
  display: block;
}
#features .feature-card,
#features .card{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px 24px;
  align-items: start;
  width: 100%;
  margin: 16px 0;
  border-radius: 16px;
}
#features .feature-card .icon-wrap,
#features .card .icon-wrap{
  width: 48px; height: 48px;
  display: grid; place-items: center;
  margin: 16px 0 0 16px;
  border-radius: 50%;
}
#features .feature-card h3, 
#features .card h3{
  margin: 12px 0 6px 0;
}
#features .feature-card p, 
#features .card p{
  margin: 0 16px 16px 0;
  color: var(--muted, #9CCBC6);
}
/* Fake timeline rail */
#features .feature-card::before, 
#features .card::before{
  content:"";
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: center;
  width: 2px; height: calc(100% + 32px);
  background: linear-gradient(var(--brand-300, #4FE8D8), rgba(79,232,216,0));
  border-radius: 2px;
  transform: translateY(-8px);
  opacity: .35;
}

/* === Asymmetry: highlight "Cargo & Asset Intelligence" if present === */
#features .card:has(h3:matches(. , *):contains("Cargo & Asset Intelligence")){
  border-width: 2px;
  box-shadow: 0 16px 50px rgba(21,209,193,.30);
}
@supports not (selector(:has(*))) {
  /* Fallback: first card highlight */
  #features .card:first-of-type{
    border-width: 2px;
    box-shadow: 0 16px 50px rgba(21,209,193,.30);
  }
}



/* === Sirius Features: Asymmetric Grid === */
#features .feature-list{
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 992px){
  #features .feature-list{
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}

/* Cards behave like blocks again (override timeline grid) */
#features .card, #features .feature-card{
  display: block !important;
  padding: 20px;
}

/* Remove timeline rail */
#features .card::before, #features .feature-card::before{ content: none !important; }

/* Featured large card spans 2 columns on desktop */
@media (min-width: 992px){
  #features .featured-card{ grid-column: span 2; }
}

/* Optional: featured visual emphasis */
#features .featured-card{
  border-width: 2px !important;
  box-shadow: 0 16px 50px rgba(21,209,193,.30) !important;
  background: linear-gradient(180deg, rgba(21,209,193,.05), rgba(21,209,193,.00)) !important;
}

/* Headings spacing inside cards */
#features .card h3, #features .feature-card h3{ margin-top: 6px; margin-bottom: 8px; }
#features .card p,  #features .feature-card p{ margin-bottom: 0; }