*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --t1: #176061; --t2: #197c7e; --t3: #239193;
      --bg: #071c1d; --bg2: #0a2e30;
      --border: rgba(35,145,147,0.22);
      --text: #ffffff; --muted: rgba(255,255,255,0.58); --dim: rgba(255,255,255,0.28);
    }
    html { scroll-behavior: smooth; }
    body {
      background: linear-gradient(165deg, #071c1d 0%, #0b2d2e 55%, #071c1d 100%);
      background-attachment: fixed;
      color: var(--text);
      font-family: 'Lato', sans-serif;
      font-size: 14px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }
    .card-wrapper { max-width: 420px; margin: 0 auto; min-height: 100dvh; position: relative; overflow-x: hidden; }

    /* ORBS */
    .orb { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; animation: orb-float 22s ease-in-out infinite; }
    .orb-1 { width: 260px; height: 260px; background: #176061; opacity: 0.14; top: -80px; right: -70px; }
    .orb-2 { width: 200px; height: 200px; background: #239193; opacity: 0.09; bottom: 18%; left: -60px; animation-delay: -11s; }
    @keyframes orb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(22px); } }

    /* HEADER */
    .header { padding: 48px 24px 36px; text-align: center; position: relative; overflow: hidden; z-index: 1; }
    .header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }
    .header-logo-wrap { margin-bottom: 22px; }
    .header-logo { max-height: 38px; width: auto; filter: brightness(0) invert(1); opacity: 0.82; }
    .avatar-wrap { position: relative; width: 116px; height: 116px; margin: 0 auto 20px; z-index: 1; }
    .avatar-ring { position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(rgba(35,145,147,0.9) 0deg,rgba(23,96,97,0.45) 130deg,rgba(10,46,48,0.15) 210deg,rgba(35,145,147,0.9) 360deg); animation: ring-spin 7s linear infinite; }
    @keyframes ring-spin { to { transform: rotate(360deg); } }
    .avatar-mask { position: absolute; inset: 3px; border-radius: 50%; overflow: hidden; background: var(--t1); display: flex; align-items: center; justify-content: center; }
    .avatar-initials { font-family: 'Inter', sans-serif; font-weight: 200; font-size: 30px; color: rgba(255,255,255,0.85); letter-spacing: 3px; }
    .avatar-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 50%; }
    .header-name { font-family: 'Inter', sans-serif; font-weight: 200; font-size: 34px; color: var(--text); letter-spacing: -0.5px; margin-bottom: 8px; line-height: 1.15; position: relative; z-index: 1; }
    .header-title { font-family: 'Lato', sans-serif; font-weight: 300; font-size: 13px; color: #45c2c4; text-transform: uppercase; letter-spacing: 2.5px; position: relative; z-index: 1; }

    /* CAROUSEL */
    .carousel-section { position: relative; background: rgba(7,22,23,0.55); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); z-index: 1; }
    .carousel-track-wrap { overflow: hidden; touch-action: pan-y; }
    .carousel-track { display: flex; transition: transform 0.42s cubic-bezier(0.25,0.46,0.45,0.94); will-change: transform; }
    .slide { min-width: 100%; position: relative; overflow: hidden; user-select: none; -webkit-user-drag: none; }
    .slide-link { display: block; line-height: 0; }
    .slide-img { width: 100%; height: 222px; object-fit: cover; object-position: center; display: block; pointer-events: none; }
    .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(13,48,50,0.78); border: 1px solid rgba(35,145,147,0.38); display: flex; align-items: center; justify-content: center; color: #45c2c4; cursor: pointer; z-index: 10; -webkit-tap-highlight-color: transparent; transition: background 0.15s, transform 0.1s; backdrop-filter: blur(6px); }
    .carousel-arrow:active { background: rgba(23,96,97,0.85); transform: translateY(-50%) scale(0.92); }
    .carousel-arrow svg { width: 14px; height: 14px; }
    .arrow-prev { left: 8px; } .arrow-next { right: 8px; }
    .carousel-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 12px; }
    .dot { height: 5px; width: 5px; border-radius: 3px; background: rgba(35,145,147,0.25); transition: all 0.3s ease; cursor: pointer; border: none; padding: 0; }
    .dot.active { width: 20px; background: #239193; }

    /* LINKS */
    .links-section { padding: 22px 16px; position: relative; z-index: 1; }
    .section-eyebrow { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; color: #45c2c4; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 12px; padding: 0 2px; }
    .links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
    .link-btn { display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: rgba(23,96,97,0.12); border: 1px solid var(--border); border-radius: 12px; color: var(--text); text-decoration: none; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s, transform 0.1s; backdrop-filter: blur(6px); }
    .link-btn:active { background: rgba(35,145,147,0.22); transform: scale(0.97); }
    .link-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .link-icon svg { width: 15px; height: 15px; }
    .li   { background: #0077b5; color: #fff; }
    .ig   { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }
    .fb   { background: #1877f2; color: #fff; }
    .wa   { background: #25d366; color: #fff; }
    .tel  { background: var(--t1); color: #fff; }
    .mail { background: #c0392b; color: #fff; }
    .web  { background: rgba(35,145,147,0.22); color: #45c2c4; border: 1px solid rgba(35,145,147,0.4); }
    .link-full { grid-column: span 2; }
    .save-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 17px; background: linear-gradient(135deg, #176061 0%, #239193 100%); border: none; border-radius: 12px; color: #fff; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: filter 0.15s, transform 0.1s; margin-top: 10px; box-shadow: 0 4px 18px rgba(23,96,97,0.4); }
    .save-btn:active { transform: scale(0.98); filter: brightness(0.9); }
    .save-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

    /* QR */
    .qr-section { padding: 4px 16px 44px; position: relative; z-index: 1; }
    .qr-card { background: rgba(23,96,97,0.1); border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; backdrop-filter: blur(6px); }
    .qr-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; color: #45c2c4; text-transform: uppercase; letter-spacing: 2.5px; }
    #qrcode { outline: solid 10px #ffffff; border-radius: 4px; }
    #qrcode canvas, #qrcode img { border-radius: 3px; display: block; }

    /* FOOTER */
    .site-footer { text-align: center; padding: 24px 24px 36px; display: flex; flex-direction: column; align-items: center; gap: 5px; border-top: 1px solid rgba(35,145,147,0.12); position: relative; z-index: 1; }
    .footer-logo { max-width: 120px; height: auto; opacity: 0.45; margin-bottom: 4px; filter: brightness(0) invert(1); }
    .footer-copy, .footer-dev { font-family: 'Lato', sans-serif; font-size: 10px; color: rgba(255,255,255,0.3); line-height: 1.4; }
    .footer-version { font-family: 'Inter', sans-serif; font-size: 9px; color: rgba(255,255,255,0.14); letter-spacing: 0.5px; margin-top: 2px; }

    @keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
    .header { animation: fadeUp 0.5s ease both; }
    .carousel-section { animation: fadeUp 0.5s 0.07s ease both; }
    .links-section { animation: fadeUp 0.5s 0.14s ease both; }
    .qr-section { animation: fadeUp 0.5s 0.21s ease both; }