/* ============================================================
   Cesar Baets — Portfolio
   Theme: Autumn (default) | Forest (body.forest)
   ============================================================ */


/* ============================================================
   TOKENS
   ============================================================ */

:root {
  /* -- Palette -- */
  --bg:          #14100b;
  --bg2:         #221a13;
  --accent:      #ff8a3d;
  --accent-rgb:  255, 138, 61;
  --text:        #f5ede4;
  --dim:         #8c7d70;

  /* -- Accent-derived -- */
  --border:  rgba(255, 138, 61, .14);
  --glow:    rgba(255, 138, 61, .38);
  --aurora:  rgba(255, 138, 61, .09);
  --grad:    linear-gradient(135deg, #ffb066, #ff7a3d);

  /* -- Planet colors -- */
  --p1: #ffc078;
  --p2: #ff9d52;
  --p3: #ff7a3d;
  --p4: #c75a26;

  /* -- Glitch ghost colors -- */
  --g1: #ff6a2c;
  --g2: #ffd089;

  /* -- Stars tint -- */
  --star: 255, 206, 180;

  /* -- Spacing scale -- */
  --space-xs:  8px;
  --space-sm:  14px;
  --space-md:  22px;
  --space-lg:  38px;
  --space-xl:  60px;

  /* -- Radius -- */
  --radius-sm:  6px;
  --radius-md:  14px;
  --radius-lg:  18px;
  --radius-xl:  26px;
  --radius-pill: 999px;

  /* -- Easing -- */
  --ease-spring: cubic-bezier(.2, .8, .2, 1);

  /* -- Transitions -- */
  --t-fast:   .25s ease;
  --t-normal: .35s ease;
}


/* ============================================================
   RESET & BASE
   ============================================================ */

* {
  box-sizing: border-box;
  margin:  0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x:      hidden;
  width:           100%;
}

body {
  position:   relative;
  min-height: 100vh;
  background: radial-gradient(1100px 700px at 50% -8%, var(--aurora), transparent 60%),
              var(--bg);
  color:       var(--text);
  font-family: 'Manrope', sans-serif;
  overflow-x:  hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

.mono {
  font-family: 'JetBrains Mono', monospace;
}


/* ============================================================
   BACKGROUND / AMBIENCE
   ============================================================ */

.bg-stars {
  position:       fixed;
  inset:          0;
  width:          100%;
  height:         100%;
  z-index:        0;
  pointer-events: none;
  will-change:    transform;
  transform:      translateZ(0);
}

.aurora {
  position:       fixed;
  top:    -10%;
  left:   -10%;
  right:  -10%;
  height: 56vh;
  z-index:        0;
  pointer-events: none;
  background:     radial-gradient(ellipse 80% 60% at 50% 0%, var(--aurora) 0%, transparent 72%);
  animation:      auroraShift 14s ease-in-out infinite;
}

.progress {
  position:   fixed;
  top:        0;
  left:       0;
  height:     3px;
  width:      0;
  z-index:    60;
  background: var(--grad);
  box-shadow: 0 0 12px var(--glow);
}


/* ============================================================
   SIDE RAIL
   ============================================================ */

.siderail {
  position:       fixed;
  left:           26px;
  top:            90px;
  z-index:        40;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
}

.rail-item {
  display:        flex;
  align-items:    center;
  gap:            9px;
  font-family:    'JetBrains Mono', monospace;
  font-size:      10px;
  letter-spacing: 1px;
  color:          var(--dim);
  opacity:        .55;
  transform-origin: left center;
  transition:     transform var(--t-normal), color var(--t-normal), opacity var(--t-normal);
}

.rail-item .dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  border:        1px solid var(--accent);
  background:    transparent;
  flex:          none;
  transition:    background var(--t-normal), box-shadow var(--t-normal);
}

.rail-item.active {
  transform: scale(1.35);
  color:     var(--accent);
  opacity:   1;
}

.rail-item.active .dot {
  background: var(--accent);
  box-shadow: 0 0 11px var(--accent);
}


/* ============================================================
   NAV
   ============================================================ */

.topnav {
  position:       fixed;
  top:    20px;
  left:   0;
  right:  0;
  z-index:        50;
  display:        flex;
  justify-content: center;
  padding:        18px 24px;
  pointer-events: none;
}

.navpill {
  pointer-events: auto;
  display:        flex;
  align-items:    center;
  gap:            10px;
  padding:        8px 8px 8px 16px;
  border-radius:  var(--radius-pill);
  backdrop-filter: blur(16px);
  background:     color-mix(in srgb, var(--bg2) 78%, transparent);
  border:         1px solid var(--border);
  box-shadow:     0 10px 34px rgba(0, 0, 0, .4);
  animation:      navDrop .7s var(--ease-spring) both;
}

.nav-logo {
  display:        flex;
  align-items:    center;
  gap:            10px;
  font-family:    'Sora', sans-serif;
  font-weight:    700;
  font-size:      16px;
  letter-spacing: -.2px;
  padding-right:  6px;
  animation:      navItem .6s .05s both;
}

.nav-logo .mark {
  display:       grid;
  place-items:   center;
  width:         30px;
  height:        30px;
  border-radius: 50%;
  background:    var(--grad);
  color:         var(--bg);
  font-weight:   800;
  font-size:     14px;
  box-shadow:    0 0 16px var(--glow);
}

.nav-logo .mark img {
  place-items: center;
  width:  24px;
  height: 24px;
}

.nav-div {
  width:      1px;
  height:     22px;
  background: var(--border);
}

.nav-links {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-family: 'Manrope', sans-serif;
  font-size:   14px;
  font-weight: 500;
  color:       var(--dim);
}

.nav-links a {
  position:      relative;
  padding:       8px 14px;
  border-radius: var(--radius-pill);
  transition:    color .3s ease;
}

.nav-links a::after {
  content:          '';
  position:         absolute;
  left:             12px;
  right:            12px;
  bottom:           2px;
  height:           2px;
  border-radius:    2px;
  background:       var(--accent);
  transform:        scaleX(0);
  transform-origin: center;
  transition:       transform .32s var(--ease-spring);
}

.nav-links a:hover              { color: var(--text); }
.nav-links a:hover::after       { transform: scaleX(1); }

.nav-links a:nth-child(1) { animation: navItem .6s .12s both; }
.nav-links a:nth-child(2) { animation: navItem .6s .18s both; }
.nav-links a:nth-child(3) { animation: navItem .6s .24s both; }

.nav-cta {
  color:         var(--bg);
  background:    var(--grad);
  padding:       10px 20px;
  border-radius: var(--radius-pill);
  font-family:   'Manrope', sans-serif;
  font-weight:   700;
  font-size:     14px;
  box-shadow:    0 6px 22px var(--glow);
  animation:     navItem .6s .3s both;
  border:        1px solid transparent;
  transition:    border-color .35s ease;
}

.nav-cta:hover {
  border-color: var(--text);
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
  position:        relative;
  z-index:         2;
  padding:         0px 14px 14px;
  min-height:      100vh;
  display:         flex;
  align-items:     stretch;
}

.hero-card {
  position:              relative;
  width:                 100%;
  max-width:             1400px;
  margin:                0 auto;
  padding:               64px 64px 56px;
  display:               grid;
  grid-template-columns: 1.6fr 1fr;
  gap:                   48px;
  align-items:           center;
  overflow:              visible;
}

.hero-content {
  position: relative;
  z-index:  1;
}

.badge {
  display:        inline-flex;
  align-items:    center;
  gap:            9px;
  font-family:    'JetBrains Mono', monospace;
  font-size:      12px;
  letter-spacing: 2px;
  color:          var(--accent);
  border:         1px solid var(--border);
  padding:        7px 13px;
  border-radius:  var(--radius-pill);
  margin-bottom:  26px;
}

.badge .blip {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--accent);
  box-shadow:    0 0 8px var(--accent);
}

.name {
  font-family:    'Sora', sans-serif;
  font-weight:    800;
  font-size:      clamp(40px, 5.6vw, 76px);
  line-height:    1;
  letter-spacing: -2.4px;
  margin-bottom:  8px;
}

.role-row {
  display:       flex;
  align-items:   baseline;
  gap:           12px;
  margin-bottom: 22px;
  min-height:    46px;
}

.lead {
  max-width:     430px;
  font-size:     17px;
  line-height:   1.6;
  color:         var(--dim);
  margin-bottom: 30px;
}

.cta-row {
  display:       flex;
  gap:           13px;
  flex-wrap:     wrap;
  margin-bottom: 34px;
}

.btn-primary {
  display:       inline-flex;
  align-items:   center;
  gap:           9px;
  font-weight:   700;
  font-size:     16px;
  padding:       15px 26px;
  border-radius: var(--radius-pill);
  color:         var(--bg);
  background:    var(--grad);
  box-shadow:    0 10px 34px var(--glow);
  border:        1px solid transparent;
  transition:    border-color .35s ease;
}

.btn-primary:hover {
  border-color: var(--text);
}

.btn-ghost {
  display:       inline-flex;
  align-items:   center;
  gap:           9px;
  font-weight:   600;
  font-size:     16px;
  padding:       15px 24px;
  border-radius: var(--radius-pill);
  border:        1px solid var(--border);
  color:         var(--text);
  background:    transparent;
  transition:    border-color .35s ease, transform .35s ease;
}

.btn-ghost:hover {
  border-color: var(--text);
}

.readout {
  display:       inline-flex;
  align-items:   center;
  gap:           16px;
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       14px 18px;
  background:    color-mix(in srgb, var(--bg2) 60%, transparent);
}

.readout .num {
  font-family: 'JetBrains Mono', monospace;
  font-size:   30px;
  font-weight: 600;
  color:       var(--accent);
  line-height: 1;
}

.readout .label {
  font-family:    'JetBrains Mono', monospace;
  font-size:      10px;
  letter-spacing: 1px;
  color:          var(--dim);
}

.readout .title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size:   16px;
}

.readout .desc {
  max-width:    230px;
  font-size:    12.5px;
  line-height:  1.45;
  color:        var(--dim);
  border-left:  1px solid var(--border);
  padding-left: 14px;
}


/* ============================================================
   ROLE GLITCH
   ============================================================ */

.role-wrap {
  position:     relative;
  display:      inline-block;
  font-family:  'Sora', sans-serif;
  font-weight:  600;
  font-size:    clamp(20px, 3vw, 34px);
  will-change:  transform;
}

.role-text {
  display:             inline-block;
  background:          var(--grad);
  -webkit-background-clip: text;
  background-clip:     text;
  color:               transparent;
  will-change:         transform, clip-path;
}

.role-ghost {
  position:       absolute;
  left:           0;
  top:            0;
  pointer-events: none;
  opacity:        0;
  mix-blend-mode: screen;
  white-space:    nowrap;
}

.role-ghost.g1 { color: var(--g1); }
.role-ghost.g2 { color: var(--g2); }

.role-wrap.glitch                  { animation: glitchFlick .5s steps(3) infinite; }
.role-wrap.glitch .role-text       { animation: baseGlitch .24s steps(2) infinite; }
.role-wrap.glitch .role-ghost      { opacity: .5; }
.role-wrap.glitch .g1              { animation: ghost1 .26s steps(2) infinite; }
.role-wrap.glitch .g2              { animation: ghost2 .29s steps(2) infinite; }


/* ============================================================
   ORBIT
   ============================================================ */

.orbit-stage {
  position:    relative;
  z-index:     1;
  height:      min(72vh, 640px);
  min-height:  460px;
  touch-action: pan-y;
  overflow:    visible;
  transform:   translateX(-175px);
}

.ring {
  position:      absolute;
  top:           50%;
  left:          50%;
  border-radius: 50%;
  transform:     translate(-50%, -50%) rotateX(72deg);
  will-change:   transform;
}

.ring.r1 {
  width:     430px;
  height:    430px;
  border:    1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  animation: ringSpin 50s linear infinite;
}

.ring.r2 {
  width:  300px;
  height: 300px;
  border: 1px dashed color-mix(in srgb, var(--accent) 48%, transparent);
}

.ring.r3 {
  width:  595px;
  height: 595px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}

.globe {
  position:       absolute;
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%) translateZ(0);
  width:          253px;
  height:         253px;
  z-index:        30;
  pointer-events: none;
  will-change:    transform;
}

.planet {
  position:       absolute;
  top:            0;
  left:           0;
  cursor:         pointer;
  border:         none;
  background:     transparent;
  will-change:    transform;
  transform:      translateZ(0);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            7px;
}

