:root { --background:#0b0b10; --surface:rgba(19,18,27,.78); --white:#f9f8fb; --muted:#b7b3c1; --purple:#7928f5; --magenta:#d92891; }
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { min-width:320px; margin:0; background:var(--background); color:var(--white); font-family:"Inter",Arial,sans-serif; }
a { color:inherit; }
.links-page { position:relative; isolation:isolate; min-height:100svh; display:grid; place-items:center; overflow:hidden; padding:46px 20px 34px; background:radial-gradient(circle at 50% -15%,rgba(121,40,245,.12),transparent 44%),linear-gradient(145deg,#09090e,#0d0c14 60%,#120a14); }
.links-page::after { content:""; position:absolute; z-index:-1; inset:0; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent 82%); }
.links-glow { position:absolute; z-index:-1; width:390px; height:390px; border-radius:50%; filter:blur(110px); opacity:.3; }
.links-glow-left { left:-190px; top:25%; background:var(--purple); }
.links-glow-right { right:-190px; top:5%; background:var(--magenta); }
.links-sphere { position:absolute; z-index:-1; right:max(-155px,calc(50% - 520px)); bottom:-170px; width:420px; opacity:.12; filter:brightness(.65) saturate(.9); transform:rotate(-9deg); pointer-events:none; }
.links-card { width:min(100%,620px); }
.links-profile { text-align:center; }
.links-logo { display:inline-block; border-radius:10px; }
.links-logo img { display:block; width:190px; height:auto; margin:auto; }
.links-kicker { margin:21px 0 13px; color:#e7dff3; font-size:.65rem; font-weight:700; letter-spacing:.24em; }
.links-profile h1 { max-width:570px; margin:0 auto; font-size:clamp(2rem,5vw,3rem); line-height:1.03; letter-spacing:-.045em; }
.links-profile h1 em { color:#b75cff; font-family:"Instrument Serif",Georgia,serif; font-size:1.08em; font-weight:400; }
.links-description { max-width:540px; margin:17px auto 28px; color:var(--muted); font-size:.91rem; line-height:1.6; }
.links-list { display:grid; gap:12px; }
.link-item { min-height:76px; display:grid; grid-template-columns:46px minmax(0,1fr) 25px; align-items:center; gap:14px; padding:12px 17px; border:1px solid rgba(255,255,255,.15); border-radius:18px; background:var(--surface); box-shadow:0 12px 35px rgba(0,0,0,.16); text-decoration:none; backdrop-filter:blur(14px); transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.link-item:hover { transform:translateY(-2px); border-color:rgba(190,89,255,.65); background:rgba(31,25,43,.92); box-shadow:0 15px 40px rgba(0,0,0,.24),0 0 25px rgba(121,40,245,.08); }
.link-item:focus-visible,.links-logo:focus-visible,.links-social a:focus-visible,.links-footer a:focus-visible { outline:3px solid #e359c4; outline-offset:4px; }
.link-item-primary { min-height:86px; grid-template-columns:62px minmax(0,1fr) 25px; border-color:rgba(255,255,255,.12); background:linear-gradient(105deg,#dc087f 0%,#b715b7 45%,#6d20ee 100%); box-shadow:0 12px 34px rgba(155,22,187,.34),0 0 25px rgba(217,40,145,.16); }
.link-item-primary:hover { border-color:rgba(255,255,255,.38); background:linear-gradient(105deg,#ed138d 0%,#c320c4 45%,#7928f5 100%); }
.link-icon { width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(210,128,255,.35); border-radius:50%; background:rgba(121,40,245,.12); color:#d365f0; }
.link-item-primary .link-icon { width:62px; height:48px; justify-content:start; border:0; border-right:1px solid rgba(255,255,255,.6); border-radius:0; background:transparent; color:#fff; }
.link-item-primary .link-icon svg { width:36px; height:36px; stroke-width:1.8; }
.link-item-primary strong { font-size:1.08rem; }
.link-item-primary small { margin-top:2px; font-size:.77rem; }
.link-item-primary > b { font-size:2rem; line-height:1; }
.link-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.link-item span:nth-child(2) { min-width:0; }
.link-item strong,.link-item small { display:block; }
.link-item strong { font-size:.92rem; line-height:1.25; }
.link-item small { margin-top:4px; overflow-wrap:anywhere; color:#aaa6b4; font-size:.72rem; line-height:1.35; }
.link-item-primary small { color:rgba(255,255,255,.76); }
.link-item > b { color:#d95cc3; font-size:1.2rem; font-weight:500; transition:transform .2s ease; }
.link-item-primary > b { color:#fff; }
.link-item:hover > b { transform:translateX(3px); }
.links-social { display:flex; align-items:center; justify-content:center; gap:13px; margin-top:25px; }
.links-social a { width:43px; height:43px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:50%; background:rgba(18,17,25,.76); color:#d15bf0; transition:color .2s ease,border-color .2s ease,transform .2s ease; }
.links-social a:hover { transform:translateY(-2px); border-color:#ba55ee; color:#fff; }
.links-social svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.links-social .fill-dot { fill:currentColor; stroke:none; }
.links-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:19px; color:#817d8d; font-size:.68rem; }
.links-footer a { text-decoration:none; }
.links-footer a:hover { color:#d15bf0; }
@media (max-width:575.98px) {
  .links-page { align-items:start; padding:28px 15px 25px; }
  .links-logo img { width:160px; }
  .links-kicker { margin-top:18px; font-size:.56rem; letter-spacing:.17em; }
  .links-profile h1 { font-size:2.15rem; }
  .links-description { margin:14px auto 23px; font-size:.82rem; }
  .links-list { gap:10px; }
  .link-item { min-height:70px; grid-template-columns:40px minmax(0,1fr) 20px; gap:11px; padding:11px 13px; border-radius:16px; }
  .link-item-primary { min-height:78px; grid-template-columns:54px minmax(0,1fr) 20px; }
  .link-item-primary .link-icon { width:54px; height:43px; }
  .link-item-primary .link-icon svg { width:32px; height:32px; }
  .link-item-primary strong { font-size:.96rem; }
  .link-item-primary small { font-size:.7rem; }
  .link-icon { width:39px; height:39px; }
  .link-icon svg { width:20px; height:20px; }
  .link-item strong { font-size:.84rem; }
  .link-item small { font-size:.67rem; }
  .links-sphere { right:-190px; bottom:-130px; width:370px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }
