/* =============================================================
   Apartmandžija — premium edukativni landing
   Vanilla CSS, mobile-first, no framework
   ============================================================= */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

   /* -------------------- Design tokens -------------------- */
   :root {
     --bg: #F4F3EC;
     --cream: #F4F3EC;
     --cream-2: #ECEAE0;
     --text: #2A2A2D;
     --ink: #1F1F22;
     --charcoal: #2A2A2D;
     --black: #121212;
     --white: #FFFFFF;
   
     --coral: #FA5757;
     --coral-dark: #E04545;
     --navy: #062180;
     --navy-dark: #051670;
     --yellow: #F2C940;
     --purple: #A968E8;
   
     --muted: #6E6A63;
     --border: #E5E0D8;
     --border-strong: #D7D2C7;
   
     --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   
     --container: 1120px;
     --radius-sm: 12px;
     --radius: 24px;
     --radius-lg: 32px;
   
     --shadow-sm: 0 1px 2px rgba(20, 20, 22, 0.04), 0 1px 3px rgba(20, 20, 22, 0.04);
     --shadow: 0 4px 16px rgba(20, 20, 22, 0.06), 0 1px 3px rgba(20, 20, 22, 0.04);
     --shadow-lg: 0 24px 60px rgba(20, 20, 22, 0.10), 0 8px 24px rgba(20, 20, 22, 0.06);
   
     --header-h: 76px;
     --section-pad: 96px;
     --section-pad-mob: 56px;
   
     --t-fast: 0.18s ease;
     --t: 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
   }
   
   /* -------------------- Reset & base -------------------- */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
   
   html {
     scroll-behavior: smooth;
     scroll-padding-top: var(--header-h);
     -webkit-text-size-adjust: 100%;
   }
   
   @media (prefers-reduced-motion: reduce) {
     html { scroll-behavior: auto; }
     *, *::before, *::after {
       animation-duration: 0.01ms !important;
       transition-duration: 0.01ms !important;
     }
   }
   
   body {
     margin: 0;
     background: var(--bg);
     color: var(--text);
     font-family: var(--font-sans);
     font-size: 17px;
     line-height: 1.6;
     font-weight: 400;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
   }
   
   img, svg, picture {
     display: block;
     max-width: 100%;
     height: auto;
   }
   
   a {
     color: inherit;
     text-decoration: none;
   }
   
   button {
     font-family: inherit;
     cursor: pointer;
   }
   
   ul, ol {
     margin: 0;
     padding: 0;
     list-style: none;
   }
   
   h1, h2, h3, h4 {
     font-family: var(--font-sans);
     color: var(--ink);
     margin: 0;
     font-weight: 800;
     letter-spacing: -0.025em;
     line-height: 1.08;
   }
   
   h1 { font-weight: 900; letter-spacing: -0.035em; }
   h4 { font-weight: 700; letter-spacing: -0.015em; }
   
   p { margin: 0; }
   
   em {
     font-style: normal;
     color: var(--coral);
     font-weight: inherit;
   }
   
   strong {
     font-weight: 700;
     color: var(--ink);
   }
   .uplata-card .btn {
     display: inline-block;
     width: auto;
     padding: 8px 14px;
     font-size: 13px;
     width: fit-content;
   }
   .payment-icons {
     display: flex;
     gap: 10px;
     align-items: center;
   }
   
   .payment-icons img {
     height: 24px;
     width: auto;
     opacity: 0.9;
   }
   
   /* -------------------- A11y skip link -------------------- */
   .skip-link {
     position: absolute;
     left: -9999px;
     top: 0;
     background: var(--charcoal);
     color: var(--white);
     padding: 10px 14px;
     border-radius: 0 0 8px 0;
     z-index: 1000;
     font-weight: 600;
     font-size: 14px;
   }
   .skip-link:focus { left: 0; }
   
   /* -------------------- Lekcije -------------------- */
   .lesson-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 18px 0;
     border-bottom: 1px solid var(--border);
     font-size: 18px;
     cursor: pointer;
   }
   
   .lesson-plus {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: #111;
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
   }
   .lesson-list {
     margin-top: 32px;
   }
   
   
   /* -------------------- Layout -------------------- */
   .container {
     width: 100%;
     max-width: var(--container);
     margin: 0 auto;
     /* padding: 0 24px; */
   }
   
   .section { padding: var(--section-pad-mob) 0; }
   @media (min-width: 768px) {
     .section { padding: var(--section-pad) 0; }
   }
   
   .section-light { background: var(--white); }
   .section-cream { background: var(--cream-2); }
   .section-dark {
     background: var(--navy);
     color: rgba(255, 255, 255, 0.86);
   }
   .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 {
     color: var(--white);
   }
   
   /* -------------------- Header -------------------- */
   .site-header {
     position: sticky;
     top: 0;
     left: 0;
     right: 0;
     z-index: 50;
     background: rgba(255, 255, 255, 0.92);
     backdrop-filter: saturate(180%) blur(12px);
     -webkit-backdrop-filter: saturate(180%) blur(12px);
     border-bottom: 1px solid transparent;
     transition: border-color var(--t), background var(--t), box-shadow var(--t);
   }
   .site-header.is-scrolled {
     background: rgba(255, 255, 255, 0.98);
     border-bottom-color: var(--border);
     box-shadow: 0 2px 16px rgba(20, 20, 22, 0.06);
   }
   
   .nav-row {
     height: var(--header-h);
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
   }
   
   .brand {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-weight: 800;
     color: var(--ink);
   }
   .brand-mark {
     display: none;
   }
   .brand-logo {
     display: block;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     object-fit: cover;
     flex-shrink: 0;
   }
   .brand-name {
     font-size: 19px;
     font-weight: 700;
     letter-spacing: -0.02em;
   }
   
   .nav-desktop {
     display: none;
     align-items: center;
     gap: 28px;
     margin: 0 auto;
   }
   .nav-desktop a {
     font-size: 14.5px;
     font-weight: 500;
     color: var(--text);
     position: relative;
     padding: 6px 0;
     transition: color var(--t-fast);
   }
   .nav-desktop a:hover { color: var(--coral); }
   
   .nav-cta { display: none; }
   @media (min-width: 1024px) {
     .nav-desktop { display: inline-flex; }
     .nav-cta { display: inline-flex; align-items: center; gap: 10px; }
   }
   
   /* Mobile nav toggle */
   .nav-toggle {
     display: inline-flex;
     flex-direction: column;
     justify-content: space-between;
     width: 36px;
     height: 28px;
     padding: 4px 0;
     background: transparent;
     border: 0;
   }
   .nav-toggle span {
     display: block;
     height: 2px;
     width: 100%;
     background: var(--ink);
     border-radius: 2px;
     transition: transform var(--t), opacity var(--t-fast);
   }
   .nav-toggle[aria-expanded="true"] span:nth-child(1) {
     transform: translateY(8px) rotate(45deg);
   }
   .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
   .nav-toggle[aria-expanded="true"] span:nth-child(3) {
     transform: translateY(-8px) rotate(-45deg);
   }
   @media (min-width: 1024px) { .nav-toggle { display: none; } }
   
   .nav-mobile {
     display: none;
     flex-direction: column;
     padding: 18px 24px 24px;
     gap: 6px;
     border-top: 1px solid var(--border);
     background: var(--white);
   }
   .nav-mobile.is-open { display: flex; }
   .nav-mobile a {
     display: block;
     padding: 12px 4px;
     font-size: 17px;
     font-weight: 500;
   
   }
   .nav-mobile a.btn {  margin-top: 12px; text-align: center; }
   @media (min-width: 1024px) { .nav-mobile { display: none !important; } }
   
   /* -------------------- Buttons -------------------- */
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     font-family: var(--font-sans);
     font-weight: 600;
     font-size: 15px;
     line-height: 1;
     padding: 14px 22px;
     border-radius: 999px;
     border: 1.5px solid transparent;
     white-space: nowrap;
     cursor: pointer;
     letter-spacing: -0.005em;
     transition: transform var(--t-fast), background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
   }
   .btn:active { transform: translateY(1px); }
   
   .btn-sm { padding: 10px 18px; font-size: 14px; }
   .btn-lg { padding: 17px 28px; font-size: 16px; }
   .btn-block { width: 100%; }
   
   .btn-primary {
     background: #FF5A5F;
     color: var(--white);
     border-color: #FF5A5F;
   }
   .btn-primary:hover {
     background: var(--charcoal);
     border-color: var(--charcoal);
     color: var(--white);
   }
   
   .btn-outline {
     background: transparent;
     color: var(--charcoal);
     border-color: var(--charcoal);
     border-width: 2px;
   }
   .btn-outline:hover {
     background: var(--charcoal);
     color: var(--white);
   }
   
   .btn-ghost-dark {
     background: transparent;
     color: var(--charcoal);
     border-color: rgba(42, 42, 45, 0.45);
     border-width: 2px;
   }
   .btn-ghost-dark:hover {
     background: var(--charcoal);
     color: var(--white);
     border-color: var(--charcoal);
   }
   
   .btn-ghost-light {
     background: transparent;
     color: var(--white);
     border-color: rgba(255, 255, 255, 0.35);
   }
   .btn-ghost-light:hover {
     background: var(--white);
     color: var(--charcoal);
     border-color: var(--white);
   }
   
   /* -------------------- Eyebrow & headings -------------------- */
   .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 12px;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     font-weight: 700;
     color: var(--coral);
     margin-bottom: 16px;
   }
   .eyebrow-dot {
     display: inline-block;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--coral);
     position: relative;
     box-shadow: 0 0 0 0 rgba(250, 87, 87, 0.55);
     animation: eyebrowPulse 1.8s ease-out infinite;
   }
   @keyframes eyebrowPulse {
     0%   { box-shadow: 0 0 0 0 rgba(250, 87, 87, 0.55); }
     70%  { box-shadow: 0 0 0 10px rgba(250, 87, 87, 0); }
     100% { box-shadow: 0 0 0 0 rgba(250, 87, 87, 0); }
   }
   @media (prefers-reduced-motion: reduce) {
     .eyebrow-dot { animation: none; }
   }
   
   .section-head {
     max-width: 760px;
     margin: 0 auto 56px;
     text-align: center;
   }
   .section-head h2 {
     font-size: clamp(32px, 4.4vw, 52px);
     margin-bottom: 18px;
   }
   .section-head .lead {
     font-size: 17px;
     color: var(--muted);
     line-height: 1.6;
     font-weight: 400;
   }
   
   .lead { color: var(--muted); }
   
   /* -------------------- HERO -------------------- */
   .hero {
     position: relative;
     padding: 64px 0 80px;
     background: var(--cream);
     border-bottom: 1px solid var(--border);
     overflow: hidden;
   }
   .hero::before,
   .hero::after {
     content: "";
     position: absolute;
     border-radius: 50%;
     filter: blur(80px);
     opacity: 0.18;
     pointer-events: none;
   }
   .hero::before {
     width: 360px;
     height: 360px;
     background: var(--charcoal);
     top: -100px;
     left: -140px;
     opacity: 0.07;
   }
   .hero::after {
     width: 360px;
     height: 360px;
     background: var(--coral);
     bottom: -120px;
     right: -140px;
     opacity: 0.10;
   }
   
   @media (min-width: 768px) {
     .hero { padding: 96px 0 120px; }
   }
   
   .hero-inner {
     position: relative;
     z-index: 1;
     max-width: 920px;
     margin: 0 auto;
     text-align: center;
   }
   
   .hero-title {
     font-size: clamp(38px, 6.8vw, 84px);
     line-height: 1;
     letter-spacing: -0.04em;
     margin: 14px 0 22px;
     color: var(--ink);
     font-weight: 800;
   }
   .hero-title em {
     color: var(--coral);
     font-style: italic;
     font-weight: 800;
     letter-spacing: -0.045em;
   }
   
   .hero-sub {
     font-size: clamp(17px, 2vw, 21px);
     color: var(--muted);
     max-width: 640px;
     margin: 0 auto 36px;
     line-height: 1.5;
     font-weight: 400;
   }
   
   .hero-actions {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 14px;
     margin-bottom: 56px;
   }
   
   .hero-meta {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     gap: 24px;
     padding-top: 32px;
     border-top: 1px solid var(--border);
     max-width: 720px;
     margin: 0 auto;
   }
   .hero-meta-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 4px;
     flex: 1 1 140px;
   }
   .hero-meta-num {
     font-size: 30px;
     font-weight: 800;
     color: var(--ink);
     line-height: 1;
     letter-spacing: -0.03em;
   }
   .hero-meta-label {
     font-size: 13px;
     color: var(--muted);
     text-align: center;
   }
   .hero-meta-divider {
     width: 1px;
     height: 36px;
     background: var(--border);
     display: none;
   }
   @media (min-width: 768px) { .hero-meta-divider { display: block; } }
   
   @media (max-width: 640px) {
     .hero-title { font-size: 42px; }
     .hero-actions .btn { width: 100%; }
   }
   
   /* -------------------- PROBLEM -------------------- */
   .problem-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
   }
   @media (min-width: 768px) {
     .problem-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
   }
   .problem-card {
     background: var(--cream);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 32px 28px;
     position: relative;
     transition: transform var(--t), border-color var(--t), box-shadow var(--t);
   }
   .problem-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 28px;
     right: 28px;
     height: 3px;
     background: var(--coral);
     border-radius: 0 0 3px 3px;
     opacity: 0;
     transition: opacity var(--t);
   }
   .problem-card:hover {
     transform: translateY(-3px);
     border-color: var(--border-strong);
     box-shadow: var(--shadow);
   }
   .problem-card:hover::before { opacity: 1; }
   .problem-num {
     display: inline-block;
     font-size: 13px;
     font-weight: 700;
     color: var(--coral);
     letter-spacing: 0.12em;
     margin-bottom: 14px;
   }
   .problem-card h3 {
     font-size: 22px;
     margin-bottom: 10px;
   }
   .problem-card p {
     color: var(--muted);
     font-size: 15.5px;
     line-height: 1.6;
   }
   
   /* -------------------- VALUE CARDS -------------------- */
   .value-cards {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
   }
   
   @media (min-width: 700px) {
     .value-cards {
       grid-template-columns: 1fr 1fr;
     }
   }
   
   @media (min-width: 1024px) {
     .value-cards {
       grid-template-columns: repeat(4, 1fr);
       gap: 24px;
     }
   }
   
   .value-cards-final {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 24px;
   }
   
   .value-card {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 22px;
     padding: 28px;
     transition: transform var(--t), box-shadow var(--t), border-color var(--t);
   }
   
   .value-card:hover {
     transform: translateY(-4px);
     border-color: var(--border-strong);
     box-shadow: 0 16px 40px rgba(20,20,22,0.08);
   }
   
   .value-icon-box {
     width: 56px;
     height: 56px;
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 18px;
   }
   
   .value-svg-icon {
     width: 26px;
     height: 26px;
     filter: brightness(0) invert(1);
   }
   
   .value-brand-icon {
     width: 36px;
     height: 36px;
     object-fit: contain;
     filter: none;
   }
   
   .value-card-num {
     display: block;
     font-size: 28px;
     font-weight: 800;
     line-height: 1;
     letter-spacing: -0.03em;
     margin-bottom: 10px;
   }
   
   .value-card h3 {
     font-size: 20px;
     margin-bottom: 10px;
   }
   
   .value-card p {
     color: var(--muted);
     font-size: 14px;
     line-height: 1.6;
   }
   
   .value-start .value-icon-box {
     background: var(--purple);
   }
   
   .value-start .value-card-num {
     color: var(--purple);
   }
   
   .value-booking .value-icon-box {
     background: #0C3B7C;
   }
   
   .value-booking .value-card-num {
     color: #0C3B7C;
   }
   
   .value-airbnb .value-icon-box {
     background: #FF5863;
   }
   
   .value-airbnb .value-card-num {
     color: #FF5863;
   }
   
   .value-system .value-icon-box {
     background: #FFD335;
   }
   
   .value-system .value-card-num {
     color: #D4A600;
   }
   
   @media (prefers-reduced-motion: no-preference) {
     .value-card:nth-child(1) { animation: cardFloat 6s ease-in-out infinite; }
     .value-card:nth-child(2) { animation: cardFloat 6s ease-in-out infinite; animation-delay: -1.5s; }
     .value-card:nth-child(3) { animation: cardFloat 6s ease-in-out infinite; animation-delay: -3s; }
     .value-card:nth-child(4) { animation: cardFloat 6s ease-in-out infinite; animation-delay: -4.5s; }
     .value-card:hover { animation-play-state: paused; }
   }
   
   @keyframes cardFloat {
     0%, 100% { transform: translateY(0); }
     50% { transform: translateY(-7px); }
   }
   
   @media (max-width: 900px) {
     .value-cards-final {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   
   @media (max-width: 520px) {
     .value-cards-final {
       grid-template-columns: 1fr;
     }
   }
   
   
   /* -------------------- AUDIENCE (Profil polaznika) — auto marquee -------------------- */
   .audience-marquee {
     position: relative;
     margin-top: 56px;
     overflow: hidden;
     padding: 8px 0 12px;
     -webkit-mask-image: linear-gradient(
       to right,
       transparent 0,
       #000 6%,
       #000 94%,
       transparent 100%
     );
             mask-image: linear-gradient(
       to right,
       transparent 0,
       #000 6%,
       #000 94%,
       transparent 100%
     );
   }
   
   .audience-marquee-track {
     display: flex;
     flex-wrap: nowrap;
     gap: 22px;
     width: max-content;
     animation: audienceMarquee 60s linear infinite;
     will-change: transform;
   }
   
   .audience-marquee:hover .audience-marquee-track,
   .audience-marquee:focus-within .audience-marquee-track {
     animation-play-state: paused;
   }
   
   @keyframes audienceMarquee {
     from { transform: translate3d(0, 0, 0); }
     to   { transform: translate3d(-50%, 0, 0); }
   }
   
   .audience-card {
     position: relative;
     flex: 0 0 320px;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 28px 24px;
     display: flex;
     flex-direction: column;
     gap: 12px;
     transition: transform var(--t), border-color var(--t), box-shadow var(--t);
   }
   .audience-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 24px;
     right: 24px;
     height: 3px;
     background: currentColor;
     color: var(--coral);
     border-radius: 0 0 3px 3px;
     opacity: 0;
     transition: opacity var(--t);
   }
   .audience-card:hover {
     transform: translateY(-4px);
     border-color: var(--border-strong);
     box-shadow: var(--shadow);
   }
   .audience-card:hover::before { opacity: 1; }
   
   .audience-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 48px;
     height: 48px;
     border-radius: 14px;
     background: var(--cream-2);
     color: var(--charcoal);
     margin-bottom: 4px;
     transition: background var(--t), color var(--t), transform var(--t);
   }
   .audience-card:hover .audience-icon {
     background: var(--coral);
     color: var(--white);
     transform: rotate(-4deg) scale(1.04);
   }
   
   .audience-card h3 {
     font-size: 18px;
     letter-spacing: -0.015em;
     color: var(--ink);
   }
   .audience-card p {
     font-size: 14px;
     color: var(--muted);
     line-height: 1.6;
   }
   
   /* Per-card accent on icon (data-icon driven so duplicates inherit correctly) */
   .audience-card[data-icon="coral"] .audience-icon { color: var(--coral); }
   .audience-card[data-icon="navy"]  .audience-icon { color: var(--navy);  }
   .audience-card[data-icon="gold"]  .audience-icon { color: #C99A1F;      }
   .audience-card[data-icon="green"] .audience-icon { color: #2E7D5B;      }
   .audience-card:hover .audience-icon { color: var(--white); }
   
   .audience-card[data-icon="coral"]::before { color: var(--coral); }
   .audience-card[data-icon="navy"]::before  { color: var(--navy);  }
   .audience-card[data-icon="gold"]::before  { color: #C99A1F;      }
   .audience-card[data-icon="green"]::before { color: #2E7D5B;      }
   
   @media (prefers-reduced-motion: reduce) {
     .audience-marquee-track { animation: none; }
     .audience-marquee {
       overflow-x: auto;
       -webkit-mask-image: none;
               mask-image: none;
       scroll-snap-type: x mandatory;
     }
     .audience-card { scroll-snap-align: start; }
   }
   
   /* -------------------- MODULES (program — 4 dela) -------------------- */
   .modules {
     display: flex;
     flex-direction: column;
     gap: 28px;
   }
   @media (min-width: 880px) {
     .modules { gap: 36px; }
   }
   
   .modules-group {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 32px 28px;
     transition: box-shadow var(--t), border-color var(--t);
   }
   .modules-group:hover {
     border-color: var(--border-strong);
     box-shadow: var(--shadow);
   }
   @media (min-width: 880px) {
     .modules-group { padding: 44px 44px; }
   }
   
   .modules-group-head {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
     padding-bottom: 28px;
     margin-bottom: 28px;
     border-bottom: 1px solid var(--border);
   }
   .modules-group-icon {
     display: inline-flex;
     margin-bottom: 4px;
   }
   .modules-group-icon svg {
     border-radius: 8px;
   }
   .modules-group-tag {
     display: inline-block;
     background: var(--charcoal);
     color: var(--white);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     padding: 6px 12px;
     border-radius: 999px;
   }
   .modules-group-head h3 {
     font-size: clamp(24px, 3vw, 32px);
     letter-spacing: -0.025em;
   }
   .modules-group-head p {
     color: var(--muted);
     font-size: 15.5px;
     max-width: 560px;
   }
   
   .modules-group-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 24px 28px;
   }
   @media (min-width: 640px) {
     .modules-group-grid { grid-template-columns: 1fr 1fr; }
     .modules-group-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
   }
   @media (min-width: 1024px) {
     .modules-group-grid.grid-2 { grid-template-columns: 1fr 1fr; max-width: 760px; }
     .modules-group-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
     .modules-group-grid.grid-4 { grid-template-columns: repeat(4, 1fr); }
   }
   
   .module {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   .module-num {
     display: inline-block;
     font-size: 12px;
     font-weight: 700;
     color: var(--coral);
     letter-spacing: 0.14em;
     margin-bottom: 4px;
   }
   .module h4 {
     font-size: 16.5px;
     letter-spacing: -0.01em;
     color: var(--ink);
     line-height: 1.3;
   }
   .module p {
     font-size: 14px;
     color: var(--muted);
     line-height: 1.55;
   }
   
   /* Per-deo accent: Booking = navy, Airbnb = coral, Uvod = yellow-ish, Rezime = green */
   .modules-group:nth-child(1) .module-num { color: #C99A1F; }
   .modules-group:nth-child(2) .module-num { color: var(--navy); }
   .modules-group:nth-child(3) .module-num { color: var(--coral); }
   .modules-group:nth-child(4) .module-num { color: #2E7D5B; }
   
   /* -------------------- SHOWCASE — slika smeštaja -------------------- */
   .showcase {
     padding: 24px 0;
     background: var(--bg);
   }
   @media (min-width: 768px) {
     .showcase { padding: 40px 0; }
   }
   .showcase .container { max-width: 1280px; }
   
   .showcase-figure {
     position: relative;
     margin: 0;
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow-lg);
     isolation: isolate;
   }
   .showcase-figure img {
     width: 100%;
     height: clamp(360px, 56vw, 580px);
     object-fit: cover;
     transform: scale(1.02);
     transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
   }
   .showcase-figure::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(20, 20, 22, 0) 30%, rgba(20, 20, 22, 0.78) 100%);
     pointer-events: none;
     transition: background var(--t);
   }
   .showcase-figure:hover img { transform: scale(1.05); }
   .showcase-figure:hover::after {
     background: linear-gradient(180deg, rgba(20, 20, 22, 0.15) 0%, rgba(20, 20, 22, 0.85) 100%);
   }
   
   .showcase-caption {
     position: absolute;
     left: 28px;
     right: 28px;
     bottom: 28px;
     z-index: 1;
     color: var(--white);
     max-width: 640px;
   }
   @media (min-width: 768px) {
     .showcase-caption { left: 56px; right: 56px; bottom: 48px; }
   }
   .showcase-eyebrow {
     display: inline-block;
     font-size: 11.5px;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     font-weight: 700;
     color: var(--white);
     margin-bottom: 14px;
     background: rgba(255, 255, 255, 0.14);
     border: 1px solid rgba(255, 255, 255, 0.22);
     padding: 7px 14px;
     border-radius: 999px;
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
   }
   .showcase-caption h3 {
     font-size: clamp(24px, 3.4vw, 38px);
     color: var(--white);
     letter-spacing: -0.025em;
     margin-bottom: 10px;
     text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
   }
   .showcase-caption p {
     font-size: 15.5px;
     color: rgba(255, 255, 255, 0.92);
     max-width: 480px;
     line-height: 1.55;
     text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
   }
   .showcase-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin-top: 22px;
   }
   .showcase-actions .btn-primary {
     background: var(--coral);
     border-color: var(--coral);
     color: var(--white);
     box-shadow: 0 8px 22px rgba(250, 87, 87, 0.35);
   }
   .showcase-actions .btn-primary:hover {
     background: var(--coral-dark, #E04545);
     border-color: var(--coral-dark, #E04545);
     color: var(--white);
   }
   @media (max-width: 540px) {
     .showcase-actions .btn { width: 100%; }
   }
   
   /* -------------------- PRICING -------------------- */
   .pricing {
     display: grid;
     grid-template-columns: 1fr;
     gap: 24px;
     max-width: 920px;
     margin: 0 auto;
   }
   @media (min-width: 880px) {
     .pricing {
       grid-template-columns: 1fr 1fr;
       gap: 28px;
       align-items: stretch;
     }
   }
   
   .price-card {
     position: relative;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 36px 32px;
     display: flex;
     flex-direction: column;
     transition: transform var(--t), box-shadow var(--t);
   }
   .price-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
   
   .price-card-featured {
     background: var(--charcoal);
     color: rgba(255, 255, 255, 0.86);
     border-color: var(--charcoal);
     box-shadow: var(--shadow-lg);
   }
   @media (min-width: 880px) {
     .price-card-featured { transform: translateY(-12px); }
     .price-card-featured:hover { transform: translateY(-16px); }
   }
   .price-card-featured h3 { color: var(--white); }
   .price-card-featured .price-value { color: var(--white); }
   .price-card-featured .price-desc { color: rgba(255, 255, 255, 0.72); }
   .price-card-featured .price-list li { color: rgba(255, 255, 255, 0.92); }
   .price-card-featured .price-note-small { color: rgba(255, 255, 255, 0.6); }
   
   .price-badge {
     position: absolute;
     top: -14px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--coral);
     color: var(--white);
     font-size: 11.5px;
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     padding: 8px 16px;
     border-radius: 999px;
     white-space: nowrap;
     box-shadow: 0 6px 16px rgba(250, 87, 87, 0.30);
   }
   
   .price-tag {
     display: inline-block;
     font-size: 12px;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     font-weight: 700;
     color: var(--navy);
     margin-bottom: 12px;
   }
   .price-tag-orange { color: var(--coral); }
   .price-card-featured .price-tag { color: rgba(255, 255, 255, 0.55); }
   
   .price-card h3 {
     font-size: 26px;
     margin-bottom: 16px;
     letter-spacing: -0.02em;
   }
   .price-amount {
     display: flex;
     align-items: baseline;
     gap: 8px;
     margin-bottom: 14px;
   }
   .price-value {
     font-size: 56px;
     font-weight: 800;
     color: var(--ink);
     line-height: 1;
     letter-spacing: -0.04em;
   }
   .price-suffix {
     font-size: 14px;
     color: var(--muted);
   }
   .price-desc {
     font-size: 15px;
     color: var(--muted);
     line-height: 1.6;
     margin-bottom: 28px;
   }
   
   .price-list {
     display: flex;
     flex-direction: column;
     gap: 14px;
     margin-bottom: 32px;
     flex: 1;
   }
   .price-list li {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     font-size: 15px;
     line-height: 1.55;
     color: var(--text);
   }
   .price-list li::before {
     content: "";
     flex: 0 0 auto;
     width: 22px;
     height: 22px;
     border-radius: 7px;
     background-color: var(--ink);
     background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12.5 10 17 19 7'/></svg>");
     background-repeat: no-repeat;
     background-position: center;
     background-size: 13px 13px;
     margin-top: 1px;
     transition:
       background-color var(--t),
       transform var(--t);
   }
   .price-card:hover .price-list li::before {
     transform: scale(1.06);
   }
   /* Featured (charcoal) card — coral icon badges for high contrast */
   .price-card-featured .price-list li::before {
     background-color: var(--coral);
     box-shadow: 0 4px 12px -2px rgba(250, 87, 87, 0.45);
   }
   
   .price-foot { margin-top: auto; }
   .price-note-small {
     margin-top: 12px;
     font-size: 13px;
     color: var(--muted);
     text-align: center;
   }
   
   /* -------------------- STEPS -------------------- */
   .steps {
     display: grid;
     grid-template-columns: 1fr;
     gap: 18px;
     max-width: 880px;
     margin: 0 auto;
   }
   @media (min-width: 768px) {
     .steps { grid-template-columns: 1fr 1fr; gap: 24px; }
   }
   
   .step {
     display: flex;
     gap: 20px;
     align-items: flex-start;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 28px 28px;
     transition: transform var(--t), border-color var(--t), box-shadow var(--t);
   }
   .step:hover {
     border-color: var(--border-strong);
     box-shadow: var(--shadow);
   }
   .step-num {
     flex-shrink: 0;
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: var(--charcoal);
     color: var(--white);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-weight: 800;
     font-size: 18px;
     line-height: 1;
     letter-spacing: -0.02em;
   }
   .step-body h3 {
     font-size: 19px;
     margin-bottom: 6px;
     letter-spacing: -0.015em;
   }
   .step-body p {
     color: var(--muted);
     font-size: 15px;
     line-height: 1.55;
   }
   
   /* -------------------- AUTHOR (O MENI) -------------------- */
   .author-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 40px;
     align-items: center;
     margin-bottom: 56px;
   }
   @media (min-width: 880px) {
     .author-grid { grid-template-columns: 360px 1fr; gap: 64px; }
   }
   
   .author-photo {
     width: 100%;
     aspect-ratio: 4 / 5;
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--shadow);
   }
   .author-photo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.8s ease;
   }
   .author-photo:hover img { transform: scale(1.04); }
   
   .image-placeholder {
     background:
       repeating-linear-gradient(
         135deg,
         rgba(0, 0, 0, 0.04),
         rgba(0, 0, 0, 0.04) 8px,
         rgba(0, 0, 0, 0.06) 8px,
         rgba(0, 0, 0, 0.06) 16px
       ),
       var(--cream);
     border: 1.5px dashed var(--border-strong);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--muted);
     font-size: 12px;
     font-weight: 600;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     text-align: center;
     padding: 16px;
   }
   
   .author-copy h2 {
     font-size: clamp(30px, 4vw, 44px);
     margin-bottom: 20px;
   }
   .author-copy p {
     margin-bottom: 16px;
     color: var(--text);
     font-size: 16.5px;
     line-height: 1.7;
   }
   .author-copy .btn { margin-top: 12px; }
   
   .author-stats {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
     border-top: 1px solid var(--border);
     padding-top: 40px;
   }
   @media (min-width: 640px) { .author-stats { grid-template-columns: repeat(3, 1fr); } }
   @media (min-width: 1024px) { .author-stats { grid-template-columns: repeat(5, 1fr); } }
   .author-stat {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 4px;
   }
   .author-stat-num {
     font-size: 38px;
     font-weight: 800;
     color: var(--ink);
     line-height: 1;
     letter-spacing: -0.04em;
   }
   .author-stat:nth-child(2) .author-stat-num { color: var(--coral); }
   .author-stat:nth-child(4) .author-stat-num { color: var(--navy); }
   .author-stat-label {
     font-size: 13px;
     color: var(--muted);
     line-height: 1.4;
   }
   
   /* -------------------- REVIEWS -------------------- */
   .reviews {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
   }
   @media (min-width: 700px) { .reviews { grid-template-columns: 1fr 1fr; } }
   @media (min-width: 1024px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
   
   .review {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 20px; /* fiksno lepše */
     padding: 32px; /* više prostora */
     display: flex;
     flex-direction: column;
     gap: 18px;
     transition: transform var(--t), box-shadow var(--t);
     box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* dodaj */
   }
   .review:hover {
     transform: translateY(-6px);
     box-shadow: 0 20px 50px rgba(0,0,0,0.08);
   }
   .review-stars {
     display: flex;
     gap: 4px;
     color: var(--coral);
     font-size: 15px;
     margin-bottom: 10px;
   }
   .review-text {
     font-size: 16px;
     line-height: 1.7;
     color: var(--text);
     flex: 1;
     margin-bottom: 10px;
    
   }
   .review-person {
     display: flex;
     align-items: center;
     gap: 12px;
     padding-top: 16px;
     border-top: 1px solid var(--border);
   }
   .review-avatar {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     overflow: hidden;
   }
   
   .review-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
   }
   .review-name {
     font-weight: 800;
     font-size: 15px;
     color: var(--ink);
     letter-spacing: -0.01em;
   }
   .review-meta {
     font-size: 13px;
     color: var(--muted);
   }
   .review::after {
     content: "";
     display: block;
     width: 40px;
     height: 3px;
     background: var(--coral);
     margin-top: 10px;
     border-radius: 2px;
   }
   
   .testi-property-image {
     width: 44px;
     height: 44px;
     border-radius: 10px;
     overflow: hidden;
     flex-shrink: 0;
   }
   
   .testi-property-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   /* -------------------- FAQ -------------------- */
   .faq-wrap { max-width: 820px; margin: 0 auto; }
   
   .faq {
     display: flex;
     flex-direction: column;
     gap: 12px;
   }
   .faq-item {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     padding: 0;
     overflow: hidden;
     transition: border-color var(--t), box-shadow var(--t);
   }
   .faq-item[open] {
     border-color: var(--border-strong);
     box-shadow: var(--shadow-sm);
   }
   .faq-item summary {
     list-style: none;
     cursor: pointer;
     padding: 22px 24px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     font-weight: 700;
     font-size: 16px;
     color: var(--ink);
     letter-spacing: -0.01em;
     transition: color var(--t-fast);
   }
   .faq-item summary::-webkit-details-marker { display: none; }
   .faq-item summary:hover { color: var(--coral); }
   .faq-item summary > span:first-child { flex: 1; line-height: 1.4; }
   
   .faq-icon {
     position: relative;
     flex-shrink: 0;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: var(--cream-2);
     transition: background var(--t-fast), transform var(--t);
   }
   .faq-icon::before,
   .faq-icon::after {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     background: var(--ink);
     border-radius: 1px;
   }
   .faq-icon::before {
     width: 10px;
     height: 2px;
     transform: translate(-50%, -50%);
   }
   .faq-icon::after {
     width: 2px;
     height: 10px;
     transform: translate(-50%, -50%);
     transition: transform var(--t);
   }
   .faq-item[open] .faq-icon { background: var(--coral); }
   .faq-item[open] .faq-icon::before,
   .faq-item[open] .faq-icon::after { background: var(--white); }
   .faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
   
   .faq-body {
     padding: 0 24px 22px;
     color: var(--muted);
     font-size: 15.5px;
     line-height: 1.65;
   }
   
   /* -------------------- FINAL CTA -------------------- */
   .final-cta {
     text-align: center;
     max-width: 720px;
     margin: 0 auto;
   }
   .final-cta h2 {
     font-size: clamp(34px, 5vw, 56px);
     color: var(--white);
     margin-bottom: 16px;
     letter-spacing: -0.035em;
   }
   .final-cta p {
     font-size: 17px;
     color: rgba(255, 255, 255, 0.78);
     margin-bottom: 36px;
     line-height: 1.6;
   }
   .final-cta-actions {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 14px;
   }
   .final-cta .btn-primary {
     background: var(--white);
     color: var(--charcoal);
     border-color: var(--white);
   }
   .final-cta .btn-primary:hover {
     background: var(--coral);
     color: var(--white);
     border-color: var(--coral);
   }
   @media (max-width: 540px) {
     .final-cta-actions .btn { width: 100%; }
   }
   
   /* -------------------- FOOTER -------------------- */
   .site-footer {
     background: var(--ink);
     color: rgba(255, 255, 255, 0.72);
     padding: 64px 0 32px;
   }
   .footer-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 40px;
     padding-bottom: 40px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   }
   @media (min-width: 768px) {
     .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
   }
   .footer-brand { display: flex; flex-direction: column; gap: 14px; }
   .footer-wordmark {
     font-family: inherit;
     font-weight: 900;
     font-size: 26px;
     letter-spacing: -0.02em;
     color: var(--white);
     line-height: 1;
   }
   .footer-email {
     display: inline-block;
     margin-top: 4px;
     color: var(--white);
     font-weight: 600;
     font-size: 15.5px;
     text-decoration: none;
     border-bottom: 1px solid rgba(255, 255, 255, 0.25);
     padding-bottom: 4px;
     width: max-content;
     transition: color var(--t), border-color var(--t);
   }
   .footer-email:hover {
     color: var(--coral);
     border-color: var(--coral);
   }
   .footer-brand p {
     font-size: 14.5px;
     line-height: 1.6;
     max-width: 360px;
     color: rgba(255, 255, 255, 0.6);
   }
   .footer-col h4 {
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: var(--white);
     margin-bottom: 16px;
   }
   .footer-col ul {
     display: flex;
     flex-direction: column;
     gap: 10px;
   }
   .footer-col a {
     font-size: 14.5px;
     color: rgba(255, 255, 255, 0.7);
     transition: color var(--t-fast);
   }
   .footer-col a:hover { color: var(--coral); }
   
   .footer-bottom {
     display: flex;
     flex-direction: column;
     gap: 8px;
     align-items: center;
     text-align: center;
     margin-top: 28px;
     font-size: 13px;
     color: rgba(255, 255, 255, 0.5);
   }
   @media (min-width: 768px) {
     .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
   }
   
   /* -------------------- Reveal animation -------------------- */
   .reveal {
     opacity: 0;
     transform: translateY(16px);
     transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
   }
   .reveal.is-visible {
     opacity: 1;
     transform: translateY(0);
   }
   @media (prefers-reduced-motion: reduce) {
     .reveal { opacity: 1; transform: none; }
   }
   
   /* -------------------- Selection -------------------- */
   ::selection {
     background: var(--coral);
     color: var(--white);
   }
   
   /* -------------------- INTERACTION POLISH -------------------- */
   
   /* Coral primary button — soft glow on hover (less static) */
   .btn-primary {
     position: relative;
     transition:
       transform var(--t),
       background var(--t),
       box-shadow var(--t),
       color var(--t);
   }
   .btn-primary:hover {
     transform: translateY(-1px);
     box-shadow:
       0 10px 24px -10px rgba(250, 87, 87, 0.55),
       0 0 0 4px rgba(250, 87, 87, 0.12);
   }
   .btn-primary:active { transform: translateY(0); }
   
   /* Stagger reveal — each child shifts in slightly later */
   .value-cards.reveal.is-visible .value-card,
   .modules-list.reveal.is-visible .module-row,
   .author-stats.reveal.is-visible .author-stat,
   .audience-marquee.reveal.is-visible .audience-card {
     animation: cardRise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
   }
   .value-cards.reveal.is-visible .value-card:nth-child(1)  { animation-delay: 60ms;  }
   .value-cards.reveal.is-visible .value-card:nth-child(2)  { animation-delay: 140ms; }
   .value-cards.reveal.is-visible .value-card:nth-child(3)  { animation-delay: 220ms; }
   .value-cards.reveal.is-visible .value-card:nth-child(4)  { animation-delay: 300ms; }
   .author-stats.reveal.is-visible .author-stat:nth-child(1) { animation-delay: 50ms;  }
   .author-stats.reveal.is-visible .author-stat:nth-child(2) { animation-delay: 130ms; }
   .author-stats.reveal.is-visible .author-stat:nth-child(3) { animation-delay: 210ms; }
   .author-stats.reveal.is-visible .author-stat:nth-child(4) { animation-delay: 290ms; }
   .author-stats.reveal.is-visible .author-stat:nth-child(5) { animation-delay: 370ms; }
   
   @keyframes cardRise {
     from { opacity: 0; transform: translateY(18px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   /* Showcase image — subtle parallax-feel zoom on hover */
   .showcase-figure {
     overflow: hidden;
     border-radius: var(--radius-lg, 18px);
   }
   .showcase-figure img {
     transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
   }
   .showcase-figure:hover img {
     transform: scale(1.03);
   }
   
   /* Counter — guard against layout shift while animating */
   [data-count] {
     font-variant-numeric: tabular-nums;
   }
   
   @media (prefers-reduced-motion: reduce) {
     .value-cards.reveal.is-visible .value-card,
     .modules-list.reveal.is-visible .module-row,
     .author-stats.reveal.is-visible .author-stat,
     .audience-marquee.reveal.is-visible .audience-card {
       animation: none;
     }
     .showcase-figure img,
     .btn-primary {
       transition: none;
     }
   }
   
   /* -------------------- HERO TAG PILL (Shelby-inspired) -------------------- */
   .hero .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 8px 16px 8px 14px;
     background: var(--white);
     border: 1px solid var(--border-strong);
     border-radius: 999px;
     color: var(--ink);
     font-size: 11.5px;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     font-weight: 700;
     margin-bottom: 24px;
     box-shadow: var(--shadow-sm);
   }
   .hero .eyebrow::before {
     content: "";
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--coral);
     box-shadow: 0 0 0 0 rgba(250, 87, 87, 0.55);
     animation: eyebrowPulse 1.8s ease-out infinite;
   }
   @media (prefers-reduced-motion: reduce) {
     .hero .eyebrow::before { animation: none; }
   }
   
   /* -------------------- MODULE GROUP HEADER ROW (icon + tag inline) -------------------- */
   .modules-group-header-row {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 16px;
   }
   .modules-group-header-row .modules-group-icon {
     margin-bottom: 0;
   }
   .modules-group-header-row .modules-group-tag {
     margin: 0;
   }
   
   /* -------------------- FEATURED PRICE CARD BUTTON -------------------- */
   .btn-featured {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     font-family: var(--font-sans);
     font-weight: 700;
     font-size: 15px;
     line-height: 1;
     padding: 16px 22px;
     border-radius: 999px;
     border: 2.5px solid rgba(255, 255, 255, 0.9);
     background: rgba(255, 255, 255, 0.12);
     color: var(--white);
     cursor: pointer;
     letter-spacing: -0.005em;
     white-space: nowrap;
     transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
     backdrop-filter: blur(4px);
   }
   .btn-featured:hover {
     background: var(--white);
     color: var(--charcoal);
     border-color: var(--white);
     transform: translateY(-1px);
   }
   .btn-featured:active { transform: translateY(0); }
   
   /* -------------------- SHOWCASE — mobile height fix -------------------- */
   .showcase-figure img {
     height: clamp(480px, 65vw, 640px) !important;
   }
   .showcase-caption {
     left: 20px !important;
     right: 20px !important;
     bottom: 20px !important;
   }
   @media (min-width: 640px) {
     .showcase-caption { left: 48px !important; right: 48px !important; bottom: 40px !important; }
   }
   
   /* -------------------- PRIMARY BUTTON (polish) -------------------- */
   .btn-primary:hover {
     transform: translateY(-1px);
     box-shadow: 0 8px 20px rgba(42, 42, 45, 0.30);
   }
   
   /* -------------------- STEP ICON COLORS -------------------- */
   .step-num {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: var(--white);
   }
   .step-num svg { display: block; }
   
   .step-num--coral { background: var(--coral); }
   .step-num--navy  { background: var(--navy); }
   .step-num--gold  { background: var(--yellow); color: var(--ink); }
   .step-num--green { background: #A968E8; }
   
   /* -------------------- STEP STAGGERED ANIMATION -------------------- */
   @keyframes stepRise {
     from { opacity: 0; transform: translateY(22px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   @media (prefers-reduced-motion: no-preference) {
     .steps.is-visible .step:nth-child(1) {
       animation: stepRise 0.48s cubic-bezier(0.22, 0.7, 0.36, 1) 0ms both;
     }
     .steps.is-visible .step:nth-child(2) {
       animation: stepRise 0.48s cubic-bezier(0.22, 0.7, 0.36, 1) 100ms both;
     }
     .steps.is-visible .step:nth-child(3) {
       animation: stepRise 0.48s cubic-bezier(0.22, 0.7, 0.36, 1) 200ms both;
     }
     .steps.is-visible .step:nth-child(4) {
       animation: stepRise 0.48s cubic-bezier(0.22, 0.7, 0.36, 1) 300ms both;
     }
     /* keep steps hidden until parent reveals */
     .steps:not(.is-visible) .step {
       opacity: 0;
       transform: translateY(22px);
     }
   }
   
   /* -------------------- PROGRAM MODULE GROUP HOVER -------------------- */
   .modules-group-tag {
     cursor: default;
     transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s ease,
       box-shadow 0.22s ease;
   }
   .modules-group-header-row {
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 12px;
   }
   .modules-group-header-row:hover .modules-group-tag {
     background: var(--coral);
     transform: translateY(-2px);
     box-shadow: 0 6px 16px -2px rgba(250, 87, 87, 0.36);
   }
   .modules-group-header-row:hover .modules-group-icon svg {
     transform: scale(1.06);
     transition: transform 0.22s ease;
   }
   .modules-group {
     transition: transform var(--t);
   }
   .modules-group:hover {
     transform: translateY(-2px);
   }
   
   /* -------------------- STEPS CARD HOVER LIFT -------------------- */
   .step:hover {
     transform: translateY(-3px);
     box-shadow: var(--shadow-lg);
     border-color: transparent;
   }
   .step {
     transition: transform var(--t), box-shadow var(--t), border-color var(--t);
   }
   
   /* -------------------- PLATFORM ICON (real images) -------------------- */
   .platform-icon {
     width: 36px;
     height: 36px;
     border-radius: 9px;
     object-fit: cover;
     display: block;
     flex-shrink: 0;
   }
   
   /* ============================================================
      SHARED SUB-PAGE STYLES (mentorski, o-meni)
      ============================================================ */
   
   /* ---- Page hero ---- */
   .page-hero {
     padding: clamp(80px, 12vw, 140px) 0 clamp(60px, 8vw, 100px);
     background: var(--navy);
     color: var(--white);
     position: relative;
     overflow: hidden;
   }
   .page-hero::before {
     content: "";
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse 60% 80% at 80% 20%, rgba(250,87,87,0.18) 0%, transparent 70%);
     pointer-events: none;
   }
   .page-hero .eyebrow { color: var(--coral); }
   .page-hero h1 {
     font-size: clamp(34px, 5.5vw, 68px);
     letter-spacing: -0.04em;
     line-height: 1.08;
     color: var(--white);
     max-width: 760px;
     margin-bottom: 24px;
   }
   .page-hero .lead {
     color: rgba(255,255,255,0.72);
     max-width: 540px;
     font-size: clamp(16px, 1.8vw, 19px);
   }
   .page-hero-actions {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
     margin-top: 36px;
     align-items: center;
   }
   
   /* ---- Feature cards grid ---- */
   .feature-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 24px;
     margin-top: 48px;
   }
   .feature-card {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 32px 28px;
     transition: transform var(--t), box-shadow var(--t);
   }
   .feature-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
   }
   .feature-card-icon {
     width: 52px;
     height: 52px;
     border-radius: 14px;
     background: var(--cream);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
     font-size: 24px;
   }
   .feature-card h3 {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 10px;
     letter-spacing: -0.02em;
   }
   .feature-card p {
     font-size: 14.5px;
     color: var(--muted);
     line-height: 1.65;
   }
   
   /* ---- How it works numbered steps ---- */
   .how-steps {
     display: flex;
     flex-direction: column;
     gap: 0;
     margin-top: 48px;
     position: relative;
   }
   .how-step {
     display: grid;
     grid-template-columns: 80px 1fr;
     gap: 28px;
     padding: 36px 0;
     border-bottom: 1px solid var(--border);
     align-items: start;
   }
   .how-step:last-child { border-bottom: none; }
   .how-step-num {
     font-size: 56px;
     font-weight: 900;
     letter-spacing: -0.05em;
     color: var(--coral);
     opacity: 0.18;
     line-height: 1;
     font-variant-numeric: tabular-nums;
   }
   .how-step-body h3 {
     font-size: 22px;
     font-weight: 700;
     letter-spacing: -0.03em;
     margin-bottom: 10px;
   }
   .how-step-body p {
     font-size: 15.5px;
     color: var(--muted);
     line-height: 1.65;
     max-width: 540px;
   }
   .how-step-img {
     width: 100%;
     border-radius: var(--radius-lg);
     aspect-ratio: 16/9;
     object-fit: cover;
     margin-top: 20px;
   }
   
   /* ---- Mentor strip ---- */
   .mentor-strip {
     background: var(--navy);
     color: var(--white);
     border-radius: var(--radius-lg);
     padding: 52px 56px;
     display: grid;
     grid-template-columns: 1fr 320px;
     gap: 48px;
     align-items: center;
   }
   @media (max-width: 768px) {
     .mentor-strip { grid-template-columns: 1fr; padding: 36px 28px; }
   }
   .mentor-strip .eyebrow { color: var(--coral); }
   .mentor-strip h2 { color: var(--white); font-size: clamp(22px,3vw,30px); letter-spacing:-0.03em; margin-bottom:16px; }
   .mentor-strip p { color: rgba(255,255,255,0.72); font-size: 15.5px; line-height: 1.7; }
   .mentor-strip-photo {
     width: 100%;
     aspect-ratio: 4/5;
     object-fit: cover;
     object-position: top center;
     border-radius: var(--radius-lg);
   }
   
   /* ---- Testimonial cards (mentorski) ---- */
   .testimonials-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 24px;
     margin-top: 48px;
   }
   .testi-card {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 32px 28px 28px;
     display: flex;
     flex-direction: column;
     gap: 16px;
     transition: transform var(--t), box-shadow var(--t);
   }
   .testi-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-lg);
   }
   .testi-stars { color: var(--coral); font-size: 14px; letter-spacing: 2px; }
   .testi-headline {
     font-size: 17px;
     font-weight: 700;
     letter-spacing: -0.02em;
     color: var(--ink);
   }
   .testi-body {
     font-size: 14.5px;
     color: var(--muted);
     line-height: 1.7;
     flex: 1;
   }
   .testi-footer {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-top: 8px;
     padding-top: 16px;
     border-top: 1px solid var(--border);
   }
   .testi-property-img {
     width: 48px;
     height: 48px;
     border-radius: 10px;
     object-fit: cover;
     background: var(--cream);
     flex-shrink: 0;
     border: 1px solid var(--border);
   }
   .testi-property-placeholder {
     width: 48px;
     height: 48px;
     border-radius: 10px;
     background: var(--cream);
     flex-shrink: 0;
     border: 1px solid var(--border);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
   }
   .testi-name { font-size: 14px; font-weight: 700; color: var(--ink); }
   .testi-property { font-size: 12.5px; color: var(--muted); }
   
   /* ---- FAQ accordion ---- */
   .faq-list {
     margin-top: 40px;
     display: flex;
     flex-direction: column;
     gap: 12px;
   }
   .faq-item {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     overflow: hidden;
     transition: border-color var(--t);
   }
   .faq-item.is-open { border-color: var(--coral); }
   .faq-q {
     width: 100%;
     background: none;
     border: none;
     padding: 20px 24px;
     text-align: left;
     font-family: var(--font-sans);
     font-size: 16px;
     font-weight: 600;
     color: var(--ink);
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
     letter-spacing: -0.01em;
   }
   .faq-q:hover { color: var(--coral); }
   .faq-icon {
     flex-shrink: 0;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background: var(--cream);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background var(--t), transform 0.3s ease;
   }
   .faq-item.is-open .faq-icon {
     background: var(--coral);
     transform: rotate(45deg);
   }
   .faq-icon svg { pointer-events: none; }
   .faq-a {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease, padding 0.3s ease;
   }
   .faq-item.is-open .faq-a { max-height: 600px; }
   .faq-a-inner {
     padding: 0 24px 20px;
     font-size: 15px;
     color: var(--muted);
     line-height: 1.7;
   }
   .faq-a-inner strong { color: var(--ink); }
   
   /* ---- Photo placeholder ---- */
   .photo-placeholder {
     width: 100%;
     background: var(--cream);
     border: 2px dashed var(--border);
     border-radius: var(--radius-lg);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 8px;
     color: var(--muted);
     font-size: 13px;
     font-weight: 500;
     min-height: 280px;
   }
   .photo-placeholder svg { opacity: 0.4; }
   
   /* ---- Story section (o-meni) ---- */
   .story-section {
     padding: clamp(64px, 8vw, 96px) 0;
   }
   .story-section:nth-child(even) { background: var(--cream); }
   .story-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 64px;
     align-items: center;
   }
   .story-grid.reverse { direction: rtl; }
   .story-grid.reverse > * { direction: ltr; }
   @media (max-width: 768px) {
     .story-grid { grid-template-columns: 1fr; gap: 36px; }
     .story-grid.reverse { direction: ltr; }
   }
   .story-eyebrow-num {
     font-size: 80px;
     font-weight: 900;
     letter-spacing: -0.06em;
     color: var(--coral);
     opacity: 0.1;
     line-height: 0.85;
     display: block;
     margin-bottom: -12px;
   }
   .story-copy h2 {
     font-size: clamp(24px, 3.5vw, 38px);
     letter-spacing: -0.04em;
     line-height: 1.15;
     margin-bottom: 20px;
   }
   .story-copy p {
     font-size: 16px;
     color: var(--muted);
     line-height: 1.75;
     margin-bottom: 16px;
   }
   .story-copy p:last-child { margin-bottom: 0; }
   .story-photo {
     position: relative;
   }
   .story-photo img, .story-photo .photo-placeholder {
     width: 100%;
     aspect-ratio: 4/5;
     object-fit: cover;
     border-radius: var(--radius-lg);
   }
   .story-photo-caption {
     position: absolute;
     bottom: 20px;
     left: 20px;
     right: 20px;
     background: rgba(6, 33, 128, 0.88);
     backdrop-filter: blur(8px);
     color: var(--white);
     font-size: 12.5px;
     padding: 10px 14px;
     border-radius: 8px;
     line-height: 1.4;
   }
   
   /* ---- Stat bar ---- */
   .stat-bar {
     background: var(--navy);
     color: var(--white);
     padding: 52px 0;
   }
   .stat-bar .container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
     gap: 24px;
     text-align: center;
   }
   .stat-bar-item-num {
     font-size: clamp(36px, 5vw, 56px);
     font-weight: 900;
     letter-spacing: -0.04em;
     color: var(--coral);
   }
   .stat-bar-item-label {
     font-size: 13px;
     color: rgba(255,255,255,0.65);
     margin-top: 4px;
     line-height: 1.4;
   }
   
   /* ---- CTA section ---- */
   .cta-section {
     padding: clamp(64px, 8vw, 100px) 0;
     text-align: center;
   }
   .cta-section h2 {
     font-size: clamp(28px, 4vw, 48px);
     letter-spacing: -0.04em;
     max-width: 540px;
     margin: 0 auto 20px;
   }
   .cta-section p {
     color: var(--muted);
     max-width: 420px;
     margin: 0 auto 36px;
     font-size: 16px;
   }
   .cta-actions {
     display: flex;
     gap: 14px;
     justify-content: center;
     flex-wrap: wrap;
   }
   
   /* ---- Highlighted quote ---- */
   .pull-quote {
     border-left: 4px solid var(--coral);
     padding-left: 24px;
     margin: 32px 0;
   }
   .pull-quote p {
     font-size: clamp(18px, 2.5vw, 24px);
     font-weight: 600;
     letter-spacing: -0.02em;
     line-height: 1.45;
     color: var(--ink);
   }
   
   /* ---- Booking screenshot / device mockup ---- */
   .device-showcase {
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: 0 24px 64px -12px rgba(6,33,128,0.22);
     border: 1px solid var(--border);
   }
   .device-showcase img {
     width: 100%;
     display: block;
   }
   
   /* ---- Page nav mention ---- */
   .mentorski-nav-link {
     color: var(--coral);
     text-decoration: underline;
     text-underline-offset: 3px;
     font-weight: 600;
   }
   
   /* LOGIN PAGE */
   
   .login-card {
     max-width: 460px;
     margin: 0 auto;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 36px 32px;
     box-shadow: var(--shadow);
   }
   
   .login-form {
     display: flex;
     flex-direction: column;
     gap: 18px;
   }
   
   .form-group {
     display: flex;
     flex-direction: column;
     gap: 6px;
   }
   
   .form-group label {
     font-size: 14px;
     font-weight: 600;
     color: var(--ink);
   }
   
   .form-group input {
     height: 52px;
     border-radius: 999px;
     border: 1px solid var(--border);
     padding: 0 18px;
     font-size: 15px;
     outline: none;
     transition: border-color 0.2s ease;
   }
   
   .form-group input:focus {
     border-color: var(--coral);
   }
   
   .login-note {
     margin-top: 18px;
     font-size: 14px;
     color: var(--muted);
     text-align: center;
   }
   
   /* =====================================================
      MOBILE RESPONSIVE FIX — paste at very end
      ===================================================== */
   
      .container {
       width: 100%;
       max-width: var(--container);
       margin: 0 auto;
       padding-left: 24px;
       padding-right: 24px;
     }
     
     @media (max-width: 768px) {
       body {
         font-size: 16px;
         overflow-x: hidden;
       }
     
       .container {
         padding-left: 20px;
         padding-right: 20px;
       }
     
       .section {
         padding: 56px 0;
       }
     
       .hero {
         padding: 56px 0 64px;
       }
     
       .hero-title,
       .page-hero h1 {
         font-size: 40px;
         line-height: 1.05;
       }
     
       .hero-sub,
       .page-hero .lead {
         font-size: 16px;
       }
     
       .hero-actions,
       .page-hero-actions,
       .cta-actions,
       .final-cta-actions {
         flex-direction: column;
         width: 100%;
       }
     
       .hero-actions .btn,
       .page-hero-actions .btn,
       .cta-actions .btn,
       .final-cta-actions .btn {
         width: 100%;
       }
     
       .nav-row {
         padding: 0 20px;
       }
     
       .brand-name {
         font-size: 17px;
       }
     
       .problem-card,
       .value-card,
       .modules-group,
       .price-card,
       .step,
       .review,
       .feature-card,
       .testi-card,
       .login-card {
         padding: 26px 22px;
         border-radius: 22px;
       }
     
       .modules-group-grid,
       .problem-grid,
       .value-cards,
       .pricing,
       .steps,
       .reviews,
       .feature-grid,
       .testimonials-grid,
       .story-grid {
         grid-template-columns: 1fr !important;
       }
     
       .step {
         flex-direction: column;
         gap: 14px;
       }
     
       .price-value {
         font-size: 44px;
       }
     
       .price-badge {
         font-size: 10px;
         padding: 7px 12px;
       }
     
       .author-grid {
         grid-template-columns: 1fr;
         gap: 32px;
       }
     
       .author-stats {
         grid-template-columns: 1fr 1fr;
       }
     
       .showcase {
         padding: 24px 0;
       }
     
       .showcase .container {
         padding-left: 16px;
         padding-right: 16px;
       }
     
       .showcase-figure img {
         height: 520px !important;
       }
     
       .showcase-caption {
         left: 18px !important;
         right: 18px !important;
         bottom: 18px !important;
       }
     
       .showcase-caption h3 {
         font-size: 26px;
       }
     
       .showcase-caption p {
         font-size: 14.5px;
       }
     
       .showcase-actions {
         flex-direction: column;
       }
     
       .showcase-actions .btn {
         width: 100%;
       }
     
       .audience-card {
         flex-basis: 280px;
       }
     
       .audience-marquee {
         overflow-x: auto;
         -webkit-mask-image: none;
         mask-image: none;
       }
     
       .audience-marquee-track {
         animation: none;
       }
     
       .mentor-strip {
         grid-template-columns: 1fr;
         padding: 34px 22px;
       }
     
       .how-step {
         grid-template-columns: 1fr;
         gap: 10px;
       }
     
       .how-step-num {
         font-size: 42px;
       }
     
       .footer-grid {
         grid-template-columns: 1fr;
         gap: 32px;
       }
     
       .footer-bottom {
         align-items: flex-start;
         text-align: left;
       }
     }
     
     @media (max-width: 480px) {
       .container {
         padding-left: 18px;
         padding-right: 18px;
       }
     
       .hero-title,
       .page-hero h1 {
         font-size: 36px;
       }
     
       .section-head h2,
       .final-cta h2,
       .cta-section h2 {
         font-size: 30px;
       }
     
       .btn,
       .btn-lg,
       .btn-featured {
         width: 100%;
         white-space: normal;
         text-align: center;
         line-height: 1.2;
       }
     
       .hero-meta {
         gap: 18px;
       }
     
       .hero-meta-item {
         flex: 1 1 100%;
       }
     
       .author-stats {
         grid-template-columns: 1fr;
       }
     
       .showcase-figure img {
         height: 560px !important;
       }
     
       .footer-email {
         width: auto;
         word-break: break-word;
       }
     }
   /* FORCE btn styles inside mobile nav */
   .nav-mobile a[class*="btn"] {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     padding: 14px 18px;
     border-radius: 999px;
     font-weight: 600;
   }
   
   /* konkretno za outline dugme */
   .nav-mobile .btn-outline {
     border: 2px solid var(--charcoal);
     background: transparent;
     color: var(--charcoal);
   }
   
   /* spacing između dugmadi */
   .nav-mobile a[class*="btn"] + a[class*="btn"] {
     margin-top: 10px;
   }
   @media (max-width: 768px) {
     .hero .eyebrow {
       white-space: nowrap;
       font-size: 10px;
       letter-spacing: 0.1em;
       padding: 6px 10px;
       max-width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
     }
   }
   #mentorski-form {
     display: flex;
     flex-direction: column;
     gap: 18px;
   }
   
   #mentorski-form .form-row-2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px;
   }
   
   #mentorski-form .form-group {
     display: flex;
     flex-direction: column;
     gap: 8px;
   }
   
   #mentorski-form label {
     font-size: 14px;
     font-weight: 700;
     color: var(--ink);
   }
   
   #mentorski-form .req {
     color: var(--coral);
   }
   
   #mentorski-form .label-muted {
     font-weight: 400;
     color: var(--muted);
   }
   
   #mentorski-form input,
   #mentorski-form select,
   #mentorski-form textarea {
     width: 100%;
     min-height: 52px;
     padding: 13px 16px;
     border: 1.5px solid var(--border);
     border-radius: var(--radius-sm);
     font-family: var(--font-sans);
     font-size: 15px;
     color: var(--ink);
     background: var(--cream);
     outline: none;
     box-sizing: border-box;
   }
   
   #mentorski-form textarea {
     min-height: 110px;
     resize: vertical;
     line-height: 1.55;
   }
   
  /* SELECT RESET */
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--cream);
  padding-right: 40px;
  cursor: pointer;
}

/* CUSTOM ARROW */
.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.select-wrap:hover::after {
  border-color: var(--coral);
}
   
   .form-submit {
     width: 100%;
     padding: 17px 24px;
     font-size: 16px;
     margin-top: 10px;
   }
   
   .form-note {
     font-size: 12.5px;
     color: var(--muted);
     text-align: center;
     line-height: 1.5;
   }
   
   @media (max-width: 768px) {
     #mentorski-form .form-row-2 {
       grid-template-columns: 1fr;
       gap: 16px;
     }
   }
   
   /* CLEAN LOGIN PAGE */
   
   .login-page-clean {
     min-height: calc(100vh - var(--header-h));
     background:
       radial-gradient(circle at top right, rgba(250, 87, 87, 0.12), transparent 34%),
       var(--cream);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 72px 20px;
   }
   
   .login-clean-wrap {
     width: 100%;
     display: flex;
     justify-content: center;
   }
   
   .login-clean-card {
     width: 100%;
     max-width: 430px;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 28px;
     padding: 42px 34px 36px;
     box-shadow: 0 18px 50px rgba(20, 20, 22, 0.08);
     text-align: center;
     backdrop-filter: blur(6px);
   }
   
   .login-logo {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     margin: 0 auto 16px;
     object-fit: cover;
   }
   
   .login-kicker {
     display: block;
     color: var(--coral);
     font-size: 12px;
     font-weight: 800;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     margin-bottom: 14px;
   }
   
   .login-clean-card h1 {
     font-size: 34px;
     line-height: 1.05;
     margin-bottom: 12px;
     color: var(--ink);
   }
   
   .login-clean-card > p {
     color: var(--muted);
     font-size: 15px;
     line-height: 1.55;
     margin-bottom: 28px;
   }
   
   .login-clean-card .login-form {
     gap: 18px;
   }
   
   .login-clean-card .form-group {
     text-align: left;
   }
   
   .login-clean-card .btn {
     height: 54px;
     margin-top: 4px;
   }
   
   .login-clean-card .btn:hover {
     transform: translateY(-1px);
     box-shadow: 0 10px 20px rgba(250, 87, 87, 0.25);
   }
   
   .login-clean-card .login-note {
     margin-top: 18px;
     text-align: center;
     font-size: 13px;
     color: var(--muted);
   }
   
   @media (max-width: 520px) {
     .login-page-clean {
       padding: 48px 18px;
       align-items: flex-start;
     }
   
     .login-clean-card {
       padding: 34px 24px 30px;
       border-radius: 24px;
     }
   
     .login-clean-card h1 {
       font-size: 30px;
     }
   }
   /* PROGRAM ROADMAP */
   
   .program-roadmap {
     max-width: 980px;
     margin: 0 auto;
   }
   
   .roadmap-block {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 28px;
     margin-bottom: 18px;
     overflow: hidden;
     box-shadow: 0 8px 24px rgba(20,20,22,0.04);
   }
   
   .roadmap-head {
     width: 100%;
     padding: 28px 30px;
     background: transparent;
     border: 0;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 24px;
     text-align: left;
   }
   
   .roadmap-head-left {
     display: grid;
     grid-template-columns: 64px 1fr;
     gap: 20px;
     align-items: start;
   }
   
   .roadmap-step {
     width: 64px;
     height: 64px;
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 4px;
     color: var(--white);
     font-size: 20px;
     font-weight: 900;
   }
   
   .roadmap-toggle {
     width: 42px;
     height: 42px;
     border-radius: 999px;
     border: 0;
     color: var(--white);
     font-size: 28px;
     line-height: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: transform 0.28s ease;
   }
   
   .roadmap-block.active .roadmap-toggle {
     transform: rotate(45deg);
   }
   
   .roadmap-tag {
     font-size: 11px;
     font-weight: 800;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     margin-bottom: 8px;
     display: inline-flex;
   }
   
   .roadmap-head h3 {
     font-size: clamp(22px, 3vw, 32px);
     margin-bottom: 8px;
   }
   
   .roadmap-head p {
     color: var(--muted);
     font-size: 15px;
     line-height: 1.55;
   }
   
   .roadmap-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.45s ease;
   }
   
   .roadmap-block.active .roadmap-content {
     max-height: 1400px;
   }
   
   .lesson-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px;
     padding: 0 30px 30px 114px;
   }
   
   .lesson-grid-small {
     grid-template-columns: repeat(2, 1fr);
   }
   
   .lesson-card {
     background: var(--cream);
     border: 1px solid var(--border);
     border-radius: 18px;
     padding: 18px;
     transition: 0.25s ease;
   }
   
   .lesson-card:hover {
     transform: translateY(-4px);
     background: var(--white);
     box-shadow: 0 14px 32px rgba(20,20,22,0.08);
   }
   
   /* BOJE IZ PALETE */
   
   .roadmap-intro .roadmap-step,
   .roadmap-intro .roadmap-toggle {
     background: #A968E8;
   }
   
   .roadmap-booking .roadmap-step,
   .roadmap-booking .roadmap-toggle {
     background: #11258F;
   }
   
   .roadmap-airbnb .roadmap-step,
   .roadmap-airbnb .roadmap-toggle {
     background: #FF5863;
   }
   
   .roadmap-summary .roadmap-step,
   .roadmap-summary .roadmap-toggle {
     background: #FF7F55;
   }
   
   .roadmap-material .roadmap-step,
   .roadmap-material .roadmap-toggle {
     background: #FFD335;
     color: var(--ink);
   }
   
   .roadmap-intro .roadmap-tag,
   .roadmap-intro .lesson-card span {
     color: #A968E8;
   }
   
   .roadmap-booking .roadmap-tag,
   .roadmap-booking .lesson-card span {
     color: #11258F;
   }
   
   .roadmap-airbnb .roadmap-tag,
   .roadmap-airbnb .lesson-card span {
     color: #FF5863;
   }
   
   .roadmap-summary .roadmap-tag,
   .roadmap-summary .lesson-card span {
     color: #FF7F55;
   }
   
   .roadmap-material .roadmap-tag,
   .roadmap-material .lesson-card span {
     color: #C99A1F;
   }
   
   .lesson-card span {
     display: inline-flex;
     font-size: 12px;
     font-weight: 900;
     letter-spacing: 0.12em;
     margin-bottom: 10px;
   }
   
   .lesson-card h4 {
     font-size: 16px;
     margin-bottom: 8px;
   }
   
   .lesson-card p {
     color: var(--muted);
     font-size: 13.5px;
     line-height: 1.55;
   }
   
   @media (max-width: 900px) {
     .lesson-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   
   @media (max-width: 640px) {
     .roadmap-head {
       padding: 24px 20px;
     }
   
     .roadmap-head-left {
       grid-template-columns: 48px 1fr;
       gap: 14px;
     }
   
     .roadmap-step {
       width: 48px;
       height: 48px;
       border-radius: 16px;
       font-size: 16px;
     }
   
     .roadmap-toggle {
       width: 34px;
       height: 34px;
       font-size: 24px;
     }
   
     .lesson-grid,
     .lesson-grid-small {
       grid-template-columns: 1fr;
       padding: 0 20px 24px 82px;
     }
   }

   .form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  
  /* MOBILE FIX */
  @media (max-width: 768px) {
    .form-row-2 {
      grid-template-columns: 1fr;
    }
  }
  .password-wrap {
    position: relative;
  }
  
  .password-wrap input {
    width: 100%;
    padding-right: 54px;
  }
  
  .toggle-password {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    opacity: 0.7;
  }
  
  .toggle-password:hover {
    opacity: 1;
  }

  /* brojke  */
  .author-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 64px auto 0;
    border-top: 1px solid rgba(13, 30, 140, 0.14);
    border-bottom: 1px solid rgba(13, 30, 140, 0.14);
  }
  
  .author-stat {
    padding: 30px 24px;
    background: transparent;
    border-right: 1px solid rgba(13, 30, 140, 0.14);
    box-shadow: none;
    border-radius: 0;
    text-align: left;
  }
  
  .author-stat:last-child {
    border-right: none;
  }
  
  .author-stat strong {
    display: block;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 0.95;
    margin-bottom: 12px;
    letter-spacing: -0.07em;
    color: #0D1E8C;
  }
  
  .author-stat:nth-child(2) strong {
    color: #FA5757;
  }
  
  .author-stat span {
    display: block;
    max-width: 120px;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(31,31,34,0.68);
  }
  
  @media (max-width: 768px) {
    .author-stats {
      grid-template-columns: repeat(2, 1fr);
      margin-top: 42px;
    }
  
    .author-stat {
      padding: 24px 18px;
      border-right: 1px solid rgba(13, 30, 140, 0.12);
      border-bottom: 1px solid rgba(13, 30, 140, 0.12);
    }
  
    .author-stat:nth-child(2),
    .author-stat:nth-child(4) {
      border-right: none;
    }
  
    .author-stat:nth-child(3),
    .author-stat:nth-child(4) {
      border-bottom: none;
    }
  
    .author-stat strong {
      font-size: 42px;
    }
  }