/* =================== TOKENS =================== */
:root{
  --bg:#0b141c;
  --text:#E8F2FF;
  --muted:#B5C7DA;
  --cyan:#2AA0FF;
  --cyan-2:#6DD6FF;
  --btn-blue:#1D71F2;

  --brand-300:#4FE8D8;
  --brand-500:#15D1C1;
  --brand-600:#0FB3A6;
  --brand-700:#0A8E8A;

  --surface:#0F1A22;

  --nav-h:78px;              /* visina nav bara desktop */
  --nav-h-mobile:64px;       /* visina nav bara mobile */
}

*{ 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);
  /* fiksirani header ne preklapa sadržaj */
  padding-top:var(--nav-h);
}
@media (max-width:980px){ body{ padding-top:var(--nav-h-mobile); } }

img{ max-width:100%; height:auto; display:block; }

.container{ max-width:1280px; margin:0 auto; padding:0 28px; }

/* =================== 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-row{
  height:var(--nav-h);
  display:flex; align-items:center; gap:24px;
}
@media (max-width:980px){ .nav-row{ height:var(--nav-h-mobile); gap:12px; } }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-img{ width:164px; height:auto; display:block; }

.links{
  margin-left:auto; margin-right:26px;
  display:flex; align-items:center; gap:44px;
}
.links a{
  color:#EAF2FF; opacity:.9; text-decoration:none;
  font-weight:800; letter-spacing:.14em; font-size:15px;
  padding:12px 0; text-transform:uppercase;
}
.links a.active{ color:#79B7FF; }
.links a:hover{ opacity:1; }

.actions{ display:flex; align-items:center; gap:24px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; 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); }
.btn-primary{
  background:transparent; color:#EAF4FF;
  border:2px solid #2A86FF; box-shadow:0 0 0 3px rgba(42,134,255,.25);
}
.btn-primary:hover{ background:rgba(255,255,255,.06); box-shadow:0 0 0 3px rgba(42,134,255,.35); }
.btn-solid{
  background:linear-gradient(180deg,#1E7BFF,#0F66E8); color:#fff; 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); }

/* ===== Burger (no-JS) ===== */
#nav-toggle{ display:none; }

.burger{
  display:none; /* desktop hide */
  width:44px; height:34px; cursor:pointer; user-select:none;
  border-radius:10px; padding:6px 8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(8,25,43,.35);
  gap:6px; align-items:center; justify-content:center;
}
.burger span{
  display:block; width:24px; height:2px; background:#EAF2FF; border-radius:2px;
  transition: transform .25s ease, opacity .2s ease;
}

/* Mobile nav panel */
@media (max-width:980px){
  .burger{ display:flex; order:3; }           /* desno od branda */
  .brand{ order:1; }
  .links{ order:4; }
  .actions{ order:5; }

  .links, .actions{
    position:absolute; left:0; right:0; top:var(--nav-h-mobile);
    background:rgba(8,25,43,.92);
    backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid rgba(255,255,255,.06);
    display:flex; flex-direction:column; align-items:stretch;
    margin:0; gap:0; padding:0;
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  .links a{ padding:16px 22px; border-top:1px solid rgba(255,255,255,.06); letter-spacing:.12em; }
  .actions{ padding:14px; gap:12px; border-top:1px solid rgba(255,255,255,.06); }
  .actions .btn{ width:100%; }

  /* open state */
  #nav-toggle:checked ~ .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  #nav-toggle:checked ~ .burger span:nth-child(2){ opacity:0; }
  #nav-toggle:checked ~ .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  #nav-toggle:checked ~ .links,
  #nav-toggle:checked ~ .actions{ max-height:65vh; }
}

/* =================== HERO =================== */
.hero{
  position:relative; min-height:clamp(64vh, 88vh, 100vh);
  display:grid; place-items:center; isolation:isolate; overflow:hidden;
}
.hero-media{ position:absolute; inset:0; }
.hero-video{
  width:100%; height:100%; object-fit:cover;
  /* spreči “poskakivanje” na mobilnom */
  transform:translateZ(0);
}
.hero-overlay{ position:absolute; inset:0; background:rgba(7,22,40,.6); z-index:1; }
.hero-rings{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  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; z-index:3;
  background: radial-gradient(80% 60% at 50% 55%, transparent 0 65%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.7) 100%);
}

