:root {
  --green: #25D366;
}

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

    html, body { min-height: 100%; }

    body {
      background: var(--bg);
      font-family: 'DM Sans', sans-serif;
      color: var(--white);
      -webkit-font-smoothing: antialiased;
      display: flex;
      justify-content: center;
      padding: 0 0 64px;
      background-image:
        radial-gradient(ellipse 90% 50% at 50% 0%, rgba(79,126,255,0.1) 0%, transparent 65%),
        radial-gradient(ellipse 40% 35% at 5% 60%, rgba(255,107,61,0.06) 0%, transparent 55%);
    }

    .card {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── HERO ── */
    .hero {
      width: 100%;
      background: linear-gradient(145deg, #0C1020 0%, #060912 100%);
      padding: 52px 28px 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
      animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) both;
      border-bottom: 1px solid var(--border);
    }

    /* grid lines */
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(79,126,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79,126,255,0.04) 1px, transparent 1px);
      background-size: 28px 28px;
    }

    .hero-glow {
      position: absolute;
      top: -60px; left: 50%; transform: translateX(-50%);
      width: 320px; height: 220px;
      background: radial-gradient(ellipse, rgba(79,126,255,0.14) 0%, transparent 70%);
      pointer-events: none;
    }

    /* LOGO */
    .logo-wrap {
      position: relative;
      width: 88px; height: 88px;
      margin-bottom: 18px;
      z-index: 1;
    }

    .logo-hex {
      width: 100%; height: 100%;
      background: var(--blue);
      clip-path: polygon(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 30px var(--blue-glow);
      position: relative;
    }

    .logo-hex::before {
      content: '';
      position: absolute;
      inset: 3px;
      background: var(--surface);
      clip-path: polygon(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);
    }

    .logo-letter {
      position: relative; z-index: 1;
      font-family: 'Syne', sans-serif;
      font-size: 32px; font-weight: 800;
      color: var(--blue);
      letter-spacing: -0.02em;
    }

    /* TITLE */
    .hero-title {
      font-family: 'Syne', sans-serif;
      font-size: 26px; font-weight: 800;
      color: var(--white);
      letter-spacing: -0.02em;
      text-align: center;
      position: relative; z-index: 1;
    }

    .hero-sub {
      margin-top: 6px;
      font-size: 11px; font-weight: 400;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--muted);
      position: relative; z-index: 1;
      text-align: center;
    }

    .hero-badges {
      display: flex; gap: 6px; flex-wrap: wrap;
      justify-content: center;
      margin-top: 16px;
      position: relative; z-index: 1;
    }

    .badge {
      padding: 4px 12px;
      border: 1px solid var(--border-hi);
      border-radius: 6px;
      font-size: 10.5px; font-weight: 500;
      color: var(--blue);
      background: var(--blue-dim);
      letter-spacing: 0.04em;
    }

    /* ── BODY ── */
    .body {
      width: 100%;
      padding: 24px 20px 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* ── SECTION LABEL ── */
    .section-label {
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--muted); margin-top: 8px; margin-bottom: -2px;
      animation: fadeUp 0.8s 0.18s cubic-bezier(0.16,1,0.3,1) both;
    }

    /* ── CTA WHATSAPP ── */
    .cta-wa {
      display: flex; align-items: center; gap: 14px;
      padding: 17px 20px; border-radius: 10px;
      text-decoration: none;
      background: var(--green);
      transition: filter 0.2s, transform 0.2s;
      animation: fadeUp 0.8s 0.22s cubic-bezier(0.16,1,0.3,1) both;
    }

    .cta-wa:hover { filter: brightness(1.07); transform: translateY(-2px); }
    .cta-wa-icon { font-size: 22px; }
    .cta-wa-main { font-size: 14px; font-weight: 700; color: white; display: block; }
    .cta-wa-sub  { font-size: 11px; color: rgba(255,255,255,0.75); display: block; margin-top: 1px; }
    .cta-wa-arrow { font-size: 16px; color: rgba(255,255,255,0.6); margin-left: auto; }

    /* ── LINK ITEMS ── */
    .link-item {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 18px; border-radius: 10px;
      text-decoration: none; color: var(--white);
      background: var(--card); border: 1px solid var(--border);
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) both;
    }

    .link-item:nth-of-type(1) { animation-delay: 0.28s; }
    .link-item:nth-of-type(2) { animation-delay: 0.34s; }
    .link-item:nth-of-type(3) { animation-delay: 0.40s; }
    .link-item:nth-of-type(4) { animation-delay: 0.46s; }
    .link-item:nth-of-type(5) { animation-delay: 0.52s; }

    .link-item:hover {
      transform: translateY(-2px);
      border-color: var(--blue);
      box-shadow: 0 6px 20px var(--blue-glow);
    }

    .link-icon {
      width: 40px; height: 40px; border-radius: 9px;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; flex-shrink: 0;
    }

    .link-icon.ig   { background: linear-gradient(135deg,#f9c784,#e85d99,#a056d4); }
    .link-icon.li   { background: #0077B5; }
    .link-icon.yt   { background: #FF0000; }
    .link-icon.mail { background: var(--blue-dim); border: 1px solid var(--border-hi); }
    .link-icon.site { background: var(--blue-dim); border: 1px solid var(--border-hi); }
    .link-icon.port { background: var(--orange-dim); border: 1px solid rgba(255,107,61,0.25); }

    .link-text { flex: 1; }
    .link-label { font-size: 13px; font-weight: 600; color: var(--white); display: block; }
    .link-sub   { font-size: 11px; color: var(--muted); margin-top: 1px; display: block; }

    .link-arrow { font-size: 13px; color: var(--border-hi); transition: transform 0.2s, color 0.2s; }
    .link-item:hover .link-arrow { transform: translateX(3px); color: var(--blue); }

    /* ── TAGLINE CARD ── */
    .tagline-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 18px 20px;
      display: flex; flex-direction: column; gap: 10px;
      animation: fadeUp 0.8s 0.56s cubic-bezier(0.16,1,0.3,1) both;
    }

    .tagline-title {
      font-family: 'Syne', sans-serif;
      font-size: 15px; font-weight: 800;
      color: var(--white);
      letter-spacing: -0.01em;
    }

    .tagline-title span { color: var(--blue); }

    .tagline-desc {
      font-size: 13px; font-weight: 300;
      color: var(--muted); line-height: 1.6;
    }

    .tagline-services {
      display: flex; flex-wrap: wrap; gap: 6px;
      margin-top: 2px;
    }

    .service-tag {
      padding: 4px 10px;
      border-radius: 5px;
      background: var(--blue-dim);
      border: 1px solid var(--border-hi);
      font-size: 10.5px; color: var(--blue);
      font-weight: 500; letter-spacing: 0.04em;
    }

    /* ── FOOTER ── */
    .footer {
      margin-top: 40px; text-align: center;
      font-size: 10.5px; color: var(--muted);
      letter-spacing: 0.06em;
      animation: fadeUp 0.8s 0.62s cubic-bezier(0.16,1,0.3,1) both;
    }

    .footer a { color: var(--blue); text-decoration: none; font-weight: 600; }