/* ---------------------------------------------------------
   Brand
--------------------------------------------------------- */
:root {
  --color-brand-dark: #1c6bba;
  --color-brand-light: #84f2fe;

  --bg: #112233;
  --card-bg: rgba(255, 255, 255, 0.72);
  --card-border: rgba(28, 107, 186, 0.12);
  --card-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.4);

  --text-primary: #123356;
  --text-muted: #5f7f9c;
  --text-on-dark-muted: rgba(197, 224, 240, 0.75);
}

* {
  box-sizing: border-box;
}

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

html {
  overflow-x: hidden;
  background: var(--bg);
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background: transparent;
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

/* ---------------------------------------------------------
   Sparkle background (compiled from testbg.scss)
   Four glow layers (body + head ::before/::after), each a
   41-dot field of colored text-shadows rotating slowly.
   `head` is forced visible (it's display:none by default);
   body stays transparent so both layers show over html's bg.
   z-index + pointer-events keep it behind #app and non-interactive.
--------------------------------------------------------- */
body {
  font-size: 52px;
  color: transparent;
}

head {
  display: block;
  font-size: 52px;
  color: transparent;
}

head::before, head::after,
body::before, body::after {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 3em;
  height: 3em;
  content: ".";
  pointer-events: none;
  mix-blend-mode: screen;
  animation-name: sparkle-move;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

html[data-bg="sparkle"] head::before,
html[data-bg="sparkle"] head::after,
html[data-bg="sparkle"] body::before,
html[data-bg="sparkle"] body::after {
  display: block;
}

body::before {
  text-shadow: 0.4182804em -1.4249677em 7px hsla(99.0106, 100%, 50%, 0.9), -0.8303678em 0.7094136em 7px hsla(243.6118, 100%, 50%, 0.9), 1.1765387em -1.2391835em 7px hsla(151.8919, 100%, 50%, 0.9), -1.4106083em -0.8440861em 7px hsla(181.9279, 100%, 50%, 0.9), -1.4203921em -0.9034870em 7px hsla(233.9584, 100%, 50%, 0.9), 0.1348244em -0.8386781em 7px hsla(212.1356, 100%, 50%, 0.9), 0.9282914em -1.4805037em 7px hsla(290.0949, 100%, 50%, 0.9), 0.5944182em -0.4792485em 7px hsla(55.9726, 100%, 50%, 0.9), 1.3716392em -0.4902164em 7px hsla(33.3885, 100%, 50%, 0.9), -1.2098509em 1.0424831em 7px hsla(217.3414, 100%, 50%, 0.9), 0.9213848em 0.6891954em 7px hsla(193.0421, 100%, 50%, 0.9), 1.4193473em -0.3643969em 7px hsla(198.7346, 100%, 50%, 0.9), 0.9882140em 0.3555593em 7px hsla(310.2145, 100%, 50%, 0.9), 0.2320564em 0.6137155em 7px hsla(16.4968, 100%, 50%, 0.9), -0.8163052em -0.6318361em 7px hsla(28.7251, 100%, 50%, 0.9), -0.8016273em -1.1969957em 7px hsla(100.0705, 100%, 50%, 0.9), 0.4070533em -0.4055035em 7px hsla(133.2651, 100%, 50%, 0.9), -0.8714789em -0.6990665em 7px hsla(337.1957, 100%, 50%, 0.9), 0.4441062em 0.3273930em 7px hsla(61.6099, 100%, 50%, 0.9), 0.6873804em -1.0097925em 7px hsla(136.6040, 100%, 50%, 0.9), 1.4685701em 0.4199993em 7px hsla(200.5019, 100%, 50%, 0.9), 0.5538428em 1.0285558em 7px hsla(279.3600, 100%, 50%, 0.9), -0.8128558em -1.4036993em 7px hsla(113.5631, 100%, 50%, 0.9), -0.6967774em -0.8670515em 7px hsla(339.4475, 100%, 50%, 0.9), 1.1291029em -0.5559664em 7px hsla(235.9579, 100%, 50%, 0.9), -0.3131043em 1.2436428em 7px hsla(165.1867, 100%, 50%, 0.9), -0.7053595em -0.7601175em 7px hsla(202.0925, 100%, 50%, 0.9), -0.7117752em 0.2537580em 7px hsla(323.2162, 100%, 50%, 0.9), -0.3017985em -0.8420377em 7px hsla(359.1135, 100%, 50%, 0.9), 0.0285789em -1.2272718em 7px hsla(16.9619, 100%, 50%, 0.9), -1.1710526em 0.3823381em 7px hsla(285.1486, 100%, 50%, 0.9), -0.2335201em -1.3094169em 7px hsla(137.3829, 100%, 50%, 0.9), 1.4883641em 0.0873430em 7px hsla(349.5882, 100%, 50%, 0.9), 1.0823391em -1.4655569em 7px hsla(259.4599, 100%, 50%, 0.9), 0.5451311em 0.1109110em 7px hsla(96.0571, 100%, 50%, 0.9), 0.4228854em -1.1653435em 7px hsla(156.5155, 100%, 50%, 0.9), -0.1388289em 1.3614478em 7px hsla(315.3071, 100%, 50%, 0.9), -0.7098328em 0.0017583em 7px hsla(64.3147, 100%, 50%, 0.9), 1.2378835em 1.1115557em 7px hsla(107.4401, 100%, 50%, 0.9), 0.4168485em 0.3269106em 7px hsla(55.0221, 100%, 50%, 0.9), 0.7875324em 0.1181371em 7px hsla(280.3055, 100%, 50%, 0.9);
  animation-duration: 44s;
  animation-delay: -27s;
}

body::after {
  text-shadow: 0.0910610em -1.4982843em 7px hsla(116.6962, 100%, 50%, 0.9), -1.4415698em 1.2872958em 7px hsla(316.3399, 100%, 50%, 0.9), 0.9949966em -0.5774576em 7px hsla(20.8531, 100%, 50%, 0.9), 1.1340288em 1.3408483em 7px hsla(30.8352, 100%, 50%, 0.9), -0.0420286em -1.2923624em 7px hsla(273.8168, 100%, 50%, 0.9), 0.7975033em -1.1148256em 7px hsla(171.1017, 100%, 50%, 0.9), 0.1494108em -0.7048301em 7px hsla(314.0759, 100%, 50%, 0.9), -0.2305862em -0.8646054em 7px hsla(194.1466, 100%, 50%, 0.9), 0.6897932em -0.8965468em 7px hsla(112.2179, 100%, 50%, 0.9), 1.4854481em 0.4496342em 7px hsla(157.7160, 100%, 50%, 0.9), 0.0527275em -1.1369874em 7px hsla(80.8910, 100%, 50%, 0.9), -0.4857433em 0.2649262em 7px hsla(82.8413, 100%, 50%, 0.9), -0.8393478em -1.2870207em 7px hsla(227.1971, 100%, 50%, 0.9), -0.8131746em 1.2162600em 7px hsla(309.4687, 100%, 50%, 0.9), -1.2874280em -0.7859861em 7px hsla(240.8320, 100%, 50%, 0.9), -0.8572896em -1.1030645em 7px hsla(336.7851, 100%, 50%, 0.9), 0.2131293em -0.0819869em 7px hsla(282.4630, 100%, 50%, 0.9), 0.9224910em -0.9287703em 7px hsla(34.8951, 100%, 50%, 0.9), -0.2068465em -0.2292641em 7px hsla(168.1289, 100%, 50%, 0.9), 0.6872275em 0.5200936em 7px hsla(354.2995, 100%, 50%, 0.9), -1.2047464em -0.2921362em 7px hsla(122.1489, 100%, 50%, 0.9), 1.0850176em -0.7540310em 7px hsla(68.4752, 100%, 50%, 0.9), -0.1541594em -0.2343551em 7px hsla(100.2763, 100%, 50%, 0.9), -0.7505807em 1.2697968em 7px hsla(159.5271, 100%, 50%, 0.9), 1.0840473em 0.1509759em 7px hsla(18.2118, 100%, 50%, 0.9), 1.4978474em 1.0080828em 7px hsla(348.8387, 100%, 50%, 0.9), 1.2791009em 1.0460872em 7px hsla(59.8720, 100%, 50%, 0.9), -0.0430766em -0.8587581em 7px hsla(144.3745, 100%, 50%, 0.9), -1.3240938em -0.3630806em 7px hsla(354.7112, 100%, 50%, 0.9), -0.7043908em 0.8522118em 7px hsla(163.8030, 100%, 50%, 0.9), -0.2309775em 1.3719529em 7px hsla(358.3522, 100%, 50%, 0.9), 0.1673050em 0.6552248em 7px hsla(55.7269, 100%, 50%, 0.9), -0.6098765em 1.4061281em 7px hsla(208.5049, 100%, 50%, 0.9), 0.1265856em 0.7439267em 7px hsla(20.5795, 100%, 50%, 0.9), 0.2525328em 0.0085511em 7px hsla(306.9792, 100%, 50%, 0.9), -1.0277018em 1.3823367em 7px hsla(28.8401, 100%, 50%, 0.9), -0.9425251em 0.2851053em 7px hsla(243.0765, 100%, 50%, 0.9), -0.7943883em -1.1403402em 7px hsla(320.5034, 100%, 50%, 0.9), -0.7613540em 0.2835575em 7px hsla(222.9773, 100%, 50%, 0.9), -0.2423253em 0.2510169em 7px hsla(188.2018, 100%, 50%, 0.9), 1.3041188em -0.8872224em 7px hsla(257.8290, 100%, 50%, 0.9);
  animation-duration: 43s;
  animation-delay: -32s;
}

head::before {
  text-shadow: -0.7839421em -0.3126425em 7px hsla(241.8085, 100%, 50%, 0.9), -0.6000088em -0.5514684em 7px hsla(270.6712, 100%, 50%, 0.9), -1.2823707em -0.1251434em 7px hsla(359.4436, 100%, 50%, 0.9), 1.4882893em -1.2802178em 7px hsla(76.7356, 100%, 50%, 0.9), -0.7043988em 1.2997781em 7px hsla(317.1111, 100%, 50%, 0.9), 1.1378107em -0.3914187em 7px hsla(56.7889, 100%, 50%, 0.9), 1.0012349em 0.6106198em 7px hsla(220.2040, 100%, 50%, 0.9), 1.4616992em 0.4619290em 7px hsla(2.8163, 100%, 50%, 0.9), 0.9513124em -0.6018637em 7px hsla(238.8199, 100%, 50%, 0.9), 1.3167900em -1.0971267em 7px hsla(41.5543, 100%, 50%, 0.9), -1.1788921em 0.1596709em 7px hsla(98.0454, 100%, 50%, 0.9), 0.3144895em 0.6528366em 7px hsla(73.2950, 100%, 50%, 0.9), 0.4027139em -0.7080483em 7px hsla(175.8715, 100%, 50%, 0.9), 1.2160095em 1.0383111em 7px hsla(33.2274, 100%, 50%, 0.9), -0.2292727em -0.6699593em 7px hsla(1.2764, 100%, 50%, 0.9), 0.8133577em 0.4113401em 7px hsla(94.3039, 100%, 50%, 0.9), 0.7236927em 0.1550413em 7px hsla(153.9673, 100%, 50%, 0.9), -1.4709909em -1.2742684em 7px hsla(317.9183, 100%, 50%, 0.9), 1.2117857em 0.1367709em 7px hsla(300.4542, 100%, 50%, 0.9), 0.2475287em -1.0557186em 7px hsla(45.8804, 100%, 50%, 0.9), -0.5752250em 1.1969445em 7px hsla(286.6040, 100%, 50%, 0.9), 1.0821077em 1.1967739em 7px hsla(75.6276, 100%, 50%, 0.9), -0.7514108em -1.1916191em 7px hsla(280.8418, 100%, 50%, 0.9), 1.1524041em -0.2808678em 7px hsla(223.4381, 100%, 50%, 0.9), -1.0363400em 1.2896430em 7px hsla(311.2581, 100%, 50%, 0.9), 1.4286181em 0.9323152em 7px hsla(317.3098, 100%, 50%, 0.9), -1.4256409em 0.7096934em 7px hsla(119.5868, 100%, 50%, 0.9), 1.2924477em 0.9067054em 7px hsla(311.0631, 100%, 50%, 0.9), 0.9322479em -0.6995829em 7px hsla(283.4548, 100%, 50%, 0.9), -1.1757131em 1.1165003em 7px hsla(309.0936, 100%, 50%, 0.9), -0.8326988em 0.9497598em 7px hsla(165.7092, 100%, 50%, 0.9), -0.5844274em 0.8860365em 7px hsla(81.9344, 100%, 50%, 0.9), -1.4290067em -0.9206106em 7px hsla(118.1743, 100%, 50%, 0.9), 1.0930588em 1.4006673em 7px hsla(100.4850, 100%, 50%, 0.9), 0.4244452em -0.3009648em 7px hsla(353.2139, 100%, 50%, 0.9), 0.1086472em 1.3177114em 7px hsla(41.5230, 100%, 50%, 0.9), 1.4112018em -0.9642966em 7px hsla(346.5124, 100%, 50%, 0.9), -0.7036009em -1.1747924em 7px hsla(156.4430, 100%, 50%, 0.9), 0.6856352em -0.5589681em 7px hsla(218.2352, 100%, 50%, 0.9), 0.0342692em -0.3444137em 7px hsla(207.5717, 100%, 50%, 0.9), -0.7358325em 0.6263559em 7px hsla(0.6089, 100%, 50%, 0.9);
  animation-duration: 42s;
  animation-delay: -23s;
}

head::after {
  text-shadow: 1.2767255em 0.1153560em 7px hsla(258.9948, 100%, 50%, 0.9), 0.7258502em 0.5118855em 7px hsla(131.1197, 100%, 50%, 0.9), -1.2900786em 0.4927131em 7px hsla(118.8720, 100%, 50%, 0.9), -0.5582531em 1.0440458em 7px hsla(259.1115, 100%, 50%, 0.9), -0.5990332em -0.5721460em 7px hsla(147.0214, 100%, 50%, 0.9), -0.2927988em -0.6130344em 7px hsla(45.8236, 100%, 50%, 0.9), -0.2386610em 1.3210910em 7px hsla(243.8345, 100%, 50%, 0.9), 1.2084166em 0.3465447em 7px hsla(108.3420, 100%, 50%, 0.9), 0.1438116em -1.4987822em 7px hsla(103.2889, 100%, 50%, 0.9), -0.2103356em 0.2399543em 7px hsla(235.6940, 100%, 50%, 0.9), -0.1050354em -0.1735206em 7px hsla(76.9325, 100%, 50%, 0.9), -0.0804414em 1.2035425em 7px hsla(286.5689, 100%, 50%, 0.9), -0.9909258em -1.2456134em 7px hsla(185.5627, 100%, 50%, 0.9), 0.3988226em -0.4944352em 7px hsla(294.6324, 100%, 50%, 0.9), 0.7534144em 0.5183870em 7px hsla(80.8706, 100%, 50%, 0.9), -0.9026102em -1.4267238em 7px hsla(88.1433, 100%, 50%, 0.9), -0.0745910em 1.0492131em 7px hsla(26.2182, 100%, 50%, 0.9), -0.2566770em 0.3892961em 7px hsla(69.9967, 100%, 50%, 0.9), 0.5890628em -0.0168685em 7px hsla(87.8344, 100%, 50%, 0.9), 0.4681740em -1.4833655em 7px hsla(270.3472, 100%, 50%, 0.9), 0.8101386em -1.1802381em 7px hsla(153.0526, 100%, 50%, 0.9), -0.9723400em 1.3738981em 7px hsla(186.4648, 100%, 50%, 0.9), -1.3493448em -0.7524052em 7px hsla(305.4011, 100%, 50%, 0.9), -0.1306145em 0.9042498em 7px hsla(240.3280, 100%, 50%, 0.9), 1.4636774em 0.2863570em 7px hsla(342.0143, 100%, 50%, 0.9), 1.1742778em 0.3379570em 7px hsla(258.9386, 100%, 50%, 0.9), 0.0143345em 0.9917075em 7px hsla(197.2339, 100%, 50%, 0.9), 1.1916243em 0.7309663em 7px hsla(170.8828, 100%, 50%, 0.9), -0.7224254em -0.7582808em 7px hsla(229.5581, 100%, 50%, 0.9), 0.7974411em 0.0638994em 7px hsla(225.6294, 100%, 50%, 0.9), -0.6762077em -1.2675499em 7px hsla(102.8621, 100%, 50%, 0.9), -0.6848547em -0.5408713em 7px hsla(194.4548, 100%, 50%, 0.9), -1.0848778em -0.8062156em 7px hsla(249.8219, 100%, 50%, 0.9), 0.6192574em -1.3073134em 7px hsla(146.7358, 100%, 50%, 0.9), 0.1278334em -0.2526773em 7px hsla(74.4604, 100%, 50%, 0.9), -0.2395694em 1.2145154em 7px hsla(210.2686, 100%, 50%, 0.9), 0.5865690em 1.0701961em 7px hsla(275.6140, 100%, 50%, 0.9), -0.3588569em -1.4823117em 7px hsla(126.6332, 100%, 50%, 0.9), 0.7604254em 1.0603439em 7px hsla(343.2349, 100%, 50%, 0.9), -0.2429362em 0.7425470em 7px hsla(196.6076, 100%, 50%, 0.9), 0.3097578em -0.8383839em 7px hsla(78.9918, 100%, 50%, 0.9);
  animation-duration: 41s;
  animation-delay: -19s;
}

@keyframes sparkle-move {
  from {
    transform: rotate(0deg) scale(12) translateX(-20px);
  }
  to {
    transform: rotate(360deg) scale(18) translateX(20px);
  }
}

/* ---------------------------------------------------------
   Animated background
--------------------------------------------------------- */
.bg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

html[data-bg="sparkle"] .bg {
  display: block;
}

/* ---------------------------------------------------------
   Finisher Header background (finisher.co)
   The library sizes its canvas off this container's own
   clientWidth/clientHeight, so it needs real dimensions.
--------------------------------------------------------- */
.finisher-header {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

html[data-bg="finisher"] .finisher-header {
  display: block;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  will-change: transform;
}

.blob--a {
  width: 480px;
  height: 480px;
  top: -160px;
  left: -120px;
  background: var(--color-brand-light);
  animation: float-a 22s ease-in-out infinite;
}

.blob--b {
  width: 420px;
  height: 420px;
  bottom: -140px;
  right: -100px;
  background: var(--color-brand-dark);
  opacity: 0.3;
  animation: float-b 26s ease-in-out infinite;
}

.blob--c {
  width: 300px;
  height: 300px;
  top: 40%;
  left: 55%;
  background: var(--color-brand-light);
  opacity: 0.25;
  animation: float-c 30s ease-in-out infinite;
}

@keyframes float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 80px) scale(1.1); }
}

