:root{
      --text:#f8fafc;
      --text-dim:#e5e7eb;
      --ink:#0b0e1a;
      --glow:#86efac; /* mint */
      --glow-alt:#fd0fd6; /* magenta */
      --glow-cyan:#00e5ff; /* cyan */
      --bg:#070a14;
      --accent:#00e5ff;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{ margin:0; color:var(--text); font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial; background:var(--bg); overflow-x:hidden; }

    /* ===== Fullscreen responsive background via <picture> ===== */
.bg{ position:fixed; inset:0; z-index:-2; display:block; width:100%; height:100%; }

.bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%; /* center horizontally and vertically */
  transform: translate(0, 0); /* neutralize any residual offset */
}

.shade{ position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(120% 140% at 50% 20%, rgb(3 8 23 / 0%) 0%, rgb(3 8 23 / 15%) 45%, rgb(3 8 23 / 60%) 70%, rgb(3 8 23 / 85%) 100%), linear-gradient(to top, rgb(7 10 20 / 75%), rgb(7 10 20 / 15%) 35%, rgb(7 10 20 / 0%) 55%); backdrop-filter: saturate(120%) blur(1px); }

/* Dual backgrounds; show/hide by theme */
.bg-medieval{ display:none; }
[data-theme="medieval"] .bg-retrowave{ display:none; }
[data-theme="medieval"] .bg-medieval{ display:block; }