/* =================== COMPLIANCE =================== */
.compliance{ background:#0B141C; padding:120px 0; }
.compliance-wrap{
  max-width:1320px; 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;
}
.compl-left h2{
  margin:0 0 28px; font-size:47px; text-align:center; line-height:1.05; font-weight:800; color:#fff; letter-spacing:.2px;
}
.compl-left p{
  margin:0; max-width:520px; font-size:20px; line-height:1.9; color:#D6DEE7; text-align:center;
}
.compl-card{ margin:0; justify-self:end; }
.compl-card img{
  width:100%; max-width:640px; aspect-ratio:4/3; object-fit:cover;
  border-radius:18px; border:3px solid #6AAEFF;
  box-shadow:0 0 0 3px rgba(42,134,255,.30), 0 14px 30px rgba(0,0,0,.35);
  background:#0c1824;
}
@media (max-width:1200px){ .compl-left h2{ font-size:40px; } }
@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:42px; }
  .compl-left p{ font-size:18px; }
}
@media (max-width:680px){
  .compliance{ padding:72px 0; }
  .compl-left h2{ font-size:34px; }
  .compl-left p{ font-size:16px; }
}

/* =================== FEATURES =================== */
.features{ background:transparent; padding:60px 0 120px; }
.features-grid{
  display:grid; grid-template-columns:repeat(2, minmax(320px, 1fr)); gap:36px;
}
.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;
}
.feature-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.1;
  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;
  transition: opacity .3s ease, transform .35s ease;
}
.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; transform:translateY(-2px); }

.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; }

.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; }

@media (max-width:980px){ .features-grid{ grid-template-columns:1fr; } }
@media (max-width:420px){
  .features{ padding:36px 0 72px; }
  .feature-card{ padding:24px 18px; }
  .ficon{ width:48px; height:48px; }
  .ficon svg{ width:22px; height:22px; }
}

/* =================== DIFFERENT (2-up cards) =================== */
: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:1320px; margin:0 auto; padding:0 16px;
  display:grid; grid-template-columns:1.9fr 1.1fr;
  grid-template-areas:"head head" "left right";
  column-gap:28px; row-gap:32px; align-items:stretch;
}
.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; }

.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;
  text-transform:uppercase; letter-spacing:.015em; color:#EEF6FF; max-width:420px; 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{ width:100%; max-width:420px; border-radius:12px; object-fit:cover; filter:saturate(106%); }

.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); }

.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; }

@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; }
}
@media (max-width:420px){ .diff-header h2{ font-size:28px; } }

.different.reverse .different-inner{
  grid-template-columns:1.1fr 1.9fr; grid-template-areas:"head head" "right left";
}

/* =================== ABOUT =================== */
.about{ padding:200px 0 90px; }
.about-inner{
  max-width:1320px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:start;
}
.about-media{ position:relative; height:500px; margin:0; }
.about-plate{  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; }

.eyebrow{ margin:0 0 8px; font-weight:700; letter-spacing:.12em; color:#9FB6CC; text-transform:uppercase; font-size:12px; }
.about-title{ margin:0 0 14px; font-weight:800; font-size:40px; line-height:1.2; color:#F3F7FD; }
.about-lead{ margin:0 0 18px; color:#D4DEE8; line-height:1.6; font-size:14px; max-width:560px; }

.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; 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; }
.about-list h4{ margin:0 0 2px; font-weight:700; letter-spacing:.04em; color:#F1F6FF; font-size:15px; }
.about-list p{ margin:0; color:#C7D2DE; line-height:1.6; font-size:13px; }

@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; }
}
@media (max-width:420px){ .about{ padding:120px 0 64px; } }

/* =================== CTA =================== */
.cta-affiliate{ padding:72px 0; }
.cta-affiliate__inner{
  max-width:1320px; 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; line-height:1.08; letter-spacing:.01em; color:#F3F7FD;
}
.btn-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:18px 28px; min-width:280px; 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; }

@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; align-items:flex-start; }
  .btn-cta{ min-width:unset; width:auto; }
}
@media (max-width:540px){ .cta-affiliate__title{ font-size:36px; } .btn-cta{ width:100%; } }

