:root {
    --bg: #ffffff;
    --bg-soft: #f6fbff;
    --text: #102a55;
    --muted: #627a9d;
    --blue: #148dff;
    --blue-deep: #0a4fb9;
    --cyan: #39c7ff;
    --violet: #6251ff;
    --green: #25d366;
    --card-border: rgba(82, 165, 255, .22);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; width: 100%; overflow-x: hidden; }
html { background: var(--bg); }
body {
    min-height: 100svh;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 8% 10%, rgba(98, 202, 255, .17), transparent 24rem),
        radial-gradient(circle at 91% 15%, rgba(110, 165, 255, .14), transparent 25rem),
        radial-gradient(circle at 50% 88%, rgba(173, 224, 255, .18), transparent 31rem),
        linear-gradient(180deg, #fff 0%, #fafdff 48%, #f2f9ff 100%);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#particle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.grid {
    position: absolute; inset: 0; opacity: .24;
    background-image:
        linear-gradient(rgba(84, 166, 255, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(84, 166, 255, .09) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(ellipse 82% 72% at 50% 16%, #000 5%, transparent 74%);
}
.noise {
    position: absolute; inset: -50%; opacity: .035; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .34; animation: floatOrb 12s ease-in-out infinite alternate; }
.orb-a { width: 27rem; aspect-ratio: 1; background: #a8e7ff; top: -13rem; left: -10rem; }
.orb-b { width: 24rem; aspect-ratio: 1; background: #c8dcff; right: -10rem; top: 14%; animation-delay: -4s; }
.orb-c { width: 21rem; aspect-ratio: 1; background: #b7efff; left: 36%; bottom: -12rem; animation-delay: -8s; }
.light-streak { position: absolute; width: 46vw; height: 1px; opacity: .33; filter: blur(.2px); background: linear-gradient(90deg, transparent, rgba(42,151,255,.75), transparent); transform-origin: center; }
.streak-a { top: 23%; left: -15%; transform: rotate(-19deg); animation: streak 10s ease-in-out infinite; }
.streak-b { right: -18%; bottom: 24%; transform: rotate(-23deg); animation: streak 13s ease-in-out infinite reverse; }
@keyframes floatOrb { to { transform: translate3d(34px, 26px, 0) scale(1.08); } }
@keyframes streak { 0%,100% { opacity: .12; translate: -4% 0; } 50% { opacity: .45; translate: 16% 0; } }

.page-shell {
    position: relative; z-index: 1; min-height: 100svh;
    display: grid; place-items: center;
    padding: max(30px, env(safe-area-inset-top)) 20px max(30px, env(safe-area-inset-bottom));
}
.profile { width: min(100%, 700px); text-align: center; }

.logo-stage {
    position: relative; width: min(100%, 500px); height: 224px; margin: 0 auto 5px;
    perspective: 1100px; display: grid; place-items: center; isolation: isolate;
}
.brand-lockup {
    --logo-rx: 0deg; --logo-ry: 0deg; --logo-x: 0px; --logo-y: 0px;
    position: relative; width: min(84%, 400px); z-index: 3;
    transform-style: preserve-3d;
    transform: translate3d(var(--logo-x), var(--logo-y), 40px) rotateX(var(--logo-rx)) rotateY(var(--logo-ry));
    animation: logoFloat 5.8s ease-in-out infinite;
    transition: transform .28s cubic-bezier(.2,.8,.2,1);
    filter: drop-shadow(0 20px 26px rgba(31, 129, 229, .16));
}
.brand-logo { position: relative; z-index: 2; display: block; width: 100%; height: auto; object-fit: contain; }
.logo-glow {
    position: absolute; z-index: 0; inset: 19% 6% 18%; border-radius: 50%;
    background: radial-gradient(circle, rgba(63,180,255,.27), rgba(73,111,255,.08) 42%, transparent 72%);
    filter: blur(25px); transform: translateZ(-35px) scale(1.2); animation: glowPulse 4s ease-in-out infinite;
}
.brand-reflection {
    position: absolute; z-index: 1; width: 100%; height: auto; left: 0; top: 82%;
    transform: scaleY(-.38) translateZ(-12px); transform-origin: top;
    opacity: .09; filter: blur(1.2px) saturate(.8);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 68%);
    pointer-events: none;
}
.energy-ring {
    position: absolute; left: 50%; top: 49%; border: 1px solid rgba(60, 160, 255, .22); border-radius: 50%;
    transform-style: preserve-3d; box-shadow: 0 0 32px rgba(81,181,255,.08), inset 0 0 28px rgba(81,181,255,.05);
}
.ring-one { width: 420px; height: 112px; transform: translate(-50%,-50%) rotateX(68deg) rotateZ(4deg); animation: ringSpin1 12s linear infinite; }
.ring-two { width: 350px; height: 150px; border-style: dashed; opacity: .58; transform: translate(-50%,-50%) rotateX(70deg) rotateZ(48deg); animation: ringSpin2 15s linear infinite reverse; }
.ring-three { width: 270px; height: 180px; opacity: .34; transform: translate(-50%,-50%) rotateX(72deg) rotateZ(-36deg); animation: ringSpin3 9s linear infinite; }
@keyframes logoFloat { 0%,100% { translate: 0 -2px; rotate: -0.6deg; } 50% { translate: 0 7px; rotate: .8deg; } }
@keyframes glowPulse { 0%,100% { opacity: .7; transform: translateZ(-35px) scale(1.05); } 50% { opacity: 1; transform: translateZ(-35px) scale(1.2); } }
@keyframes ringSpin1 { to { transform: translate(-50%,-50%) rotateX(68deg) rotateZ(364deg); } }
@keyframes ringSpin2 { to { transform: translate(-50%,-50%) rotateX(70deg) rotateZ(408deg); } }
@keyframes ringSpin3 { to { transform: translate(-50%,-50%) rotateX(72deg) rotateZ(324deg); } }

h1 {
    margin: 0 auto; max-width: 640px;
    font-family: Manrope, Inter, sans-serif;
    font-size: clamp(2.05rem, 7vw, 3.7rem); line-height: 1.02; letter-spacing: -.057em; text-wrap: balance;
    background: linear-gradient(105deg, #0e2d61 8%, #0c5cc3 47%, #118de8 72%, #183b77 100%);
    background-size: 180% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: titleShimmer 7s ease-in-out infinite;
}
@keyframes titleShimmer { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }
.intro { width: min(100%, 570px); margin: 16px auto 29px; color: var(--muted); font-size: clamp(.97rem, 3.6vw, 1.04rem); line-height: 1.72; text-wrap: balance; }

.links { display: grid; gap: 13px; perspective: 1200px; }
.link-card {
    --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 16px;
    min-height: 111px; padding: 18px 20px; border: 1px solid var(--card-border); border-radius: 24px;
    text-align: left; text-decoration: none;
    background:
        radial-gradient(circle at var(--mx) var(--my), rgba(100, 200, 255, .24), transparent 29%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,250,255,.82));
    box-shadow: 0 15px 38px rgba(62, 135, 205, .13), inset 0 1px 0 rgba(255,255,255,.95);
    backdrop-filter: blur(18px) saturate(1.2);
    transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
    transform-style: preserve-3d;
    transition: transform .26s ease, border-color .28s ease, box-shadow .28s ease;
}
.link-card::after {
    content:""; position:absolute; inset:0; z-index:-1; opacity:.68; pointer-events:none;
    background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.88) 44%, rgba(102,190,255,.17) 51%, transparent 70%);
    transform: translateX(-125%); transition: transform .85s cubic-bezier(.2,.75,.2,1);
}
.link-card:hover, .link-card:focus-visible {
    border-color: rgba(47, 145, 255, .48);
    box-shadow: 0 23px 56px rgba(60, 139, 214, .2), 0 0 0 1px rgba(255,255,255,.8) inset;
}
.link-card:hover::after, .link-card:focus-visible::after { transform: translateX(125%); }
.link-card:focus-visible { outline: 2px solid #4aa8ff; outline-offset: 4px; }
.card-beam {
    position:absolute; width:42%; height:145%; top:-22%; left:-15%; z-index:-1; opacity:.22; transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(54,164,255,.45), transparent); filter: blur(15px);
    animation: cardDrift 8s ease-in-out infinite alternate;
}
@keyframes cardDrift { to { left: 76%; opacity: .34; } }


.side-accent {
    width: 8px;
    height: 74px;
    border-radius: 999px;
    display: block;
    transform: translateZ(20px);
    box-shadow: 0 0 0 1px rgba(255,255,255,.6) inset, 0 8px 24px rgba(63,137,207,.18);
}
.side-accent.site {
    background: linear-gradient(180deg, #13a5ff 0%, #2f7dff 100%);
    box-shadow: 0 0 24px rgba(42,151,255,.25), 0 0 0 1px rgba(255,255,255,.6) inset;
}
.side-accent.alanasoft {
    background: linear-gradient(180deg, #ff695e 0%, #e53935 100%);
    box-shadow: 0 0 24px rgba(235,76,76,.22), 0 0 0 1px rgba(255,255,255,.6) inset;
}
.whatsapp-brand {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    transform: translateZ(20px);
    filter: drop-shadow(0 10px 18px rgba(37, 211, 102, .18));
}
.whatsapp-brand img {
    display: block;
    width: 50px;
    height: 50px;
    object-fit: contain;
}
.site-card .link-copy small { color:#1785ef; }
.alanasoft-card .link-copy small { color:#d94242; }
.alanasoft-card .arrow { color:#d94242; background: rgba(235,76,76,.08); border-color: rgba(235,76,76,.14); }
.alanasoft-card:hover .arrow { background: rgba(235,76,76,.12); }
.alanasoft-card::before,
.site-card::before,
.whatsapp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: .9;
}
.site-card::before {
    background: linear-gradient(90deg, rgba(31,145,255,.08), transparent 18%);
}
.alanasoft-card::before {
    background: linear-gradient(90deg, rgba(229,57,53,.07), transparent 18%);
}
.whatsapp-card::before {
    background: linear-gradient(90deg, rgba(37,211,102,.06), transparent 20%);
}

.icon-wrap {
    position: relative; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px;
    border: 1px solid rgba(76, 161, 255, .23);
    background: linear-gradient(145deg, rgba(101,187,255,.22), rgba(235,248,255,.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 28px rgba(63,137,207,.13);
    transform: translateZ(20px);
}
.icon-wrap::after { content:""; position:absolute; inset:7px; border-radius:13px; border:1px solid rgba(255,255,255,.7); pointer-events:none; }
.icon-wrap svg, .arrow svg { fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.icon-wrap svg { width:27px; height:27px; color:#1679dc; }

.link-copy { min-width:0; display:grid; gap:4px; transform: translateZ(14px); }
.link-copy small { color:#297ee0; font-size:.69rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.whatsapp-card .link-copy small { color:#1ca65a; }
.whatsapp-card { border-color: rgba(37,211,102,.18); }
.whatsapp-card:hover, .whatsapp-card:focus-visible { border-color: rgba(37,211,102,.34); box-shadow: 0 23px 56px rgba(37, 175, 96, .14), 0 0 0 1px rgba(255,255,255,.8) inset; }
.link-copy strong { color:#102e5c; font-family:Manrope, Inter, sans-serif; font-size:clamp(1rem,4vw,1.12rem); letter-spacing:-.02em; }
.link-copy > span { display:block; color:#60799d; font-size:.82rem; line-height:1.48; }
.arrow {
    width:37px; height:37px; display:grid; place-items:center; border-radius:50%; color:#287edc;
    background:rgba(110,192,255,.1); border:1px solid rgba(99,176,255,.14); transform:translateZ(18px);
    transition:transform .28s ease, background .28s ease;
}
.arrow svg { width:19px; height:19px; }
.link-card:hover .arrow { transform:translate3d(4px,0,18px); background:rgba(77,168,255,.15); }

.footer { margin:25px auto 0; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:7px; color:#667f9f; font-size:.72rem; line-height:1.5; }
.mini-mark { width:20px; height:20px; display:grid; place-items:center; margin-right:1px; }
.mini-mark img { width:100%; height:100%; object-fit:contain; }
.separator { opacity:.5; }

.js .reveal { opacity:0; transform:translateY(12px) scale(.99); animation:appear .75s cubic-bezier(.2,.75,.2,1) forwards; animation-delay:var(--delay,0ms); }
@keyframes appear { to { opacity:1; transform:translateY(0) scale(1); } }

@media (max-width: 560px) {
    .page-shell { place-items:start center; padding-left:14px; padding-right:14px; }
    .profile { padding-top:2px; }
    .logo-stage { width:100%; height:185px; margin-bottom:0; }
    .brand-lockup { width:min(88vw, 345px); }
    .ring-one { width:330px; height:88px; }
    .ring-two { width:280px; height:120px; }
    .ring-three { width:220px; height:145px; }
    h1 { font-size:clamp(2rem,10.7vw,3.1rem); }
    .intro { margin-top:14px; margin-bottom:24px; padding:0 5px; }
    .link-card { gap:12px; min-height:102px; padding:16px 15px; border-radius:21px; }
    .side-accent { width: 7px; height: 66px; }
    .whatsapp-brand { width: 49px; height: 49px; }
    .whatsapp-brand img { width: 43px; height: 43px; }
    .icon-wrap { width:49px; height:49px; border-radius:15px; }
    .icon-wrap svg { width:24px; height:24px; }
    .link-copy > span { font-size:.76rem; line-height:1.4; }
    .arrow { width:31px; height:31px; }
    .footer { margin-top:22px; padding:0 14px; }
    .light-streak { width:75vw; opacity:.2; }
}
@media (max-width: 380px) { .link-card { grid-template-columns:auto minmax(0,1fr); } .arrow { display:none; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
    #particle-canvas { display:none; }
}