/* Physical, 3D look for every component: bevels, thickness, pressable keys, inset fields.
   Pure CSS; works with or without the WebGL world (scene.js). */
:root { --edge: #0a1634; --gold-edge: #9a720c; --lift: 0 18px 30px rgba(8, 18, 48, .28); }

/* buttons: chunky keys that press down */
.btn { position: relative; background: linear-gradient(180deg, #ffd978 0%, var(--gold) 55%, #c18f12 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), 0 6px 0 var(--gold-edge), 0 14px 22px rgba(0, 0, 0, .32);
  transition: transform .12s, box-shadow .12s, filter .2s; }
.btn:hover { transform: translateY(-3px); filter: brightness(1.05);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .65), 0 9px 0 var(--gold-edge), 0 20px 28px rgba(0, 0, 0, .34); }
.btn:active { transform: translateY(5px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 var(--gold-edge), 0 4px 8px rgba(0, 0, 0, .3); }
.btn-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 0 rgba(255, 255, 255, .22), 0 14px 22px rgba(0, 0, 0, .3); backdrop-filter: blur(6px); }
.btn-ghost:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 9px 0 rgba(255, 255, 255, .25), 0 20px 28px rgba(0, 0, 0, .34); }
.btn-ghost:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 0 rgba(255, 255, 255, .2), 0 4px 8px rgba(0, 0, 0, .3); }

/* header, brand and menu */
.site-header { box-shadow: 0 10px 30px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(255, 255, 255, .1); }
.brand-mark, .brand-logo { background: radial-gradient(circle at 32% 28%, #3a5cb0, var(--navy) 60%, var(--navy-dark));
  box-shadow: inset -4px -6px 10px rgba(0, 0, 0, .4), inset 3px 3px 6px rgba(255, 255, 255, .25), 0 6px 12px rgba(0, 0, 0, .35); }
.nav a { padding: 7px 14px; border-radius: 999px; transition: transform .15s, box-shadow .15s, background .15s; }
.nav a:hover { transform: translateY(-2px) translateZ(0); background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px rgba(0, 0, 0, .28); }
.nav a:active { transform: translateY(1px); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .35); }