/* =================== 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; min-height:300px; text-align:left;
}
.testi-avatar{ position:absolute; top:-60px; left:50%; transform:translateX(-50%); width:120px; height:auto; object-fit:cover; border:none; }
.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;}

@media (max-width:1024px){ .testi-grid{ grid-template-columns:1fr; } .testi-card{ padding:80px 22px 28px; } }
@media (max-width:420px){ .testi-head h2{ font-size:32px; } .testi-card{ padding:68px 18px 24px; } .testi-avatar{ width:96px; top:-48px; } }

/* =================== FOOTER =================== */
.footer{ background:#0d141c; padding:64px 0 40px; text-align:center; }
.footer-inner{
  max-width:1320px; margin:0 auto; padding:0 128px;
  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-downshipment{ margin-top:12px; }
.footer-downshipment p{ color:#d2dee8; }
.store-buttons img{ height:46px; margin:0 8px; }

@media (max-width:1024px){ .footer-inner{ grid-template-columns:1fr 1fr; text-align:center;
  max-width:1320px; margin:0 auto; padding:0 128px; } }
@media (max-width:680px){ .footer-inner{ grid-template-columns:1fr; gap:28px; 
  max-width:1320px; margin:0 auto; padding:0 128px;} }

/* =================== Brand tint touches =================== */
a, .link{ color:var(--brand-300); }
a:hover, .link:hover{ color:var(--brand-600); }
.card, .feature-card{ background:var(--surface); border:1px solid rgba(21,209,193,.18); box-shadow:0 8px 30px rgba(0,0,0,.25); }
.card:hover, .feature-card:hover{ border-color:var(--brand-500); box-shadow:0 10px 38px rgba(21,209,193,.25); }
:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; }

/* background tint */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  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%);
}
/* ================= MOBILE: full-width drawer + logo sizing ================= */
@media (max-width:980px){
  /* 1) LOGO uvek unutar headera */
  .logo-img{
    height: calc(var(--nav-h-mobile) - 16px); /* npr. 64 - 16 = 48px */
    width: auto;
    object-fit: contain;
  }

  /* 2) Zatvoreno stanje – paneli potpuno nevidljivi i bez visine */
  .links,
  .actions{
    position: fixed;              /* >>> sada su nezavisni od .container-a */
    left: 0; right: 0;
    top: var(--nav-h-mobile);     /* tačno ispod mobilnog headera */
    width: 100vw;                 /* od ivice do ivice */
    background: rgba(8,25,43,.94);
    backdrop-filter: saturate(140%) blur(10px);
    z-index: 59;                  /* ispod .nav (60), iznad svega ostalog */

    /* zatvoreno */
    max-height: 0;
    overflow: hidden;
    padding: 0 !important;
    border: none !important;
    opacity: 0;
    visibility: hidden;
    transition:
      max-height .28s ease,
      opacity .18s ease,
      visibility 0s linear .28s;

    /* layout */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* 3) Otvoreno – EDGE TO EDGE drawer preko celog ekrana */
  #nav-toggle:checked ~ .links,
  #nav-toggle:checked ~ .actions{
    opacity: 1;
    visibility: visible;
    /* visina zauzima ceo ekran ispod headera, skrol u okviru menija */
    max-height: calc(100vh - var(--nav-h-mobile));
    overflow: auto;
    transition:
      opacity .18s ease,
      max-height .28s ease,
      visibility 0s;
  }

  /* Stil linkova kad je otvoreno (punu širinu + separatori) */
  #nav-toggle:checked ~ .links a{
    padding: 18px 20px;
    border-top: 1px solid rgba(255,255,255,.06);
    letter-spacing: .12em;
    display: block;
    width: 100%;
  }

  /* Blok sa dugmadima odmah ispod linkova, full-width */
  #nav-toggle:checked ~ .actions{
    padding: 14px 16px !important;
    gap: 12px;
    border-top: 1px solid rgba(255,255,255,.06) !important;
  }
  .actions .btn{ width: 100%; }

  /* Redosled (logo levo, burger desno; drawer ispod) */
  .brand{ order: 1; }
  .burger{ order: 2; display:flex; }
  .links{ order: 3; }
  .actions{ order: 4; }

  /* Burger animacija (X) */
  #nav-toggle:checked ~ .burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  #nav-toggle:checked ~ .burger span:nth-child(2){ opacity: 0; }
  #nav-toggle:checked ~ .burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  /* Safe-area za uređaje sa "notch"-om */
  @supports(padding:max(0px)){
    .nav .container{ padding-top: max(0px, env(safe-area-inset-top));
    display: flex;
  justify-content: space-between; }
  }
}

