:root {
    --page-bg: #132a2a;          
    --text: #f2f6f4;
    --muted: #b8c4c1;
    --line: rgba(255, 255, 255, 0.14);
    --pink: #1fcf3a;
    --peach: #8fe39a;
    --sun: #f5c54e;
    --navy: #141617;
    --hdr: 76px;
    --gap: 20px;
    --frame-w: min(52vw, 900px);
    --frame-bottom: 0px;          /* donja ivica okvira na telefonu (JS) */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "DM Sans", Arial, Helvetica, sans-serif;
}

html { background: var(--page-bg); }
body {
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.site-header *, .page * { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 6px; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

/* Pejzaž: ceo ekran na početku i na kraju, okvir u sredini */
.scene {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    z-index: 3;
    display: block;
    background: #5fa9a3;
}
/* zvezde trepere, svitci lebde */
.tw { animation: tw 3.2s ease-in-out infinite alternate; }
.tw:nth-child(3n) { animation-duration: 2.4s; animation-delay: -1s; }
.tw:nth-child(4n) { animation-duration: 4s; animation-delay: -2s; }
@keyframes tw { from { opacity: 1; } to { opacity: .25; } }
.fly { animation: fly 5s ease-in-out infinite alternate; transform-box: fill-box; }
.fly:nth-child(2n) { animation-duration: 6.5s; animation-delay: -2s; }
.fly:nth-child(3n) { animation-duration: 4.2s; animation-delay: -3s; }
@keyframes fly {
    0% { transform: translate(0, 0); opacity: .3; }
    50% { opacity: 1; }
    100% { transform: translate(14px, -18px); opacity: .5; }
}

/* Okvir scene: tanka ivica i senka oko SVG-a kad se smanji */
.frame-ring {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    z-index: 4;
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 30px 80px rgba(2, 6, 6, 0.45);
    pointer-events: none;
    opacity: 0;
}
/* Radionica — stoji tačno u okviru, preko pejzaža */
.studio {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    z-index: 3;
    border-radius: 24px;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;          /* JS je otkriva kod "O meni" */
}
.studio-inner {
    position: absolute;
    inset: 0;
    clip-path: circle(0% at 50% 62%);
}
.studio-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Na telefonu: pozadina iza okvira, da sadržaj ne viri sa strane */
.frame-backdrop { display: none; }

/* ---------- HEADER ---------- */
.skip-link {
    position: fixed; top: -100px; left: 16px; z-index: 50;
    background: #fff; color: var(--navy);
    padding: .6rem 1rem; border-radius: 8px;
    font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 16px; }

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    height: var(--hdr);
    transition: background .4s, border-color .4s;
    border-bottom: 1px solid transparent;
}
.site-header.scrolled {
    background: color-mix(in srgb, var(--page-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-color: var(--line);
}
.nav-wrap {
    height: 100%;
    padding: 0 clamp(20px, 4vw, 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--navy);
    text-decoration: none;
    transition: color .4s;
}
.logo { display: inline-flex; align-items: center; }
.logo-img { display: block; height: 46px; width: auto; }
.logo-on-dark { display: none; }
.site-header.scrolled .logo-on-light { display: none; }
.site-header.scrolled .logo-on-dark { display: block; }
.footer-inner .logo-img { height: 58px; }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
    position: relative;
    color: var(--navy);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    transition: color .4s, background .3s;
}
.site-header.scrolled .nav a { color: var(--text); }
.nav a:not(.nav-cta)::after {
    content: "";
    position: absolute; left: 0; bottom: -6px;
    width: 100%; height: 2px;
    background: var(--pink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s;
}
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.nav-cta {
    padding: .6rem 1.2rem;
    border-radius: 999px;
    background: var(--navy);
    color: #fff !important;
}
.site-header.scrolled .nav-cta { background: var(--pink); color: var(--navy) !important; }
.nav-cta:hover { filter: brightness(1.1); }

.nav-toggle { display: none; }

/* ---------- SADRŽAJ (normalan tok stranice) ---------- */
.page { position: relative; }          /* bez z-index: hero mora biti iznad scene */
.page .section, .page .site-footer { position: relative; z-index: 1; }  /* sredina: ispod okvira */
.page .end { z-index: 6; }                                              /* kraj: preko pejzaža, kao početak */

/* Kolona za tekst: levo od okvira na računaru */
.col {
    width: calc(100% - var(--frame-w) - var(--gap));
    padding: 0 clamp(24px, 5vw, 88px);
}

/* HERO — jedini deo preko cele scene: naslov u praznom nebu */
.hero {
    /* boje hero-a: tamne na nebu, svetle kad scena ode u okvir (JS ih menja) */
    --ink: #141617;
    --sub: rgba(20, 22, 23, .82);
    --accent: #0a5a5c;
    --btn-bg: #141617;
    --btn-fg: #ffffff;
    position: relative;
    z-index: 6;
    min-height: 175vh;           /* zalazak sunca traje dok ne dođeš do "O meni" */
    padding-top: calc(var(--hdr) + 7vh);
}
.hero-inner {
    position: sticky;
    top: calc(var(--hdr) + 7vh);
    max-width: 34rem;
    color: var(--ink);
}
.eyebrow {
    margin: 0 0 .9rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--pink);
}
.hero .eyebrow { color: var(--accent); }
.hero h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.6rem, 5.6vw, 4.8rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
}
.hero h1 em { font-style: italic; font-weight: 400; }
.hero-text {
    margin: 1.2rem 0 0;
    max-width: 28rem;
    font-size: 1.12rem;
    color: var(--sub);
}
.hero .btn-main { background: var(--btn-bg); color: var(--btn-fg); }
.hero .btn-line { border-color: var(--ink); color: var(--ink); }
.hero .btn-line:hover { background: var(--ink); color: var(--btn-bg); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

.btn-main, .btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .8rem 1.6rem;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s, background .3s, color .3s, box-shadow .3s;
}
.btn-main {
    border: 0;
    background: var(--navy);
    color: #fff;
    box-shadow: 0 10px 28px rgba(20, 22, 23, .25);
}
.btn-main:hover { transform: translateY(-2px); }
.btn-line { border: 1.5px solid var(--navy); color: var(--navy); }
.btn-line:hover { background: var(--navy); color: #fff; }

/* SEKCIJE — svaka "drži" scenu u svom dobu dana */
.section {
    min-height: 115vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--hdr) + 6vh);
    padding-bottom: 12vh;
    scroll-margin-top: 0;
}
.section-inner { width: 100%; max-width: 38rem; }
.section h2 {
    margin: 0 0 1.2rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
}
.section h2 em { font-style: italic; font-weight: 400; color: var(--peach); }
.lead { margin: 0; font-size: 1.12rem; color: var(--muted); }
.lead + .lead { margin-top: 1rem; }

