:root{
  --bg:#081a20;
  --bg-2:#031015;
  --glass:rgba(255,255,255,0.08);
  --outline:rgba(132,238,255,0.22);
  --text:#e6faff;
  --muted:rgba(220,245,255,0.75);
  --accent:#29c4f8;
  --accent-2:#00e1cc;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);color:var(--text);overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:-4;
  background-image: radial-gradient(rgba(40,200,255,.06) 1px, transparent 1px);
  background-size: 18px 18px; mix-blend-mode: lighten; opacity:.35;}
.scene{position:fixed;inset:-10%;z-index:-3;perspective:1000px}
.layer{position:absolute;inset:0; background:
  radial-gradient(580px 420px at 15% 25%, rgba(41,196,248,.12), transparent 70%),
  radial-gradient(600px 520px at 85% 65%, rgba(0,225,204,.10), transparent 70%);
  filter:saturate(120%); transform-style:preserve-3d; animation:float 22s ease-in-out infinite alternate}
.layer.l2{filter:blur(14px) saturate(140%); opacity:.6; animation-duration:32s}
.layer.l3{filter:blur(26px) saturate(160%); opacity:.45; animation-duration:42s}
@keyframes float{from{transform:translateY(-10px)} to{transform:translateY(10px)}}
.vignette{position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse at center,transparent 0%,rgba(0,0,0,.62) 78%)}
.cursor-ring{position:fixed; left:0; top:0; width:32px; height:32px; border-radius:50%;
  border:2px solid rgba(120,240,255,.8); box-shadow:0 0 24px rgba(0,220,255,.45);
  pointer-events:none; transform:translate(-50%,-50%); transition: width .12s, height .12s, opacity .2s; opacity:.0; z-index:10}
body:hover .cursor-ring{opacity:.9}
.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;padding-top:28px}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:56px;height:56px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.45))}
.brand h1{margin:0;font-size:24px;font-weight:700;letter-spacing:.6px}
.brand p{margin:2px 0 0;color:var(--muted);font-size:12px}
.hero{text-align:center;margin-top:8px}
.hero h2{font-size:36px;margin:0 0 8px;text-shadow:0 0 20px rgba(41,196,248,.25)}
.hero p{margin:0 auto;max-width:680px;color:var(--muted)}
.cards{display:grid;grid-template-columns:1fr;gap:20px;margin-top:28px}
@media(min-width:860px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  backdrop-filter:blur(14px);
  border:1px solid var(--outline);
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(10px) scale(.99); opacity:0; animation:enter .5s ease forwards}
.card:nth-child(1){animation-delay:.05s}
.card:nth-child(2){animation-delay:.15s}
.card:nth-child(3){animation-delay:.25s}
@keyframes enter{to{transform:translateY(0) scale(1);opacity:1}}
.card:hover{transform:translateY(-6px); box-shadow:0 28px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(41,196,248,.2) inset}
.card::after{content:"";position:absolute;inset:-2px;opacity:0;transition:opacity .25s ease;pointer-events:none;
  background:linear-gradient(120deg,rgba(41,196,248,.2),rgba(0,225,204,.15),rgba(2,132,199,.18)); filter:blur(18px)}
.card:hover::after{opacity:.9}
.card-hero{height:160px;background-size:cover;background-position:center;filter:saturate(.95)}
.card-hero.gradient{background-image:linear-gradient(135deg,rgba(41,196,248,.22),rgba(0,225,204,.22),rgba(2,132,199,.22))}
.card-body{padding:18px}
.card-body h3{margin:0 0 6px;font-size:22px}
.card-body p{margin:0;color:var(--muted)}
.card-footer{padding:18px;padding-top:8px}
.btn{position:relative;display:inline-block;width:100%;text-align:center;padding:12px 16px;border-radius:14px;
  font-weight:700;letter-spacing:.2px;text-decoration:none;color:#06202a;background:linear-gradient(180deg,#4fd8ff,#29c4f8);
  border:1px solid rgba(132,238,255,.35);
  box-shadow:0 10px 30px rgba(2,132,199,.35), 0 0 0 2px rgba(255,255,255,.05) inset;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, outline-offset .15s}
.btn:hover{transform:translateY(-2px); background:linear-gradient(180deg,#7de3ff,#41ccff);
  box-shadow:0 16px 36px rgba(2,132,199,.48), 0 0 0 2px rgba(255,255,255,.08) inset}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid #7dd3fc; outline-offset:3px}
.btn::before{content:""; position:absolute; left:-20%; top:-200%; width:40%; height:500%; transform:rotate(25deg);
  background:linear-gradient(90deg,rgba(255,255,255,.0),rgba(255,255,255,.35),rgba(255,255,255,.0));
  opacity:.0; transition:opacity .2s, left .6s}
.btn:hover::before{opacity:.9; left:120%}
.footer{margin-top:70px}
.footer-inner{display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:space-between;border-top:1px solid var(--outline);padding:22px}
@media(min-width:860px){.footer-inner{flex-direction:row}}
.footer-left{display:flex;gap:10px;align-items:center;color:var(--muted)}
.logo-sm{width:28px;height:28px;opacity:.9}
.socials{display:flex;gap:12px}
.icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;border:1px solid var(--outline);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); text-decoration:none;
  transition:transform .15s ease, background .15s ease, border-color .15s ease}
.icon svg{width:22px;height:22px;filter:drop-shadow(0 0 10px rgba(41,196,248,.35))}
.icon .grad-stop-1{stop-color:#7de3ff}.icon .grad-stop-2{stop-color:#29c4f8}
.icon:focus-visible{outline:3px solid #7dd3fc; outline-offset:3px}
/* v4: Stronger social icon hover (lift+scale, neon glow, sheen) */
.icon{ position:relative; overflow:hidden; }
.icon:hover{
  transform:translateY(-4px) scale(1.06);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  border-color:rgba(132,238,255,.55);
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    0 0 22px rgba(41,196,248,.35),
    0 0 44px rgba(0,225,204,.25);
}
.icon:hover svg{ filter:drop-shadow(0 0 14px rgba(41,196,248,.55)); }
.icon::after{
  content:""; position:absolute; top:-150%; left:-50%; width:60%; height:400%;
  transform:rotate(25deg); background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.25), rgba(255,255,255,0));
  opacity:0; transition:opacity .25s, left .6s;
}
.icon:hover::after{ opacity:.95; left:120%; }