/* Desktop logo takođe ograniči visinom headera (radi doslednosti) */
.logo-img{
  max-height: calc(var(--nav-h) - 20px); /* npr. 78 - 20 = 58px */
  width: auto;
  object-fit: contain;
}
/* ===== MOBILE STACK za "Different" sekciju ===== */
@media (max-width:980px){

  /* Uvek jedna kolona */
  .different-inner{
    grid-template-columns: 1fr !important;
    row-gap: 20px;
  }

  /* Normalni raspored – crna gore, plava dole */
  .different-inner{
    grid-template-areas:
      "head"
      "left"   /* crna */
      "right"; /* plava */
  }

  /* Ako koristiš .different.reverse – zadržati isti redosled */
  .different.reverse .different-inner{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "head"
      "left"   /* crna */
      "right"; /* plava */
  }

  /* Full width */
  .diff-left,
  .diff-right{
    width: 100%;
    margin: 0;
  }
}
/* HERO manji na mobilnim */
@media (max-width: 680px){
  .hero{
    min-height: 40vh;   /* umesto 88vh ili 100vh */
  }
}
/* ===== FULLSCREEN MOBILNI MENI – dugmad gore, linkovi ispod ===== */
@media (max-width:980px){

  /* Koliko mesta zauzimaju dugmad (Actions) – promeni ako treba) */
  :root{ --menu-actions-h: 180px; } /* ~ dva dugmeta + padding */

  /* Zajedničko: panel preko celog ekrana ispod headera */
  .links,
  .actions{
    position: fixed;
    left: 0; right: 0;
    background: rgba(8,25,43,.96);
    backdrop-filter: saturate(140%) blur(10px);
    z-index: 59;

    /* početno zatvoreno */
    opacity: 0;
    visibility: hidden;
    transition:
      opacity .18s ease,
      visibility 0s linear .18s;
  }

  /* Otvoren meni */
  #nav-toggle:checked ~ .links,
  #nav-toggle:checked ~ .actions{
    opacity: 1;
    visibility: visible;
    transition:
      opacity .18s ease,
      visibility 0s;
  }

  /* Dugmad (Actions) FIKSNO GORE, prirodna visina */
  .actions{
    top: var(--nav-h-mobile);
    height: var(--menu-actions-h);
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .actions .btn{ width: 100%; font-size: 18px; }

  /* Linkovi (Links) KREĆU ISPOD DUGMADI, do dna – skroluju se */
  .links{
    top: calc(var(--nav-h-mobile) + var(--menu-actions-h));
    bottom: 0;
    overflow-y: auto;
    padding-bottom: 28px; /* malo lufta pri dnu */
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .links a{
    display: block;
    padding: 18px 20px;
    text-align: left;            /* ili center ako voliš */
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  /* Burger animacija ostaje ista */
  #nav-toggle:checked ~ .burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  #nav-toggle:checked ~ .burger span:nth-child(2){ opacity: 0; }
  #nav-toggle:checked ~ .burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}
/* === FINAL: Fullscreen mobilni meni (gore dugmad, ispod linkovi) === */
@media (max-width:980px){

  /* Visina bloka sa dugmadima (podesi po potrebi) */
  :root{ --menu-actions-h: 180px; }

  /* RESET – poništi stara mobilna pravila */
  .links,
  .actions{
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: var(--nav-h-mobile) !important;
    width: 100vw !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: visible !important;

    background: rgba(8,25,43,.96) !important;
    backdrop-filter: saturate(140%) blur(10px) !important;
    z-index: 59 !important;

    /* zatvoreno */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-6px) !important;
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  /* otvoreno */
  #nav-toggle:checked ~ .links,
  #nav-toggle:checked ~ .actions{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: opacity .18s ease, transform .18s ease, visibility 0s !important;
  }

  /* === Actions (dugmad) – fiksno odmah ispod headera === */
  .actions{
    height: var(--menu-actions-h) !important;
    padding: 16px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    overflow: hidden !important; /* da content ne menja visinu */
    justify-content: center !important;
    gap: 12px !important;
  }
  .actions .btn{
    width: 100% !important;
    font-size: 18px !important;
  }

  /* === Links – panel ispod dugmadi do dna, skrol unutar sebe === */
  .links{
    top: calc(var(--nav-h-mobile) + var(--menu-actions-h)) !important;
    bottom: 0 !important;
    height: calc(100vh - var(--nav-h-mobile) - var(--menu-actions-h)) !important;
    overflow-y: auto !important;
    padding-bottom: 28px !important;
  }
  .links a{
    display: block !important;
    padding: 18px 20px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    text-align: left !important; /* stavi center ako želiš */
    color: #EAF2FF !important;
    text-decoration: none !important;
  }

  /* Burger animacija ostaje */
  #nav-toggle:checked ~ .burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  #nav-toggle:checked ~ .burger span:nth-child(2){ opacity: 0; }
  #nav-toggle:checked ~ .burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}
/* ===== Contact section ===== */
.contact{ padding: 80px 0 120px; background: transparent; }
.contact-inner{ max-width: 820px; }
.contact-head{ text-align:center; margin-bottom: 28px; }
.contact-head h2{ margin:0 0 10px; font:800 42px/1.12 "Inter",system-ui; color:#fff; }
.contact-head p{ margin:0; color:#C9D3DE; line-height:1.7; }

.contact-form{
  background: rgba(16,28,40,.9);
  border: 2px solid rgba(86,155,255,.35);
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
  border-radius: 20px;
  padding: 24px;
}

.hp-field{ display:none !important; }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:16px; }
.form-col.full{ grid-column: 1 / -1; }

.contact-form label{
  display:block; margin:0 0 8px; font-weight:700; letter-spacing:.04em; color:#EAF2FF; font-size:13px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  background: #0F1A22;
  border: 1.5px solid rgba(111,175,255,.28);
  color: #EAF2FF;
  border-radius: 12px;
  padding: 14px 14px;
  font: 600 14px/1.4 "Inter",system-ui;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:#89a3be; opacity:.85; }
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#2A86FF;
  box-shadow: 0 0 0 3px rgba(42,134,255,.25);
  background:#0e1821;
}

.form-actions{ display:flex; justify-content:flex-end; margin-top:6px; }
.btn-send{
  padding:14px 22px;
  border-radius:12px;
  border:2px solid #2A86FF;
  box-shadow:0 0 0 3px rgba(42,134,255,.24);
}

.form-note{ margin-top:14px; font-size:14px; }
.form-note.success{ color:#4FE8D8; }
.form-note.error{ color:#ff7686; }

@media (max-width:680px){
  .contact{ padding: 60px 0 90px; }
  .contact-head h2{ font-size:32px; }
  .form-row{ grid-template-columns:1fr; gap:12px; }
}
/* ===== HERO manji na malim ekranima (opciono) ===== */
@media (max-width: 680px){
  .hero{ min-height: 40vh; }
}

/* ===== FULLSCREEN mobilni meni – dugmad gore, linkovi skrol do dna ===== */
@media (max-width:980px){
  .links, .actions{
    position: fixed;
    left: 0; right: 0;
    background: rgba(8,25,43,.96);
    backdrop-filter: saturate(140%) blur(10px);
    z-index: 9999;
    opacity: 0; visibility: hidden;
    max-height: 0; overflow: hidden;
    transition: opacity .18s ease, max-height .28s ease, visibility 0s linear .28s;
  }

  .actions{
    top: var(--nav-h-mobile);
    padding: 16px;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
  }
  .actions .btn{ width: 100%; font-weight: 800; }

  .links{
    top: calc(var(--nav-h-mobile) + 180px); /* visina actions bloka */
    bottom: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .links a{
    display:block; padding:18px 20px;
    text-transform:uppercase;
    border-top:1px solid rgba(255,255,255,.08);
    letter-spacing:.12em; font-weight:800;
  }

  #nav-toggle:checked ~ .actions,
  #nav-toggle:checked ~ .links{
    opacity:1; visibility:visible;
    max-height: calc(100vh - var(--nav-h-mobile));
    transition: opacity .18s ease, max-height .28s ease, visibility 0s;
  }

  /* Zaključaj skrol pozadine dok je meni otvoren (moderni browseri) */
  body:has(#nav-toggle:checked){
    overflow: hidden;
  }

  /* Burger animacija (X) – ako je već imaš, ok je duplo */
  #nav-toggle:checked ~ .burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  #nav-toggle:checked ~ .burger span:nth-child(2){ opacity: 0; }
  #nav-toggle:checked ~ .burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
}

/* ===== Kontakt forma – status poruke ===== */
.form-note{ margin-top:14px; font-size:14px; line-height:1.5; }
.form-note.success{ color:#36d398; }
.form-note.error{ color:#ff7676; }