/* Mesto koje treba popuniti */
.fill {
    background: rgba(31, 207, 58, .14);
    border-bottom: 1px dashed rgba(31, 207, 58, .7);
    border-radius: 3px;
    padding: 0 .2em;
}

/* ---------- LINK  ---------- */

a:link {color: #37625e;}
a:visited { color: #8fe39a;}  

/* O meni: šta radim */
.services {
    list-style: none;
    margin: 2.4rem 0 0;
    padding: 0;
    border-top: 1px solid var(--line);
}
.services li {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: .2rem 1rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--line);
}
.services .num {
    grid-row: span 2;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--peach);
}
.services h3 { margin: 0; font-size: 1.08rem; }
.services p { margin: 0; color: var(--muted); font-size: .96rem; }

/* Projekti */
.projects { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.4rem; }
.project {
    display: grid;
    grid-template-columns: minmax(150px, 38%) 1fr;
    gap: 1.3rem;
    align-items: center;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .03);
    transition: transform .3s ease, border-color .3s, background .3s;
}
.project:hover { transform: translateX(6px); border-color: rgba(31, 207, 58, .45); background: rgba(255, 255, 255, .06); }
/* Zameni ovaj blok slikom: <img src="..." alt="..."> */
.project-media {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
}
.project-media img { width: 100%; height: 100%; object-fit: cover; }
.project-media span {                      /* kad projekat nema sliku: prvo slovo naziva */
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .9);
}
.project h3 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--pink); }
.project h3 a:hover { color: var(--pink); }