/* Theme-specific icon switching */
[data-theme="medieval"] .icon-retrowave{ display:none !important; }
[data-theme="retrowave"] .icon-medieval{ display:none !important; }

    /* ===== Layout ===== */
  .wrap{ min-height:100dvh; display:flex; align-items:flex-start; justify-content:center; padding:clamp(24px,5vw,64px); perspective:900px; perspective-origin:50% 30%; }
  .hero{ width:min(1100px,100%); margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; position:relative; transform-style:preserve-3d; will-change:transform; transition: transform .15s ease; }

    h1{ font-family:"Space Grotesk", Inter, ui-sans-serif, -apple-system; font-weight:800; font-size:clamp(26px, 6vw, 64px); letter-spacing:-.02em; margin:0 0 8px; text-shadow:0 2px 12px rgb(0 0 0 / 45%); }
    .baseline{ color:var(--text-dim); font-size:clamp(14px,3.2vw,20px); margin:14px 0 18px; text-shadow:0 1px 8px rgb(0 0 0 / 35%); }

  /* ===== Rotating display (non-interactive, fully responsive) ===== */
    .rotator{ position:relative; border-radius:0; isolation:isolate; contain:paint; margin-top:0; text-align:center; }

    .rotator .text{
      font-family:"Space Grotesk", Inter, ui-sans-serif, -apple-system;
      font-weight:800; font-size:clamp(20px, 5vw, 52px); /* smaller than H1, larger than baseline */
      line-height:1.15; letter-spacing:-.01em;
      padding:8px 14px; 

    /* One line per element; JavaScript determines line splitting */
      max-width:100%; width:fit-content; display:inline-block; border-radius:0;
      background: linear-gradient(135deg, rgb(253 15 214 / 22%), rgb(0 229 255 / 18%) 60%, rgb(255 255 255 / 6%)), linear-gradient( to right, rgb(18 18 40 / 92%), rgb(10 10 28 / 92%));
      color:var(--text); border:1px solid rgb(255 0 200 / 28%);
      box-shadow: 0 0 0 1px rgb(0 229 255 / 14%) inset, 0 6px 18px rgb(253 15 214 / 18%);
      backdrop-filter:saturate(120%) blur(6px);

      /* Rotator typing: one line per holder, clip overflow */
      white-space: nowrap; overflow:hidden;
    }

  /* ===== LinkedIn CTA — spinning accent frame ===== */
    .btn-cta{ position:relative; display:inline-grid; place-items:center; margin-top:6px; }
    .btn{ position:relative; z-index:1; appearance:none; border:0; border-radius:18px; text-decoration:none; font-weight:500; font-size:clamp(16px,1.8vw,22px); color:var(--text); padding:16px 28px; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; background: linear-gradient(135deg, rgb(253 15 214 / 25%), rgb(0 229 255 / 22%) 60%, rgb(255 255 255 / 8%)), linear-gradient( to right, rgb(11 14 26 / 92%), rgb(11 14 26 / 92%)); box-shadow: 0 0 0 1px rgb(253 15 214 / 30%) inset, 0 10px 24px rgb(0 229 255 / 18%), 0 0 20px rgb(253 15 214 / 16%); }
    .btn:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgb(0 229 255 / 32%), 0 0 24px rgb(253 15 214 / 24%); }
    .btn:focus-visible{ outline:3px solid #fff; outline-offset:4px; }

    @property --angle{syntax:"<angle>"; initial-value:0deg; inherits:false;}
    .btn-cta::before{ content:""; position:absolute; inset:-3px; padding:3px; border-radius:22px; background: conic-gradient(from var(--angle), transparent 0deg, var(--glow-alt) 110deg, transparent 150deg, var(--glow-cyan) 210deg, transparent 270deg, var(--glow) 330deg, transparent 360deg); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:xor; mask-composite:exclude; animation:sweep 3s linear infinite; filter:drop-shadow(0 0 12px rgb(253 15 214 / 45%)) drop-shadow(0 0 10px rgb(0 229 255 / 35%)); pointer-events:none; }

    @keyframes sweep{to{--angle:360deg;}}

    .footer{ position:fixed; right:24px; bottom:20px; color:#e6eaee; opacity:.85; font-size:14px; letter-spacing:.02em; }

    /* Discreet theme + 3D toggles (bottom-left) */
    .theme-toggle{
      position:fixed; left:18px; bottom:50px; z-index:3;
      appearance:none; border:0; border-radius:12px; padding:6px 10px;
      font-size:12px; line-height:1; color:var(--text-dim);
      background: rgb(11 14 26 / 55%); backdrop-filter: saturate(110%) blur(2px);
      box-shadow: none; opacity:.7; cursor:pointer;
      transition: opacity .15s ease, transform .12s ease, color .15s ease;
    }
    .theme-toggle:hover{ opacity:1; color:var(--text); transform:translateY(-1px); }
    .theme-toggle:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

    .hero-tilt-toggle{
      position:fixed; left:18px; bottom:20px; z-index:3;
      appearance:none; border:0; border-radius:12px; padding:6px 10px;
      font-size:12px; line-height:1; color:var(--text-dim);
      background: rgb(11 14 26 / 55%); backdrop-filter: saturate(110%) blur(2px);
      box-shadow: none; opacity:.7; cursor:pointer;
      transition: opacity .15s ease, transform .12s ease, color .15s ease;
    }
    .hero-tilt-toggle:hover{ opacity:1; color:var(--text); transform:translateY(-1px); }
    .hero-tilt-toggle:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

  /* Small-screen adjustments (narrow widths) */
    @media (max-width:420px){
      h1{ font-size:clamp(22px, 7vw, 36px); }
      .rotator .text{ font-size:clamp(18px, 6vw, 28px); padding:8px 12px; }
      .btn{ font-size:clamp(15px, 4.5vw, 18px); padding:14px 22px; }
      .baseline{ font-size:clamp(13px, 3.8vw, 18px); }
    }

  /* Ensure quick response to touch interactions */

/* --- Enhancements: parallax, divider, caret, dust, accents --- */

/* 3D transform context is set on the primary .wrap/.hero rules near the top */
.hero.tilt-active::after{ opacity:.32; }

.hero::after{ content:""; position:absolute; inset:-6px; border-radius:22px; pointer-events:none; 
  background: radial-gradient(120% 180% at 0% 0%, rgb(0 229 255 / 18%), transparent 60%),
              radial-gradient(120% 180% at 100% 0%, rgb(253 15 214 / 18%), transparent 60%);
  mix-blend-mode: screen; filter: blur(10px) saturate(120%);
  transform: translateZ(30px); opacity:0; transition: opacity .2s ease;
}

/* Rotator caret (terminal-inspired cursor) consolidated in the rotator block above. */

@keyframes blink{ 0%,55%{opacity:.9} 55.01%,100%{opacity:.18} }

/* Decorative wavy divider */
.divider{ display:block; width:min(760px,100%); height:24px; margin: 10px auto 14px; opacity:.9; filter: drop-shadow(0 4px 10px rgb(0 229 255 / 12%)) drop-shadow(0 6px 16px rgb(253 15 214 / 10%)); }
.divider path{ stroke: var(--accent); stroke-width:2.2; stroke-linecap:round; fill:none; stroke-dasharray: 7 11; animation: dashmove 7s linear infinite; opacity:.85; }

@keyframes dashmove{ to{ stroke-dashoffset:-220; } }

/* Ambient dust canvas (background decoration) */
canvas.dust{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.25; }

/* --- Center tiles (retrowave layout) --- */
.tiles{
  position:fixed; left:50%; top:62vh; transform:translate(-50%,-50%);
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center; align-items:stretch;
  z-index:2; pointer-events:auto; max-width:min(92vw, 860px);
}

.tile{
  position:relative; display:flex; flex-direction:column; justify-content:flex-start; cursor:pointer;
  min-width:260px; max-width:340px;
  padding:16px 18px; border-radius:14px; text-decoration:none; color:var(--text);
  background: linear-gradient( to right, rgb(11 14 26 / 84%), rgb(11 14 26 / 84%));
  border:1px solid rgb(255 255 255 / 6%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 6%) inset, 0 10px 22px rgb(0 0 0 / 28%);
  backdrop-filter:saturate(120%) blur(6px);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, opacity .25s ease;
}
.tile:hover{ transform:translateY(-4px); }
.tile:active{ transform:translateY(-1px) scale(.995); }
.tile:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .tile .icon-img{ transition: filter .2s ease, transform .2s ease; width:56px; height:56px; margin-bottom:8px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 25%)); }
  .tile h3{ margin:0 0 6px; font-family:"Space Grotesk", system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: clamp(18px,3.6vw,22px); letter-spacing:-.01em; }
