:root {
    --green-dark: #1B4332;
    --green: #2D6A4F;
    --green-light: #52B788;
    --gold: #D4A574;
    --gold-light: #F5E6D3;
    --red: #DC2626;
    --bg: #F4F7F4;
    --card: #FFFFFF;
    --text: #1B4332;
    --muted: #64748B;
    --radius: 16px;
    --shadow: 0 4px 24px rgba(0,0,0,0.06);
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
  }
  .container { max-width: 960px; margin: 0 auto; padding: 0 24px; }

  /* animations */
  @keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
  @keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(82,183,136,0.4)} 50%{box-shadow:0 0 0 16px rgba(82,183,136,0)} }
  .reveal { opacity:1; }
  .reveal.visible { animation: fadeUp 0.65s ease forwards; }


  /* ===== HERO ===== */
  .hero {
    background: linear-gradient(170deg, #FAFDF9 0%, #F0F5EE 40%, #F7F4F0 100%);
    color: var(--text);
    padding: 0;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media(max-width:480px){ .hero { min-height: 100svh; } }

  /* Mouse-following spotlight */
  .hero-spotlight {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    background: radial-gradient(800px circle at var(--mx, 50%) var(--my, 50%),
      rgba(82,183,136,0.06) 0%,
      rgba(212,165,116,0.03) 20%,
      transparent 60%);
    transition: background 0.3s ease;
    opacity: 0;
    animation: heroFadeIn 1s ease 1s forwards;
  }

  /* Animated gradient mesh background */
  .hero-bg {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden;
  }
  .hero-bg-orb {
    position: absolute; border-radius: 50%;
    filter: blur(120px);
    will-change: transform;
    opacity: 0;
    animation: orbFadeIn 2s ease forwards;
  }
  .hero-bg-orb-1 {
    width: 80vw; height: 80vw; max-width: 1100px; max-height: 1100px;
    background: radial-gradient(circle, rgba(27,67,50,0.14) 0%, rgba(27,67,50,0.04) 40%, transparent 70%);
    top: -25%; left: -20%;
    animation: orbFadeIn 2s ease 0s forwards, orbFloat1 22s ease-in-out infinite 2s;
  }
  .hero-bg-orb-2 {
    width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
    background: radial-gradient(circle, rgba(212,165,116,0.22) 0%, rgba(212,165,116,0.05) 40%, transparent 70%);
    bottom: -20%; right: -15%;
    animation: orbFadeIn 2s ease 0.3s forwards, orbFloat2 26s ease-in-out infinite 2.3s;
  }
  .hero-bg-orb-3 {
    width: 45vw; height: 45vw; max-width: 600px; max-height: 600px;
    background: radial-gradient(circle, rgba(82,183,136,0.12) 0%, transparent 65%);
    top: 25%; right: 15%;
    animation: orbFadeIn 2s ease 0.6s forwards, orbFloat3 20s ease-in-out infinite 2.6s;
  }
  .hero-bg-orb-4 {
    width: 30vw; height: 30vw; max-width: 400px; max-height: 400px;
    background: radial-gradient(circle, rgba(212,165,116,0.10) 0%, transparent 60%);
    top: 10%; left: 40%;
    animation: orbFadeIn 2s ease 0.9s forwards, orbFloat4 18s ease-in-out infinite 2.9s;
  }
  @keyframes orbFadeIn { to { opacity: 1; } }
  @keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(10vw, 6vh) scale(1.18); }
    66% { transform: translate(-5vw, 10vh) scale(0.92); }
  }
  @keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-8vw, -5vh) scale(1.12); }
    66% { transform: translate(4vw, -8vh) scale(1.22); }
  }
  @keyframes orbFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-6vw, 5vh) scale(1.18); }
  }
  @keyframes orbFloat4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(4vw, -3vh) scale(1.1); }
    80% { transform: translate(-3vw, 4vh) scale(0.95); }
  }

  /* Subtle grid overlay */
  .hero-grid {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-image:
      linear-gradient(rgba(82,183,136,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(82,183,136,0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
  }

  /* Particle canvas */
  .hero-canvas {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    width: 100%; height: 100%;
  }

  /* Floating geometric shapes */
  .hero-shape {
    position: absolute; pointer-events: none; z-index: 2;
    opacity: 0;
    animation: shapeFadeIn 1.5s ease forwards;
  }
  @keyframes shapeFadeIn { to { opacity: 1; } }
  .hero-shape-ring {
    width: 120px; height: 120px;
    border: 1.5px solid rgba(212,165,116,0.15);
    border-radius: 50%;
    top: 15%; right: 8%;
    animation: shapeFadeIn 1.5s ease 1s forwards, shapeRingSpin 30s linear infinite 2.5s;
  }
  .hero-shape-diamond {
    width: 40px; height: 40px;
    border: 1px solid rgba(82,183,136,0.12);
    bottom: 25%; left: 6%;
    transform: rotate(45deg);
    animation: shapeFadeIn 1.5s ease 1.3s forwards, shapeDiamondFloat 12s ease-in-out infinite 2.8s;
  }
  .hero-shape-dots {
    top: 60%; right: 4%;
    animation: shapeFadeIn 1.5s ease 1.6s forwards;
  }
  .hero-shape-cross {
    width: 24px; height: 24px;
    top: 35%; left: 3%;
    animation: shapeFadeIn 1.5s ease 0.8s forwards, shapeCrossRotate 20s linear infinite 2.3s;
  }
  .hero-shape-cross::before, .hero-shape-cross::after {
    content: ''; position: absolute;
    background: rgba(212,165,116,0.12);
  }
  .hero-shape-cross::before {
    width: 100%; height: 1.5px; top: 50%; left: 0; transform: translateY(-50%);
  }
  .hero-shape-cross::after {
    width: 1.5px; height: 100%; left: 50%; top: 0; transform: translateX(-50%);
  }
  @keyframes shapeRingSpin { to { transform: rotate(360deg); } }
  @keyframes shapeDiamondFloat {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(-15px); }
  }
  @keyframes shapeCrossRotate { to { transform: rotate(360deg); } }

  /* Vignette overlay */
  .hero-vignette {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 85% 75% at 50% 50%, transparent 40%, rgba(244,247,244,0.80) 100%);
    z-index: 3; pointer-events: none;
  }

  /* Content layout */
  .hero-inner {
    position: relative; z-index: 5; width: 100%;
    max-width: 1280px; margin: 0 auto; padding: 100px 64px 180px;
    display: grid; grid-template-columns: 1.15fr 0.85fr;
    gap: 64px; align-items: center;
  }
  @media(max-width:960px){
    .hero-inner {
      grid-template-columns: 1fr;
      text-align: center;
      padding: 80px 28px 140px;
      gap: 48px;
    }
  }
  @media(max-width:480px){
    .hero-inner { padding: 64px 20px 110px; gap: 32px; }
  }

  .hero-text { text-align: left; }
  @media(max-width:960px){ .hero-text { text-align: center; } }

  /* Badge */
  .hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(27,67,50,0.04);
    border: 1px solid rgba(27,67,50,0.07);
    border-radius: 100px; padding: 10px 24px;
    font-size: 12.5px; font-weight: 600;
    color: rgba(27,67,50,0.55);
    margin-bottom: 36px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0; transform: translateY(20px);
    animation: heroFadeIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
    letter-spacing: 0.4px;
    cursor: default;
    transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 1px 8px rgba(27,67,50,0.04);
  }
  .hero-badge:hover {
    border-color: rgba(27,67,50,0.15);
    background: rgba(27,67,50,0.07);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(27,67,50,0.06);
  }
  .hero-badge .dot {
    width: 7px; height: 7px;
    background: var(--green-light);
    border-radius: 50%;
    animation: dotPulse 2.5s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(82,183,136,0.5); }
    50%  { box-shadow: 0 0 0 8px rgba(82,183,136,0); }
  }

  /* Title */
  .hero h1 {
    font-size: clamp(38px, 5.2vw, 64px);
    font-weight: 800; line-height: 1.08;
    margin-bottom: 28px; letter-spacing: -2px;
    text-align: inherit;
  }
  .hero-title-line {
    display: block;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(40px);
    animation: titleLineReveal 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
  }
  @keyframes titleLineReveal {
    from { opacity: 0; transform: translateY(40px); clip-path: inset(0 0 100% 0); filter: blur(10px); }
    to   { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); filter: blur(0); }
  }
  .hero h1 .gold {
    background: linear-gradient(135deg, #B8864A 0%, #D4A574 15%, #F5D9B3 45%, #E8C49A 65%, #D4A574 85%, #B8864A 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmer 5s ease-in-out infinite;
    position: relative;
  }
  @keyframes goldShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  @media(max-width:480px){
    .hero h1 { font-size: clamp(30px, 8.5vw, 44px); letter-spacing: -1.5px; margin-bottom: 24px; line-height: 1.12; }
  }

  /* Subtitle */
  .hero-sub {
    font-size: clamp(15.5px, 1.6vw, 18px);
    color: rgba(27,67,50,0.50);
    max-width: 520px;
    margin-bottom: 40px;
    line-height: 1.85; font-weight: 400;
    letter-spacing: 0.1px;
    opacity: 0; transform: translateY(20px);
    animation: heroFadeIn 0.9s cubic-bezier(0.16,1,0.3,1) 1.0s forwards;
  }
  @media(max-width:960px){ .hero-sub { margin-left: auto; margin-right: auto; } }

  /* CTA row */
  .hero-cta-row {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    margin-bottom: 20px;
    opacity: 0; transform: translateY(20px);
    animation: heroFadeIn 0.9s cubic-bezier(0.16,1,0.3,1) 1.3s forwards;
  }
  @media(max-width:960px){ .hero-cta-row { justify-content: center; } }
  @media(max-width:480px){
    .hero-cta-row { flex-direction: column; gap: 16px; align-items: stretch; }
    .hero-cta { width: 100%; justify-content: center; padding: 18px 28px; font-size: 16px; }
  }

  .hero-cta {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 48px;
    background: linear-gradient(135deg, #C4935A 0%, var(--gold) 30%, #E8C49A 60%, #D4A574 100%);
    background-size: 200% 200%;
    color: #0A1F16;
    font-size: 15.5px; font-weight: 700;
    font-family: inherit;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
    position: relative; overflow: hidden; cursor: pointer;
    box-shadow:
      0 4px 16px rgba(212,165,116,0.3),
      0 12px 40px rgba(212,165,116,0.25),
      0 0 0 1px rgba(212,165,116,0.1) inset;
    letter-spacing: 0.2px;
    animation: heroFadeIn 0.9s cubic-bezier(0.16,1,0.3,1) 1.4s forwards, ctaGradientShift 4s ease-in-out infinite 3s;
    opacity: 0;
  }
  @keyframes ctaGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  .hero-cta::before {
    content: '';
    position: absolute; top: 0; left: -100%; bottom: 0; width: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: ctaShimmer 6s ease-in-out 3s infinite;
  }
  @keyframes ctaShimmer {
    0%, 100% { transform: translateX(-50%); }
    50% { transform: translateX(50%); }
  }
  .hero-cta:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
      0 8px 24px rgba(212,165,116,0.4),
      0 20px 60px rgba(212,165,116,0.35),
      0 0 0 1px rgba(212,165,116,0.2) inset;
    background-position: 100% 50%;
  }
  .hero-cta svg { width: 18px; height: 18px; transition: transform 0.3s ease; }
  .hero-cta:hover svg { transform: translateX(4px); }

  /* CTA glow ring */
  .hero-cta-wrap {
    position: relative; display: inline-block;
    border-radius: 20px;
  }
  .hero-cta-wrap::before {
    content: '';
    position: absolute; inset: -10px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(212,165,116,0.35), rgba(82,183,136,0.10), rgba(212,165,116,0.20));
    filter: blur(24px);
    opacity: 0;
    animation: ctaGlowPulse 3s ease-in-out 3s infinite;
    z-index: -1;
  }
  @keyframes ctaGlowPulse {
    0%, 100% { opacity: 0.25; transform: scale(1); }
    50% { opacity: 0.90; transform: scale(1.03); }
  }

  /* Secondary link */
  .hero-secondary { font-size: 14px; }
  .hero-secondary a {
    color: rgba(27,67,50,0.45);
    text-decoration: none;
    border-bottom: 1px solid rgba(27,67,50,0.15);
    transition: all 0.3s ease; padding-bottom: 2px; font-weight: 500;
  }
  .hero-secondary a:hover {
    color: var(--gold);
    border-bottom-color: rgba(212,165,116,0.4);
  }
  @media(max-width:480px) { .hero-secondary { text-align: center; } .hero-secondary a { font-size: 13px; } }

  /* Stat pills */
  .hero-stats {
    display: flex; gap: 12px; margin-top: 36px;
    opacity: 0; transform: translateY(20px);
    animation: heroFadeIn 0.9s cubic-bezier(0.16,1,0.3,1) 1.8s forwards;
  }
  @media(max-width:960px){ .hero-stats { justify-content: center; } }
  @media(max-width:480px){ .hero-stats { gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 28px; } }
  .hero-stat-pill {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,0.60);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(27,67,50,0.06);
    border-radius: 100px; padding: 12px 22px;
    cursor: default;
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
  }
  .hero-stat-pill:hover {
    border-color: rgba(27,67,50,0.12);
    background: rgba(255,255,255,0.85);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(82,183,136,0.08);
  }
  .hero-stat-num {
    font-size: 26px; font-weight: 800;
    background: linear-gradient(135deg, var(--gold), #F5D9B3);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .hero-stat-unit {
    color: rgba(212,165,116,0.55); font-weight: 700; font-size: 13px;
  }
  .hero-stat-label {
    font-size: 10.5px; color: rgba(27,67,50,0.38);
    font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; white-space: nowrap;
  }
  @media(max-width:480px){
    .hero-stat-pill { padding: 10px 14px; }
    .hero-stat-num { font-size: 20px; }
    .hero-stat-label { font-size: 9px; }
    .hero-stats { gap: 8px; margin-top: 24px; }
  }

  /* Trust line */
  .hero-trust {
    display: flex; align-items: center; gap: 12px;
    margin-top: 32px;
    opacity: 0; transform: translateY(16px);
    animation: heroFadeIn 0.9s cubic-bezier(0.16,1,0.3,1) 2.2s forwards;
  }
  @media(max-width:960px){ .hero-trust { justify-content: center; } }
  .hero-trust-avatars {
    display: flex;
  }
  .hero-trust-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid var(--bg);
    margin-left: -8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    color: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  }
  .hero-trust-avatar:first-child { margin-left: 0; }
  .hero-trust-avatar:nth-child(1) { background: var(--green-dark); z-index: 3; }
  .hero-trust-avatar:nth-child(2) { background: var(--green); z-index: 2; }
  .hero-trust-avatar:nth-child(3) { background: var(--green-light); z-index: 1; }
  .hero-trust-text {
    font-size: 12.5px; color: rgba(27,67,50,0.45);
    font-weight: 500;
  }
  .hero-trust-text strong {
    color: rgba(27,67,50,0.60); font-weight: 700;
  }
  @media(max-width:480px){
    .hero-trust { margin-top: 24px; gap: 8px; }
    .hero-trust-avatar { width: 28px; height: 28px; font-size: 10px; }
  }

  /* Widget mockup card */
  .hero-mockup-wrap {
    display: flex; justify-content: center; align-items: center; position: relative;
  }
  @media(max-width:960px){
    /* .hero-mockup-wrap { order: -1; } */
  }
  /* Mobile only: hide the hero CTA link + animated widget demo ("gif").
     Desktop keeps both. Search stays reachable via nav CTA + #trazilica. */
  @media (max-width: 768px) {
    .hero-cta-wrap,
    .hero-mockup-wrap { display: none; }
  }
  .hero-widget {
    width: 100%; max-width: 420px;
    background: #0a1f1a;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(82,183,136,0.15);
    border-radius: 20px;
    padding: 0;
    position: relative;
    opacity: 0; transform: translateY(40px) scale(0.96);
    animation: mockupReveal 1.1s cubic-bezier(0.16,1,0.3,1) 1.6s forwards;
    box-shadow:
      0 8px 32px rgba(0,0,0,0.3),
      0 24px 64px rgba(0,0,0,0.4),
      0 0 0 1px rgba(82,183,136,0.08) inset;
    overflow: hidden;
  }
  @keyframes mockupReveal {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .hero-widget::after {
    content: ''; position: absolute;
    bottom: -40px; left: 10%; right: 10%;
    height: 80px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.08) 0%, transparent 70%);
    filter: blur(16px);
    z-index: -1;
    border-radius: 50%;
  }
  .hero-widget::before {
    content: ''; position: absolute; inset: -1px;
    border-radius: 21px;
    background: linear-gradient(135deg, rgba(82,183,136,0.20), transparent 25%, transparent 65%, rgba(212,165,116,0.15));
    z-index: -1;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude; -webkit-mask-composite: xor;
    padding: 1px;
  }

  /* Slide container */
  .hero-widget-slide {
    padding: 24px;
    position: relative;
    width: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .hero-widget-slide-1 {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .hero-widget-slide-1.fade-out {
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
  }
  .hero-widget-slide-2 {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 20px 24px 28px;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
  }
  .hero-widget-slide-2.fade-in {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }

  /* Widget top bar */
  .hero-widget-bar {
    display: flex; align-items: center; gap: 7px; margin-bottom: 18px;
  }
  .hero-widget-dot { width: 7px; height: 7px; border-radius: 50%; }
  .hero-widget-dot:nth-child(1) { background: rgba(82,183,136,0.3); }
  .hero-widget-dot:nth-child(2) { background: rgba(82,183,136,0.2); }
  .hero-widget-dot:nth-child(3) { background: rgba(82,183,136,0.1); }
  .hero-widget-title {
    font-size: 12px; font-weight: 700; color: rgba(82,183,136,0.6); margin-left: 6px;
    letter-spacing: 0.3px;
  }

  /* Form fields */
  .hero-widget-field {
    margin-bottom: 12px;
  }
  .hero-widget-field-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(82,183,136,0.5);
    margin-bottom: 5px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }
  .hero-widget-input {
    width: 100%; padding: 11px 14px;
    background: rgba(82,183,136,0.06);
    border: 1px solid rgba(82,183,136,0.12);
    border-radius: 10px;
    color: #e0f0e0;
    font-size: 13px; font-family: inherit;
    transition: border-color 0.3s ease;
    outline: none;
    min-height: 38px;
  }
  .hero-widget-input::placeholder {
    color: rgba(255,255,255,0.2);
  }

  /* Typing cursor */
  .hero-widget-typing {
    display: inline;
    color: #e0f0e0;
  }
  .hero-widget-cursor {
    display: inline-block;
    width: 2px; height: 14px;
    background: var(--green-light);
    margin-left: 1px;
    vertical-align: text-bottom;
    animation: widgetBlink 0.6s step-end infinite;
  }
  @keyframes widgetBlink {
    50% { opacity: 0; }
  }

  /* Dropdown */
  .hero-widget-select-wrap {
    position: relative;
  }
  .hero-widget-select-trigger {
    width: 100%; padding: 11px 14px;
    background: rgba(82,183,136,0.06);
    border: 1px solid rgba(82,183,136,0.12);
    border-radius: 10px;
    color: rgba(255,255,255,0.3);
    font-size: 13px; font-family: inherit;
    text-align: left;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.3s ease;
    min-height: 38px;
  }
  .hero-widget-select-trigger svg {
    width: 12px; height: 12px;
    color: rgba(82,183,136,0.3);
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }
  .hero-widget-select-trigger.open svg {
    transform: rotate(180deg);
  }
  .hero-widget-select-trigger.selected {
    color: #e0f0e0;
  }
  .hero-widget-dropdown {
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin-top: 4px;
    background: #0d2a1d;
    border: 1px solid rgba(82,183,136,0.15);
    border-radius: 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .hero-widget-dropdown.open {
    max-height: 180px;
  }
  .hero-widget-dropdown-item {
    padding: 9px 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    cursor: default;
    transition: all 0.15s ease;
  }
  .hero-widget-dropdown-item.hover {
    background: rgba(82,183,136,0.08);
    color: #e0f0e0;
  }
  .hero-widget-dropdown-item.selected {
    background: rgba(82,183,136,0.12);
    color: var(--green-light);
    font-weight: 600;
  }

  /* Submit button */
  .hero-widget-btn {
    width: 100%; padding: 13px;
    background: linear-gradient(135deg, #D4A574, #C4935A);
    color: #0A1F16; border: none;
    border-radius: 10px; font-weight: 700;
    font-size: 14px; font-family: inherit;
    cursor: default;
    margin-top: 16px; margin-bottom: 4px;
    position: relative; overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 4px 16px rgba(212,165,116,0.2);
  }
  .hero-widget-btn.pressed {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(212,165,116,0.15);
  }
  .hero-widget-btn.released {
    transform: scale(1.05);
    box-shadow: 0 8px 32px rgba(212,165,116,0.4);
  }

  /* === SLIDE 2 — Results === */
  .hero-widget-result-status {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 16px;
    opacity: 0; transform: translateY(12px);
    transition: all 0.3s ease;
  }
  .hero-widget-result-status.visible {
    opacity: 1; transform: translateY(0);
  }
  .hero-widget-result-status-icon {
    width: 28px; height: 28px;
    background: rgba(82,183,136,0.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .hero-widget-result-status-icon svg {
    width: 16px; height: 16px;
    color: var(--green-light);
  }
  .hero-widget-result-status-text {
    font-size: 14px; font-weight: 700;
    color: #e0f0e0;
    letter-spacing: -0.2px;
  }

  /* Parcel visualization */
  .hero-widget-parcel {
    margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(12px);
    transition: all 0.3s ease;
  }
  .hero-widget-parcel.visible {
    opacity: 1; transform: translateY(0);
  }
  .hero-widget-parcel svg {
    width: 100%; max-height: 100px;
  }

  /* Max tlocrt */
  .hero-widget-tlocrt {
    margin-bottom: 14px;
    opacity: 0; transform: translateY(12px);
    transition: all 0.3s ease;
  }
  .hero-widget-tlocrt.visible {
    opacity: 1; transform: translateY(0);
  }
  .hero-widget-tlocrt-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(82,183,136,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
  }
  .hero-widget-tlocrt-value {
    font-size: 28px; font-weight: 800;
    background: linear-gradient(135deg, var(--green-light), #D4A574);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
  }

  /* Results table */
  .hero-widget-table {
    opacity: 0; transform: translateY(12px);
    transition: all 0.3s ease;
  }
  .hero-widget-table.visible {
    opacity: 1; transform: translateY(0);
  }
  .hero-widget-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10px;
  }
  .hero-widget-table th {
    padding: 6px 5px;
    text-align: left;
    font-weight: 600;
    color: rgba(82,183,136,0.5);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid rgba(82,183,136,0.1);
    font-size: 8.5px;
  }
  .hero-widget-table td {
    padding: 6px 5px;
    color: rgba(224,240,224,0.8);
    border-bottom: 1px solid rgba(82,183,136,0.06);
    font-size: 10px;
  }
  .hero-widget-table tr:nth-child(even) td {
    background: rgba(82,183,136,0.03);
  }
  .hero-widget-table td:last-child {
    color: var(--green-light);
    font-weight: 600;
  }
  .hero-widget-table td:last-child svg {
    width: 12px; height: 12px;
    vertical-align: middle;
  }
  .hero-widget-table .unit {
    color: rgba(82,183,136,0.4);
    font-size: 9px;
  }

  @media(max-width:480px){
    .hero-widget { max-width: 310px; }
    .hero-widget-slide { padding: 20px; min-height: 360px; }
    .hero-widget-slide-2 { padding: 20px; }
    .hero-widget-tlocrt-value { font-size: 24px; }
    .hero-widget-table table { font-size: 9px; }
    .hero-widget-table th { font-size: 7.5px; padding: 4px 3px; }
    .hero-widget-table td { font-size: 9px; padding: 4px 3px; }
  }

  /* Scroll indicator */
  .hero-scroll {
    position: absolute; bottom: 36px; left: 50%;
    transform: translateX(-50%); z-index: 5;
    opacity: 0;
    animation: heroFadeIn 1s cubic-bezier(0.16,1,0.3,1) 2.8s forwards;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }
  .hero-scroll:hover { opacity: 0.7 !important; }
  .hero-scroll-text {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 3px;
    color: rgba(27,67,50,0.40);
  }
  .hero-scroll-icon {
    width: 24px; height: 40px;
    border: 1.5px solid rgba(27,67,50,0.20);
    border-radius: 12px;
    display: flex; justify-content: center;
    position: relative;
    transition: border-color 0.3s ease;
  }
  .hero-scroll-icon:hover { border-color: rgba(27,67,50,0.40); }
  .hero-scroll-dot {
    width: 2.5px; height: 7px;
    background: rgba(27,67,50,0.45);
    border-radius: 2px; margin-top: 8px;
    animation: scrollBounce 2.5s ease-in-out infinite;
  }
  @keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%  { transform: translateY(10px); opacity: 0; }
  }

  /* Bottom gradient fade */
  .hero-bottom-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
    z-index: 6; pointer-events: none;
  }

  /* Dark text overrides for hero */
  .hero h1 { color: var(--text); }

  /* Scroll progress bar */
  .hero-progress {
    position: absolute;
    top: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green-light), var(--gold));
    z-index: 10; width: 0%;
    transition: width 0.05s linear;
  }

  /* Shared animation */
  @keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .hero, .hero-bg-orb, .hero-badge, .hero h1, .hero-title-line,
    .hero-sub, .hero-cta, .hero-cta-wrap, .hero-cta-row,
    .hero-stats, .hero-secondary, .hero-scroll, .hero-scroll-dot,
    .hero-badge .dot, .hero-cta::before, .hero-shape,
    .hero-progress, .hero-spotlight, .hero-trust,
    .hero-widget, .hero-widget-slide-1, .hero-widget-slide-2,
    .hero-widget-result-status, .hero-widget-parcel,
    .hero-widget-tlocrt, .hero-widget-table {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
      width: auto !important;
      clip-path: none !important;
    }
    .hero h1 .gold { background-size: 100% 100% !important; animation: none !important; }
    .hero-progress { display: none !important; }
    .hero-shape { display: none !important; }
    .hero-spotlight { display: none !important; }
  }

  /* ===== SECTIONS ===== */
  section { padding: 90px 0; }
  #section-chaos-to-smart { padding: 100px 0 120px; }
  section.alt { background: white; }
  .section-eyebrow {
    font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:2px; color:var(--green-light); margin-bottom:10px;
  }
  .section-title {
    font-size:clamp(24px,4vw,34px); font-weight:800;
    line-height:1.2; margin-bottom:14px; letter-spacing:-0.5px;
  }
  .section-sub { font-size:16px; color:var(--muted); max-width:560px; margin-bottom:40px; }

  /* ===== SECTION 2: OD KAOSA DO PAMETNE UPRAVE ===== */
  .s2-header {
    text-align: center;
    max-width: 840px;
    margin: 0 auto 60px;
    position: relative;
    padding-top: 20px;
  }
  .s2-header::before {
    content: '';
    display: block;
    width: 64px;
    height: 4px;
    background: linear-gradient(90deg, var(--green-light), var(--gold));
    border-radius: 2px;
    margin: 0 auto 28px;
  }
  .s2-header-text {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.45;
    color: var(--text);
    letter-spacing: -0.6px;
    position: relative;
    z-index: 1;
  }
  .s2-header-text .accent {
    background: linear-gradient(135deg, var(--green-light), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
  }
  .s2-header-sub {
    font-size: 17px;
    color: var(--muted);
    max-width: 560px;
    margin: 18px auto 0;
    text-align: center;
    line-height: 1.7;
    font-weight: 500;
  }
  .s2-intro {
    font-size: 17px;
    color: var(--muted);
    max-width: 620px;
    margin: 0 auto 40px;
    text-align: center;
    line-height: 1.7;
  }

  /* Tab navigation */
  .s2-tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 36px;
    flex-wrap: wrap;
  }
  .s2-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
  }
  .s2-tab svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }
  .s2-tab:hover {
    border-color: var(--green-light);
    color: var(--green-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(82,183,136,0.12);
  }
  .s2-tab:hover svg { transform: scale(1.15); }
  .s2-tab.active {
    background: linear-gradient(135deg, var(--green-dark), var(--green));
    border-color: var(--green-dark);
    color: white;
    box-shadow: 0 6px 24px rgba(27,67,50,0.2);
  }
  .s2-tab.active svg { color: white; }
  .s2-tab .tab-num {
    display: none;
  }

  /* Tab content panels */
  .s2-panel {
    display: none;
    opacity: 0;
    transform: translateY(12px);
  }
  .s2-panel.active {
    display: block;
    animation: panelFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes panelFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Panel card */
  .s2-panel-card {
    background: white;
    border-radius: var(--radius);
    padding: 36px;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start;
  }
  @media(max-width:768px) {
    .s2-panel-card { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  }

  .s2-panel-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(27,67,50,0.08), rgba(82,183,136,0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }
  .s2-panel-icon svg {
    width: 28px; height: 28px;
    color: var(--green-dark);
  }
  .s2-panel-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    line-height: 1.3;
  }
  .s2-panel-text {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.7;
  }

  /* Result badge */
  .s2-result {
    background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
    border: 1.5px solid #BBF7D0;
    border-left: 4px solid var(--green-light);
    border-radius: 12px;
    padding: 20px 24px;
    position: relative;
  }
  .s2-result-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--green);
    margin-bottom: 8px;
  }
  .s2-result-label svg {
    width: 14px; height: 14px;
    color: var(--green-light);
  }
  .s2-result p {
    font-size: 14px;
    color: var(--green-dark);
    line-height: 1.7;
    font-weight: 500;
  }

  /* Animated counter badge inside panels */
  .s2-stat-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    background: linear-gradient(135deg, var(--gold), #E8C49A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
  }
  .s2-stat-badge .unit {
    font-size: 22px;
    font-weight: 700;
  }
  .s2-stat-desc {
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
    font-weight: 500;
  }

  /* Mobile card view (shown instead of tabs on small screens) */
  .s2-cards-mobile {
    display: none;
  }
  @media(max-width:640px) {
    .s2-tabs { display: none; }
    .s2-panel { display: none !important; }
    .s2-cards-mobile { display: block; }
  }
  .s2-mobile-card {
    background: white;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    border-left: 4px solid var(--green-light);
    opacity: 0;
    transform: translateY(16px);
  }
  .s2-mobile-card.visible {
    animation: panelFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .s2-mobile-card .s2-panel-icon {
    width: 44px; height: 44px;
    margin-bottom: 12px;
  }
  .s2-mobile-card .s2-panel-icon svg {
    width: 22px; height: 22px;
  }
  .s2-mobile-card .s2-panel-title {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .s2-mobile-card .s2-panel-text {
    font-size: 14px;
    margin-bottom: 16px;
  }
  .s2-mobile-card .s2-result {
    padding: 16px 18px;
  }

  /* ===== SECTION 2 NEW GRID ===== */
  .s2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
  }
  @media(max-width:768px) {
    .s2-grid { grid-template-columns: 1fr; }
  }
  .s2-item {
    background: white;
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: var(--shadow);
    border: 1px solid #E5E7EB;
    transition: transform 0.25s, box-shadow 0.25s;
  }
  .s2-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    border-color: var(--green-light);
  }
  .s2-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--green-dark), var(--green));
    color: white;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 16px;
  }
  .s2-item-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
  }
  .s2-item-text {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 16px;
  }
  .s2-result-line {
    font-size: 14px;
    font-style: italic;
    font-weight: 600;
    color: var(--green-dark);
    line-height: 1.6;
    padding: 12px 16px;
    background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
    border-left: 3px solid var(--green-light);
    border-radius: 0 8px 8px 0;
  }

  /* ===== WIDGET MOCKUP ===== */
  .widget-showcase {
    background:linear-gradient(135deg,#1B4332,#2D6A4F);
    border-radius:var(--radius); padding:48px;
    text-align:center; color:white;
  }
  .widget-mock {
    background:white; border-radius:12px;
    padding:28px; box-shadow:0 16px 48px rgba(0,0,0,0.2);
    max-width:420px; margin:0 auto;
    color:var(--text); text-align:left;
  }
  .widget-mock h4 { font-size:15px; color:var(--text); margin-bottom:16px; }
  .widget-mock .w-input {
    width:100%; padding:10px 14px;
    border:1.5px solid #D1D5DB; border-radius:8px;
    font-size:14px; font-family:inherit;
    margin-bottom:10px; background:#F9FAFB;
  }
  .widget-mock .w-btn {
    width:100%; padding:12px; background:var(--green-dark);
    color:white; border:none; border-radius:8px;
    font-weight:700; font-size:15px; font-family:inherit;
  }
  .widget-meta { font-size:12px; color:#9CA3AF; margin-top:12px; text-align:center; }
  .code-snippet {
    background:#1E293B; color:#94A3B8; padding:14px 20px;
    border-radius:10px; font-family:'SF Mono','Fira Code',monospace;
    font-size:13px; margin-top:20px;
    text-align:center; max-width:420px; margin-left:auto; margin-right:auto;
  }
  .code-snippet code { color:#67E8F9; }

  /* ===== WHAT CITIZENS GET ===== */
  .result-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  }
  @media(max-width:700px){ .result-grid{grid-template-columns:1fr 1fr} }
  @media(max-width:400px){ .result-grid{grid-template-columns:1fr} }
  .result-card {
    background:white; border-radius:12px; padding:22px 18px;
    text-align:center; box-shadow:var(--shadow);
    border:1px solid #E5E7EB;
    transition:transform 0.25s;
  }
  .result-card:hover { transform:translateY(-3px); border-color:var(--green-light); }
  .result-card .ricon { font-size:28px; display:block; margin-bottom:8px; }
  .result-card h4 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:6px; }
  .result-card .value { font-size:22px; font-weight:800; color:var(--green-dark); }
  .result-card .detail { font-size:12px; color:var(--muted); margin-top:2px; }

  /* ===== BENEFITS FOR MUNICIPALITY ===== */
  .municipality-benefits {
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  }
  @media(max-width:800px){ .municipality-benefits{grid-template-columns:1fr 1fr} }
  @media(max-width:500px){ .municipality-benefits{grid-template-columns:1fr} }
  .muni-card {
    background:white; border-radius:var(--radius);
    padding:28px; box-shadow:var(--shadow);
    border-left:4px solid var(--green);
    transition:transform 0.25s;
  }
  .muni-card:hover { transform:translateY(-4px); }
  .muni-card .emoji { font-size:36px; display:block; margin-bottom:12px; }
  .muni-card h4 { font-size:15px; font-weight:700; margin-bottom:6px; }
  .muni-card p { font-size:13px; color:var(--muted); line-height:1.6; }

  /* ===== STATS ===== */
  .stats-row {
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  }
  @media(max-width:700px){ .stats-row{grid-template-columns:repeat(2,1fr)} }
  .stat-card {
    background:white; border-radius:12px; padding:22px;
    text-align:center; box-shadow:var(--shadow);
    border:1px solid #E5E7EB;
  }
  .stat-card .num { font-size:30px; font-weight:800; color:var(--green-dark); display:block; }
  .stat-card .lbl { font-size:12px; color:var(--muted); margin-top:4px; }

  /* ===== INTEGRATION ===== */
  .integration-steps {
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  }
  @media(max-width:700px){ .integration-steps{grid-template-columns:1fr} }
  .int-step {
    text-align:center; padding:32px 20px;
  }
  .int-step .step-num {
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; background:var(--green);
    color:white; border-radius:50%;
    font-weight:800; font-size:18px; margin-bottom:14px;
  }
  .int-step h4 { font-size:15px; font-weight:700; margin-bottom:6px; }
  .int-step p { font-size:13px; color:var(--muted); }
  .badge-row {
    display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:32px;
  }
  .badge {
    display:inline-flex; align-items:center; gap:4px;
    background:rgba(27,67,50,0.06); border:1px solid rgba(27,67,50,0.12);
    border-radius:100px; padding:6px 16px;
    font-size:12px; font-weight:600; color:var(--green-dark);
  }

  /* ===== PRICING ===== */
  .pricing-grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
    align-items:start;
  }
  @media(max-width:800px){ .pricing-grid{grid-template-columns:1fr; max-width:380px; margin:0 auto;} }
  .price-card {
    background:white; border-radius:var(--radius);
    padding:28px; box-shadow:var(--shadow);
    border:2px solid #E5E7EB; text-align:center;
  }
  .price-card.featured {
    border-color:var(--green); background:#F0FDF4;
    transform:scale(1.03); position:relative;
  }
  @media(max-width:800px){ .price-card.featured{transform:none} }
  .price-card .tier { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin-bottom:4px; }
  .price-card .amount { font-size:34px; font-weight:800; color:var(--green-dark); margin-bottom:16px; }
  .price-card .amount small { font-size:14px; color:var(--muted); font-weight:500; }
  .price-card ul { list-style:none; text-align:left; margin-bottom:20px; }
  .price-card li { font-size:13px; padding:5px 0; border-bottom:1px solid #F3F4F6; }
  .price-card li::before { content:'✓ '; color:var(--green); font-weight:700; }
  .price-card li:last-child { border-bottom:none; }
  .free-trial {
    text-align:center; margin-top:24px;
    background:linear-gradient(135deg,#F0FDF4,#ECFDF5);
    border:2px solid var(--green-light);
    border-radius:var(--radius); padding:20px;
  }
  .free-trial p { font-size:18px; font-weight:700; color:var(--green-dark); }

  /* ===== CTA ===== */
  .cta-section {
    background:linear-gradient(160deg,#0F2A1E 0%,#1B4332 50%,#2D6A4F 100%);
    color:white; text-align:center;
    padding:64px 0;
  }
  .cta-section h2 {
    font-size:clamp(24px,4vw,36px); font-weight:800;
    margin-bottom:14px;
  }
  .cta-section p { font-size:16px; opacity:0.8; max-width:480px; margin:0 auto 32px; }
  .cta-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:16px 40px; background:var(--gold);
    color:#1B4332; font-size:17px; font-weight:700;
    border-radius:12px; text-decoration:none;
    transition:all 0.25s;
  }
  .cta-btn:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(212,165,116,0.35); }

  /* ===== FOOTER ===== */
  .footer {
    background: linear-gradient(160deg, #0F2A1E 0%, #1B4332 50%, #2D6A4F 100%);
    color: white;
    padding: 0;
  }
  .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 64px 24px 32px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 48px;
  }
  @media(max-width: 768px) {
    .footer-inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px 24px; }
  }
  .footer-brand h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 4px;
    color: white;
  }
  .footer-brand h3 .gold { color: var(--gold); font-weight: 700; }
  .footer-brand .tagline {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .footer-brand p {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
  }
  .footer-heading {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gold);
    margin-bottom: 20px;
  }
  .footer-contact-list {
    list-style: none;
    padding: 0;
  }
  .footer-contact-list li {
    margin-bottom: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
  }
  .footer-contact-list li svg {
    width: 18px;
    height: 18px;
    color: var(--green-light);
    flex-shrink: 0;
    margin-top: 2px;
  }
  .footer-contact-list a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.25s;
  }
  .footer-contact-list a:hover { color: var(--gold); }
  .footer-contact-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.4);
    display: block;
    margin-bottom: 2px;
  }
  .footer-form input,
  .footer-form textarea {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: white;
    font-family: inherit;
    font-size: 14px;
    margin-bottom: 10px;
    outline: none;
    transition: border-color 0.25s, background 0.25s;
  }
  .footer-form input::placeholder,
  .footer-form textarea::placeholder {
    color: rgba(255,255,255,0.35);
  }
  .footer-form input:focus,
  .footer-form textarea:focus {
    border-color: var(--green-light);
    background: rgba(255,255,255,0.12);
  }
  .footer-form textarea {
    min-height: 80px;
    resize: vertical;
  }
  .footer-form button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--gold), #C4935A);
    color: #0A1F16;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.25s, box-shadow 0.25s;
  }
  .footer-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212,165,116,0.3);
  }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 20px 24px;
    text-align: center;
  }
  .footer-bottom p {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
  }
  .footer-bottom a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
  }
  .footer-bottom a:hover { color: var(--gold); }

  /* helpers */
  .text-center { text-align:center; }
  .mt-8 { margin-top:8px; }
  .mt-12 { margin-top:12px; }
  .mt-24 { margin-top:24px; }
  .mt-32 { margin-top:32px; }

  /* ===== TOP NAV / LOGO BAR ===== */
  .top-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.35s ease, transform 0.35s ease, background 0.3s ease, box-shadow 0.3s ease;
  }
  .top-nav.scrolled {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    background: rgba(255,255,255,0.90);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 1px 16px rgba(0,0,0,0.08);
  }
  .top-nav-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    cursor: pointer;
  }
  .top-nav-logo svg {
    width: 44px; height: 44px;
    display: block;
    flex-shrink: 0;
  }
  .top-nav-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
  }
  .top-nav-logo-main {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -1px;
  }
  .top-nav-logo-main .gold {
    color: var(--gold);
    font-weight: 700;
  }
  .top-nav-logo-sub {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-top: 3px;
  }
  .top-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: var(--green-dark);
    color: white;
    font-size: 13px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
    flex-shrink: 0;
  }
  .top-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27,67,50,0.25);
    background: var(--green);
  }
  @media(max-width:640px) {
    .top-nav { padding: 12px 20px; }
    .top-nav-logo-main { font-size: 20px; }
    .top-nav-logo-sub { font-size: 9px; letter-spacing: 1.5px; }
    .top-nav-logo svg { width: 36px; height: 36px; }
    .top-nav-cta { padding: 8px 16px; font-size: 12px; }
  }
  @media(max-width:480px) {
    .top-nav-cta span { display: none; }
    .top-nav-cta { padding: 8px 12px; }
    .top-nav-logo-main { font-size: 18px; }
  }

    :root {
      --grd-primary: #0891B2;
      --grd-primary-light: #22D3EE;
      --grd-primary-dark: #0E7490;
      --grd-accent: #22C55E;
      --grd-green: #22C55E;
      --grd-red: #EF4444;
      --grd-bg: #F0FDFA;
      --grd-card: rgba(255, 255, 255, 0.95);
    }

    .grd-form-section {
      background: var(--grd-bg);
      padding: 48px 0 60px;
    }
    .grd-form-section .grd-container {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 24px;
    }

    .grd-card {
      background: var(--grd-card);
      border-radius: var(--grd-radius);
      box-shadow: var(--grd-shadow-lg);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.6);
      padding: 32px;
      margin-bottom: 24px;
      transition: box-shadow var(--grd-transition);
    }
    .grd-card:hover {
      box-shadow: var(--grd-shadow-xl);
    }

    /* ===== REDESIGNED FORM CARD ===== */
    .grd-card.grd-form-card {
      border: none;
      border-radius: 24px;
      box-shadow: var(--grd-shadow-xl);
      overflow: visible;
      padding: 0;
      background: white;
      position: relative;
      transition: box-shadow var(--grd-transition);
    }
    .grd-card.grd-form-card:hover {
      box-shadow: 0 24px 72px rgba(8,145,178,0.14), 0 6px 24px rgba(0,0,0,0.06);
    }
    /* Animated gradient border */
    .grd-card.grd-form-card::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 26px;
      background: linear-gradient(135deg, var(--grd-primary), var(--grd-primary-light), var(--grd-accent), var(--grd-primary));
      background-size: 300% 300%;
      z-index: -1;
      animation: grdBorderGlow 6s ease infinite;
      opacity: 0.6;
    }
    @keyframes grdBorderGlow {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .grd-form-header {
      background: linear-gradient(135deg, #0891B2 0%, #0E7490 100%);
      padding: 28px 36px;
      display: flex;
      align-items: center;
      gap: 16px;
      position: relative;
      overflow: hidden;
    }
    .grd-form-header::after {
      content: '';
      position: absolute;
      top: -50%; right: -20%;
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }
    @media (max-width: 600px) {
      .grd-form-header { padding: 22px 20px; }
    }
    .grd-form-header-icon {
      width: 48px;
      height: 48px;
      background: rgba(255,255,255,0.15);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,0.1);
      transition: transform var(--grd-transition), background var(--grd-transition);
    }
    .grd-card.grd-form-card:hover .grd-form-header-icon {
      transform: scale(1.05);
      background: rgba(255,255,255,0.2);
    }
    .grd-form-header h2 {
      font-size: 19px;
      font-weight: 700;
      color: white;
      margin: 0;
      line-height: 1.3;
      position: relative;
      z-index: 1;
    }
    .grd-form-header p {
      font-size: 14px;
      color: rgba(255,255,255,0.8);
      margin: 3px 0 0;
      position: relative;
      z-index: 1;
    }
    .grd-form-body {
      padding: 32px 36px 36px;
    }
    @media (max-width: 600px) {
      .grd-form-body { padding: 24px 20px 28px; }
    }

    .grd-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 20px;
      align-items: end;
    }
    @media (max-width: 1023px) {
      .grd-form-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    }
    @media (max-width: 600px) {
      .grd-form-grid { grid-template-columns: 1fr; gap: 16px; }
    }

    .grd-field {
      position: relative;
    }
    .grd-field label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 600;
      color: var(--grd-text);
      margin-bottom: 8px;
    }
    .grd-field label .grd-label-icon {
      opacity: 0.5;
    }
    .grd-field .grd-input-wrap {
      position: relative;
    }
    .grd-field .grd-input-wrap input,
    .grd-field .grd-input-wrap .grd-custom-select-trigger {
      width: 100%;
      height: 58px;
      padding: 0 48px 0 18px;
      border: 2px solid #E2E8F0;
      border-radius: 14px;
      font-size: 16px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 500;
      color: var(--grd-text);
      transition: border-color var(--grd-transition), box-shadow var(--grd-transition), background var(--grd-transition), transform 0.15s ease;
      background: #F8FAFC;
      -webkit-appearance: none;
      appearance: none;
    }
    .grd-field .grd-input-wrap input:hover,
    .grd-field .grd-input-wrap .grd-custom-select-trigger:hover {
      border-color: #CBD5E1;
      background: white;
      transform: translateY(-1px);
    }
    @media (min-width: 1024px) {
      .grd-field .grd-input-wrap input,
      .grd-field .grd-input-wrap .grd-custom-select-trigger {
        min-width: 220px;
      }
    }
    .grd-field .grd-input-wrap input::placeholder {
      color: #94A3B8;
      font-weight: 400;
    }
    .grd-field .grd-input-wrap input:focus,
    .grd-field .grd-input-wrap .grd-custom-select-trigger:focus {
      outline: none;
      border-color: var(--grd-primary);
      background: white;
      box-shadow: var(--grd-glow-primary);
      transform: translateY(-1px);
    }
    .grd-field .grd-input-wrap input.grd-valid {
      border-color: var(--grd-green);
      background: linear-gradient(135deg, #F0FDF4, white);
    }
    .grd-field .grd-input-wrap input.grd-valid:focus {
      box-shadow: var(--grd-glow-green);
      background: white;
    }
    .grd-field .grd-input-wrap input.grd-invalid {
      border-color: var(--grd-red);
      background: linear-gradient(135deg, #FEF2F2, white);
    }
    .grd-field .grd-input-wrap input.grd-invalid:focus {
      box-shadow: var(--grd-glow-red);
      background: white;
    }
    .grd-field .grd-validation-icon {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%) scale(0.5);
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      pointer-events: none;
    }
    .grd-field .grd-validation-icon.grd-show {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }
    .grd-field .hint {
      font-size: 12px;
      color: var(--grd-muted);
      margin-top: 6px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    @media (max-width: 600px) {
      .grd-field .hint { display: none; }
      .grd-field .grd-mobile-hint { display: flex !important; }
    }
    .grd-field .grd-mobile-hint {
      display: none;
    }

    /* Custom Select Dropdown */
    .grd-custom-select {
      position: relative;
    }
    .grd-custom-select-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      user-select: none;
    }
    .grd-custom-select-trigger .grd-select-value {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .grd-custom-select-trigger .grd-select-placeholder {
      color: #94A3B8;
      font-weight: 400;
    }
    .grd-custom-select-trigger .grd-select-arrow {
      flex-shrink: 0;
      transition: transform 0.2s ease;
      margin-left: 8px;
    }
    .grd-custom-select.open .grd-select-arrow {
      transform: rotate(180deg);
    }
    .grd-custom-select-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      background: white;
      border: 2px solid #E2E8F0;
      border-radius: 14px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.04);
      z-index: 100;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px) scale(0.98);
      transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s ease;
      overflow: hidden;
    }
    .grd-custom-select.open .grd-custom-select-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }
    .grd-custom-select-option {
      padding: 14px 18px;
      font-size: 15px;
      font-weight: 500;
      color: var(--grd-text);
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, padding-left 0.2s ease;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .grd-custom-select-option:hover {
      background: #F0FDFA;
      color: #0891B2;
      padding-left: 22px;
    }
    .grd-custom-select-option.grd-selected {
      background: rgba(8, 145, 178, 0.08);
      color: #0891B2;
      font-weight: 600;
    }
    .grd-custom-select-option .grd-option-check {
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    .grd-custom-select-option.grd-selected .grd-option-check {
      opacity: 1;
    }
    .grd-custom-select-trigger.grd-has-value {
      color: var(--grd-text);
    }

    /* Submit Button in Grid */
    .grd-field.grd-submit-field {
      align-self: end;
    }
    @media (max-width: 1023px) {
      .grd-field.grd-submit-field {
        grid-column: 1 / -1;
      }
    }
    .grd-submit-btn {
      width: 100%;
      height: 58px;
      background: linear-gradient(135deg, #0891B2 0%, #0E7490 100%);
      color: white;
      border: none;
      border-radius: 14px;
      font-size: 16px;
      font-weight: 700;
      font-family: 'Plus Jakarta Sans', sans-serif;
      cursor: pointer;
      transition: transform var(--grd-transition), box-shadow var(--grd-transition), background var(--grd-transition);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-width: 200px;
      letter-spacing: 0.3px;
    }
    .grd-submit-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
      opacity: 0;
      transition: opacity var(--grd-transition);
    }
    .grd-submit-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 60%);
      opacity: 0;
      transition: opacity 0.1s;
    }
    .grd-submit-btn:hover:not(:disabled)::before {
      opacity: 1;
    }
    .grd-submit-btn:hover:not(:disabled) {
      transform: translateY(-3px);
      box-shadow: 0 12px 36px rgba(8, 145, 178, 0.4), 0 4px 12px rgba(8, 145, 178, 0.2);
    }
    .grd-submit-btn:active:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(8, 145, 178, 0.3);
    }
    .grd-submit-btn:active:not(:disabled)::after {
      opacity: 1;
    }
    .grd-submit-btn:disabled {
      opacity: 0.7;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
    .grd-submit-btn .grd-spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255,255,255,0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      flex-shrink: 0;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    @media (max-width: 600px) {
      .grd-submit-btn { min-width: unset; height: 54px; }
    }

    /* Ripple effect on submit button */
    .grd-ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,0.4);
      transform: scale(0);
      animation: grdRipple 0.6s ease-out;
      pointer-events: none;
    }
    @keyframes grdRipple {
      to { transform: scale(4); opacity: 0; }
    }

    /* Toast Notification */
    .grd-toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    @media (max-width: 600px) {
      .grd-toast-container {
        top: auto;
        bottom: 20px;
        left: 16px;
        right: 16px;
      }
    }
    .grd-toast {
      background: white;
      border-radius: 14px;
      padding: 16px 20px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
      display: flex;
      align-items: flex-start;
      gap: 12px;
      max-width: 400px;
      transform: translateX(120%);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
      opacity: 0;
      border-left: 4px solid;
    }
    @media (max-width: 600px) {
      .grd-toast {
        max-width: 100%;
        transform: translateY(120%);
      }
    }
    .grd-toast.grd-toast-show {
      transform: translateX(0);
      opacity: 1;
    }
    @media (max-width: 600px) {
      .grd-toast.grd-toast-show { transform: translateY(0); }
    }
    .grd-toast.grd-toast-success { border-left-color: var(--grd-green); }
    .grd-toast.grd-toast-error { border-left-color: var(--grd-red); }
    .grd-toast.grd-toast-info { border-left-color: var(--grd-primary); }
    .grd-toast-icon {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
    }
    .grd-toast-success .grd-toast-icon { background: #F0FDF4; color: var(--grd-green); }
    .grd-toast-error .grd-toast-icon { background: #FEF2F2; color: var(--grd-red); }
    .grd-toast-info .grd-toast-icon { background: #ECFEFF; color: var(--grd-primary); }
    .grd-toast-content { flex: 1; }
    .grd-toast-title { font-size: 14px; font-weight: 700; color: var(--grd-text); margin-bottom: 2px; }
    .grd-toast-message { font-size: 13px; color: var(--grd-muted); line-height: 1.4; }
    .grd-toast-close {
      background: none;
      border: none;
      cursor: pointer;
      color: #94A3B8;
      padding: 2px;
      transition: color 0.15s;
      flex-shrink: 0;
    }
    .grd-toast-close:hover { color: #475569; }

    .grd-road-edges {
      margin-bottom: 24px;
    }
    .grd-road-edges label {
      font-size: 13px;
      font-weight: 600;
      color: var(--grd-text);
      margin-bottom: 8px;
      display: block;
    }
    .grd-road-edges input {
      width: 100%;
      padding: 10px 16px;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
      font-family: inherit;
    }
    .grd-road-edges input:focus {
      outline: none;
      border-color: var(--grd-accent);
      box-shadow: 0 0 0 3px rgba(0,180,216,0.15);
    }

    /* Old submit btn styles replaced by redesigned ones above */

    .grd-error {
      background: linear-gradient(135deg, #FEF2F2, #FEE2E2);
      border: 1px solid #FECACA;
      border-radius: 14px;
      padding: 16px 20px;
      color: var(--grd-red);
      font-size: 14px;
      font-weight: 500;
      margin-top: 20px;
      display: none;
      animation: grdErrorSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 4px 16px rgba(239, 68, 68, 0.1);
      align-items: center;
      gap: 10px;
    }
    @keyframes grdErrorSlide {
      from { opacity: 0; transform: translateY(-8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Results Section */
    .grd-results { display: none; }
    .grd-results.active { display: block; animation: fadeUp 0.5s ease; }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .grd-verdict-box {
      text-align: center;
      padding: 32px;
      border-radius: var(--grd-radius);
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
    }
    .grd-verdict-box.success { background: #E8F5E9; border: 2px solid var(--grd-green); }
    .grd-verdict-box.failure { background: #FFEBEE; border: 2px solid var(--grd-red); }
    .grd-verdict-box.conditional { background: #FFF8E1; border: 2px solid #F9A825; }
    .grd-verdict-icon {
      font-size: 56px;
      margin-bottom: 12px;
      display: block;
      animation: popIn 0.5s ease;
    }
    @keyframes popIn {
      0% { transform: scale(0); opacity: 0; }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); opacity: 1; }
    }
    .grd-verdict-box h2 {
      font-size: 24px;
      font-weight: 800;
      margin-bottom: 8px;
    }
    .grd-verdict-box.success h2 { color: var(--grd-green); }
    .grd-verdict-box.failure h2 { color: var(--grd-red); }
    .grd-verdict-box.conditional h2 { color: #F9A825; }
    .grd-verdict-box p { font-size: 14px; color: #555; line-height: 1.6; max-width: 600px; margin: 0 auto; }

    .grd-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }
    @media (max-width: 600px) {
      .grd-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .grd-stat { padding: 14px 10px; }
      .grd-stat-number { font-size: 24px; }
      .grd-stat-label { font-size: 10px; }
    }
    .grd-stat {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 18px 12px;
      text-align: center;
      transition: transform 0.2s, box-shadow 0.2s;
      position: relative;
      overflow: hidden;
    }
    .grd-stat::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--grd-primary), var(--grd-accent));
      opacity: 0.7;
    }
    .grd-stat:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.10); }
    .grd-stat-number {
      font-size: 28px;
      font-weight: 800;
      color: var(--grd-primary);
      display: block;
    }
    .grd-stat-label {
      font-size: 11px;
      color: var(--grd-muted);
      margin-top: 4px;
    }

    .grd-viz-container {
      margin: 24px 0;
      text-align: center;
    }
    .grd-viz-container svg {
      max-width: 100%;
      height: auto;
      border: 1px solid #e5e7eb;
      border-radius: var(--grd-radius);
    }

    .grd-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 0 -16px;
      padding: 0 16px;
      position: relative;
    }
    .grd-table-wrap::after {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: 24px;
      background: linear-gradient(to right, transparent, rgba(255,255,255,0.9));
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s;
    }
    @media (max-width: 600px) {
      .grd-table-wrap::after { opacity: 1; }
    }
    .grd-details-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      min-width: 520px;
    }
    .grd-details-table th {
      text-align: left;
      padding: 10px 14px;
      background: #f8fafc;
      color: var(--grd-muted);
      font-weight: 600;
      font-size: 12px;
      border-bottom: 1px solid #e5e7eb;
      white-space: nowrap;
    }
    .grd-details-table td {
      padding: 10px 14px;
      border-bottom: 1px solid #f0f0f0;
      color: var(--grd-text);
      font-weight: 500;
    }
    @media (max-width: 600px) {
      .grd-hero { padding: 40px 0 36px; }
      .grd-hero-animation { margin-bottom: 20px; }
      .grd-card { padding: 24px 16px; margin-bottom: 16px; }
      .grd-details-table { font-size: 13px; min-width: 480px; }
      .grd-details-table th, .grd-details-table td { padding: 8px 10px; }
      .grd-actions { flex-direction: column; gap: 10px; }
      .grd-action-btn { width: 100%; min-width: unset; }
      .grd-mode-toggle { flex-direction: column; }
      .grd-mode-btn { width: 100%; min-width: unset; }
      .grd-viz-container svg { max-width: 100%; height: auto; }
      .grd-form-grid { gap: 14px; }
      .grd-progress-steps { display: none; }
    }

    .grd-actions {
      display: flex;
      gap: 12px;
      margin-top: 24px;
      flex-wrap: wrap;
    }
    .grd-action-btn {
      flex: 1;
      min-width: 160px;
      padding: 12px 20px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      text-align: center;
      transition: all 0.2s;
      border: 2px solid;
    }
    .grd-action-btn.primary {
      background: var(--grd-primary);
      color: white;
      border-color: var(--grd-primary);
    }
    .grd-action-btn.secondary {
      background: white;
      color: var(--grd-primary);
      border-color: #e5e7eb;
    }
    .grd-action-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

    .grd-disclaimer {
      background: #FFF8E1;
      border: 1px solid #FFE082;
      border-radius: 8px;
      padding: 16px;
      margin-top: 24px;
      font-size: 12px;
      color: #6D4C00;
      line-height: 1.5;
    }
    .grd-disclaimer strong { display: block; margin-bottom: 4px; font-size: 13px; }

    /* ===== REDESIGNED PROGRESS BAR ===== */
    .grd-progress { display: none; margin-top: 24px; }
    .grd-progress.active { display: block; animation: grdProgressFade 0.4s ease; }
    @keyframes grdProgressFade {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .grd-progress-bar {
      height: 8px;
      background: #E2E8F0;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
    }
    .grd-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #0891B2, #22D3EE, #22C55E);
      background-size: 200% 100%;
      width: 0%;
      border-radius: 8px;
      animation: progressAnim 8s ease forwards, grdProgressGradient 2s ease infinite;
      position: relative;
    }
    @keyframes grdProgressGradient {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .grd-progress-fill::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
      animation: grdShimmer 1.2s ease infinite;
    }
    @keyframes grdShimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    @keyframes progressAnim {
      0% { width: 0%; }
      10% { width: 15%; }
      30% { width: 40%; }
      50% { width: 58%; }
      70% { width: 72%; }
      85% { width: 84%; }
      100% { width: 95%; }
    }
    .grd-progress-steps {
      display: flex;
      justify-content: space-between;
      margin-top: 14px;
      padding: 0 4px;
    }
    .grd-progress-step {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: #94A3B8;
      transition: color var(--grd-transition), transform var(--grd-transition);
    }
    .grd-progress-step.active {
      color: var(--grd-primary);
      font-weight: 600;
      transform: scale(1.05);
    }
    .grd-progress-step.done {
      color: var(--grd-green);
    }
    .grd-progress-step-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #CBD5E1;
      transition: background var(--grd-transition), transform var(--grd-transition);
    }
    .grd-progress-step.active .grd-progress-step-dot {
      background: var(--grd-primary);
      animation: grdStepPulse 1.2s ease infinite;
    }
    .grd-progress-step.done .grd-progress-step-dot {
      background: var(--grd-green);
    }
    @keyframes grdStepPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.5); }
    }
    .grd-progress-text {
      font-size: 14px;
      font-weight: 600;
      color: var(--grd-primary);
      margin-top: 12px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .grd-progress-text .grd-progress-dots {
      display: inline-flex;
      gap: 3px;
    }
    .grd-progress-text .grd-progress-dots span {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--grd-primary);
      animation: grdBounce 1.4s ease infinite;
    }
    .grd-progress-text .grd-progress-dots span:nth-child(2) { animation-delay: 0.2s; }
    .grd-progress-text .grd-progress-dots span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes grdBounce {
      0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
      40% { opacity: 1; transform: scale(1.3); }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .grd-progress-fill::after { display: none; }
    }
    .src-col {
      text-align: right;
      white-space: nowrap;
    }
    .src-badge {
      display: inline-block;
      font-size: 11px;
      color: var(--grd-accent);
      background: rgba(0, 180, 216, 0.08);
      border: 1px solid rgba(0, 180, 216, 0.25);
      border-radius: 4px;
      padding: 1px 6px;
      text-decoration: none;
      font-weight: 500;
      transition: background 0.15s;
    }
    .src-badge:hover {
      background: rgba(0, 180, 216, 0.18);
      text-decoration: none;
    }

    /* Mode toggle for edge removal / road selection */
    .grd-mode-toggle {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .grd-mode-btn {
      flex: 1;
      min-width: 120px;
      padding: 10px 14px;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      background: white;
      font-size: 13px;
      font-weight: 600;
      color: var(--grd-muted);
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
    }
    .grd-mode-btn:hover {
      border-color: var(--grd-primary);
      color: var(--grd-primary);
    }
    .grd-mode-btn.active {
      border-color: var(--grd-primary);
      background: rgba(8, 145, 178, 0.08);
      color: var(--grd-primary);
    }

    /* Removed edge tags */
    .grd-removed-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .grd-edge-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #FEE2E2;
      border: 1px solid #FCA5A5;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 12px;
      color: #991B1B;
      font-weight: 600;
    }
    .grd-edge-tag button {
      background: none;
      border: none;
      cursor: pointer;
      color: #991B1B;
      font-size: 14px;
      line-height: 1;
      padding: 0;
      margin-left: 2px;
    }

    /* ===== HOW IT WORKS SECTION ===== */
    .grd-how-section {
      padding: 64px 0 72px;
      background: white;
      position: relative;
      overflow: hidden;
    }
    .grd-how-section::before {
      content: '';
      position: absolute;
      top: -60px;
      right: -80px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(8,145,178,0.04) 0%, transparent 70%);
      pointer-events: none;
    }
    .grd-how-section::after {
      content: '';
      position: absolute;
      bottom: -40px;
      left: -60px;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(34,197,94,0.04) 0%, transparent 70%);
      pointer-events: none;
    }
    .grd-how-header {
      text-align: center;
      margin-bottom: 48px;
      position: relative;
      z-index: 1;
    }
    .grd-how-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #ECFEFF;
      color: var(--grd-primary);
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      margin-bottom: 16px;
      border: 1px solid rgba(8,145,178,0.12);
    }
    .grd-how-header h2 {
      font-size: clamp(22px, 3.5vw, 32px);
      font-weight: 800;
      color: var(--grd-text);
      margin: 0 0 10px;
      line-height: 1.2;
    }
    .grd-how-header p {
      font-size: clamp(14px, 1.6vw, 16px);
      color: var(--grd-muted);
      max-width: 480px;
      margin: 0 auto;
      line-height: 1.5;
    }

    /* Timeline layout */
    .grd-how-timeline {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 0;
      position: relative;
      z-index: 1;
      max-width: 960px;
      margin: 0 auto;
    }

    /* SVG Timeline line */
    .grd-how-timeline-line {
      position: absolute;
      top: 30px;
      left: 10%;
      right: 10%;
      height: 2px;
      z-index: 0;
      pointer-events: none;
    }
    .grd-how-timeline-line svg {
      width: 100%;
      height: 4px;
      overflow: visible;
    }
    .grd-how-timeline-line-path {
      stroke: #CBD5E1;
      stroke-width: 2;
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      fill: none;
      stroke-linecap: round;
      transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
    }
    .grd-how-timeline-line-path.grd-how-visible {
      stroke-dashoffset: 0;
    }
    .grd-how-step {
      flex: 1;
      max-width: 320px;
      text-align: center;
      padding: 0 20px;
      position: relative;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .grd-how-step.grd-how-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .grd-how-step:nth-child(2) { transition-delay: 0.15s; }
    .grd-how-step:nth-child(3) { transition-delay: 0.3s; }

    /* Step number circle */
    .grd-how-number {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, #0891B2, #0E7490);
      color: white;
      font-size: 18px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px;
      position: relative;
      box-shadow: 0 4px 16px rgba(8,145,178,0.25);
    }
    .grd-how-step:nth-child(3) .grd-how-number {
      background: linear-gradient(135deg, #22C55E, #16A34A);
      box-shadow: 0 4px 16px rgba(34,197,94,0.25);
    }

    /* Connector arrows (desktop) */
    .grd-how-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      flex-shrink: 0;
      margin-top: 12px;
      opacity: 0;
      transform: scaleX(0.5);
      transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
    }
    .grd-how-arrow.grd-how-visible {
      opacity: 0.4;
      transform: scaleX(1);
    }

    /* Icon container */
    .grd-how-icon {
      width: 72px;
      height: 72px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 18px;
      position: relative;
    }
    .grd-how-step:nth-child(1) .grd-how-icon {
      background: linear-gradient(135deg, #ECFEFF, #CFFAFE);
      border: 1px solid rgba(8,145,178,0.1);
    }
    .grd-how-step:nth-child(2) .grd-how-icon {
      background: linear-gradient(135deg, #FEF3C7, #FDE68A);
      border: 1px solid rgba(245,158,11,0.1);
    }
    .grd-how-step:nth-child(3) .grd-how-icon {
      background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
      border: 1px solid rgba(34,197,94,0.1);
    }

    /* Gear rotation for step 2 */
    .grd-how-gear-spin {
      animation: grdGearSpin 4s linear infinite;
    }
    @keyframes grdGearSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Checkmark bounce for step 3 */
    .grd-how-bounce {
      animation: grdBounceIn 0.6s ease 0.5s both;
    }
    @keyframes grdBounceIn {
      0% { transform: scale(0); }
      50% { transform: scale(1.2); }
      70% { transform: scale(0.9); }
      100% { transform: scale(1); }
    }

    /* Step content */
    .grd-how-step h3 {
      font-size: 17px;
      font-weight: 700;
      color: var(--grd-text);
      margin: 0 0 8px;
      line-height: 1.3;
    }
    .grd-how-step .grd-how-desc {
      font-size: 14px;
      color: var(--grd-muted);
      line-height: 1.6;
      margin: 0;
    }

    /* Step 1 — Animated typing mockup */
    .grd-how-input-mockup {
      margin-top: 14px;
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s;
    }
    .grd-how-input-mockup.grd-how-visible {
      opacity: 1;
      transform: scale(1);
    }
    .grd-how-mock-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .grd-how-mock-label {
      font-size: 9px;
      font-weight: 600;
      color: var(--grd-muted);
      white-space: nowrap;
      min-width: 42px;
      text-align: right;
    }
    .grd-how-mock-input {
      flex: 1;
      height: 24px;
      background: white;
      border: 1.5px solid #CBD5E1;
      border-radius: 6px;
      padding: 0 8px;
      font-size: 12px;
      font-weight: 600;
      font-family: 'Plus Jakarta Sans', sans-serif;
      color: var(--grd-text);
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    .grd-how-mock-input .grd-typing-text {
      white-space: nowrap;
      overflow: hidden;
      border-right: 2px solid var(--grd-primary);
      width: 0;
      animation: none;
    }
    .grd-how-input-mockup.grd-how-typing .grd-mock-parcela .grd-typing-text {
      animation: grdTypeParcel 1.5s steps(7) 0.5s forwards,
                 grdCursorBlink 0.6s step-end infinite;
    }
    .grd-how-mock-input .grd-dropdown-filled {
      font-size: 12px;
      font-weight: 600;
      color: var(--grd-text);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .grd-how-mock-input .grd-dropdown-arrow {
      margin-left: auto;
      opacity: 0.4;
      transition: transform 0.3s ease;
    }
    .grd-how-input-mockup.grd-how-dropdown-open .grd-dropdown-arrow {
      transform: rotate(180deg);
    }
    .grd-how-input-mockup.grd-how-dropdown-filled .grd-dropdown-filled {
      opacity: 1;
    }
    .grd-how-mock-dropdown {
      background: white;
      border: 1.5px solid #E2E8F0;
      border-radius: 8px;
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height 0.3s ease, opacity 0.3s ease;
      margin-left: 48px;
    }
    .grd-how-input-mockup.grd-how-dropdown-open .grd-mock-dropdown {
      max-height: 80px;
      opacity: 1;
    }
    .grd-how-dropdown-option {
      padding: 4px 10px;
      font-size: 11px;
      font-weight: 500;
      color: var(--grd-text);
      cursor: default;
      transition: background 0.15s;
    }
    .grd-how-dropdown-option:hover {
      background: #F0FDFA;
    }
    .grd-how-dropdown-option.grd-how-dropdown-selected {
      background: rgba(8, 145, 178, 0.08);
      color: var(--grd-primary);
      font-weight: 600;
    }

    @keyframes grdTypeParcel {
      0% { width: 0; }
      15% { width: 8px; }   /* 3 */
      30% { width: 17px; }  /* 37 */
      45% { width: 27px; }  /* 375 */
      55% { width: 37px; }  /* 3754 */
      65% { width: 42px; }  /* 3754/ */
      80% { width: 50px; }  /* 3754/1 */
      100% { width: 58px; } /* 3754/10 */
    }
    @keyframes grdCursorBlink {
      0%, 100% { border-color: var(--grd-primary); }
      50% { border-color: transparent; }
    }

    /* Mobile adjustments for mockup */
    @media (max-width: 768px) {
      .grd-how-input-mockup { padding: 8px 10px; }
      .grd-how-mock-input { height: 22px; font-size: 11px; }
      .grd-how-mock-label { font-size: 8px; min-width: 36px; }
      .grd-how-dropdown-option { font-size: 10px; padding: 3px 8px; }
    }

    /* Data sources (step 2) mini-icons */
    .grd-how-sources {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-top: 14px;
    }
    .grd-how-source-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 500;
      color: var(--grd-muted);
      background: #F8FAFC;
      border: 1px solid #E2E8F0;
      border-radius: 6px;
      padding: 3px 8px;
      opacity: 0;
      transform: scale(0.8);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .grd-how-source-chip.grd-how-visible {
      opacity: 1;
      transform: scale(1);
    }

    /* Result preview mockup (step 3) */
    .grd-how-result-preview {
      margin-top: 14px;
      background: #F0FDF4;
      border: 1px solid #BBF7D0;
      border-radius: 10px;
      padding: 10px 14px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
    }
    .grd-how-result-preview.grd-how-visible {
      opacity: 1;
      transform: scale(1);
    }
    .grd-how-result-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      font-weight: 800;
      color: #16A34A;
    }
    .grd-how-result-stats {
      display: flex;
      gap: 10px;
    }
    .grd-how-result-stat {
      font-size: 10px;
      color: #64748B;
      text-align: center;
      line-height: 1.3;
    }
    .grd-how-result-stat strong {
      display: block;
      font-size: 13px;
      color: var(--grd-text);
    }

    /* Desktop hover effects */
    @media (min-width: 769px) {
      .grd-how-step {
        cursor: default;
        padding: 20px;
        border-radius: 20px;
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, box-shadow 0.3s ease;
      }
      .grd-how-step.grd-how-visible:hover {
        background: rgba(255, 255, 255, 0.7);
        box-shadow: 0 8px 32px rgba(8, 145, 178, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
        transform: translateY(-4px) !important;
      }
      .grd-how-step .grd-how-hover-detail {
        display: block;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
        margin-top: 0;
      }
      .grd-how-step:hover .grd-how-hover-detail {
        max-height: 120px;
        opacity: 1;
        margin-top: 12px;
      }
      .grd-how-step:hover .grd-how-icon {
        transform: scale(1.08);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .grd-how-step:hover .grd-how-number {
        transform: scale(1.1);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
      }
      .grd-how-step[data-how-step="1"]:hover .grd-how-number {
        box-shadow: 0 6px 20px rgba(8, 145, 178, 0.35);
      }
      .grd-how-step[data-how-step="2"]:hover .grd-how-number {
        box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
      }
      .grd-how-step[data-how-step="3"]:hover .grd-how-number {
        box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
      }
    }
    .grd-how-hover-detail {
      display: none;
    }
    .grd-how-hover-detail p {
      font-size: 12px;
      color: var(--grd-primary);
      font-weight: 600;
      margin: 0;
      line-height: 1.5;
      padding: 10px 14px;
      background: #ECFEFF;
      border-radius: 10px;
      border: 1px solid rgba(8, 145, 178, 0.08);
    }

    /* Mobile layout */
    @media (max-width: 768px) {
      .grd-how-section { padding: 48px 0 56px; }
      .grd-how-header { margin-bottom: 36px; }
      .grd-how-timeline {
        flex-direction: column;
        align-items: center;
        gap: 0;
      }
      .grd-how-step {
        max-width: 100%;
        padding: 0 16px;
        margin-bottom: 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .grd-how-step:last-child { margin-bottom: 0; }
      .grd-how-arrow {
        transform: rotate(90deg) scaleX(0.5);
        margin-top: -8px;
        margin-bottom: -8px;
        width: 32px;
      }
      .grd-how-arrow.grd-how-visible {
        transform: rotate(90deg) scaleX(1);
      }
      .grd-how-icon { width: 60px; height: 60px; border-radius: 16px; margin-bottom: 14px; }
      .grd-how-number { width: 36px; height: 36px; font-size: 15px; margin-bottom: 12px; }
      /* Mobile vertical timeline line — CSS-based for proper draw animation */
      .grd-how-timeline-line {
        left: 50%;
        right: auto;
        width: 2px;
        top: 18px;
        bottom: 18px;
        height: auto;
        transform: translateX(-50%);
        background: transparent;
        overflow: hidden;
      }
      .grd-how-timeline-line svg { display: none; }
      .grd-how-timeline-line::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        background: #CBD5E1;
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
      }
      .grd-how-timeline-line.grd-how-visible::after {
        transform: scaleY(1);
      }
    }

    /* Reduced motion for how section */
    @media (prefers-reduced-motion: reduce) {
      .grd-how-step, .grd-how-arrow, .grd-how-source-chip, .grd-how-result-preview, .grd-how-input-mockup {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .grd-how-timeline-line-path {
        stroke-dashoffset: 0 !important;
        transition: none !important;
      }
      .grd-how-timeline-line::after {
        transform: scaleY(1) !important;
        transition: none !important;
      }
      .grd-how-gear-spin { animation: none !important; }
      .grd-how-bounce { animation: none !important; }
      .grd-how-hover-detail {
        max-height: none !important;
        opacity: 1 !important;
        margin-top: 12px !important;
      }
      .grd-how-input-mockup .grd-typing-text {
        width: 58px !important;
        animation: none !important;
        border-right: none !important;
      }
      .grd-how-input-mockup.grd-how-dropdown-open .grd-mock-dropdown {
        max-height: 80px !important;
        opacity: 1 !important;
      }
      .grd-how-input-mockup.grd-how-dropdown-filled .grd-dropdown-filled {
        opacity: 1 !important;
      }
    }

    /* ===== WHAT YOU GET SECTION ===== */
    .grd-what-section {
      padding: 64px 0 72px;
      background: var(--grd-bg);
      position: relative;
      overflow: hidden;
    }
    .grd-what-section::before {
      content: '';
      position: absolute;
      top: -80px;
      left: -100px;
      width: 350px;
      height: 350px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(8,145,178,0.05) 0%, transparent 70%);
      pointer-events: none;
    }
    .grd-what-section::after {
      content: '';
      position: absolute;
      bottom: -60px;
      right: -80px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(34,197,94,0.05) 0%, transparent 70%);
      pointer-events: none;
    }
    .grd-what-header {
      text-align: center;
      margin-bottom: 48px;
      position: relative;
      z-index: 1;
    }
    .grd-what-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #F0FDF4;
      color: var(--grd-green);
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      margin-bottom: 16px;
      border: 1px solid rgba(34,197,94,0.12);
    }
    .grd-what-header h2 {
      font-size: clamp(22px, 3.5vw, 32px);
      font-weight: 800;
      color: var(--grd-text);
      margin: 0 0 10px;
      line-height: 1.2;
    }
    .grd-what-header p {
      font-size: clamp(14px, 1.6vw, 16px);
      color: var(--grd-muted);
      max-width: 520px;
      margin: 0 auto;
      line-height: 1.5;
    }

    /* Feature Grid */
    .grd-what-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 960px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    /* Feature Card */
    .grd-what-card {
      background: var(--grd-card);
      border-radius: 20px;
      padding: 28px 24px 24px;
      border: 1px solid rgba(255,255,255,0.6);
      backdrop-filter: blur(12px);
      box-shadow: var(--grd-shadow-md);
      transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
      cursor: default;
      opacity: 0;
      transform: translateY(30px);
    }
    .grd-what-card.grd-what-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .grd-what-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--grd-shadow-xl);
    }

    /* Card icon */
    .grd-what-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }
    .grd-what-card:nth-child(1) .grd-what-icon {
      background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
      border: 1px solid rgba(34,197,94,0.1);
    }
    .grd-what-card:nth-child(2) .grd-what-icon {
      background: linear-gradient(135deg, #ECFEFF, #CFFAFE);
      border: 1px solid rgba(8,145,178,0.1);
    }
    .grd-what-card:nth-child(3) .grd-what-icon {
      background: linear-gradient(135deg, #FEF3C7, #FDE68A);
      border: 1px solid rgba(245,158,11,0.1);
    }
    .grd-what-card:nth-child(4) .grd-what-icon {
      background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
      border: 1px solid rgba(59,130,246,0.1);
    }
    .grd-what-card:nth-child(5) .grd-what-icon {
      background: linear-gradient(135deg, #FDF4FF, #FAE8FF);
      border: 1px solid rgba(168,85,247,0.1);
    }
    .grd-what-card:nth-child(6) .grd-what-icon {
      background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
      border: 1px solid rgba(249,115,22,0.1);
    }

    /* Card content */
    .grd-what-card h3 {
      font-size: 16px;
      font-weight: 700;
      color: var(--grd-text);
      margin: 0 0 8px;
      line-height: 1.3;
    }
    .grd-what-card p {
      font-size: 13px;
      color: var(--grd-muted);
      line-height: 1.6;
      margin: 0;
    }

    /* Card visual previews */
    .grd-what-visual {
      margin-top: 14px;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Card 1: DA/NE verdict */
    .grd-what-verdict {
      background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
      border: 1px solid rgba(34,197,94,0.1);
    }
    .grd-what-verdict-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #22C55E;
      color: white;
      font-size: 13px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 8px;
      letter-spacing: 0.5px;
    }
    .grd-what-verdict-text {
      font-size: 12px;
      color: var(--grd-muted);
    }

    /* Card 2: Max tlocrt */
    .grd-what-tlocrt {
      background: linear-gradient(135deg, #ECFEFF, #CFFAFE);
      border: 1px solid rgba(8,145,178,0.1);
    }
    .grd-what-tlocrt-value {
      font-size: 20px;
      font-weight: 800;
      color: var(--grd-primary);
    }
    .grd-what-tlocrt-unit {
      font-size: 12px;
      color: var(--grd-muted);
    }
    .grd-what-bonus {
      display: block;
      margin-top: 10px;
      font-size: 11px;
      color: var(--grd-primary);
      font-weight: 600;
      padding: 6px 10px;
      background: #ECFEFF;
      border-radius: 8px;
      border: 1px solid rgba(8,145,178,0.08);
    }

    /* Card 3: Coefficients table */
    .grd-what-coeffs {
      background: linear-gradient(135deg, #FEF3C7, #FDE68A);
      border: 1px solid rgba(245,158,11,0.1);
    }
    .grd-what-coeff-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
    }
    .grd-what-coeff-row + .grd-what-coeff-row {
      margin-top: 4px;
      padding-top: 4px;
      border-top: 1px solid rgba(245,158,11,0.12);
    }
    .grd-what-coeff-label {
      font-size: 11px;
      color: var(--grd-muted);
    }
    .grd-what-coeff-val {
      font-size: 12px;
      font-weight: 700;
      color: #92400E;
    }

    /* Card 4: Map visual */
    .grd-what-map {
      background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
      border: 1px solid rgba(59,130,246,0.1);
      justify-content: center;
    }

    /* Card 5: Price */
    .grd-what-price {
      background: linear-gradient(135deg, #FDF4FF, #FAE8FF);
      border: 1px solid rgba(168,85,247,0.1);
    }
    .grd-what-price-value {
      font-size: 22px;
      font-weight: 800;
      color: #7C3AED;
    }
    .grd-what-price-label {
      font-size: 11px;
      color: var(--grd-muted);
    }
    .grd-what-price-trend {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      margin-left: auto;
    }
    .grd-what-price-bar {
      width: 4px;
      border-radius: 2px;
      background: #C4B5FD;
    }

    /* Card 6: PDF */
    .grd-what-pdf {
      background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
      border: 1px solid rgba(249,115,22,0.1);
    }
    .grd-what-pdf-preview {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .grd-what-pdf-page {
      width: 28px;
      height: 36px;
      background: white;
      border: 1px solid #FDBA74;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 4px;
      gap: 2px;
    }
    .grd-what-pdf-line {
      width: 16px;
      height: 2px;
      border-radius: 1px;
      background: #FED7AA;
    }
    .grd-what-pdf-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      font-size: 12px;
      font-weight: 700;
      color: #EA580C;
      padding: 6px 12px;
      background: #FFF7ED;
      border-radius: 8px;
      border: 1px solid rgba(249,115,22,0.15);
      transition: background 0.2s;
      cursor: pointer;
    }
    .grd-what-pdf-cta:hover {
      background: #FFEDD5;
    }

    /* Tablet */
    @media (max-width: 768px) {
      .grd-what-section { padding: 48px 0 56px; }
      .grd-what-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      .grd-what-card { padding: 20px 18px 18px; }
      .grd-what-header { margin-bottom: 36px; }
    }

    /* Mobile */
    @media (max-width: 480px) {
      .grd-what-grid {
        grid-template-columns: 1fr;
        gap: 14px;
      }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .grd-what-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }
    /* ─── PPUO Preview Modal (Faza 2) ─── */
    .ppuo-modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.6);
      display: none; align-items: center; justify-content: center;
      z-index: 9999; padding: 20px;
    }
    .ppuo-modal-overlay.active { display: flex; }
    .ppuo-modal-box {
      background: white; border-radius: 12px;
      max-width: 900px; width: 100%; max-height: 90vh;
      display: flex; flex-direction: column;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      overflow: hidden;
    }
    .ppuo-modal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px; border-bottom: 1px solid #eee;
    }
    .ppuo-modal-header h3 { margin: 0; font-size: 16px; }
    .ppuo-modal-close {
      background: none; border: none; font-size: 24px; cursor: pointer;
      color: #666; line-height: 1;
    }
    .ppuo-modal-body {
      flex: 1; overflow: auto; position: relative;
      background: #f5f5f5;
    }
    .ppuo-modal-body img {
      display: block; width: auto; height: auto;
    }
    .ppuo-marker {
      position: absolute;
      width: 24px; height: 24px;
      margin-left: -12px; margin-top: -12px;
      background: rgba(239,68,68,0.7);
      border: 3px solid #DC2626;
      border-radius: 50%;
      box-shadow: 0 0 0 6px rgba(239,68,68,0.3);
      animation: markerPulse 1.5s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes markerPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.3); }
    }
    .ppuo-modal-footer {
      padding: 12px 20px; border-top: 1px solid #eee;
      display: flex; gap: 12px; justify-content: flex-end;
    }
    .ppuo-modal-footer a {
      font-size: 13px; color: var(--grd-accent); font-weight: 600;
    }

    /* ============================================================
       F2.5 — NATIVE SEARCH FORM + RESULTS (green theme)
       ============================================================ */
    .gn-section { background: linear-gradient(180deg, #F4F7F4 0%, #EDF3EE 100%); padding: 56px 0 64px; }
    .gn-container { max-width: 920px; margin: 0 auto; padding: 0 24px; }

    .gn-form-card {
      background: var(--card); border-radius: 24px;
      box-shadow: 0 16px 48px rgba(27,67,50,0.10), 0 4px 16px rgba(0,0,0,0.04);
      overflow: hidden;
    }
    .gn-form-header {
      background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
      padding: 24px 30px; display: flex; align-items: center; gap: 14px;
    }
    .gn-form-icon {
      width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
      background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center;
    }
    .gn-form-header h2 { font-size: 18px; font-weight: 700; color: #fff; margin: 0; line-height: 1.3; }
    .gn-form-header p { font-size: 13px; color: rgba(255,255,255,0.82); margin: 3px 0 0; }
    .gn-form-body { padding: 26px 30px 30px; }
    @media (max-width: 600px) {
      .gn-form-header { padding: 20px 18px; }
      .gn-form-body { padding: 22px 18px 26px; }
    }

    .gn-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 640px) { .gn-form-grid { grid-template-columns: 1fr; } }

    .gn-field { position: relative; }
    .gn-field > label {
      display: flex; align-items: center; gap: 6px;
      font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 8px;
    }
    .gn-input-wrap { position: relative; }
    .gn-input-wrap input {
      width: 100%; height: 54px; padding: 0 16px;
      border: 2px solid #E2E8F0; border-radius: 12px;
      font-size: 15px; font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 500; color: var(--text);
      background: #F8FAFC; -webkit-appearance: none; appearance: none;
      transition: border-color .18s, box-shadow .18s, background .18s;
    }
    .gn-input-wrap input::placeholder { color: #94A3B8; font-weight: 400; }
    .gn-input-wrap input:hover { border-color: #CBD5E1; background: #fff; }
    .gn-input-wrap input:focus {
      outline: none; border-color: var(--green); background: #fff;
      box-shadow: 0 0 0 4px rgba(45,106,79,0.12);
    }
    .gn-autocomplete {
      position: absolute; top: calc(100% + 6px); left: 0; right: 0;
      background: #fff; border: 2px solid #E2E8F0; border-radius: 12px;
      box-shadow: 0 16px 40px rgba(0,0,0,0.12); z-index: 50;
      max-height: 240px; overflow-y: auto; display: none;
    }
    .gn-autocomplete.open { display: block; }
    .gn-ac-item { padding: 11px 16px; font-size: 14.5px; font-weight: 500; color: var(--text); cursor: pointer; }
    .gn-ac-item:hover, .gn-ac-item.active { background: #F0F7F3; color: var(--green); }

    .gn-submit {
      width: 100%; height: 54px; margin-top: 16px;
      background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
      color: #fff; border: none; border-radius: 12px;
      font-size: 16px; font-weight: 700; font-family: inherit;
      cursor: pointer; transition: transform .18s, box-shadow .18s;
      display: flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: .3px;
    }
    .gn-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(45,106,79,0.35); }
    .gn-submit:disabled { opacity: .72; cursor: not-allowed; }
    .gn-spinner {
      width: 18px; height: 18px; border: 3px solid rgba(255,255,255,0.35);
      border-top-color: #fff; border-radius: 50%; animation: gnSpin .8s linear infinite;
    }
    @keyframes gnSpin { to { transform: rotate(360deg); } }

    .gn-error {
      display: none; align-items: center; gap: 10px;
      margin-top: 14px; padding: 12px 16px;
      background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px;
      color: var(--red); font-size: 14px; font-weight: 500;
    }
    .gn-error.show { display: flex; }

    /* ===== RESULTS ===== */
    .gn-results { margin-top: 28px; display: none; }
    .gn-results.show { display: block; animation: gnFadeUp .5s ease; }
    @keyframes gnFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

    /* Parcel header (number + municipality) — sits above the visualization */
    .gn-parcel-head {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      font-size: 15px; font-weight: 700; color: var(--text);
      margin-bottom: 12px;
    }
    .gn-parcel-head-num { color: var(--green-dark); }
    .gn-parcel-head-sep { color: var(--muted); font-weight: 400; }
    .gn-parcel-head-muni { color: var(--muted); font-weight: 600; }

    /* Parcel visualization (server-rendered SVG) */
    .gn-viz {
      background: var(--card); border: 1px solid #E5E7EB; border-radius: 16px;
      padding: 10px; margin-bottom: 18px; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .gn-viz svg { width: 100%; height: auto; max-height: 520px; display: block; border-radius: 10px; }
    .gn-viz-loading { color: var(--muted); font-size: 13px; padding: 28px 0; }

    .gn-verdict {
      border-radius: 18px; padding: 22px 26px; margin-bottom: 20px;
      display: flex; align-items: center; gap: 16px; position: relative; overflow: hidden; border: 2px solid;
    }
    .gn-verdict.yes { background: linear-gradient(135deg, #E8F5E9, #F1F8F4); border-color: var(--green-light); }
    .gn-verdict.no  { background: linear-gradient(135deg, #FFEBEE, #FFF5F6); border-color: #FCA5A5; }
    .gn-verdict.warn{ background: linear-gradient(135deg, #FFF8E1, #FFFDF5); border-color: var(--gold); }
    .gn-verdict-icon {
      flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center; font-size: 26px;
    }
    .gn-verdict.yes .gn-verdict-icon { background: rgba(82,183,136,0.18); }
    .gn-verdict.no  .gn-verdict-icon { background: rgba(220,38,38,0.12); }
    .gn-verdict.warn .gn-verdict-icon { background: rgba(212,165,116,0.20); }
    .gn-verdict-title { font-size: 20px; font-weight: 800; line-height: 1.2; }
    .gn-verdict.yes .gn-verdict-title { color: var(--green-dark); }
    .gn-verdict.no  .gn-verdict-title { color: var(--red); }
    .gn-verdict.warn .gn-verdict-title { color: #92640C; }
    .gn-verdict-sub { font-size: 13.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

    .gn-key-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
    @media (max-width: 700px) { .gn-key-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 400px) { .gn-key-grid { grid-template-columns: 1fr; } }
    .gn-key-card {
      background: var(--card); border: 1px solid #E5E7EB; border-radius: 14px;
      padding: 16px 14px; text-align: center;
      transition: transform .2s, box-shadow .2s, border-color .2s;
    }
    .gn-key-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.07); border-color: var(--green-light); }
    .gn-key-card .gn-key-icon { font-size: 22px; display: block; margin-bottom: 4px; }
    .gn-key-card .gn-key-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 4px; }
    .gn-key-card .gn-key-value { font-size: 21px; font-weight: 800; color: var(--green-dark); line-height: 1.1; }
    .gn-key-card .gn-key-detail { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

    .gn-info-card {
      background: var(--card); border: 1px solid #E5E7EB; border-radius: 14px;
      padding: 16px 18px; margin-bottom: 14px;
    }
    .gn-info-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid #F1F5F9; font-size: 14px; }
    .gn-info-row:last-child { border-bottom: none; }
    .gn-info-row .gn-ir-label { color: var(--muted); font-weight: 500; }
    .gn-info-row .gn-ir-value { color: var(--text); font-weight: 700; text-align: right; }

    .gn-section-title {
      font-size: 15px; font-weight: 700; color: var(--text);
      margin: 22px 0 12px; display: flex; align-items: center; gap: 8px;
    }

    .gn-bo-list { display: flex; flex-direction: column; gap: 10px; }
    .gn-bo-card {
      background: var(--card); border: 1px solid #E5E7EB; border-radius: 14px;
      padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px;
      transition: border-color .2s, box-shadow .2s;
    }
    .gn-bo-card.match { border-left: 4px solid var(--green-light); }
    .gn-bo-card.nomatch { border-left: 4px solid #E5E7EB; opacity: .62; background: #FAFBFC; }
    .gn-bo-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
    .gn-bo-icon { flex-shrink: 0; font-size: 20px; line-height: 1.2; }
    .gn-bo-card.match .gn-bo-icon { color: var(--green); }
    .gn-bo-card.nomatch .gn-bo-icon { color: #9CA3AF; }
    .gn-bo-body { flex: 1; min-width: 0; }
    .gn-bo-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
    .gn-bo-card.nomatch .gn-bo-title { color: var(--muted); }
    .gn-bo-meta { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

    /* Skeleton loading */
    .gn-skeleton { margin-top: 28px; }
    .gn-sk { background: linear-gradient(90deg, #EEF2F1 25%, #F7FAF8 37%, #EEF2F1 63%); background-size: 400% 100%; animation: gnShimmer 1.4s ease infinite; border-radius: 14px; }
    @keyframes gnShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
    .gn-sk-banner { height: 84px; margin-bottom: 18px; }
    .gn-sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
    @media (max-width: 700px) { .gn-sk-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 400px) { .gn-sk-grid { grid-template-columns: 1fr; } }
    .gn-sk-card { height: 92px; }
    .gn-sk-line { height: 16px; margin: 10px 0; }
    .gn-sk-line.short { width: 60%; }

    /* Premium lock */
    .gn-premium { position: relative; }
    .gn-premium .gn-blur { filter: blur(7px); user-select: none; pointer-events: none; }
    .gn-lock {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 8px;
      background: rgba(255,255,255,0.72); backdrop-filter: blur(3px);
      border-radius: 14px; text-align: center; padding: 16px;
    }
    .gn-lock .gn-lock-icon { font-size: 30px; }
    .gn-lock .gn-lock-text { font-size: 14px; font-weight: 700; color: var(--green-dark); }
    .gn-lock .gn-lock-sub { font-size: 12px; color: var(--muted); }
    .gn-lock-btn {
      background: linear-gradient(135deg, var(--gold) 0%, #B8895A 100%);
      color: #fff; border: none; padding: 10px 22px; border-radius: 10px;
      font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
      box-shadow: 0 6px 18px rgba(212,165,116,0.4); transition: transform .15s; margin-top: 4px;
    }
    .gn-lock-btn:hover { transform: translateY(-1px); }

    .gn-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
    .gn-action-btn {
      flex: 1; min-width: 150px; padding: 11px 16px; border-radius: 10px;
      font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
      text-align: center; border: 2px solid; transition: transform .15s, box-shadow .15s;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    }
    .gn-action-btn.primary { background: var(--green); color: #fff; border-color: var(--green); }
    .gn-action-btn.secondary { background: #fff; color: var(--green-dark); border-color: #E2E8F0; }
    .gn-action-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,0,0,0.08); }

    .gn-disclaimer {
      margin-top: 16px; padding: 12px 14px; font-size: 12px; color: var(--muted);
      background: #F8FAFC; border-radius: 10px; line-height: 1.5; border: 1px solid #F1F5F9;
    }

    /* Hero demo watermark */
    .hero-widget-demo-badge {
      position: absolute; top: 14px; right: 14px; z-index: 5;
      background: rgba(212,165,116,0.92); color: #fff;
      font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
      padding: 4px 10px; border-radius: 20px; text-transform: uppercase;
      box-shadow: 0 2px 8px rgba(212,165,116,0.4);
    }