/* ---------- Rotator projekata: vidljiva su 3, ostali se smenjuju ---------- */
.projects-rotator { position: relative; }
.projects-rotator .projects { align-content: start; }   /* kartice ostaju zbijene gore, razmak je isti */
.projects-rotator.is-ready .project-item.is-out { display: none; }
.rotator-controls {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: 1.4rem;
}
.rotator-btn, .rotator-pause {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
    font: inherit;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background .25s, border-color .25s, color .25s;
}
.rotator-btn:hover, .rotator-pause:hover { background: var(--pink); border-color: var(--pink); color: #0b0d0e; }
.rotator-pause { font-size: .8rem; margin-left: auto; }
.rotator-pause .ico-play { display: none; }
.rotator-pause[aria-pressed="true"] .ico-play { display: inline; }
.rotator-pause[aria-pressed="true"] .ico-pause { display: none; }
.rotator-dots { display: flex; gap: .45rem; }
.rotator-dot {
    width: 9px; height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    cursor: pointer;
    transition: width .3s, background .3s;
}
.rotator-dot.is-current { width: 26px; background: var(--pink); }
/* tanka traka koja pokazuje kad će sledeća smena */
.rotator-progress {
    position: absolute;
    left: 0; right: 0; bottom: -10px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}
.rotator-progress i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--pink);
    transform-origin: left;
    transform: scaleX(0);
}
.media-1 { background: linear-gradient(160deg, #1fcf3a, #0a5a5c); }
.media-2 { background: linear-gradient(160deg, #3d3d3d, #0a5a5c); }
.media-3 { background: linear-gradient(160deg, #0a5a5c, #0b1314); }
.project h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.project p { margin: 0; color: var(--muted); font-size: .95rem; }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; padding: 0; list-style: none; }
.tags li {
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
}

/* KRAJ — kao početak: pejzaž preko celog ekrana (noć), sadržaj na nebu */
.end-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 88px);
}
.end .section-inner { max-width: 31rem; }   /* desno ostaje nebo sa mesecom */
.end h2, .end .lead, .end .eyebrow { text-shadow: 0 2px 18px rgba(4, 8, 8, .45); }

/* Kontakt */
.contact-direct { margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.contact-direct a { color: var(--text); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--pink); }
.contact-direct a:hover { color: var(--pink); }

.contact-form {
    position: relative;
    margin-top: 2rem;
    padding: clamp(1.2rem, 2.6vw, 1.8rem);
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(8, 16, 16, .55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .5rem; min-width: 0; }
.field label { font-size: .85rem; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea {
    font: inherit;
    color: var(--text);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .75rem .95rem;
    width: 100%;
    min-width: 0;
    transition: border-color .2s, background .2s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select option { color: #111; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--pink);
    background: rgba(255, 255, 255, .1);
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #ff7b7b; }
.field-error { min-height: 1.1em; font-size: .78rem; color: #ff9d9d; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .4rem; }
.contact-form .btn-main { background: var(--pink); color: var(--navy); box-shadow: 0 10px 30px rgba(31, 207, 58, .25); }
.contact-form .btn-main:disabled { opacity: .6; cursor: wait; transform: none; }
.form-status { margin: 0; font-weight: 600; font-size: .95rem; }
.form-status.ok { color: #84e6ad; }
.form-status.err { color: #ff9d9d; }

/* Footer — scena je stigla do kraja noći */
.site-footer { padding-bottom: 2.5rem; }
.site-footer .footer-inner { border-top-color: rgba(255, 255, 255, .18); }
.footer-inner {
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
    color: var(--muted);
    font-size: .9rem;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.footer-links a { color: var(--text); text-decoration: none; opacity: .85; }
.footer-links a:hover { opacity: 1; color: var(--pink); }
.footer-inner p { margin: 0; }
/* podaci o firmi (PIB, matični broj) */
.company-info {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 2rem;
    margin: 1.2rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: .82rem;
    color: var(--muted);
}
.company-info div { display: flex; gap: .45rem; }
.company-info dt { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; align-self: center; }
.company-info dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.farewell {
    padding: 22vh 0 16vh;
    max-width: 31rem;
}
.farewell p.lead { margin-bottom: .4rem; }
.farewell h2 {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.1;
}
.farewell h2 em { font-style: italic; font-weight: 400; color: var(--peach); }
.farewell .btn-line { border-color: var(--text); color: var(--text); margin-top: 1.4rem; }
.farewell .btn-line:hover { background: var(--text); color: var(--navy); }

/* ---------- TABLET I TELEFON: okvir gore, sadržaj ispod ---------- */
@media (max-width: 900px) {
    :root { --hdr: 64px; }


    .nav-toggle {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        width: 44px; height: 44px;
        background: none; border: 0; padding: 10px; cursor: pointer;
    }
    .nav-toggle span { height: 2px; background: var(--navy); transition: transform .3s, opacity .3s, background .4s; }
    .site-header.scrolled .nav-toggle span { background: var(--text); }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav {
        position: fixed;
        top: var(--hdr); left: 0; right: 0;
        flex-direction: column; gap: 0;
        padding: .5rem 20px 1.5rem;
        background: var(--page-bg);
        border-bottom: 1px solid var(--line);
        transform: translateY(-110%);
        visibility: hidden;
        transition: transform .35s ease, visibility .35s;
    }
    .nav.open { transform: translateY(0); visibility: visible; }
    .nav a, .site-header .nav a { width: 100%; padding: .95rem 0; text-align: center; color: var(--text); }
    .nav a::after { display: none; }
    .nav-cta { margin-top: .6rem; }

    .frame-backdrop {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 0;
        z-index: 2;
        background: var(--page-bg);
    }

    .col { width: 100%; padding: 0 20px; }
    .hero { padding-top: calc(var(--hdr) + 3vh); min-height: 160svh; }
    .hero-inner { position: static; }
    .hero-text { font-size: 1rem; }
    .section {
        min-height: 0;
        display: block;
        padding-top: 14vh;
        padding-bottom: 14vh;
        scroll-margin-top: calc(var(--frame-bottom) - 14vh + 8px);
    }
    .section-inner { max-width: 40rem; margin: 0 auto; }
    .end-inner { padding: 0 20px; }
    .end .section-inner, .farewell, .footer-inner, .company-info { max-width: 40rem; margin-left: auto; margin-right: auto; }
    .section.end { scroll-margin-top: 0; padding-top: calc(var(--hdr) + 6vh); }
    .farewell { padding: 16vh 0 12vh; }
}
@media (max-width: 560px) {
    .project { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .footer-inner { justify-content: center; text-align: center; }
    .company-info { justify-content: center; }
}

/* ---------- SMANJENO KRETANJE ---------- */
/* scena je odmah u okviru, pa hero stoji na tamnoj pozadini */
.framed .hero {
    --ink: #f2f6f4; --sub: #b8c4c1; --accent: #1fcf3a; --btn-bg: #1fcf3a; --btn-fg: #141617;
}

@media (prefers-reduced-motion: reduce) {
    .tw, .fly { animation: none; }
    *, *::before, *::after { transition-duration: .01ms !important; }
    .project:hover, .btn-main:hover { transform: none; }
}

/* link ka politici privatnosti ispod forme */
.form-note { margin: .9rem 0 0; font-size: .82rem; color: var(--muted); }
.form-note a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--pink); }
.form-note a:hover { color: var(--pink); }

/* =====================================================================
   STRANICA: POLITIKA PRIVATNOSTI
   ===================================================================== */
.legal-page {
    background:
        radial-gradient(ellipse 80% 45% at 85% 0%, rgba(10, 90, 92, .5), transparent 70%),
        radial-gradient(ellipse 60% 40% at 0% 100%, rgba(31, 207, 58, .10), transparent 70%),
        #0b1314;
    min-height: 100vh;
}
/* header je zalepljen gore i ima punu pozadinu — sadržaj počinje ispod njega */
.legal-page .site-header {
    position: sticky;
    background: rgba(11, 19, 20, .94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.legal-back {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: .92rem;
    padding: .55rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    white-space: nowrap;
    transition: background .3s, color .3s, border-color .3s;
}
.legal-back:hover { background: var(--pink); border-color: var(--pink); color: #0b0d0e; }

/* naslovni deo */
.legal-hero {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(2.5rem, 7vh, 4.5rem) 24px 2rem;
}
.legal-hero h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.3rem, 5.5vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.legal-hero h1 em { font-style: italic; font-weight: 400; color: var(--peach); }
.legal-intro {
    max-width: 44rem;
    margin: 1.2rem 0 0;
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--muted);
}
.legal-meta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.4rem;
    padding: .4rem .9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: .82rem;
    color: var(--muted);
}
.legal-meta::before {
    content: "";
    width: .5rem; height: .5rem;
    border-radius: 50%;
    background: var(--pink);
}

/* raspored: sadržaj sa strane + tekst */
.legal-layout {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 5rem;
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 3rem;
    align-items: start;
}
.legal-toc {
    position: sticky;
    top: calc(var(--hdr) + 1.5rem);
    padding: 1.2rem 1.2rem 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .03);
}
.legal-toc p {
    margin: 0 0 .6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
    display: flex;
    gap: .6rem;
    padding: .45rem .5rem;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    line-height: 1.35;
    opacity: .8;
    transition: background .2s, opacity .2s;
}
.legal-toc a::before { content: counter(toc) "."; color: var(--pink); font-weight: 700; }
.legal-toc a:hover { background: rgba(255, 255, 255, .06); opacity: 1; }

/* sekcije */
.legal-body { min-width: 0; }
.legal-section {
    scroll-margin-top: calc(var(--hdr) + 1.5rem);
    padding: 1.8rem clamp(1.2rem, 3vw, 2rem);
    margin-bottom: 1.2rem;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(14, 26, 27, .7);
}
.legal-section h2 {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    line-height: 1.25;
}
.legal-num {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    background: rgba(31, 207, 58, .14);
    border: 1px solid rgba(31, 207, 58, .45);
    color: var(--pink);
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 700;
}
.legal-section p {
    margin: 0 0 1rem;
    max-width: 42rem;
    font-size: 1.02rem;
    line-height: 1.75;
    color: #c7d2cf;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section strong { color: var(--text); }
.legal-section a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--pink); }
.legal-section a:hover { color: var(--pink); }

/* spiskovi kao uredne pločice u dve kolone */
.legal-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}
.legal-list li {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem .9rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: var(--text);
    font-size: .97rem;
    line-height: 1.4;
}
.legal-list li::before {
    content: "";
    flex: none;
    width: .55rem; height: .55rem;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 0 4px rgba(31, 207, 58, .15);
}

/* istaknut okvir (pravni osnov, kolačići) */
.legal-callout {
    margin: 0;
    padding: 1rem 1.2rem;
    border-left: 3px solid var(--pink);
    border-radius: 0 12px 12px 0;
    background: rgba(31, 207, 58, .07);
}
.legal-callout p { margin: 0; color: var(--text); }

/* podaci o rukovaocu */
.legal-data { margin: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.legal-data div {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 1rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--line);
}
.legal-data div:last-child { border-bottom: 0; }
.legal-data div:nth-child(odd) { background: rgba(255, 255, 255, .03); }
.legal-data dt { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); align-self: center; }
.legal-data dd { margin: 0; color: var(--text); }
.legal-data a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--pink); }

.legal-footer {
    padding: 2rem 24px 3rem;
    border-top: 1px solid var(--line);
    text-align: center;
    color: var(--muted);
    font-size: .85rem;
}
.legal-footer .company-info { justify-content: center; border-top: 0; margin: 0 0 .6rem; padding-top: 0; }
.legal-footer a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--pink); }
.legal-footer p { margin: 0; }

@media (max-width: 900px) {
    .legal-layout { grid-template-columns: 1fr; gap: 1.2rem; }
    .legal-toc { position: static; }
    .legal-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .legal-hero, .legal-layout { padding-left: 16px; padding-right: 16px; }
    .legal-list, .legal-toc ol { grid-template-columns: 1fr; }
    .legal-data div { grid-template-columns: 1fr; gap: .15rem; }
    .legal-back { padding: .5rem .85rem; font-size: .85rem; }
}