.planet-dot {
  width:         var(--psize);
  height:        var(--psize);
  border-radius: 50%;
  background:    radial-gradient(
                   circle at 33% 27%,
                   #ffffff 0%,
                   color-mix(in srgb, var(--pc) 78%, #fff) 16%,
                   var(--pc) 52%,
                   color-mix(in srgb, var(--pc) 60%, #000) 100%
                 );
  box-shadow:    0 0 26px color-mix(in srgb, var(--pc) 60%, transparent);
}

.planet-label {
  font-family:    'JetBrains Mono', monospace;
  font-size:      10px;
  letter-spacing: .5px;
  color:          var(--text);
  background:     color-mix(in srgb, var(--bg) 70%, transparent);
  padding:        2px 7px;
  border-radius:  var(--radius-sm);
}

.planet--3d     { --pc: var(--p1); --psize: 64px; }
.planet--web    { --pc: var(--p2); --psize: 52px; }
.planet--cad    { --pc: var(--p3); --psize: 58px; }
.planet--design { --pc: var(--p4); --psize: 46px; }

.orbit-hint {
  position:       absolute;
  bottom:         0;
  left:           50%;
  transform:      translateX(-50%);
  font-family:    'JetBrains Mono', monospace;
  font-size:      10.5px;
  letter-spacing: 1px;
  color:          var(--dim);
  opacity:        .8;
  white-space:    nowrap;
}


/* ============================================================
   GENERIC SECTION
   ============================================================ */

.section {
  position:  relative;
  z-index:   2;
  max-width: 1280px;
  margin:    0 auto;
  padding:   var(--space-xl) var(--space-lg);
}

.eyebrow {
  font-family:    'JetBrains Mono', monospace;
  font-size:      12px;
  letter-spacing: 2px;
  color:          var(--accent);
  margin-bottom:  10px;
}

.h2 {
  font-family:    'Sora', sans-serif;
  font-weight:    700;
  font-size:      clamp(28px, 4.4vw, 48px);
  letter-spacing: -1.4px;
  line-height:    1.04;
}

.reveal {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity .8s, transform .8s;
}

.reveal.in {
  opacity:   1;
  transform: none;
}

.bullet {
  display:     flex;
  gap:         9px;
  align-items: flex-start;
  font-size:   13.5px;
  color:       var(--dim);
}

.bullet .b {
  margin-top:    6px;
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--accent);
  flex:          none;
}


/* ============================================================
   WORK / CARDS
   ============================================================ */

.work-head {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  flex-wrap:       wrap;
  gap:             var(--space-sm);
  margin-bottom:   34px;
}

.cards-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   18px;
}

.card {
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  background:    color-mix(in srgb, var(--bg2) 55%, transparent);
  transition:    transform var(--t-fast), box-shadow var(--t-fast);
}

.card-media {
  aspect-ratio: 4 / 3;
  position:     relative;
  display:      grid;
  place-items:  center;
  background:   repeating-linear-gradient(
                  45deg,
                  color-mix(in srgb, var(--bg2) 80%, #000),
                  color-mix(in srgb, var(--bg2) 80%, #000) 13px,
                  var(--bg2) 13px,
                  var(--bg2) 26px
                );
}

.card-media .tag {
  font-family:   'JetBrains Mono', monospace;
  font-size:     11px;
  color:         var(--dim);
  position:      relative;
  z-index:       2;
}

.card-media:has(.card-model, .card-img) .tag {
  position:        absolute;
  top:             12px;
  right:           12px;
  padding:         4px 9px;
  border-radius:   6px;
  background:      color-mix(in srgb, var(--bg2) 65%, transparent);
  backdrop-filter: blur(6px);
}

.card-media .cdot {
  position:      absolute;
  top:           12px;
  left:          12px;
  border-radius: 50%;
  z-index:       2;
}

.card-media .card-model {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
}

.card-media .card-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: contain;
}

.card-body {
  padding: 22px 22px 24px;
}

.card-title-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 12px;
}

.card-title-row h3 {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size:   19px;
}

.card-bullets {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}


/* ============================================================
   VALUE
   ============================================================ */

.value-head {
  text-align:    center;
  max-width:     680px;
  margin:        0 auto 44px;
}