.tile p{ margin:0; opacity:.92; font-size: clamp(14px,3.2vw,16px); }

@media (max-width:720px){
  .wrap{ min-height:auto; padding-bottom:8px; }

  .tiles{
    position: static;
    transform:none; top:auto; left:auto;
    width:min(96vw, 560px);
    max-width: none;
    margin:10px auto 20px;
    gap:12px;
    z-index:auto;
  }
  .tile{ min-width: 0; width:100%; }
}

/* Stack tiles when viewport height is limited to avoid overlap */
@media (max-height:760px){
  .wrap{ min-height:auto; padding-bottom:8px; }

  .tiles{
    position: static;
    transform:none; top:auto; left:auto;
    width:min(96vw, 560px);
    max-width: none;
    margin:10px auto 20px;
    gap:12px;
    z-index:auto;
  }
  .tile{ min-width: 0; width:100%; }
}

/* Footer becomes inline on small screens to remain visually last */
@media (max-width:720px), (max-height:760px){
  .footer{ position: static; right:auto; bottom:auto; display:block; text-align:center; margin:6px 0 18px; }
}

/* Hide the 3D toggle on small/coarse-pointer devices; keep theme toggle accessible */
@media (max-width:720px), (max-height:760px), (pointer:coarse){
  .hero-tilt-toggle{ display:none !important; }
}

/* On smaller devices, render the theme toggle inline */
@media (max-width:720px), (pointer:coarse){
  .theme-toggle{
    position: static; left:auto; bottom:auto; z-index:auto;
    display:inline-block; margin: 8px auto 12px; transform:none;
  }
}

/* Theme palettes (CSS variables) */
[data-theme="retrowave"]{
  --glow:#86efac; --glow-alt:#fd0fd6; --glow-cyan:#00e5ff; --accent:#00e5ff; --bg:#070a14;
}

[data-theme="medieval"]{
  --glow:#e6c37a; /* gold */
  --glow-alt:#8b5e3c; /* brown */
  --glow-cyan:#4b6f9e; /* muted blue */
  --accent:#b58c4f; /* divider */
  --bg:#0e0b07; /* deeper parchment base */
}

/* Component overrides for the medieval theme */
[data-theme="medieval"] .btn{
  background: linear-gradient(135deg, rgb(230 195 122 / 28%), rgb(75 111 158 / 24%) 60%, rgb(255 255 255 / 8%)), linear-gradient( to right, rgb(14 11 7 / 94%), rgb(14 11 7 / 94%));
  box-shadow: 0 0 0 1px rgb(181 140 79 / 34%) inset, 0 10px 24px rgb(75 111 158 / 18%), 0 0 20px rgb(230 195 122 / 14%);
  border: 0;
}

[data-theme="medieval"] .btn-cta .btn{
  background: linear-gradient(135deg, rgb(230 195 122 / 35%), rgb(75 111 158 / 30%) 60%, rgb(255 255 255 / 12%)), linear-gradient(to right, rgb(14 11 7 / 98%), rgb(14 11 7 / 98%));
  border:1px solid rgb(181 140 79 / 42%);
  box-shadow: 0 0 0 1px rgb(139 94 60 / 30%) inset, 0 14px 34px rgb(75 111 158 / 26%), 0 0 26px rgb(230 195 122 / 22%);
}

[data-theme="medieval"] .tile{
  background:
    linear-gradient( to bottom right, rgb(26 20 14 / 96%), rgb(18 14 10 / 92%) );
  border:1px solid rgb(181 140 79 / 36%);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 6%) inset,
    0 8px 18px rgb(0 0 0 / 32%),
    0 0 18px rgb(181 140 79 / 18%);
}

[data-theme="medieval"] .tile::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: repeating-linear-gradient(45deg, rgb(255 255 255 / 4.5%) 0 1px, rgb(0 0 0 / 3%) 1px 2px);
  mix-blend-mode: overlay; opacity:.28; transition: opacity .2s ease;
}
[data-theme="medieval"] .tile:hover::after{ opacity:.38; }

[data-theme="medieval"] .tile:hover{
  transform: translateY(-4px);
}

[data-theme="medieval"] .rotator .text{
  background: linear-gradient(135deg, rgb(139 94 60 / 22%), rgb(75 111 158 / 18%) 60%, rgb(255 255 255 / 6%)), linear-gradient( to right, rgb(18 18 40 / 92%), rgb(10 10 28 / 92%));
  border:1px solid rgb(181 140 79 / 28%);
  box-shadow: 0 0 0 1px rgb(75 111 158 / 14%) inset, 0 6px 18px rgb(230 195 122 / 18%);
}

/* Retrowave glass/neon tile styling */
[data-theme="retrowave"] .tile{
  background:
    linear-gradient(135deg, rgb(0 229 255 / 16%), rgb(253 15 214 / 12%) 60%, rgb(255 255 255 / 4%)),
    linear-gradient( to right, rgb(10 12 24 / 88%), rgb(10 12 24 / 88%) );
  border:1px solid rgb(0 229 255 / 26%);
  box-shadow:
    0 0 0 1px rgb(253 15 214 / 14%) inset,
    0 12px 26px rgb(0 229 255 / 22%),
    0 0 24px rgb(253 15 214 / 18%);
}

