/* ARVENOX — arvenox.eu
   Paleta: #111111 / #B6FF00. Tipografija: Montserrat 300 / 400 / 700.
   Fontovi su lokalni — bez vanjskih zahtjeva, bez kolačića, bez praćenja. */

/* ---------------- Montserrat (self-hosted, SIL OFL) ---------------- */
@font-face{font-family:Montserrat;font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/montserrat-latin-ext-300-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Montserrat;font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/montserrat-latin-300-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/montserrat-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/montserrat-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/montserrat-latin-ext-700-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/montserrat-latin-700-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --bg:#111111;
  --bg-2:#171717;
  --bg-3:#1C1C1C;
  --lime:#B6FF00;
  --lime-hi:#CBFF4D;
  --lime-80:rgba(182,255,0,.82);
  --lime-65:rgba(182,255,0,.66);
  --lime-45:rgba(182,255,0,.46);
  --line:rgba(182,255,0,.20);
  --line-soft:rgba(182,255,0,.11);
  --ink:var(--lime-80);
  --max:1120px;
  --r:2px;
  --font:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
a{color:var(--lime);text-decoration:none}
a:hover{color:var(--lime-hi);text-decoration:underline;text-underline-offset:3px}

h1,h2,h3,h4{
  font-weight:700;line-height:1.08;margin:0 0 .5em;color:var(--lime);
  letter-spacing:-.022em;text-wrap:balance
}
h1{font-size:clamp(2.15rem,6.4vw,4rem);text-transform:uppercase;letter-spacing:-.028em}
h2{font-size:clamp(1.5rem,4vw,2.3rem)}
h3{font-size:clamp(1.05rem,2.4vw,1.26rem)}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.5em}
li::marker{color:var(--lime)}
strong{color:var(--lime);font-weight:700}
i,em{font-style:italic}
hr{border:0;border-top:1px solid var(--line-soft);margin:3.2rem 0}

.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.eyebrow{
  font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lime);margin:0 0 1.2rem;display:block
}
.lead{font-weight:300;font-size:clamp(1.08rem,2.4vw,1.35rem);line-height:1.55;
  color:var(--lime);max-width:58ch;letter-spacing:-.01em}
.muted{color:var(--lime-45)}
.small{font-size:.85rem;line-height:1.65}
.center{text-align:center}

/* ---------- Header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(17,17,17,.94);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.head-in{display:flex;align-items:center;gap:16px;min-height:66px}
.brand{display:flex;align-items:center;gap:11px;color:var(--lime);text-decoration:none;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand svg{width:30px;height:30px;flex:0 0 auto}
.brand-name{font-size:1.02rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.brand-name sup{font-size:.5em;letter-spacing:0;top:-.8em;position:relative;font-weight:400}
.nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav a{
  color:var(--lime-45);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 0;border-bottom:2px solid transparent
}
.nav a:hover{color:var(--lime);text-decoration:none;border-bottom-color:var(--lime)}
.nav a.on{color:var(--lime);border-bottom-color:var(--lime)}
.nav .lang{
  font-size:.7rem;font-weight:700;letter-spacing:.12em;
  border:1px solid var(--line);border-bottom-color:var(--line);border-radius:var(--r);
  padding:7px 11px;color:var(--lime-45)
}
.nav .lang:hover{color:var(--bg);background:var(--lime);border-color:var(--lime);text-decoration:none}
.burger{
  margin-left:auto;display:none;background:none;border:1px solid var(--line);border-radius:var(--r);
  width:42px;height:38px;color:var(--lime);cursor:pointer;align-items:center;justify-content:center
}
.burger span{display:block;width:18px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor}
.burger span::before{top:-6px}.burger span::after{top:6px}

@media (max-width:860px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:66px 0 auto 0;margin:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-2);border-bottom:1px solid var(--line);
    padding:8px 20px 22px;display:none
  }
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:.92rem;letter-spacing:.1em}
  .nav a:hover,.nav a.on{border-bottom-color:var(--line-soft)}
  .nav .lang{margin-top:18px;align-self:flex-start;border:1px solid var(--lime);
    padding:10px 16px;font-size:.78rem}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(90% 70% at 82% 4%,rgba(182,255,0,.13),transparent 60%),
    radial-gradient(60% 50% at 0% 100%,rgba(182,255,0,.05),transparent 70%),
    var(--bg);
  border-bottom:1px solid var(--line-soft);
}
.hero-in{padding-top:clamp(52px,10vw,104px);padding-bottom:clamp(52px,9vw,96px);max-width:56rem}
.hero h1{margin-bottom:1.2rem}
.hero h1 em{font-style:normal;font-weight:300;color:var(--lime)}
.rule{width:64px;height:3px;background:var(--lime);margin:0 0 1.7rem}
.mark-lg{width:clamp(76px,15vw,116px);margin-bottom:2rem;display:block;color:var(--lime)}

/* ---------- Buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.1rem}
.btn{
  display:inline-block;padding:14px 26px;border-radius:var(--r);font-size:.76rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--lime);
  color:#111;background:var(--lime);line-height:1.2
}
.btn:hover{background:var(--lime-hi);border-color:var(--lime-hi);color:#111;text-decoration:none}
.btn-ghost{background:transparent;color:var(--lime)}
.btn-ghost:hover{background:var(--lime);color:#111}

/* ---------- Sections ---------- */
section{padding:clamp(48px,8vw,90px) 0}
section.alt{background:var(--bg-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.sec-head{max-width:62ch;margin-bottom:2.8rem}

.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr))}

