:root{
      --aurora-url: url('../img/aurora.jpg');
      --ink: #0c1116;
      --brand: #00ffd5;
      --brand-2: #7da8ff;
    }

    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%;margin:0}
    body{
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
      background:#000;
      color:#fff;
      overflow-x:hidden;
    }

    /* Background layer */
    .bg-global{
      position:fixed;
      inset:0;
      z-index:0;
      background-image:var(--aurora-url);
      background-size:cover;
      background-position:center 35%;
      transform:scale(1);
    }

    /* Navbar / hamburger */
    .hamburger{
      position:fixed;
      z-index:9999;
      top: calc(env(safe-area-inset-top, 0px) + 12px);
      right: calc(env(safe-area-inset-right, 0px) + 12px);
      width:44px;
      height:44px;
      display:grid;
      place-items:center;
      border-radius:999px;
      border:1px solid rgba(0,0,0,.15);
      background:rgba(255,255,255,.8);
      backdrop-filter: blur(8px);
      box-shadow:0 10px 26px rgba(0,0,0,.25);
    }
    .hamburger button{all:unset; cursor:pointer; width:28px; height:20px; display:grid; gap:6px}
    .hamburger span{height:2px; background:#111; display:block; border-radius:2px; transition:.3s ease}
    .hamburger.active span:nth-child(1){transform: translateY(8px) rotate(45deg)}
    .hamburger.active span:nth-child(2){opacity:0}
    .hamburger.active span:nth-child(3){transform: translateY(-8px) rotate(-45deg)}

    .drawer{position:fixed; z-index:9; inset:0; pointer-events:none}
    .drawer .backdrop{position:absolute; inset:0; background:rgba(0,0,0,.4); opacity:0; transition:.25s}
    .drawer .panel{
      position:absolute;
      top:0;
      right:0;
      height:100%;
      width:min(86vw,360px);
      background:var(--ink);
      color:#fff;
      padding: calc(env(safe-area-inset-top, 0px) + 24px) 24px calc(env(safe-area-inset-bottom, 0px) + 24px);
      transform: translateX(100%);
      transition:.35s cubic-bezier(.2,.8,.2,1);
      display:flex;
      flex-direction:column;
    }
    .drawer.open{pointer-events:auto}
    .drawer.open .backdrop{opacity:1}
    .drawer.open .panel{transform: translateX(0)}

    .nav-brand{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-bottom:18px;
    }
    .nav-brand span{
      font-size:12px;
      letter-spacing:.3em;
      text-transform:uppercase;
      color:#9fb7cc;
    }
    .nav-brand strong{
      font-size:22px;
      font-weight:700;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      -webkit-background-clip: text;
      color: transparent;
    }

    .nav-links{margin-top:12px; display:flex; flex-direction:column; gap:12px}
    .nav-links a{
      color:#cde3ff;
      text-decoration:none;
      font-size:18px;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid transparent;
      background:rgba(255,255,255,0);
      text-align:center;
      transition:background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
    }
    .nav-links a:hover{
      color:#ffffff;
      background:rgba(255,255,255,0.08);
      border-color:rgba(255,255,255,0.08);
    }
    .nav-links a.active{
      color:#ffffff;
      background:linear-gradient(90deg, rgba(0,255,213,0.22), rgba(125,168,255,0.22));
      border-color:rgba(0,255,213,0.5);
      box-shadow:0 10px 26px rgba(0,0,0,0.35);
    }

    /* Hero */
    .stage{
      position:relative;
      min-height: 180svh;
      display:block;
      z-index:1;
    }
    .overlay-svg{
      position: sticky;
      top: 0;
      width: 100%;
      height: 100svh;
      display:block;
      z-index: 5;
    }
    .overlay-svg text{font-weight:800; letter-spacing:-.02em; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif}
    #textGroup{transform-box: fill-box; transform-origin: 50% 50%;}

    .subheadline{
      position:absolute;
      top: 80%;
      width:100%;
      text-align:center;
      font-size: clamp(16px, 4vw, 22px);
      opacity:0.9;
      font-weight:500;
      color:#111;
      z-index:6;
      pointer-events:none;
    }

    .underlay-intro{
      position:absolute;
      inset:0;
      z-index:3;
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 72px 16px;
      opacity:0;
      pointer-events:none;
    }
    .intro-card{
      max-width: 560px;
      width: 100%;
      text-align:center;
      background: rgba(3, 8, 20, 0.65);
      border-radius: 18px;
      padding: 18px 20px;
      box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(14px);
    }
    .intro-card h2{
      font-size: 1.6rem;
      line-height: 1.25;
      margin: 0 0 0.6rem;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      -webkit-background-clip: text;
      color: transparent;
    }
    .intro-card p{
      margin:0;
      font-size: 1rem;
      line-height: 1.6;
      color:#f5fbff;
    }

    @media (max-width: 768px) {
      .subheadline{
        top: 68svh;
        display: block;
      }
    }

    .intro-desktop{
      display:none;
      align-items:center;
      gap: 36px;
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
      justify-content: center;
    }
    .intro-line{
      width: 4px;
      background: linear-gradient(180deg, #8fffd8, #3ea0ff);
      border-radius: 999px;
      min-height: 420px;
      opacity: 0.9;
    }
    .intro-text{
      max-width: 900px;
      text-align: center;
    }
    .intro-text h2{
      font-size: clamp(1.9rem, 3.4vw, 3rem);
      font-weight: 800;
      line-height: 1.15;
      margin: 0 0 1.2rem;
      text-align: center;
      display: inline-block;
      position: relative;
      padding: 6px 12px;
      color: #18b3d7;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    }
    .intro-text h2::before{
      content: "";
      position: absolute;
      inset: -8px -16px;
      background: rgba(0, 255, 213, 0.1);
      border: 1px solid rgba(0, 255, 213, 0.35);
      border-radius: 999px;
      box-shadow: 0 12px 30px rgba(10, 20, 40, 0.18);
      z-index: -1;
    }
    .intro-text p{
      font-size: clamp(1.05rem, 1.5vw, 1.6rem);
      line-height: 1.75;
      font-weight: 600;
      color: #f5fbff;
      background: rgba(3, 8, 20, 0.65);
      border-radius: 18px;
      padding: 18px 22px;
      max-width: 900px;
      box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(14px);
    }

    /* Sections */
    .section{
      min-height: 100vh;
      padding: 120px 20px;
      position: relative;
      z-index: 1;
    }
    .section-dark{
      background:
        radial-gradient(circle at top left,
          rgba(0,255,213,0.15) 0%,
          rgba(0,255,213,0) 55%),
        radial-gradient(circle at bottom right,
          rgba(125,168,255,0.18) 0%,
          rgba(125,168,255,0) 60%),
        #0c1116;
      color:#d5e4f2;
    }
    .section-light{
      background:#f5f8fc;
      color:#1a2433;
    }
    .section .inner{
      max-width: 980px;
      margin: 0 auto;
      text-align: center;
    }
    .section .eyebrow{
      font-size: 2rem;
      letter-spacing: 0;
      text-transform: none;
      margin: 0 0 8px;
      font-weight: 600;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      -webkit-background-clip: text;
      color: transparent;
    }
    .section .title{
      font-size: clamp(28px, 7vw, 40px);
      margin: 0 0 16px;
      font-weight: 700;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      -webkit-background-clip: text;
      color: transparent;
    }
    .section .title-pill{
      font-size: clamp(28px, 7vw, 40px);
      font-weight: 800;
      line-height: 1.2;
      margin: 0 0 18px;
      display: inline-block;
      position: relative;
      padding: 6px 12px;
      color: #139ebf;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    }
    .section .title-pill::before{
      content: "";
      position: absolute;
      inset: -8px -16px;
      background: rgba(0, 255, 213, 0.14);
      border: 1px solid rgba(0, 255, 213, 0.35);
      border-radius: 999px;
      box-shadow: 0 12px 30px rgba(10, 20, 40, 0.18);
      z-index: -1;
    }
    .section .lead{
      font-size: 1.05rem;
      line-height: 1.7;
      margin: 0 auto 18px;
      max-width: 720px;
    }
    .section .highlight{color: var(--brand); font-weight:600;}

    .section-about{
      background:
        radial-gradient(circle at top left,
          rgba(0,255,213,0.15) 0%,
          rgba(0,255,213,0) 55%),
        radial-gradient(circle at bottom right,
          rgba(125,168,255,0.18) 0%,
          rgba(125,168,255,0) 60%),
        #0c1116;
      color:#eaf2ff;
    }
    .section-about .inner{
      background: none;
      border-radius: 0;
      padding: 0;
      box-shadow: none;
      backdrop-filter: none;
    }
    .section-about .lead{color:#eaf2ff;}
    .section-about p{
      font-weight: 600;
      font-size: clamp(1.05rem, 1.5vw, 1.6rem);
      color: #eaf2ff;
    }
    .section-about .lead{
      font-size: clamp(1.05rem, 1.5vw, 1.6rem);
      font-weight: 600;
    }

    .section-services{
      min-height: 100vh;
      padding: 120px 20px;
      background:
        radial-gradient(circle at top left,
          rgba(0,255,213,0.15) 0%,
          rgba(0,255,213,0) 55%),
        radial-gradient(circle at bottom right,
          rgba(125,168,255,0.18) 0%,
          rgba(125,168,255,0) 60%),
        #0c1116;
      position: relative;
      z-index: 1;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .services-container{
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 24px;
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(22px);
      border-radius: 28px;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 30px 80px rgba(0,0,0,0.45);
      width: 100%;
    }
    .services-label{
      text-align: center;
      font-size: 2rem;
      font-weight: 600;
      margin: 0 0 8px;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      -webkit-background-clip: text;
      color: transparent;
    }

    .services-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap: 16px;
      margin-top: 22px;
    }
    .service-card{
      background: linear-gradient(180deg, #232d39, #1a222c);
      border-radius: 18px;
      padding: 22px 20px;
      color: #d5e4f2;
      box-shadow: 0 14px 32px rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.06);
      text-align:center;
      transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    .service-card:hover{
      transform: translateY(-8px);
      box-shadow: 0 24px 50px rgba(0,0,0,0.55);
      border-color: rgba(0,255,213,0.35);
    }
    .service-card h3{
      font-size: 1.2rem;
      margin: 0 0 10px;
      text-align: center;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      -webkit-background-clip: text;
      color: transparent;
    }
    .service-card p{
      margin: 0;
      font-size: .98rem;
      line-height: 1.6;
      color: #c8d8e6;
    }

    /* Usluge desktop layout */
    @media (min-width: 769px) {
      .section-services{
        padding: 120px 20px;
      }
      .services-container{
        padding: 60px 50px 70px;
      }
      .services-grid{
        grid-template-columns: repeat(3, minmax(240px, 1fr));
        gap: 24px;
      }
      .service-card{
        border-radius: 22px;
        padding: 26px 24px;
        text-align:center;
        background: linear-gradient(180deg, #232d39, #1b2430);
        min-height: 240px;
      }
      .service-card h3{
        text-align:center;
      }
    }

    .section-references{
      background-image: var(--aurora-url);
      background-size: cover;
      background-position: center;
      color: #eaf2ff;
    }
    .section-references::before{
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(5,12,24,0.75);
      z-index: 0;
    }
    .section-references .inner{position: relative; z-index: 1;}
    .references-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      margin-top: 26px;
      justify-items: center;
    }
    .ref-item{
      background: #ffffff;
      border-radius: 18px;
      padding: 14px;
      display:flex;
      align-items:center;
      justify-content:center;
      width: 120px;
      height: 120px;
      box-shadow: 0 12px 28px rgba(0,0,0,0.08);
    }
    .ref-item img{
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .contact-card{
      background: rgba(8, 14, 22, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 22px;
      padding: 26px 20px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(16px);
      max-width: 560px;
      margin: 0 auto;
    }
    .contact-title{
      font-size: 2rem;
      margin: 0 0 8px;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      -webkit-background-clip: text;
      color: transparent;
    }
    .contact-sub{color:#c9d7ea; margin:0 0 26px; font-size: 1rem;}
    .contact-items{display:grid; gap: 22px;}
    .contact-link{
      display:flex;
      align-items:center;
      gap:12px;
      justify-content:center;
      font-size: 1rem;
      padding: 12px 14px;
      border-radius: 12px;
      color: #e7f0ff;
      text-decoration: none;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .contact-icon{width: 20px; height: 20px; display:inline-flex; align-items:center; justify-content:center; color: var(--brand);}

    .section-contact{
      display:flex;
      align-items:center;
    }

    @media (min-width: 769px) {
      .contact-card{
        width: min(560px, 33vw);
        max-width: none;
      }
    }

    /* Hide scrollbar on desktop */
    @media (min-width: 769px) {
      html { scrollbar-width: none; }
      html::-webkit-scrollbar { display: none; }
    }

    @media (min-width: 769px) {
      .references-grid{
        display:flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 32px;
      }
    }

    @media (min-width: 769px) {
      .stage{
        min-height: 100vh;
        display:grid;
        place-items:center;
      }
      .overlay-svg{
        position:absolute;
        inset:0;
        height:100%;
      }
      .subheadline{
        top: 78%;
        font-size: clamp(18px, 2vw, 26px);
      }
      .underlay-intro{
        padding: 120px 60px;
      }
      .intro-card{display:none;}
      .intro-desktop{display:flex;}

      .section{
        min-height: 100vh;
        padding: 160px 20px 200px;
      }
      .section .inner{
        max-width: 1200px;
      }
      .section .title{
        font-size: clamp(34px, 4vw, 50px);
      }
      .section .lead{
        font-size: clamp(18px, 2vw, 22px);
        line-height: 1.85;
        max-width: 820px;
      }

      .services-grid{
        grid-template-columns: repeat(2, minmax(280px, 1fr));
        gap: 32px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .overlay-svg{position:relative; height: 100svh;}
    }