:root{
    --cream:#FAFAF8;
    --cream-dim:#F1F1ED;
    --ink:#0A0E09;
    --ink-soft:#12180F;
    --lime:#C3E600;
    --lime-soft:#DFF878;
    --lime-deep:#5B6B17;
    --mist:#8C9186;
    --line:#E3E3DD;
    --ring:rgba(195,230,0,0.35);
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--cream);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  .eyebrow{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:11px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--lime-deep);
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:8vh 6vw 14vh;
    overflow:hidden;
  }

  .hero-bg-grid{
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 75%);
    opacity:0.7;
  }

  .impact-rings{
    position:absolute;
    top:43%;
    left:50%;
    width:10px;
    height:10px;
    pointer-events:none;
  }
  .impact-rings span{
    position:absolute;
    top:50%;
    left:50%;
    width:120px;
    height:120px;
    margin:-60px 0 0 -60px;
    border-radius:50%;
    border:1.5px solid var(--ring);
    transform:scale(0.4);
    opacity:0;
    animation:ring-pulse 3.6s cubic-bezier(.2,.7,.3,1) infinite;
  }
  .impact-rings span:nth-child(2){animation-delay:1.2s;}
  .impact-rings span:nth-child(3){animation-delay:2.4s;}

  @keyframes ring-pulse{
    0%{transform:scale(0.35);opacity:0;}
    12%{opacity:0.9;}
    100%{transform:scale(2.6);opacity:0;}
  }

  .logo-wrap{
    position:relative;
    z-index:2;
    width:min(640px, 86vw);
    opacity:0;
    transform:translateY(18px) scale(0.97);
    animation:logo-in 1.1s cubic-bezier(.16,.8,.24,1) 0.15s forwards;
  }
  .logo-wrap img{
    width:100%;
    height:auto;
    display:block;
    filter:drop-shadow(0 18px 40px rgba(10,14,9,0.10));
  }

  @keyframes logo-in{
    to{opacity:1;transform:translateY(0) scale(1);}
  }

  .hero-tag{
    position:relative;
    z-index:2;
    margin-top:30px;
    opacity:0;
    animation:fade-up 0.9s ease 0.7s forwards;
  }

  @keyframes fade-up{
    from{opacity:0;transform:translateY(10px);}
    to{opacity:1;transform:translateY(0);}
  }

  .hero-tag .eyebrow{font-size:12px;}
  .hero-tag .city{
    margin-top:8px;
    font-size:15px;
    color:var(--mist);
    font-weight:500;
  }

  .scroll-cue{
    position:absolute;
    bottom:42px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    opacity:0;
    animation:fade-up 0.9s ease 1.1s forwards;
  }
  .scroll-cue .line{
    width:1px;
    height:42px;
    background:linear-gradient(var(--ink), transparent);
    position:relative;
    overflow:hidden;
  }
  .scroll-cue .line::after{
    content:'';
    position:absolute;
    left:0; top:-100%;
    width:100%; height:100%;
    background:var(--lime);
    animation:drip 2.2s ease-in-out infinite;
  }
  @keyframes drip{
    0%{top:-100%;}
    60%{top:100%;}
    100%{top:100%;}
  }

  /* ============ COURT SECTION ============ */
  .court{
    position:relative;
    background:var(--ink);
    padding:120px 6vw 150px;
    overflow:hidden;
  }

  .court-floor{
    position:absolute;
    left:0; right:0; bottom:0;
    height:65%;
    background:
      repeating-linear-gradient(90deg, rgba(195,230,0,0.07) 0 1px, transparent 1px 84px),
      linear-gradient(180deg, transparent, rgba(195,230,0,0.04));
    transform:perspective(600px) rotateX(58deg);
    transform-origin:bottom;
    opacity:0.8;
  }

  .court-glow{
    position:absolute;
    top:-20%;
    left:50%;
    width:900px;
    height:900px;
    transform:translateX(-50%);
    background:radial-gradient(circle, rgba(195,230,0,0.10) 0%, transparent 65%);
    pointer-events:none;
  }

  .court-inner{
    position:relative;
    z-index:2;
    max-width:1080px;
    margin:0 auto;
  }

  .cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }

  .card{
    position:relative;
    background:linear-gradient(155deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
    border:1px solid rgba(255,255,255,0.09);
    border-radius:22px;
    padding:44px 34px 38px;
    text-align:left;
    backdrop-filter:blur(6px);
    transition:transform 0.45s cubic-bezier(.2,.7,.2,1), border-color 0.45s, background 0.45s;
  }
  .card:hover{
    transform:translateY(-6px);
    border-color:rgba(195,230,0,0.4);
    background:linear-gradient(155deg, rgba(195,230,0,0.07), rgba(255,255,255,0.02));
  }

  .card-icon{
    width:52px;height:52px;
    border-radius:14px;
    background:rgba(195,230,0,0.10);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:26px;
  }
  .card-icon svg{width:26px;height:26px;stroke:var(--lime);}

  .card h3{
    font-family:'Anton',sans-serif;
    font-weight:400;
    text-transform:uppercase;
    color:var(--cream);
    font-size:clamp(20px, 2.6vw, 25px);
    line-height:1.2;
    letter-spacing:0.01em;
    margin-bottom:12px;
  }

  .card p{
    color:var(--mist);
    font-size:15px;
    line-height:1.6;
    margin-bottom:28px;
    font-weight:400;
  }

  .card-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--lime);
    text-decoration:none;
    padding-bottom:2px;
    border-bottom:1px solid rgba(195,230,0,0.35);
    transition:gap 0.3s ease, border-color 0.3s ease;
  }
  .card-cta:hover{gap:16px;border-color:var(--lime);}
  .card-cta svg{width:16px;height:16px;}

  .court-foot{
    text-align:center;
    margin-top:70px;
    color:rgba(250,250,248,0.35);
    font-size:12.5px;
    letter-spacing:0.04em;
  }

  /* ============ FLOATING WHATSAPP ============ */
  .wa-float{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:50;
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--lime);
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    box-shadow:0 10px 26px rgba(195,230,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
    transition:transform 0.3s cubic-bezier(.2,.8,.3,1);
  }
  .wa-float:hover{transform:scale(1.08);}
  .wa-float svg{width:28px;height:28px;fill:var(--ink);}

  .wa-float::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1.5px solid var(--lime);
    animation:wa-pulse 2.6s ease-out infinite;
  }
  @keyframes wa-pulse{
    0%{transform:scale(1);opacity:0.7;}
    100%{transform:scale(1.9);opacity:0;}
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width:760px){
    .hero{padding:10vh 7vw 16vh;min-height:100svh;}
    .hero-links{flex-direction:column;align-items:stretch;}
    .info-card{width:100%;}
    .cards{grid-template-columns:1fr;gap:20px;}
    .court{padding:90px 6vw 110px;}
    .card{padding:36px 26px 32px;}
    .scroll-cue{display:none;}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  :focus-visible{outline:2px solid var(--lime); outline-offset:3px;}


    .hero-tag .eyebrow{font-size:12px;}
  .hero-tag .city{
    margin-top:8px;
    font-size:15px;
    color:var(--mist);
    font-weight:500;
  }

  .hero-links{
    margin-top:34px;
    display:flex;
    align-items:stretch;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
  }

  .info-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    width:300px;
    max-width:100%;
    padding:18px 20px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    text-decoration:none;
    color:var(--ink);
    text-align:left;
    box-shadow:0 1px 2px rgba(10,14,9,0.03);
    transition:transform 0.35s cubic-bezier(.2,.7,.2,1), border-color 0.35s ease, box-shadow 0.35s ease;
  }

  .info-card:hover{
    transform:translateY(-4px);
    border-color:rgba(195,230,0,0.55);
    box-shadow:0 16px 32px rgba(10,14,9,0.08);
  }

  .info-card .badge{
    flex-shrink:0;
    width:44px;
    height:44px;
    border-radius:12px;
    background:rgba(195,230,0,0.14);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.35s ease;
  }
  .info-card:hover .badge{background:var(--lime);}

  .info-card .badge svg{
    width:21px;
    height:21px;
    stroke:var(--lime-deep);
    fill:none;
    transition:stroke 0.35s ease;
  }
  .info-card:hover .badge svg{stroke:var(--ink);}

  .info-card .txt{flex:1;min-width:0;}

  .info-card .label{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--mist);
    margin-bottom:3px;
  }

  .info-card .value{
    font-size:15px;
    font-weight:700;
    line-height:1.25;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
  }

  .info-card .arrow{
    flex-shrink:0;
    width:16px;
    height:16px;
    stroke:var(--mist);
    opacity:0;
    transform:translateX(-4px);
    transition:opacity 0.3s ease, transform 0.3s ease, stroke 0.3s ease;
  }
  .info-card:hover .arrow{opacity:1;transform:translateX(0);stroke:var(--lime-deep);}

.cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }

  .card{
    position:relative;
    background:linear-gradient(155deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
    border:1px solid rgba(255,255,255,0.09);
    border-radius:22px;
    padding:44px 34px 38px;
    text-align:left;
    backdrop-filter:blur(6px);
    transition:transform 0.45s cubic-bezier(.2,.7,.2,1), border-color 0.45s, background 0.45s;
  }
  .card:hover{
    transform:translateY(-6px);
    border-color:rgba(195,230,0,0.4);
    background:linear-gradient(155deg, rgba(195,230,0,0.07), rgba(255,255,255,0.02));
  }

  .card-icon{
    width:52px;height:52px;
    border-radius:14px;
    background:rgba(195,230,0,0.10);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:26px;
  }
  .card-icon svg{width:26px;height:26px;stroke:var(--lime);}

  .card h3{
    font-family:'Anton',sans-serif;
    font-weight:400;
    text-transform:uppercase;
    color:var(--cream);
    font-size:clamp(20px, 2.6vw, 25px);
    line-height:1.2;
    letter-spacing:0.01em;
    margin-bottom:12px;
  }

  .card p{
    color:var(--mist);
    font-size:15px;
    line-height:1.6;
    margin-bottom:28px;
    font-weight:400;
  }

  .card-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--lime);
    text-decoration:none;
    padding-bottom:2px;
    border-bottom:1px solid rgba(195,230,0,0.35);
    transition:gap 0.3s ease, border-color 0.3s ease;
  }
  .card-cta:hover{gap:16px;border-color:var(--lime);}
  .card-cta svg{width:16px;height:16px;}

  .court-foot{
    text-align:center;
    margin-top:70px;
    color:rgba(250,250,248,0.35);
    font-size:12.5px;
    letter-spacing:0.04em;
  }