.value-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:                   18px;
}

.value-card {
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       30px;
  background:    color-mix(in srgb, var(--bg2) 50%, transparent);
}

.big-num {
  font-family:             'Sora', sans-serif;
  font-weight:             800;
  font-size:               42px;
  background:              var(--grad);
  -webkit-background-clip: text;
  background-clip:         text;
  color:                   transparent;
}

.value-card h3 {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size:   18px;
  margin:      10px 0 12px;
}

.value-card .col {
  display:        flex;
  flex-direction: column;
  gap:            7px;
}


/* ============================================================
   PROCESS
   ============================================================ */

.process-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   18px;
}

@media (max-width: 700px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
  .process-grid { grid-template-columns: 1fr; }
}

.step {
  border-top:  1px solid var(--accent);
  padding-top: 16px;
}

.step .n {
  font-family: 'JetBrains Mono', monospace;
  color:       var(--accent);
  font-size:   13px;
}

.step h3 {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size:   17px;
  margin:      7px 0;
}

.step p {
  font-size:   13.5px;
  color:       var(--dim);
  line-height: 1.5;
}


/* ============================================================
   CTA SECTION
   ============================================================ */

.cta-section {
  position:  relative;
  z-index:   2;
  max-width: 1280px;
  margin:    0 auto;
  padding:   40px var(--space-lg) 110px;
}

.cta-wrap {
  position:      relative;
  overflow:      hidden;
  border:        1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--radius-xl);
  padding:       clamp(44px, 7vw, 88px) 32px;
  text-align:    center;
  background:    radial-gradient(700px 400px at 50% 0%, var(--aurora), transparent 65%),
                 color-mix(in srgb, var(--bg2) 70%, transparent);
}

