:root{
  --blue:#0B5ED7;
  --blue2:#062c6f;
  --orange:#F97316;

  --ink:#0b1220;
  --text:#eaf0ff;
  --muted: rgba(234,240,255,.72);

  --glass: rgba(255,255,255,.08);
  --glass2: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.14);

  --shadow: 0 24px 80px rgba(0,0,0,.55);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);

  --radius: 22px;

  /* Mobile-safe padding (iPhone notch etc.) */
  --safeTop: env(safe-area-inset-top, 0px);
  --safeBottom: env(safe-area-inset-bottom, 0px);
  --safeLeft: env(safe-area-inset-left, 0px);
  --safeRight: env(safe-area-inset-right, 0px);

  /* Tap sizes */
  --tap: 52px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1000px 700px at 50% 0%, rgba(11,94,215,.25), transparent 60%),
              radial-gradient(900px 600px at 18% 18%, rgba(249,115,22,.18), transparent 60%),
              radial-gradient(900px 700px at 82% 30%, rgba(11,94,215,.20), transparent 60%),
              #070a12;
  color: var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding-left: var(--safeLeft);
  padding-right: var(--safeRight);
}

.noScroll body{ overflow:hidden; }
html.noScroll{ overflow:hidden; }

a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color: transparent; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Subtle selection */
::selection{ background: rgba(11,94,215,.35); }

/* Background decor */
.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; }
.orb{
  position:absolute;
  width:520px; height:520px;
  filter: blur(42px);
  opacity:.55;
  border-radius: 999px;
  transform: translate3d(0,0,0);
  animation: floaty 7.5s ease-in-out infinite;
}
.orb--blue{
  left:-160px; top:-190px;
  background: radial-gradient(circle at 30% 30%, rgba(11,94,215,.90), rgba(11,94,215,.14) 55%, transparent 70%);
}
.orb--orange{
  right:-210px; bottom:-230px;
  background: radial-gradient(circle at 30% 30%, rgba(249,115,22,.90), rgba(249,115,22,.14) 55%, transparent 70%);
  animation-delay: -2.5s;
}
@keyframes floaty{
  0%,100%{ transform: translateY(0) translateX(0) scale(1); }
  50%{ transform: translateY(22px) translateX(12px) scale(1.03); }
}

.grid{
  position:absolute; inset:-1px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 18%, #000 0 46%, transparent 76%);
  opacity:.35;
}
.noise{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  opacity:.28;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* Layout (mobile-first for QR scans) */
.wrap{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    calc(18px + var(--safeTop))
    14px
    calc(28px + var(--safeBottom));
  opacity:0;
  transform: translateY(14px) scale(.985);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.wrap.in{
  opacity:1;
  transform: translateY(0) scale(1);
}

.card{
  width:min(920px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.055));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.card::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    radial-gradient(620px 250px at 14% 0%, rgba(249,115,22,.18), transparent 58%),
    radial-gradient(660px 280px at 92% 10%, rgba(11,94,215,.22), transparent 62%);
  pointer-events:none;
  z-index:-1;
}

/* Hero */
.hero{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 18px 16px 14px;
}
@media (min-width: 860px){
  .hero{
    grid-template-columns: 280px 1fr;
    align-items:center;
    padding: 28px 26px 18px;
    gap: 26px;
  }
}

.hero__logoWrap{
  position:relative;
  width: min(220px, 72vw);
  height: min(220px, 72vw);
  max-width: 240px;
  max-height: 240px;
  margin: 4px auto 0;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
@media (min-width: 860px){
  .hero__logoWrap{ margin:0; width: 250px; height: 250px; max-width:none; max-height:none; }
}

.ring{
  position:absolute; inset:-18px;
  border-radius:999px;
  background:
    conic-gradient(from 90deg,
      rgba(11,94,215,.0),
      rgba(11,94,215,.70),
      rgba(249,115,22,.70),
      rgba(11,94,215,.0)
    );
  opacity:.9;
  animation: spin 6.2s linear infinite;
  mask: radial-gradient(circle, transparent 54%, #000 55%);
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.hero__logo{
  width: 62%;
  height: auto;
  transform: translateZ(0);
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.58));
}

.shine{
  position:absolute; inset:-40%;
  background: linear-gradient(110deg, transparent 45%, rgba(255,255,255,.18) 52%, transparent 59%);
  transform: rotate(10deg);
  animation: shine 3.1s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shine{
  0%,100%{ transform: translateX(-12%) rotate(10deg); opacity:.55; }
  50%{ transform: translateX(18%) rotate(10deg); opacity:1; }
}

.hero__content{ text-align:left; }
.title{
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-size: clamp(22px, 6.2vw, 40px); /* stronger mobile scaling */
  line-height: 1.08;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.grad{
  background: linear-gradient(90deg, #eaf0ff, rgba(11,94,215,.95), rgba(249,115,22,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.subtitle{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14.4px;
  line-height: 1.62;
}
.subtitle b{ color: rgba(234,240,255,.92); font-weight: 800; }

.ctaRow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Buttons: larger tap targets on mobile */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  min-height: var(--tap);
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.95);
  font-weight: 800;
  font-size: 14px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  user-select:none;
  position:relative;
  overflow:hidden;
}
.btn:focus-visible{
  outline: 2px solid rgba(11,94,215,.65);
  outline-offset: 3px;
}
.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.09);
  box-shadow: 0 14px 40px rgba(0,0,0,.30);
}
.btn:active{ transform: translateY(0); filter: brightness(1.02); }

.btn--primary{
  background: linear-gradient(135deg, rgba(11,94,215,.95), rgba(11,94,215,.72), rgba(249,115,22,.66));
  border-color: rgba(255,255,255,.22);
}
.btn--primary::after{
  content:"";
  position:absolute; inset:-40% -30%;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  transform: translateX(-45%);
  animation: shimmer2 1.6s linear infinite;
  opacity:.9;
  pointer-events:none;
}
@keyframes shimmer2{ to{ transform: translateX(45%); } }

.btn--ghost{
  background: rgba(0,0,0,.18);
}

.btn__icon{
  width: 30px; height: 30px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
}

.btn__trail{
  margin-left: 2px;
  opacity:.9;
}

.icon{
  width: 18px;
  height: 18px;
  display:block;
}

/* Divider */
.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  margin: 10px 0 0;
}

/* Links section */
.links{
  padding: 14px 16px 16px;
}
@media (min-width: 860px){
  .links{ padding: 18px 26px 22px; }
}

.sectionTitle{
  margin: 0 0 6px;
  font-size: 13.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(234,240,255,.86);
}
.sectionHint{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13.6px;
  line-height: 1.45;
}

.gridLinks{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px){
  .gridLinks{ grid-template-columns: 1fr 1fr; }
}

.linkCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  min-height: var(--tap);
  padding: 12px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  position:relative;
  overflow:hidden;
  touch-action: manipulation;
}
.linkCard:focus-visible{
  outline: 2px solid rgba(249,115,22,.55);
  outline-offset: 3px;
}
.linkCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(600px 180px at 20% 0%, rgba(249,115,22,.14), transparent 55%),
    radial-gradient(600px 180px at 90% 0%, rgba(11,94,215,.14), transparent 55%);
  opacity:.7;
  pointer-events:none;
}
.linkCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.095);
  box-shadow: 0 18px 44px rgba(0,0,0,.26);
}
.linkCard:active{ transform: translateY(0); }

.linkCard__left{
  display:flex;
  align-items:center;
  gap: 12px;
  z-index:1;
  min-width: 0;
}
.linkCard__title{
  font-weight: 900;
  letter-spacing: -0.01em;
}
.linkCard__meta{
  font-size: 12.8px;
  color: rgba(234,240,255,.72);
  margin-top: 2px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 42vw; /* avoids overflow on mobile */
}
@media (min-width: 640px){
  .linkCard__meta{ max-width: none; }
}
.linkCard__go{
  width: 36px; height: 36px;
  border-radius: 14px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  z-index:1;
  opacity:.92;
}