@keyframes float-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -60px) scale(1.08); }
}

@keyframes float-c {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-40%, -60%) scale(1.15); }
}

/* ---------------------------------------------------------
   Layout
--------------------------------------------------------- */
#app {
  width: 100%;
  max-width: 460px;
  min-height: 100vh;
  padding: 56px 20px 0px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------------------------------------------------------
   Profile / header
--------------------------------------------------------- */
.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}

.logo-frame {
  width: 100%;
  aspect-ratio: 448 / 144;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--color-brand-dark), #0f3f70);
  box-shadow: var(--card-shadow-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 28px;
  margin-bottom: 20px;
}

.logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.slogan {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-on-dark-muted);
}

/* ---------------------------------------------------------
   Link cards
--------------------------------------------------------- */
.links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.link-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(28, 107, 186, 0.3);
}

.link-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--color-brand-light), var(--color-brand-dark));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.link-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.link-label {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}

.link-chevron {
  flex: none;
  color: var(--text-muted);
  display: flex;
}

.link-chevron svg {
  width: 18px;
  height: 18px;
}

/* ---------------------------------------------------------
   Bottom block (socials + copyright), pinned to the
   bottom of the viewport when content is short.
--------------------------------------------------------- */
.bottom {
  margin-top: auto;
  padding-top: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------------------------------------------------------
   Social icons
--------------------------------------------------------- */
.socials {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.social-btn {
  width: 28px;
  height: 28px;
  border-radius: 2px;
  background: none;
  border: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--card-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.social-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--card-shadow-hover);
}

.social-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.copyright {
  margin-top: 20px;
  font-size: 12px;
  color: var(--text-on-dark-muted);
  letter-spacing: 0.03em;
}