/* slabs: stat tiles, cards, steps all get thickness and a lit top edge */
.card, .stats > div, .steps li, .form, .notice {
  border: 0; border-radius: 16px;
  background: linear-gradient(160deg, #ffffff 0%, #eef2fb 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(18, 40, 90, .06),
    1px 1px 0 #cfd7ea, 2px 2px 0 #c6cfe4, 3px 3px 0 #bdc7de, 4px 4px 0 #b4bfd8,
    6px 14px 26px rgba(8, 18, 48, .24);
  transform-style: preserve-3d; }
.card h3, .stats b, .steps li::before { transform: translateZ(22px); }
.card { transition: transform .18s ease-out, box-shadow .25s; }
.fx-tilt.tilting > * { transform: translateZ(26px); transition: transform .2s; }
.fx-tilt.tilting { box-shadow: inset 0 1px 0 #fff, 1px 1px 0 #cfd7ea, 2px 2px 0 #c6cfe4, 3px 3px 0 #bdc7de, 4px 4px 0 #b4bfd8,
    10px 26px 40px rgba(8, 18, 48, .34); }
.stats b { filter: drop-shadow(0 3px 3px rgba(18, 40, 90, .28)); }

/* step numbers: glossy spheres */
.steps li::before { width: 40px; height: 40px; background: radial-gradient(circle at 32% 28%, #5b7fd6, var(--navy) 55%, var(--navy-dark));
  box-shadow: inset -5px -7px 12px rgba(0, 0, 0, .45), inset 3px 3px 6px rgba(255, 255, 255, .3), 0 8px 14px rgba(8, 18, 48, .4); }

/* tabs and pager: keycaps */
.tabs button, .pager a { border: 0; background: linear-gradient(180deg, #fff, #e6ebf7); color: var(--navy); font-weight: 600;
  box-shadow: inset 0 1px 0 #fff, 0 4px 0 #b7c2dc, 0 10px 14px rgba(8, 18, 48, .2); transition: transform .12s, box-shadow .12s; }
.tabs button:hover, .pager a:hover { transform: translateY(-2px); }
.tabs button:active, .pager a:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #b7c2dc, 0 3px 6px rgba(8, 18, 48, .2); }
.tabs button[aria-selected="true"] { background: linear-gradient(180deg, #2d4f9f, var(--navy) 60%, var(--navy-dark)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 var(--edge), 0 5px 8px rgba(8, 18, 48, .3); transform: translateY(2px); }

/* pictures: framed and floating */
.card-img, .thumbs img, .cover, .video-frame { border: 5px solid #fff; border-radius: 12px;
  box-shadow: 0 2px 0 #cfd7ea, 0 14px 24px rgba(8, 18, 48, .3); transition: transform .3s, box-shadow .3s; }
.card-img:hover, .thumbs img:hover, .cover:hover { transform: perspective(700px) rotateX(3deg) rotateY(-4deg) translateZ(14px) scale(1.03);
  box-shadow: 0 2px 0 #cfd7ea, 0 30px 40px rgba(8, 18, 48, .38); }

/* forms: raised panel, sunken fields */
.form { padding: 28px; }
.form input, .form textarea { border: 0; border-radius: 10px; background: #e9eef9;
  box-shadow: inset 3px 3px 7px rgba(18, 40, 90, .22), inset -3px -3px 7px rgba(255, 255, 255, .9); transition: box-shadow .2s; }
.form input:focus, .form textarea:focus { background: #fff; box-shadow: inset 2px 2px 5px rgba(18, 40, 90, .18), 0 0 0 3px rgba(217, 165, 33, .6); }
.details dt { display: inline-block; justify-self: start; padding: 2px 12px; border-radius: 999px; background: linear-gradient(180deg, #fff, #e6ebf7);
  box-shadow: 0 3px 0 #b7c2dc, 0 6px 10px rgba(8, 18, 48, .15); }
.notice-ok { background: linear-gradient(160deg, #f1fbf4, #d9f0df); }
.notice-error { background: linear-gradient(160deg, #fff3f1, #fadad6); }

/* footer: a lit ledge */
.site-footer { box-shadow: 0 -12px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .15); }
.tbc { box-shadow: 0 2px 0 #e6cf7a; }

/* ---- components float in the 3D space ---- */
/* the glass panels keep a real 3D context (no backdrop blur) so their children can sit at different depths */
.gl main .section > .wrap { backdrop-filter: none; -webkit-backdrop-filter: none;
  transform: rotateX(var(--px, 0deg)) rotateY(calc(var(--mx, 0) * 5deg)) translateZ(var(--pz, 0px)); }
.gl .stats { transform-style: preserve-3d; }
.gl .grid, .gl .cards-3, .gl .steps, .gl .thumbs, .gl .videos, .gl .actions, .gl .two-col { transform-style: preserve-3d; }

.card, .stats > div, .steps li, .thumbs li, .video, .form, .hero .btn, .details { animation: fx-float 7s ease-in-out infinite; }
.stats > div { --z: 46px; } .card { --z: 34px; } .steps li { --z: 40px; } .thumbs li, .video { --z: 28px; }
.form { --z: 22px; } .details { --z: 18px; } .hero .btn { --z: 60px; }
@keyframes fx-float {
  0%, 100% { translate: 0 0 var(--z, 24px); rotate: 1 .4 0 -1.2deg; }
  50% { translate: 0 -11px calc(var(--z, 24px) + 22px); rotate: -.3 1 0 1.6deg; }
}
:is(.card, .stats > div, .steps li, .thumbs li, .video):nth-child(4n+2) { animation-duration: 8.5s; animation-delay: -2.1s; }
:is(.card, .stats > div, .steps li, .thumbs li, .video):nth-child(4n+3) { animation-duration: 6.4s; animation-delay: -4.2s; }
:is(.card, .stats > div, .steps li, .thumbs li, .video):nth-child(4n) { animation-duration: 9.3s; animation-delay: -5.6s; }
.hero .btn + .btn { animation-delay: -3s; }
.fx-tilt.tilting { animation-play-state: paused; }
/* with the WebGL world running, scene.js drives this motion from the same clock as the background */
.gl :is(.card, .stats > div, .steps li, .thumbs li, .video, .form, .hero .btn, .details) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .float, .hero .btn { animation: none; translate: none; rotate: none; }
  .btn, .btn:hover, .nav a:hover, .tabs button:hover, .pager a:hover, .card-img:hover, .thumbs img:hover, .cover:hover { transform: none; }
}