[data-theme="retrowave"] .tile::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background: radial-gradient( 60% 60% at 50% 50%, rgb(134 239 172 / 12%) 0%, rgb(0 229 255 / 10%) 35%, rgb(253 15 214 / 6%) 60%, rgb(0 0 0 / 0%) 70%);
  transform: scale(.96); opacity:0; transition: transform .45s ease, opacity .35s ease;
}
[data-theme="retrowave"] .tile:hover::after{ opacity:1; transform: scale(1.04); }

[data-theme="retrowave"] .tile:hover .icon-img{ filter: drop-shadow(0 2px 3px rgb(0 0 0 / 25%)) saturate(120%) brightness(1.08); transform: translateY(-1px); }
[data-theme="medieval"] .tile:hover .icon-img{ filter: drop-shadow(0 2px 3px rgb(0 0 0 / 28%)) saturate(108%) brightness(1.04) hue-rotate(-4deg); transform: translateY(-1px); }

[data-theme="retrowave"] .tile:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 0 0 1px rgb(253 15 214 / 20%) inset,
    0 16px 34px rgb(0 229 255 / 30%),
    0 0 30px rgb(253 15 214 / 24%);
  border-color: rgb(253 15 214 / 34%);
}

/* Subtle gradient ring using pseudo-element (performance-friendly) */
[data-theme="retrowave"] .tile::before,
[data-theme="medieval"] .tile::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; opacity:.55; transition: opacity .2s ease;
}

[data-theme="retrowave"] .tile::before{
  background: conic-gradient(from 0deg, rgb(0 229 255 / 55%), rgb(253 15 214 / 45%), rgb(134 239 172 / 35%), rgb(0 229 255 / 55%));
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:xor; mask-composite:exclude;
  padding:2px;
}

[data-theme="medieval"] .tile::before{
  background: linear-gradient(135deg, rgb(181 140 79 / 55%), rgb(230 195 122 / 45%));
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:xor; mask-composite:exclude;
  padding:2px;
}
[data-theme] .tile:hover::before{ opacity:.9; }

/* Emphasized CTA button styling */
.btn-cta .btn{ background: linear-gradient(135deg, rgb(0 229 255 / 35%), rgb(253 15 214 / 28%) 60%, rgb(255 255 255 / 12%)), linear-gradient(to right, rgb(9 12 24 / 98%), rgb(9 12 24 / 98%)); border:1px solid rgb(0 229 255 / 42%); box-shadow: 0 0 0 1px rgb(253 15 214 / 34%) inset, 0 14px 34px rgb(0 229 255 / 28%), 0 0 26px rgb(253 15 214 / 24%); }
.btn-cta .btn:hover{ box-shadow: 0 16px 36px rgb(0 229 255 / 38%), 0 0 34px rgb(253 15 214 / 30%); }

/* Rotator typing: one line per holder, clip overflow */
.rotator .text + .text{ margin-top: 8px; }
.rotator .text.line2{ display:block; }
.rotator .text.line2:empty{ display:none; }
.rotator .text::after{ display:none; }
.rotator .text.active-caret::after{ display:block; }

[data-theme="retrowave"] .btn-cta .btn{
  background: linear-gradient(135deg, rgb(245 158 11 / 32%), rgb(134 239 172 / 26%) 60%, rgb(255 255 255 / 10%)),
              linear-gradient(to right, rgb(12 14 26 / 98%), rgb(12 14 26 / 98%));
  border:1px solid rgb(245 158 11 / 45%);
  box-shadow: 0 0 0 1px rgb(134 239 172 / 30%) inset, 0 14px 34px rgb(245 158 11 / 26%), 0 0 26px rgb(134 239 172 / 22%);
}

[data-theme="retrowave"] .btn-cta .btn:hover{
  box-shadow: 0 16px 36px rgb(245 158 11 / 36%), 0 0 34px rgb(134 239 172 / 30%);
}