.cta-orb {
  position:      absolute;
  top:           -90px;
  left:          50%;
  transform:     translate(-50%, 0);
  width:         160px;
  height:        160px;
  border-radius: 50%;
  background:    radial-gradient(circle at 40% 38%, #fff, var(--accent) 55%, transparent 72%);
  filter:        blur(4px);
  opacity:       .9;
}

.cta-wrap h2 {
  font-family:    'Sora', sans-serif;
  font-weight:    800;
  font-size:      clamp(32px, 6vw, 64px);
  letter-spacing: -2px;
  line-height:    1;
  margin-bottom:  18px;
}

.cta-wrap p {
  max-width:     500px;
  margin:        0 auto 34px;
  font-size:     17px;
  color:         var(--dim);
  line-height:   1.6;
}

.cta-btns {
  display:         flex;
  gap:             13px;
  justify-content: center;
  flex-wrap:       wrap;
}

.cta-btns .btn-primary {
  padding:    17px 34px;
  font-size:  17px;
  box-shadow: 0 12px 44px var(--glow);
}

.cta-btns .btn-ghost {
  padding:    17px 30px;
  font-size:  17px;
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             var(--space-sm);
  margin-top:      38px;
  font-family:     'JetBrains Mono', monospace;
  font-size:       12px;
  color:           var(--dim);
  letter-spacing:  1px;
}

.footer .socials {
  display: flex;
  gap:     18px;
}

.footer .socials a {
  color:      var(--dim);
  transition: color var(--t-fast);
}

.footer .socials a:hover { color: var(--text); }


/* ============================================================
   COOKIE BANNER
   ============================================================ */

.cookie-banner {
  display:         none;
  position:        fixed;
  bottom:          24px;
  left:            50%;
  transform:       translateX(-50%);
  width:           min(560px, calc(100vw - 32px));
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  flex-wrap:       wrap;
  padding:         16px 20px;
  background:      var(--bg2);
  border:          1px solid var(--border);
  border-radius:   var(--radius-lg);
  backdrop-filter: blur(12px);
  z-index:         9999;
}

.cookie-banner--show {
  display: flex;
}

.cookie-banner p {
  font-size:   13px;
  color:       var(--dim);
  line-height: 1.5;
  flex:        1;
  min-width:   180px;
}

.cookie-banner p a {
  color:      var(--accent);
  transition: opacity var(--t-fast);
}

.cookie-banner p a:hover { opacity: .75; }

.cookie-btns {
  display: flex;
  gap:     10px;
}

.cookie-btns .btn-primary,
.cookie-btns .btn-ghost {
  padding:   9px 18px;
  font-size: 13px;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes auroraShift {
  0%, 100% { opacity: .5;  transform: translateX(-4%) skewX(-6deg); }
  50%       { opacity: .85; transform: translateX(4%)  skewX(6deg);  }
}

@keyframes ringSpin {
  from { transform: translate(-50%, -50%) rotateX(72deg) rotate(0deg);   }
  to   { transform: translate(-50%, -50%) rotateX(72deg) rotate(360deg); }
}

@keyframes navDrop {
  from { opacity: 0; transform: translateY(-22px); }
  to   { opacity: 1; transform: translateY(0);     }
}

@keyframes navItem {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes baseGlitch {
  0%   { transform: translate(0);     clip-path: inset(0 0 0 0);    }
  25%  { transform: translate(-1px, 0); clip-path: inset(0 0 76% 0); }
  50%  { transform: translate(1px, 0);  clip-path: inset(68% 0 0 0); }
  75%  { transform: translate(-1px, 0); clip-path: inset(40% 0 48% 0); }
  100% { transform: translate(0);     clip-path: inset(0 0 0 0);    }
}

@keyframes ghost1 {
  0%   { transform: translate(-1.5px, 0);    clip-path: inset(0 0 66% 0);  }
  50%  { transform: translate(1.5px, 1px);   clip-path: inset(46% 0 26% 0); }
  100% { transform: translate(-1px, 0);      clip-path: inset(72% 0 0 0);  }
}

@keyframes ghost2 {
  0%   { transform: translate(1.5px, 0);    clip-path: inset(58% 0 0 0);  }
  50%  { transform: translate(-1.5px, -1px); clip-path: inset(14% 0 60% 0); }
  100% { transform: translate(1px, 0);      clip-path: inset(0 0 70% 0);  }
}

@keyframes glitchFlick {
  0%, 100% { opacity: 1;   }
  50%       { opacity: .95; }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1180px) {
  .siderail { display: none; }
}

@media (max-width: 880px) {
  /* --- nav --- */
  .topnav { padding: 12px 16px; }
  .nav-links { display: none; }
  .nav-cta { padding: 9px 16px; font-size: 13px; }

  /* --- hero --- */
  .hero {
    padding:     68px 16px 24px;
    min-height:  100svh;
    align-items: stretch;
  }

  .hero-card {
    grid-template-columns: 1fr;
    gap:         0;
    padding:     0;
    position:    relative;
    min-height:  100%;
  }

  /* orbit as background behind text */
  .orbit-stage {
    position:  absolute;
    inset:     0;
    width:     100%;
    height:    100%;
    transform: none;
    z-index:   0;
    opacity:   0.35;
    overflow:  hidden;
  }

  .hero-content {
    position: relative;
    z-index:  1;
    padding:  24px 4px 32px;
  }

  .name {
    font-size:   clamp(36px, 10vw, 52px);
    letter-spacing: -1.5px;
  }

  .role-row { min-height: 38px; margin-bottom: 16px; }

  .lead {
    font-size:  15px;
    max-width:  100%;
    margin-bottom: 24px;
  }

  .cta-row { gap: 10px; margin-bottom: 24px; }

  .btn-primary, .btn-ghost {
    font-size: 15px;
    padding:   13px 20px;
  }

  .readout {
    flex-wrap: wrap;
    gap:       10px;
  }

  .readout .desc {
    border-left:  none;
    padding-left: 0;
    border-top:   1px solid var(--border);
    padding-top:  10px;
    max-width:    100%;
    width:        100%;
  }

  /* --- sections --- */
  .section { padding: var(--space-lg) 16px; }

  .cards-grid { grid-template-columns: 1fr; }

  .value-grid { grid-template-columns: 1fr; }

  .cta-section { padding: 32px 16px 80px; }

  .cta-wrap { padding: 44px 20px; }

  .footer {
    flex-direction: column;
    align-items:    flex-start;
    gap:            10px;
  }
}

@media (max-width: 480px) {
  .name { font-size: clamp(32px, 9vw, 44px); }

  .cta-row { flex-direction: column; }

  .btn-primary, .btn-ghost { width: 100%; justify-content: center; }
}