.card{
  background:var(--bg-3);
  border:1px solid var(--line-soft);border-radius:var(--r);
  padding:28px 26px;transition:border-color .18s ease
}
.card:hover{border-color:var(--line)}
.card h3{margin-bottom:.6rem}
.card p:last-child{margin-bottom:0}
.card .num{font-size:.68rem;font-weight:700;letter-spacing:.24em;color:var(--lime);
  display:block;margin-bottom:1rem}

.tag{
  display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--lime);color:var(--lime);border-radius:var(--r);
  padding:5px 10px;margin-bottom:1.1rem
}
.tag.dev{border-color:var(--lime-45);color:var(--lime-45)}

/* definition rows */
.rows{border-top:1px solid var(--line-soft)}
.row{display:grid;grid-template-columns:minmax(170px,.42fr) 1fr;gap:4px 24px;
  padding:16px 0;border-bottom:1px solid var(--line-soft)}
.row dt{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.row dd{margin:0;color:var(--lime-65);font-weight:400}
@media (max-width:640px){.row{grid-template-columns:1fr}}

/* claim box */
.claim{
  border-left:3px solid var(--lime);background:rgba(182,255,0,.055);
  padding:17px 22px;margin:0 0 14px;border-radius:0 var(--r) var(--r) 0
}
.claim q{font-size:1.02rem;font-weight:400;color:var(--lime);quotes:"„" "”"}
.claim .src{display:block;margin-top:.55rem;font-size:.7rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--lime-45)}

.notice{
  border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--bg-3);padding:20px 22px;color:var(--lime-65);font-size:.88rem;line-height:1.68
}
.notice strong{color:var(--lime)}
.notice p:last-child{margin-bottom:0}

/* ---------- Form ---------- */
form{max-width:36rem}
.field{margin-bottom:18px}
label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lime);margin-bottom:8px}
input,select,textarea{
  width:100%;padding:13px 15px;font:inherit;font-size:1rem;color:var(--lime);
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r)
}
input::placeholder,textarea::placeholder{color:var(--lime-45)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--lime);outline-offset:1px;border-color:var(--lime)}
textarea{min-height:130px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--lime) 50%),
  linear-gradient(135deg,var(--lime) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.85rem;color:var(--lime-65)}
.check input{width:auto;margin-top:.3em;flex:0 0 auto;accent-color:#B6FF00}
button[type=submit]{width:auto;cursor:pointer;font-family:var(--font)}
.form-note{font-size:.82rem;color:var(--lime-45);margin-top:1.2rem}

/* ---------- Footer ---------- */
.site-foot{background:var(--bg);border-top:1px solid var(--line-soft);padding:54px 0 34px;font-size:.86rem}
.foot-grid{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:34px}
.foot-grid h4{font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lime);margin-bottom:1.1rem}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:.6em}
.foot-grid a{color:var(--lime-45);font-weight:400}
.foot-grid a:hover{color:var(--lime)}
.foot-bot{border-top:1px solid var(--line-soft);padding-top:22px;color:var(--lime-45);font-size:.75rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
.disclaimer{color:var(--lime-45);font-size:.79rem;line-height:1.65;margin-top:18px;max-width:78ch}

/* ---------- Page header ---------- */
.page-head{background:
  radial-gradient(70% 90% at 88% 0%,rgba(182,255,0,.09),transparent 62%),var(--bg-2);
  border-bottom:1px solid var(--line-soft);
  padding:clamp(40px,7vw,76px) 0 clamp(34px,6vw,58px)}
.page-head h1{margin-bottom:1rem}
.page-head .lead{margin-bottom:0}

.prose{max-width:70ch}
.prose h2{margin-top:2.8rem}
.prose h3{margin-top:2.1rem}
.prose ul li{color:var(--lime-65)}
.prose p{color:var(--lime-65)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}