/* Badges */
.badge{
  width: 46px; height: 46px;
  border-radius: 18px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.badge--in{ color: #9fc3ff; background: rgba(11,94,215,.16); }
.badge--tt{ color: #ffe0d0; background: rgba(249,115,22,.14); }
.badge--ig{ color: #ffd8fb; background: rgba(255,255,255,.08); }
.badge--x{ color: #eaf0ff; background: rgba(255,255,255,.06); }
.badge--ph{ color: #b8ffd9; background: rgba(0,255,163,.10); }
.badge--mail{ color: #ffd2b0; background: rgba(249,115,22,.12); }

/* Footer */
.footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding: 14px 16px calc(16px + var(--safeBottom));
  color: rgba(234,240,255,.65);
  font-size: 12.6px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
@media (min-width: 860px){
  .footer{ padding: 14px 26px 18px; }
}
.dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  box-shadow: 0 0 18px rgba(249,115,22,.35);
  display:inline-block;
  margin-right: 8px;
}

/* ======================
   LOADER (Upgraded styles for new HTML)
   ====================== */
.loader{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:
    calc(16px + var(--safeTop))
    14px
    calc(16px + var(--safeBottom));
  background:
    radial-gradient(900px 600px at 50% 30%, rgba(11,94,215,.20), transparent 60%),
    radial-gradient(900px 600px at 50% 70%, rgba(249,115,22,.18), transparent 60%),
    rgba(7,10,18,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  overflow:hidden;
}

/* Scan stage */
.loader__stage{
  position:absolute;
  inset:-40%;
  opacity:.55;
  pointer-events:none;
  filter: blur(.2px);
}
.scan{
  position:absolute;
  width: 120%;
  height: 160px;
  left:-10%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(11,94,215,.14), rgba(249,115,22,.14), transparent);
  transform: rotate(-18deg) translateY(-60px);
  animation: scanMove 2.6s ease-in-out infinite;
}
.scan--b{
  height: 220px;
  opacity:.75;
  animation-duration: 3.2s;
  animation-delay: -1.1s;
}
.scan--c{
  height: 120px;
  opacity:.45;
  animation-duration: 2.2s;
  animation-delay: -0.7s;
}
@keyframes scanMove{
  0%,100%{ transform: rotate(-18deg) translateY(-120px); }
  50%{ transform: rotate(-18deg) translateY(160px); }
}

.loader__card{
  width: min(620px, 100%);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
  box-shadow: var(--shadow);
  padding: 18px 16px 16px;
  overflow:hidden;
  position:relative;
}
@media (min-width: 560px){
  .loader__card{ padding: 20px 20px 18px; }
}
.loader__card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 220px at 20% 0%, rgba(249,115,22,.20), transparent 62%),
    radial-gradient(560px 240px at 90% 0%, rgba(11,94,215,.24), transparent 64%);
  opacity:.8;
  pointer-events:none;
}

.loader__top{
  display:flex;
  align-items:center;
  gap: 12px;
  position:relative;
  z-index:1;
}

/* Logo mark */
.loader__mark{
  width: 64px; height: 64px;
  border-radius: 20px;
  display:grid;
  place-items:center;
  position:relative;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 26px rgba(0,0,0,.28);
  overflow:hidden;
  flex: 0 0 auto;
}
.loader__halo{
  position:absolute;
  inset:-30%;
  background: conic-gradient(from 90deg, rgba(11,94,215,.0), rgba(11,94,215,.55), rgba(249,115,22,.55), rgba(11,94,215,.0));
  animation: spin 4.8s linear infinite;
  opacity:.85;
  mask: radial-gradient(circle, transparent 48%, #000 52%);
}
.loader__logo{
  width: 70%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
  z-index:1;
}
.loader__glint{
  position:absolute; inset:-40%;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  transform: translateX(-45%) rotate(10deg);
  animation: glint 1.8s ease-in-out infinite;
  opacity:.9;
}
@keyframes glint{
  0%,100%{ transform: translateX(-45%) rotate(10deg); opacity:.55; }
  50%{ transform: translateX(35%) rotate(10deg); opacity:1; }
}

.loader__text{ min-width:0; }
.loader__titleRow{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.loader__title{
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 18px;
}
.loader__tag{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(234,240,255,.86);
  font-weight: 800;
  font-size: 12.2px;
}

.loader__sub{
  color: rgba(234,240,255,.72);
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.35;
}

/* Progress bar */
.loader__bar{
  margin-top: 14px;
  height: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  position:relative;
  z-index:1;
}
.loader__barFill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(11,94,215,.98), rgba(11,94,215,.60), rgba(249,115,22,.88));
  box-shadow: 0 0 22px rgba(11,94,215,.20);
  position:relative;
}
.loader__barFill::after{
  content:"";
  position:absolute; inset:-30% -20%;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-45%);
  animation: shimmer 1.1s linear infinite;
}
.loader__barGlow{
  position:absolute;
  inset:-60% -20%;
  background: radial-gradient(circle at 30% 50%, rgba(11,94,215,.20), transparent 60%),
              radial-gradient(circle at 70% 50%, rgba(249,115,22,.18), transparent 60%);
  opacity:.6;
  pointer-events:none;
}

@keyframes shimmer{ to{ transform: translateX(45%); } }

.loader__meta{
  margin-top: 12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  position:relative;
  z-index:1;
  flex-wrap: wrap;
}

.loader__signals{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(234,240,255,.82);
  font-weight: 800;
  font-size: 12.2px;
}

.loader__pctWrap{
  text-align:right;
  min-width: 120px;
}
.loader__pct{
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(234,240,255,.90);
  font-size: 16px;
}
.loader__hint{
  margin-top: 2px;
  font-size: 12.4px;
  color: rgba(234,240,255,.66);
}

/* Loader exit */
.loader--out{
  animation: fadeOut .78s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeOut{
  to{ opacity:0; transform: scale(.99); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .orb, .ring, .shine,
  .loader__barFill::after,
  .scan, .loader__halo, .loader__glint,
  .btn--primary::after{
    animation:none !important;
  }
  .wrap{ transition:none !important; }
  .btn, .linkCard{ transition:none !important; }
}