:root{
    --bg:#000000;
    --bg-2:#0a0a0a;
    --bg-3:#111111;
    --ink:#ffffff;
    --ink-soft:#a8a8a8;
    --ink-dim:#6b6b6b;
    --ink-faint:#3a3a3a;
    --blue-light:#c4ff3d;
    --blue:#b1fd00;
    --blue-deep:#8fd400;
    --line:rgba(255,255,255,0.08);
    --line-strong:rgba(255,255,255,0.14);
    --ease:cubic-bezier(0.16,1,0.3,1);
  }

  *{margin:0;padding:0;box-sizing:border-box}
  em, i{font-style:normal}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Roboto Flex',-apple-system,sans-serif;
    line-height:1.5;
    font-weight:400;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  ::selection{background:var(--blue);color:#000}

  .container{
    max-width:1440px;
    margin:0 auto;
    padding:0 56px;
    position:relative;
  }

  /* NAV */
  nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom:1px solid transparent;
    transition:border-color 0.3s, background 0.3s;
  }
  nav.scrolled{
    background:rgba(0,0,0,0.85);
    border-bottom-color:var(--line);
  }
  .nav-inner{
    max-width:1440px;
    margin:0 auto;
    padding:18px 56px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .logo{
    height:56px;
    display:block;
    transition:transform 0.4s var(--ease);
    filter:brightness(1.05);
  }
  .nav-brand:hover .logo{transform:scale(1.04)}
  .nav-links{
    display:flex;
    gap:44px;
    list-style:none;
    align-items:center;
  }
  .nav-links a{
    color:var(--ink);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    letter-spacing:-0.005em;
    transition:opacity 0.2s;
    position:relative;
  }
  .nav-links a:not(.nav-cta){opacity:0.85}
  .nav-links a:not(.nav-cta):hover{opacity:1}
  .nav-cta{
    padding:12px 24px;
    border:1px solid var(--line-strong);
    border-radius:100px;
    transition:all 0.3s var(--ease) !important;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .nav-cta:hover{
    background:var(--ink);
    color:var(--bg) !important;
    border-color:var(--ink);
  }
  .nav-cta::after{
    content:"→";
    transition:transform 0.3s var(--ease);
  }
  .nav-cta:hover::after{transform:translateX(3px)}

  /* LANGUAGE SWITCH */
  .lang-switch{
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:transparent;
    border:1px solid var(--line-strong);
    border-radius:100px;
    padding:8px 14px;
    cursor:pointer;
    font-family:'Roboto Flex',sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.04em;
    transition:all 0.3s var(--ease);
    margin-left:16px;
  }
  .lang-switch:hover{
    border-color:var(--blue);
  }
  .lang-opt{
    color:var(--ink-dim);
    transition:color 0.3s var(--ease);
  }
  .lang-opt.active{
    color:var(--blue);
  }
  .lang-sep{
    color:var(--ink-faint);
  }

  /* HERO */
  .hero{
    min-height:100vh;
    padding:160px 0 80px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .hero-bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
  }
  .hero-bg::before{
    content:"";
    position:absolute;
    top:-30%; right:-20%;
    width:1000px; height:1000px;
    background:radial-gradient(circle at center, rgba(177,253,0,0.28) 0%, rgba(196,255,61,0.06) 30%, transparent 65%);
    filter:blur(40px);
    animation:floatBg 18s ease-in-out infinite;
  }
  .hero-bg::after{
    content:"";
    position:absolute;
    bottom:-20%; left:-10%;
    width:700px; height:700px;
    background:radial-gradient(circle at center, rgba(143,212,0,0.18) 0%, transparent 60%);
    filter:blur(60px);
    animation:floatBg 22s ease-in-out infinite reverse;
  }
  @keyframes floatBg{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(-30px,20px) scale(1.08)}
  }

  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse at center, rgba(0,0,0,0.7), transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,0.7), transparent 75%);
    pointer-events:none;
    z-index:0;
  }

  .hero-eyebrow-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 16px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--line);
    border-radius:100px;
    font-size:13px;
    font-weight:500;
    color:var(--ink-soft);
    margin-bottom:48px;
    opacity:0;
    animation:fadeUp 0.8s 0.1s var(--ease) forwards;
    backdrop-filter:blur(8px);
  }
  .hero-eyebrow-tag::before{
    content:"";
    width:6px;height:6px;
    background:var(--blue-light);
    border-radius:50%;
    box-shadow:0 0 12px var(--blue-light);
    animation:pulseDot 2.4s ease-in-out infinite;
  }
  @keyframes pulseDot{
    0%,100%{box-shadow:0 0 12px var(--blue-light), 0 0 0 0 rgba(196,255,61,0.5)}
    50%{box-shadow:0 0 12px var(--blue-light), 0 0 0 10px rgba(196,255,61,0)}
  }

  h1{
    font-family:'Roboto Flex',sans-serif;
    font-weight:500;
    font-size:clamp(48px, 8.4vw, 132px);
    line-height:0.95;
    letter-spacing:-0.04em;
    color:var(--ink);
    margin-bottom:48px;
    opacity:0;
    animation:fadeUp 1.1s 0.25s var(--ease) forwards;
  }
  h1 .serif{
    font-family:'Roboto Flex',sans-serif;
    font-weight:inherit;
    letter-spacing:-0.02em;
    background:linear-gradient(135deg, var(--blue-light) 0%, var(--blue) 60%, var(--blue-deep) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    padding-right:0.1em;
  }
  h1 .accent{
    font-family:'Roboto Flex',sans-serif;
    font-weight:inherit;
    color:var(--ink);
    letter-spacing:-0.02em;
  }

  .hero-desc{
    font-size:20px;
    line-height:1.6;
    color:var(--ink-soft);
    max-width:620px;
    margin-bottom:56px;
    opacity:0;
    animation:fadeUp 1s 0.4s var(--ease) forwards;
  }
  .hero-desc strong{
    color:var(--ink);
    font-weight:600;
  }

  .hero-actions{
    display:flex;
    gap:24px;
    align-items:center;
    flex-wrap:wrap;
    opacity:0;
    animation:fadeUp 1s 0.55s var(--ease) forwards;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:18px 32px;
    border-radius:100px;
    font-size:15px;
    font-weight:500;
    text-decoration:none;
    transition:all 0.35s var(--ease);
    cursor:pointer;
    border:none;
    font-family:inherit;
    position:relative;
    overflow:hidden;
  }
  .btn-primary{
    background:var(--ink);
    color:var(--bg);
  }
  .btn-primary:hover{
    background:var(--blue);
    color:#000;
    transform:translateY(-2px);
  }
  .btn-primary svg{transition:transform 0.35s var(--ease)}
  .btn-primary:hover svg{transform:translateX(5px)}
  .btn-ghost{
    color:var(--ink);
    border:1px solid var(--line-strong);
    padding:18px 32px;
  }
  .btn-ghost:hover{
    border-color:var(--ink);
    transform:translateY(-2px);
  }

  @keyframes fadeUp{
    from{opacity:0;transform:translateY(28px)}
    to{opacity:1;transform:translateY(0)}
  }

  /* SCROLL DOWN ICON */
  .scroll-down{
    position:absolute;
    bottom:48px;
    right:56px;
    width:110px; height:110px;
    z-index:5;
    text-decoration:none;
    opacity:0;
    animation:fadeUp 1s 1s var(--ease) forwards;
  }
  .scroll-down-circle{
    width:100%;
    height:100%;
    animation:rotate 22s linear infinite;
  }
  .scroll-down-arrow{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink);
    font-size:22px;
  }
  @keyframes rotate{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
  }
  .scroll-down-circle text{
    font-size:11.5px;
    letter-spacing:0.18em;
    font-weight:500;
    text-transform:uppercase;
    fill:var(--ink);
  }

  /* HERO STATS */
  .hero-stats{
    margin-top:120px;
    padding-top:48px;
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:48px;
    opacity:0;
    animation:fadeUp 1s 0.7s var(--ease) forwards;
    position:relative;
    z-index:2;
  }
  .stat-num{
    font-family:'Roboto Flex',sans-serif;
    font-size:72px;
    line-height:1;
    letter-spacing:-0.03em;
    color:var(--ink);
    margin-bottom:12px;
    background:linear-gradient(180deg, var(--ink) 30%, rgba(255,255,255,0.4) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
  }
  .stat-num em{
    color:var(--blue-light);
    -webkit-text-fill-color:var(--blue-light);
  }
  .stat-label{
    font-size:13px;
    color:var(--ink-dim);
    letter-spacing:0.02em;
  }

  /* MARQUEE */
  .marquee{
    padding:28px 0;
    overflow:hidden;
    position:relative;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .marquee-track{
    display:flex;
    gap:0;
    animation:scroll 30s linear infinite;
    width:max-content;
    align-items:center;
  }
  .marquee-item{
    font-family:'Roboto Flex',sans-serif;
    font-weight:800;
    font-size:clamp(24px, 3.2vw, 44px);
    color:var(--ink);
    white-space:nowrap;
    padding-right:48px;
    line-height:1;
    letter-spacing:-0.02em;
    text-transform:uppercase;
  }
  .marquee-star{
    color:var(--blue);
    font-style:normal;
    font-family:'Roboto Flex',sans-serif;
    font-weight:300;
    padding-right:48px;
    font-size:clamp(20px, 2.6vw, 36px);
  }
  @keyframes scroll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
  }

  /* WHY/HOW SPLIT */
  .why-how{
    padding:160px 0;
    position:relative;
    background:var(--bg);
  }
  .why-how-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    border-top:1px solid var(--line);
  }
  .why-how-block{
    padding:80px 64px 80px 0;
    position:relative;
  }
  .why-how-block:last-child{
    padding-left:64px;
    padding-right:0;
    border-left:1px solid var(--line);
  }
  .why-how-num{
    font-family:'Roboto Flex',sans-serif;
    font-size:clamp(56px, 7vw, 96px);
    line-height:0.9;
    margin-bottom:48px;
    background:linear-gradient(135deg, var(--blue-light), var(--blue-deep));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    display:inline-block;
  }
  .why-how-block h3{
    font-size:30px;
    font-weight:500;
    line-height:1.25;
    color:var(--ink);
    margin-bottom:24px;
    letter-spacing:-0.018em;
  }
  .why-how-block h3 em{
    font-family:'Roboto Flex',sans-serif;
    color:var(--blue-light);
    font-weight:inherit;
  }
  .why-how-block p{
    font-size:18px;
    line-height:1.7;
    color:var(--ink-soft);
  }
  .why-how-block p strong{
    color:var(--ink);
    font-weight:600;
  }

  /* SECTION HEADERS */
  section{position:relative}
  .section-eyebrow{
    font-size:13px;
    font-weight:500;
    letter-spacing:0.12em;
    color:var(--blue-light);
    text-transform:uppercase;
    margin-bottom:32px;
    display:inline-flex;
    align-items:center;
    gap:14px;
  }
  .section-eyebrow::before{
    content:"";
    width:32px;
    height:1px;
    background:var(--blue-light);
  }
  h2{
    font-family:'Roboto Flex',sans-serif;
    font-weight:500;
    font-size:clamp(44px,6.5vw,96px);
    line-height:1.0;
    letter-spacing:-0.035em;
    color:var(--ink);
    margin-bottom:32px;
    max-width:980px;
  }
  h2 em{
    font-family:'Roboto Flex',sans-serif;
    font-weight:inherit;
    background:linear-gradient(135deg, var(--blue-light), var(--blue-deep));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    letter-spacing:-0.02em;
  }
  .section-lead{
    font-size:19px;
    color:var(--ink-soft);
    max-width:680px;
    margin-bottom:96px;
    line-height:1.65;
  }

  /* USLUGE */
  #usluge{
    padding:160px 0;
    position:relative;
  }
  .services-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0;
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
  }
  .service-card{
    padding:56px 48px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    transition:all 0.5s var(--ease);
    position:relative;
    overflow:hidden;
    background:var(--bg);
  }
  /* Neparna poslednja kartica — preko obe kolone */
  .service-card:last-child:nth-child(odd){
    grid-column:1 / -1;
  }
  .service-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 20% 0%, rgba(177,253,0,0.12) 0%, transparent 50%);
    opacity:0;
    transition:opacity 0.5s var(--ease);
    pointer-events:none;
  }
  .service-card:hover{
    background:var(--bg-3);
  }
  .service-card:hover::before{opacity:1}
  .service-card-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:36px;
    position:relative;
  }
  .service-card-num{
    font-family:'Roboto Flex',sans-serif;
    font-size:18px;
    color:var(--blue-light);
    letter-spacing:-0.01em;
  }
  .service-icon{
    width:56px;height:56px;
    border-radius:100%;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink);
    transition:all 0.5s var(--ease);
    position:relative;
  }
  .service-card:hover .service-icon{
    background:var(--blue);
    border-color:var(--blue);
    color:#000;
    transform:rotate(-8deg) scale(1.08);
  }
  .service-card h3{
    font-family:'Roboto Flex',sans-serif;
    font-weight:500;
    font-size:32px;
    line-height:1.15;
    margin-bottom:20px;
    color:var(--ink);
    letter-spacing:-0.022em;
    position:relative;
  }
  .service-card h3 em{
    font-family:'Roboto Flex',sans-serif;
    color:var(--blue-light);
    font-weight:inherit;
  }
  .service-card > p{
    font-size:16px;
    color:var(--ink-soft);
    line-height:1.65;
    margin-bottom:32px;
    position:relative;
  }
  .service-card ul{
    list-style:none;
    border-top:1px solid var(--line);
    padding-top:24px;
    position:relative;
  }
  .service-card li{
    font-size:14px;
    color:var(--ink-soft);
    padding:9px 0;
    display:flex;
    align-items:center;
    gap:14px;
    transition:color 0.3s var(--ease);
  }
  .service-card:hover li{color:var(--ink)}
  .service-card li::before{
    content:"";
    width:6px;height:6px;
    border-radius:50%;
    background:var(--blue-light);
    flex-shrink:0;
    box-shadow:0 0 8px rgba(196,255,61,0.6);
  }

  /* O NAMA */
  #o-nama{
    padding:180px 0;
    position:relative;
    overflow:hidden;
  }
  #o-nama::before{
    content:"";
    position:absolute;
    top:20%; left:-20%;
    width:800px; height:800px;
    background:radial-gradient(circle, rgba(143,212,0,0.14) 0%, transparent 60%);
    filter:blur(60px);
    pointer-events:none;
  }
  .about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:96px;
    align-items:flex-start;
    position:relative;
  }
  .about-text p{
    font-size:18px;
    line-height:1.75;
    color:var(--ink-soft);
    margin-bottom:24px;
  }
  .about-text p:first-of-type{
    font-family:'Roboto Flex',sans-serif;
    font-size:32px;
    font-weight:400;
    line-height:1.4;
    color:var(--ink);
    margin-bottom:36px;
    letter-spacing:-0.01em;
  }
  .about-text p:first-of-type em{
    color:var(--blue-light);
  }
  .about-text em{
    color:var(--blue-light);
  }

  .about-card{
    background:linear-gradient(135deg, rgba(177,253,0,0.12) 0%, rgba(143,212,0,0.04) 100%);
    border:1px solid var(--line-strong);
    border-radius:24px;
    padding:56px 48px;
    color:var(--ink);
    position:sticky;
    top:120px;
    overflow:hidden;
    backdrop-filter:blur(10px);
  }
  .about-card::before{
    content:"";
    position:absolute;
    top:-150px;right:-150px;
    width:400px;height:400px;
    background:radial-gradient(circle, rgba(196,255,61,0.2) 0%, transparent 70%);
    pointer-events:none;
  }
  .about-card-label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.14em;
    color:var(--blue-light);
    margin-bottom:28px;
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:12px;
  }
  .about-card-label::before{
    content:"";
    width:24px; height:1px;
    background:var(--blue-light);
  }
  .about-card h3{
    font-family:'Roboto Flex',sans-serif;
    font-weight:500;
    font-size:38px;
    line-height:1.18;
    margin-bottom:48px;
    position:relative;
    letter-spacing:-0.02em;
  }
  .about-card h3 em{
    font-family:'Roboto Flex',sans-serif;
    font-weight:inherit;
    color:var(--blue-light);
  }
  .about-values{
    display:flex;
    flex-direction:column;
    gap:28px;
    position:relative;
  }
  .about-value{
    display:flex;
    gap:24px;
    align-items:flex-start;
    padding-top:28px;
    border-top:1px solid var(--line-strong);
  }
  .about-value:first-child{border-top:none;padding-top:0}
  .about-value-num{
    font-family:'Roboto Flex',sans-serif;
    font-size:28px;
    color:var(--blue-light);
    flex-shrink:0;
    line-height:1;
  }
  .about-value-text strong{
    display:block;
    font-weight:600;
    font-size:17px;
    margin-bottom:8px;
    color:var(--ink);
  }
  .about-value-text span{
    font-size:15px;
    color:var(--ink-soft);
    line-height:1.6;
  }

  /* KONTAKT */
  #kontakt{
    padding:180px 0;
    position:relative;
    overflow:hidden;
    border-top:1px solid var(--line);
  }
  #kontakt::before{
    content:"";
    position:absolute;
    top:-200px; left:50%;
    transform:translateX(-50%);
    width:1000px; height:600px;
    background:radial-gradient(ellipse, rgba(177,253,0,0.24) 0%, transparent 60%);
    filter:blur(80px);
    pointer-events:none;
  }
  .contact-wrap{
    text-align:center;
    position:relative;
    max-width:880px;
    margin:0 auto;
  }
  .contact-wrap h2{
    margin:0 auto 32px;
    text-align:center;
  }
  .contact-wrap .section-eyebrow{
    justify-content:center;
    display:flex;
  }
  .contact-wrap > p{
    font-size:20px;
    color:var(--ink-soft);
    max-width:600px;
    margin:0 auto 56px;
    position:relative;
    line-height:1.6;
  }
  .contact-methods{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:32px;
    margin-top:120px;
    padding-top:64px;
    border-top:1px solid var(--line);
    position:relative;
    text-align:left;
  }
  .contact-method-label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.16em;
    color:var(--ink-dim);
    margin-bottom:12px;
  }
  .contact-method a, .contact-method span{
    color:var(--ink);
    text-decoration:none;
    font-size:18px;
    font-weight:500;
    transition:color 0.2s;
    letter-spacing:-0.005em;
  }
  .contact-method a:hover{color:var(--blue-light)}

  /* KONTAKT FORMA */
  .contact-form{
    max-width:640px;
    margin:0 auto 96px;
    text-align:left;
    display:flex;
    flex-direction:column;
    gap:20px;
  }
  .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .form-field{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .form-field label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.16em;
    color:var(--ink-soft);
    font-weight:600;
  }
  .form-field label .opt{
    text-transform:none;
    letter-spacing:0;
    font-size:11px;
    color:var(--ink-dim);
    margin-left:4px;
  }
  .form-field input,
  .form-field textarea{
    width:100%;
    padding:15px 16px;
    background:rgba(255,255,255,0.06);
    border:1px solid var(--line-strong);
    border-radius:10px;
    color:var(--ink);
    font-family:inherit;
    font-size:15px;
    font-weight:400;
    transition:all 0.3s var(--ease);
    resize:vertical;
  }
  .form-field input::placeholder,
  .form-field textarea::placeholder{
    color:var(--ink-soft);
    opacity:0.7;
  }
  .form-field input:focus,
  .form-field textarea:focus{
    outline:none;
    border-color:var(--blue);
    background:rgba(177,253,0,0.04);
    box-shadow:0 0 0 3px rgba(177,253,0,0.08);
  }
  .form-submit{
    align-self:flex-start;
    margin-top:8px;
    background:var(--blue);
    color:#000;
    cursor:pointer;
  }
  .form-submit:hover{
    background:var(--blue-light);
    color:#000;
    transform:translateY(-2px);
  }
  .form-submit:disabled{
    opacity:0.6;
    cursor:wait;
    transform:none;
  }
  .form-status{
    font-size:14px;
    padding:0;
    min-height:20px;
    color:var(--ink-soft);
  }
  .form-status.success{
    color:var(--blue);
    padding:14px 16px;
    background:rgba(177,253,0,0.06);
    border:1px solid rgba(177,253,0,0.2);
    border-radius:10px;
  }
  .form-status.error{
    color:#ff8080;
    padding:14px 16px;
    background:rgba(255,128,128,0.06);
    border:1px solid rgba(255,128,128,0.2);
    border-radius:10px;
  }

  /* CAPTCHA */
  .captcha-field{
    background:rgba(177,253,0,0.04);
    border:1px solid rgba(177,253,0,0.18);
    border-radius:12px;
    padding:20px;
  }
  .captcha-field label{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--ink);
    font-size:13px;
    text-transform:none;
    letter-spacing:0;
    margin-bottom:10px;
  }
  .captcha-field label strong{
    color:var(--blue);
    font-weight:700;
    font-size:16px;
  }
  .captcha-field input{
    max-width:200px;
  }
  .captcha-field.captcha-error input{
    border-color:#ff8080;
    background:rgba(255,128,128,0.06);
  }
  .captcha-hint{
    font-size:12px;
    color:var(--ink-dim);
    margin-top:8px;
  }

  /* FOOTER */
  footer{
    padding:120px 0 56px;
    background:var(--bg);
    position:relative;
    overflow:hidden;
    border-top:1px solid var(--line);
  }
  .footer-brand{
    text-align:center;
    margin-bottom:80px;
    position:relative;
  }
  .footer-logo{
    height:120px;
    display:block;
    margin:0 auto 36px;
    filter:brightness(1.1);
  }
  .footer-slogan{
    font-size:13px;
    font-weight:600;
    letter-spacing:0.36em;
    color:var(--blue-light);
    text-transform:uppercase;
    position:relative;
    display:inline-block;
    padding:0 72px;
  }
  .footer-slogan::before,
  .footer-slogan::after{
    content:"";
    position:absolute;
    top:50%;
    width:52px;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--blue-light));
  }
  .footer-slogan::before{left:0}
  .footer-slogan::after{
    right:0;
    background:linear-gradient(-90deg, transparent, var(--blue-light));
  }

  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:24px;
    padding-top:48px;
    border-top:1px solid var(--line);
  }
  .footer-meta{
    font-size:12px;
    color:var(--ink-dim);
    letter-spacing:0.02em;
  }
  .footer-social{
    display:flex;
    gap:32px;
  }
  .footer-social a{
    color:var(--ink-soft);
    font-size:14px;
    text-decoration:none;
    transition:color 0.2s;
  }
  .footer-social a:hover{color:var(--blue-light)}

  /* Reveal */
  .reveal{
    opacity:0;
    transform:translateY(40px);
    transition:opacity 1s var(--ease), transform 1s var(--ease);
  }
  .reveal.in{opacity:1;transform:translateY(0)}
  .reveal-delay-1{transition-delay:0.1s}
  .reveal-delay-2{transition-delay:0.2s}
  .reveal-delay-3{transition-delay:0.3s}

  /* Mobile */
  @media (max-width:1100px){
    .why-how-grid{grid-template-columns:1fr}
    .why-how-block{
      padding:48px 0 !important;
      border-left:none !important;
      border-top:1px solid var(--line) !important;
    }
    .why-how-block:first-child{border-top:none !important}
    .about-grid{grid-template-columns:1fr;gap:56px}
    .about-card{position:relative;top:0}
    .services-grid{grid-template-columns:1fr}
  }
  @media (max-width:768px){
    .container, .nav-inner{padding-left:24px;padding-right:24px}
    .logo{height:44px}
    .hero{padding:140px 0 80px;min-height:auto}
    .hero-stats{grid-template-columns:repeat(2,1fr);gap:32px;margin-top:80px}
    .stat-num{font-size:56px}
    section, #usluge, #o-nama, #kontakt{padding:80px 0}
    .why-how{padding:80px 0}
    .service-card{padding:40px 28px}
    .service-card h3{font-size:26px}
    .about-card{padding:40px 28px}
    .about-text p:first-of-type{font-size:24px}
    .contact-methods{grid-template-columns:1fr;gap:32px}
    .form-row{grid-template-columns:1fr;gap:20px}
    .contact-form{margin-bottom:72px}
    .footer-inner{flex-direction:column;text-align:center}
    .footer-logo{height:88px}
    .footer-slogan{font-size:11px;letter-spacing:0.24em;padding:0 36px}
    .footer-slogan::before, .footer-slogan::after{width:24px}
    .scroll-down{display:none}
    .marquee-item{padding-right:24px}
    .marquee-star{padding-right:24px}
  }

  /* ============================================
     MULTI-SITE DODATNI STILOVI
     ============================================ */

  /* Aktivna nav stavka */
  .nav-links a.active{
    opacity:1;
    color:var(--blue);
  }
  .nav-links a.active::after{
    content:"";
    position:absolute;
    bottom:-6px;
    left:0;
    right:0;
    height:1px;
    background:var(--blue);
  }

  /* PAGE HERO - kraći hero za podstranice */
  .page-hero{
    min-height:auto;
    padding:200px 0 100px;
    position:relative;
    overflow:hidden;
  }
  .page-hero .hero-eyebrow-tag{
    margin-bottom:32px;
  }
  .page-hero h1{
    font-size:clamp(44px, 7vw, 96px);
    margin-bottom:32px;
  }
  .page-hero .hero-desc{
    margin-bottom:0;
    font-size:18px;
  }

  /* PREVIEW GRID na index strani */
  #usluge-preview{
    padding:140px 0;
    position:relative;
  }
  .preview-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:80px;
  }
  .preview-card{
    background:rgba(255,255,255,0.025);
    border:1px solid var(--line);
    border-radius:20px;
    padding:40px 32px;
    transition:all 0.5s var(--ease);
    position:relative;
    overflow:hidden;
  }
  .preview-card:hover{
    background:rgba(255,255,255,0.04);
    border-color:var(--line-strong);
    transform:translateY(-4px);
  }
  .preview-card-num{
    font-family:'Roboto Flex',sans-serif;
    font-size:12px;
    font-weight:500;
    letter-spacing:0.18em;
    color:var(--ink-dim);
    margin-bottom:24px;
  }
  .preview-card h3{
    font-family:'Roboto Flex',sans-serif;
    font-weight:500;
    font-size:24px;
    line-height:1.2;
    margin-bottom:14px;
    color:var(--ink);
    letter-spacing:-0.02em;
  }
  .preview-card h3 em{
    font-family:'Roboto Flex',sans-serif;
    color:var(--blue);
    font-weight:inherit;
  }
  .preview-card p{
    font-size:15px;
    color:var(--ink-soft);
    line-height:1.6;
  }
  .preview-cta{
    text-align:center;
    margin-top:64px;
  }

  /* CTA STRIP - donji CTA blok */
  .cta-strip{
    padding:140px 0;
    position:relative;
    overflow:hidden;
    border-top:1px solid var(--line);
    text-align:center;
  }
  .cta-strip::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:900px;
    height:500px;
    background:radial-gradient(ellipse, rgba(177,253,0,0.14) 0%, transparent 60%);
    filter:blur(80px);
    pointer-events:none;
  }
  .cta-strip > .container{
    position:relative;
  }
  .cta-strip h2{
    margin-bottom:24px;
    text-align:center;
  }
  .cta-strip p{
    font-size:18px;
    color:var(--ink-soft);
    max-width:520px;
    margin:0 auto 40px;
    line-height:1.6;
  }

  /* KLIJENTI */
  #klijenti{
    padding:120px 0;
    position:relative;
  }
  .clients-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    margin-top:80px;
    margin-bottom:80px;
  }
  .client-card{
    background:rgba(255,255,255,0.025);
    border:1px solid var(--line);
    border-radius:20px;
    padding:40px 32px;
    transition:all 0.5s var(--ease);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .client-card:hover{
    background:rgba(177,253,0,0.04);
    border-color:rgba(177,253,0,0.3);
    transform:translateY(-4px);
  }
  .client-logo{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    text-align:center;
    margin-bottom:24px;
  }
  .client-mark{
    font-family:'Roboto Flex',sans-serif;
    font-weight:800;
    font-size:52px;
    line-height:1;
    color:var(--blue);
    letter-spacing:-0.04em;
    background:rgba(177,253,0,0.08);
    width:88px;
    height:88px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    border:1px solid rgba(177,253,0,0.2);
    transition:all 0.4s var(--ease);
  }
  .client-card:hover .client-mark{
    background:rgba(177,253,0,0.14);
    transform:scale(1.05);
  }
  .client-name{
    font-family:'Roboto Flex',sans-serif;
    font-size:22px;
    font-weight:600;
    color:var(--ink);
    letter-spacing:-0.01em;
  }
  .client-city{
    font-family:'Roboto Flex',sans-serif;
    font-size:12px;
    font-weight:500;
    text-transform:uppercase;
    letter-spacing:0.14em;
    color:var(--blue);
    margin-top:-6px;
  }
  .client-quote{
    font-size:15px;
    line-height:1.65;
    color:var(--ink-soft);
    font-style:normal;
    margin:0;
    flex:1;
    display:flex;
    align-items:center;
  }
  .clients-note{
    text-align:center;
    padding:32px 0;
    border-top:1px solid var(--line);
  }
  .clients-note p{
    font-size:15px;
    color:var(--ink-dim);
    max-width:580px;
    margin:0 auto;
    line-height:1.7;
  }

  /* STATS SECTION (O nama) */
  .stats-section{
    padding:80px 0 140px;
    border-top:1px solid var(--line);
  }

  /* FOOTER NAV */
  .footer-nav{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    padding:0 0 56px;
    margin-bottom:48px;
    border-bottom:1px solid var(--line);
  }
  .footer-nav a{
    color:var(--ink-soft);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    letter-spacing:-0.005em;
    transition:color 0.2s;
  }
  .footer-nav a:hover{
    color:var(--blue);
  }

  /* MOBILE */
  @media (max-width:768px){
    .page-hero{padding:140px 0 70px}
    .page-hero h1{font-size:clamp(36px, 9vw, 56px)}
    .preview-grid, .clients-grid{grid-template-columns:1fr;gap:16px}
    .preview-card, .client-card{padding:32px 24px}
    .client-card{min-height:200px}
    .client-mark{width:96px;height:96px;font-size:56px}
    .client-name{font-size:18px}
    .cta-strip{padding:80px 0}
    .stats-section{padding:60px 0 80px}
    .footer-nav{gap:20px;padding-bottom:32px;margin-bottom:32px}
    .footer-nav a{font-size:13px}
    #klijenti{padding:80px 0}
    #usluge-preview{padding:80px 0}
  }


  /* ============================================
     HAMBURGER MENU (samo mobilno)
     ============================================ */

  /* Toggle dugme i mobilni Kontakt CTA - sakriveni na desktopu */
  .nav-toggle,
  .nav-cta-mobile{
    display:none;
  }

  @media (max-width:768px){
    .nav-inner{
      gap:10px;
    }

    /* Na mobilnom: Kontakt je u hamburger meniju, sakrij gornje dugme */
    .nav-cta-mobile{
      display:none;
    }

    /* Language switch desno, pre hamburgera */
    .lang-switch{
      margin-left:auto;
      padding:7px 12px;
      font-size:11px;
    }

    /* Hamburger dugme */
    .nav-toggle{
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:5px;
      width:42px;
      height:42px;
      background:transparent;
      border:1px solid var(--line-strong);
      border-radius:50%;
      cursor:pointer;
      padding:0;
      transition:all 0.3s var(--ease);
      flex-shrink:0;
    }
    .nav-toggle:hover{
      border-color:var(--blue);
    }
    .nav-toggle span{
      display:block;
      width:18px;
      height:1.5px;
      background:var(--ink);
      border-radius:2px;
      transition:all 0.35s var(--ease);
      transform-origin:center;
    }

    /* Hamburger -> X animacija */
    body.menu-open .nav-toggle span:nth-child(1){
      transform:translateY(6.5px) rotate(45deg);
      background:var(--blue);
    }
    body.menu-open .nav-toggle span:nth-child(2){
      opacity:0;
      transform:scaleX(0);
    }
    body.menu-open .nav-toggle span:nth-child(3){
      transform:translateY(-6.5px) rotate(-45deg);
      background:var(--blue);
    }
    body.menu-open .nav-toggle{
      border-color:var(--blue);
    }

    /* Nav links postaju fullscreen overlay */
    .nav-links{
      position:fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      width:100%;
      height:100vh;
      background:rgba(0,0,0,0.96);
      backdrop-filter:blur(24px) saturate(180%);
      -webkit-backdrop-filter:blur(24px) saturate(180%);
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:0;
      padding:80px 24px 40px;
      opacity:0;
      visibility:hidden;
      transform:translateY(-12px);
      transition:opacity 0.35s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
      z-index:200;
    }
    body.menu-open .nav-links{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
      transition:opacity 0.35s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0s;
    }

    .nav-links li{
      width:100%;
      text-align:center;
      opacity:0;
      transform:translateY(20px);
      transition:opacity 0.5s var(--ease), transform 0.5s var(--ease);
    }
    body.menu-open .nav-links li{
      opacity:1;
      transform:translateY(0);
    }
    body.menu-open .nav-links li:nth-child(1){transition-delay:0.08s}
    body.menu-open .nav-links li:nth-child(2){transition-delay:0.14s}
    body.menu-open .nav-links li:nth-child(3){transition-delay:0.20s}
    body.menu-open .nav-links li:nth-child(4){transition-delay:0.26s}
    body.menu-open .nav-links li:nth-child(5){transition-delay:0.32s}

    .nav-links a:not(.nav-cta){
      display:block;
      padding:20px 0;
      font-size:28px;
      font-weight:500;
      letter-spacing:-0.02em;
      color:var(--ink);
      opacity:1;
      border-bottom:1px solid var(--line);
      width:100%;
    }
    .nav-links a.active{
      color:var(--blue);
    }
    .nav-links a.active::after{
      display:none;
    }

    /* Kontakt CTA unutar overlaya - drugačiji stil, na dnu */
    .nav-links .nav-cta{
      margin-top:32px;
      padding:18px 32px;
      font-size:16px;
      background:var(--blue);
      color:#000;
      border:none;
    }
    .nav-links .nav-cta:hover{
      background:var(--blue-light);
    }

    /* Spreči scroll iza overlaya */
    body.menu-open{
      overflow:hidden;
    }
  }

  /* Manji uredjaji - prilagodi tekst */
  @media (max-width:380px){
    .nav-cta-mobile{
      padding:8px 14px;
      font-size:12px;
    }
    .nav-toggle{
      width:38px;
      height:38px;
    }
    .nav-links a:not(.nav-cta){
      font-size:24px;
      padding:16px 0;
    }
  }