/* ==========================================================================
   CIPHER GROUP - MAIN STYLESHEET
   A cybersecurity-themed website with dark aesthetics and smooth animations
   ========================================================================== */

/* ==========================================================================
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   1. IMPORTS & FONTS
   2. CSS CUSTOM PROPERTIES (Variables)
   3. RESET & BASE STYLES
   4. LAYOUT - Page Shell & Scroll Container
   5. SCROLL INDICATOR
   6. HEADER & NAVIGATION
   7. MENU PANEL (Slide-out)
   8. PANELS - Base Styles
   9. HERO SECTION
   10. STATISTICS PANELS
   11. SERVICES SECTION
   12. VALUES SECTION
   13. ABOUT SECTION
   14. CONTACT FORM
   15. FOOTER
   16. PAGE LOADER
   17. BUTTONS & LINKS
   18. ANIMATIONS & KEYFRAMES
   19. MEDIA QUERIES - Responsive Breakpoints
   20. ACCESSIBILITY - Reduced Motion
   ========================================================================== */


/* ==========================================================================
   1. IMPORTS & FONTS
   --------------------------------------------------------------------------
   External fonts: JetBrains Mono (monospace/code aesthetic)
   Custom fonts: NB International Pro (elegant body text)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400&display=swap");

@font-face {
  font-display: swap;
  font-family: "NB International Pro";
  font-style: normal;
  font-weight: 400;
  src:
    url("../fonts/NBInternationalPro-Regular.woff2") format("woff2"),
    url("../fonts/NBInternationalPro-Regular.woff") format("woff");
}


/* ==========================================================================
   2. CSS CUSTOM PROPERTIES (Variables)
   --------------------------------------------------------------------------
   Color palette: Dark theme with cyan accents
   Typography: Monospace-first for tech aesthetic
   Animation: Custom easing curves for smooth transitions
   ========================================================================== */

:root {
  /* Primary Colors */
  --color-creme: #E4ECF7;        /* Light text / backgrounds */
  --color-grey: #8EA1BD;         /* Muted text / secondary */
  --color-black: #0B1020;        /* Primary dark background */
  --color-yellow: #4CC9FF;       /* Accent color (cyan) */
  --color-yellow-2: #034090;     /* Secondary accent (dark blue) */
  --color-blue: #2F6BFF;         /* Additional accent */

  /* Panel Styling */
  --panel-bg: rgba(12, 20, 38, 0.72);
  --panel-border: rgba(228, 236, 247, 0.12);

  /* Background Parallax Variables (controlled by JS) */
  --bg-x: -18%;
  --bg-y: -12%;
  --bg-scale: 1.4;

  /* Scroll Progress (controlled by JS) */
  --scroll-progress: 0;

  /* Animation Easings */
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Menu Dimensions */
  --menu-width: 33.333vw;
}


/* ==========================================================================
   3. RESET & BASE STYLES
   --------------------------------------------------------------------------
   Box-sizing reset, base typography, and fundamental element styles
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-black);
  color: var(--color-creme);
  font-family: "Courier New", monospace;
  overflow: hidden;
}

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


/* ==========================================================================
   4. LAYOUT - Page Shell & Scroll Container
   --------------------------------------------------------------------------
   Main scrollable container with snap scrolling behavior
   Background layer with parallax effect
   ========================================================================== */

/* Parallax Background Layer
   - Fixed positioning for parallax effect
   - Transform controlled by CSS variables (updated via JS)
   - Overlay gradient for text readability */
.bg-layer {
  position: fixed;
  inset: -30%;
  z-index: 0;
  background-image:
    linear-gradient(130deg, rgba(11, 16, 32, 0.85), rgba(11, 16, 32, 0.45)),
    url("../img/satellite_8k_1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate3d(var(--bg-x), var(--bg-y), 0) scale(var(--bg-scale));
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
}

/* Main Page Container
   - Scroll snap for panel-based navigation
   - Hides scrollbar while maintaining functionality */
.page-shell {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior: none;
  scrollbar-width: none;
  z-index: auto;
  transition: width 0.5s var(--ease-in-out);
}

.page-shell::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Free scroll mode (when past snap sections) */
.page-shell.is-free {
  scroll-snap-type: none;
}

/* Base page container */
.page {
  min-height: 100vh;
  display: block;
}


/* ==========================================================================
   5. SCROLL INDICATOR
   --------------------------------------------------------------------------
   Vertical progress bar showing scroll position
   Features corner brackets for tech aesthetic
   ========================================================================== */

.scroll-indicator {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: min(48vh, 280px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 7;
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.3s var(--ease-out);
}

/* Position adjustment when in free scroll mode */
.page-shell.is-free .scroll-indicator {
  position: absolute;
  top: calc(var(--snap-end, 0) * 1px + 50vh);
}

/* Track and fill bar styles */
.scroll-track,
.scroll-fill {
  position: absolute;
  width: 1px;
  height: 100%;
  border-radius: 999px;
}

.scroll-track {
  background: rgba(228, 236, 247, 0.25);
}

.scroll-fill {
  background: var(--color-yellow);
  transform-origin: top;
  transform: scaleY(var(--scroll-progress));
  transition: transform 0.25s var(--ease-out);
  box-shadow: 0 0 12px rgba(76, 201, 255, 0.55);
}

/* Corner Brackets - Tech aesthetic detail */
.scroll-bracket {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0 solid rgba(228, 236, 247, 0.6);
}

.bracket-tl { top: -10px; left: -10px; border-top-width: 1px; border-left-width: 1px; }
.bracket-tr { top: -10px; right: -10px; border-top-width: 1px; border-right-width: 1px; }
.bracket-bl { bottom: -10px; left: -10px; border-bottom-width: 1px; border-left-width: 1px; }
.bracket-br { bottom: -10px; right: -10px; border-bottom-width: 1px; border-right-width: 1px; }


/* ==========================================================================
   6. HEADER & NAVIGATION
   --------------------------------------------------------------------------
   Fixed header with brand logo and menu toggle
   Supports light/dark theme switching based on scroll position
   ========================================================================== */

.site-header {
  --header-color: var(--color-creme);
  position: fixed;
  top: 24px;
  left: 24px;
  right: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Dark theme variant (when over light sections) */
.site-header.is-dark {
  --header-color: var(--color-black);
}

/* Brand Logo */
.brand {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--header-color);
  transition: color 0.25s linear;
}

/* Menu Toggle Button */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  color: var(--header-color);
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.25s linear;
}

/* Menu label toggle states */
.menu-label-close { display: none; }
body.menu-open .menu-label-open { display: none; }
body.menu-open .menu-label-close { display: inline; }

/* Animated cross icon */
.menu-cross {
  width: 1.2rem;
  height: 1.2rem;
  transform-origin: center;
  transition: transform 0.25s linear;
}

body.menu-open .menu-cross {
  transform: rotate(45deg);
}


/* ==========================================================================
   7. MENU PANEL (Slide-out)
   --------------------------------------------------------------------------
   Full-height slide-out navigation panel
   Includes overlay backdrop and navigation links
   ========================================================================== */

/* Overlay backdrop (darkens content when menu is open) */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(6, 10, 24, 0.6);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.35s var(--ease-out),
    right 0.5s var(--ease-in-out);
  z-index: 8;
}

/* Menu Panel Container */
.menu-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--menu-width);
  background: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(1.2rem, 6vw, 6rem);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-in-out);
  user-select: none;
  z-index: 9;
}

.menu-inner {
  width: 100%;
  position: relative;
}

/* Navigation List */
.menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-item {
  margin: 0.6rem 0;
  overflow: hidden;
}

/* Navigation Links */
.menu-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: "Georgia", serif;
  font-size: clamp(1.8rem, 3.2vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
  transition: color 0.25s linear;
}

/* Blinking indicator dot */
.menu-link::before {
  content: "";
  position: absolute;
  left: -3rem;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--color-yellow);
  opacity: 0;
}

.menu-link:hover {
  color: var(--color-yellow);
}

.menu-link:hover::before {
  opacity: 1;
  animation: flash 1s step-start 0s infinite;
}

/* Menu metadata (bottom info) */
.menu-meta {
  position: absolute;
  bottom: -6rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-grey);
}

/* Menu Open States */
body.menu-open .menu-overlay {
  opacity: 1;
  pointer-events: auto;
  right: var(--menu-width);
}

body.menu-open .menu-panel {
  transform: translateX(0);
}

body.menu-open .page-shell {
  width: calc(100% - var(--menu-width));
}


/* ==========================================================================
   8. PANELS - Base Styles
   --------------------------------------------------------------------------
   Full-height sections with scroll snap behavior
   Content containers with glassmorphism effect
   ========================================================================== */

.panel {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: clamp(7rem, 10vw, 10rem) clamp(2rem, 8vw, 8rem);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Panel Content Box - Glassmorphism style */
.panel-content {
  max-width: 720px;
  padding: clamp(2rem, 5vw, 3rem);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: 0 24px 60px rgba(6, 10, 24, 0.55);
  backdrop-filter: blur(6px);
}

/* Panel typography */
.panel h2 {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.panel-body {
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-creme);
}

/* Eyebrow text (small label above titles) */
.eyebrow {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-grey);
}

/* White/Light panel variant */
.panel-white {
  background: #0F172A;
  color: var(--color-creme);
}

.panel-white .panel-content {
  max-width: 1000px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.panel-white-content {
  display: grid;
  justify-items: center;
}

.panel-white-title {
  margin: 0;
  font-family: "Georgia", serif;
  font-size: clamp(3rem, 10vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--color-creme);
}


/* ==========================================================================
   9. HERO SECTION
   --------------------------------------------------------------------------
   Landing section with animated title reveal
   Features staggered text animation on page load
   ========================================================================== */

.panel-hero {
  align-items: end;
  justify-items: start;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 8vw, 6rem);
  position: relative;
}

.panel-hero .panel-content {
  margin: 0;
  text-align: left;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  max-width: 880px;
  justify-self: start;
}

/* Hero Layout */
.hero {
  text-align: left;
  display: grid;
  gap: 1.6rem;
  align-items: start;
}

.hero-kicker {
  font-family: "JetBrains Mono", "Courier New", monospace;
  letter-spacing: 0.22em;
}

.hero h1 {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Large Hero Title */
.hero-title {
  margin: 0;
  font-family: "Georgia", serif;
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
}

/* Animated Line Reveal */
.hero-line {
  display: block;
  overflow: hidden;
}

.line-inner {
  display: inline-block;
  transform: translateY(130%);
  opacity: 0;
}

/* CTA Button Container */
.hero-cta {
  width: fit-content;
  overflow: hidden;
}

.hero-cta-text {
  display: inline-block;
  transform: none;
  opacity: 1;
}

/* Animation trigger when page is ready */
body.page-ready .hero-line .line-inner {
  animation: hero-rise 0.85s var(--ease-out) forwards;
  animation-delay: var(--line-delay, 0s);
}

body.page-ready .hero-cta-text {
  animation: none;
}


/* ==========================================================================
   10. STATISTICS PANELS
   --------------------------------------------------------------------------
   Panels displaying key cybersecurity statistics
   Features alternating left/right alignment and vertical positioning
   ========================================================================== */

.panel-stat .panel-content {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  max-width: 960px;
  transform: translateY(var(--panel-shift, 0));
}

/* Horizontal alignment variants */
.panel-stat.is-left .panel-content {
  justify-self: start;
  text-align: left;
}

.panel-stat.is-right .panel-content {
  justify-self: end;
  text-align: right;
}

/* Vertical positioning variants */
.panel-stat.is-high .panel-content { --panel-shift: -3rem; }
.panel-stat.is-mid .panel-content { --panel-shift: 0.75rem; }
.panel-stat.is-low .panel-content { --panel-shift: 2.75rem; }

/* Stat panel typography */
.panel-stat .eyebrow {
  font-family: "JetBrains Mono", "Courier New", monospace;
  letter-spacing: 0.22em;
}

.panel.panel-stat h2 {
  margin: 0;
  font-family: "Georgia", serif;
  font-size: clamp(2.1rem, 6vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
}

.panel-stat .panel-body {
  margin: 1.4rem 0 0;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  line-height: 1.55;
}

/* Stat title with blinking indicator */
.panel-stat .title {
  align-items: center;
  color: var(--color-yellow);
  display: flex;
  margin: 0 0 0.8rem;
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 300;
  line-height: 1.3;
  text-transform: uppercase;
}

.panel-stat .title::before {
  animation: flash 1s step-start 0s infinite;
  background: currentcolor;
  display: block;
  height: 0.3rem;
  margin-right: 0.8rem;
  width: 0.3rem;
}

.panel-stat .title.is-blinker::before {
  content: "";
}

/* Stat body text */
.panel-stat .text {
  font-kerning: none;
  margin: 0;
  text-wrap: auto;
  font-family: "NB International Pro", "Courier New", monospace;
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  font-weight: 400;
  line-height: 1.5;
}


/* ==========================================================================
   11. SERVICES SECTION
   --------------------------------------------------------------------------
   Grid layout showcasing cybersecurity service offerings
   Card-based design with glassmorphism effect
   ========================================================================== */

.panel-services .panel-content.services {
  max-width: 1100px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  display: grid;
  gap: 1.6rem;
}

.services-title {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.services-intro {
  margin: 0;
  max-width: 720px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(228, 236, 247, 0.78);
}

/* Services Grid - 2 column layout */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem);
}

/* Service Card */
.service-card {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: 0 24px 60px rgba(6, 10, 24, 0.55);
  backdrop-filter: blur(6px);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  gap: 1rem;
  min-height: 240px;
}

.service-title {
  margin: 0;
  font-family: "Georgia", serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.service-desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(228, 236, 247, 0.86);
}

.service-link {
  margin-top: auto;
}


/* ==========================================================================
   12. VALUES SECTION
   --------------------------------------------------------------------------
   Alternating content blocks with image placeholders
   Features parallax effect and decorative corner brackets
   ========================================================================== */

/* Values Section - Inversa-style layout */
.values {
  --values-bg: #15181F;
  --values-text: var(--color-grey);
  background: var(--values-bg);
  padding: 0 1.6rem 8rem;
}

/* Section heading - large left-aligned */
.values .heading {
  font-family: var(--font-secondary);
  font-size: clamp(4rem, 10vw, 6.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-align: left;
  max-width: 67rem;
  margin: 0;
  padding: 14.5rem 0 7.5rem;
}

.values .heading .line-mask {
  display: block;
  overflow: hidden;
}

.values .heading .line {
  display: block;
}

/* Blocks container - vertical stack */
.values .blocks {
  display: flex;
  flex-direction: column;
}

/* Individual block - horizontal layout with alternating direction */
.values .block {
  display: flex;
  align-items: flex-start;
  margin-bottom: 11.5rem;
}

.values .block:last-child {
  margin-bottom: 0;
}

/* Odd blocks: content left, asset right */
.values .block:nth-child(odd) {
  flex-direction: row;
}

.values .block:nth-child(odd) .content {
  margin-right: 13.2rem;
}

.values .block:nth-child(odd) .asset {
  margin-left: auto;
}

/* Even blocks: asset left, content right */
.values .block:nth-child(even) {
  flex-direction: row-reverse;
}

.values .block:nth-child(even) .content {
  margin-left: 13.2rem;
}

.values .block:nth-child(even) .asset {
  margin-right: auto;
}

/* Content area */
.values .content {
  width: 38rem;
  flex-shrink: 0;
  padding-top: 4rem;
}

/* Service title - uppercase, light weight */
.values .content > .title {
  font-family: var(--font-secondary);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  color: var(--values-text);
}

/* Description text */
.values .content .text {
  font-family: var(--font-secondary);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--values-text);
  opacity: 0.8;
  margin-bottom: 2.3rem;
}

/* Button styling */
.values .content .base-button {
  margin-top: 2.3rem;
}

/* Disable blinker animation in values section */
.values .content > .title.is-blinker::before {
  display: none;
}

/* Image Asset Container with SVG mask shapes */
.values .asset {
  aspect-ratio: 776 / 830;
  background: rgba(12, 20, 38, 0.95);
  width: 77.6rem;
  max-width: 55vw;
  height: auto;
  min-height: 50rem;
  overflow: hidden;
  position: relative;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
  flex-shrink: 0;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Shape 1: Left step with diagonal bottom-left pointer */
.values .block:nth-child(1) .asset {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 776 830'%3E%3Cpath d='M74 0H776V742H584L390 830H0V351L71 274V0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 776 830'%3E%3Cpath d='M74 0H776V742H584L390 830H0V351L71 274V0Z'/%3E%3C/svg%3E");
}

/* Shape 2: Diagonal top-left, step bottom-right */
.values .block:nth-child(2) .asset {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 776 830'%3E%3Cpath d='M0 67L283 67L393 0H776V616L666 738L586 830H0V67Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 776 830'%3E%3Cpath d='M0 67L283 67L393 0H776V616L666 738L586 830H0V67Z'/%3E%3C/svg%3E");
}

/* Shape 3: Right step with diagonal bottom-right pointer */
.values .block:nth-child(3) .asset {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 776 830'%3E%3Cpath d='M701 0H0V741H186L386 830H776V346L704 268V0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 776 830'%3E%3Cpath d='M701 0H0V741H186L386 830H776V346L704 268V0Z'/%3E%3C/svg%3E");
}

/* Shape 4: Diagonal top-right, step bottom-left */
.values .block:nth-child(4) .asset {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 776 830'%3E%3Cpath d='M776 67L493 67L383 0H0V616L110 738L190 830H776V67Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 776 830'%3E%3Cpath d='M776 67L493 67L383 0H0V616L110 738L190 830H776V67Z'/%3E%3C/svg%3E");
}

/* Placeholder text for missing images */
.values .asset::after {
  color: rgba(228, 236, 247, 0.4);
  content: "IMAGE PLACEHOLDER";
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: clamp(0.65rem, 1.2vw, 0.9rem);
  letter-spacing: 0.35em;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-transform: uppercase;
  z-index: 1;
}

/* Hide placeholder for terminal */
.values .asset:has(#terminal-bg)::after {
  display: none;
}

/* Terminal-style grid background */
.values .terminal-bg {
  background:
    linear-gradient(135deg, rgba(76, 201, 255, 0.18), rgba(235, 252, 114, 0.1)),
    repeating-linear-gradient(90deg, rgba(228, 236, 247, 0.08) 0, rgba(228, 236, 247, 0.08) 1px, transparent 1px, transparent 12px),
    repeating-linear-gradient(0deg, rgba(228, 236, 247, 0.06) 0, rgba(228, 236, 247, 0.06) 1px, transparent 1px, transparent 12px);
  inset: 0;
  position: absolute;
}

/* Terminal window container */
.terminal-window {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #1a1b26;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 5;
}

/* Terminal header bar */
.terminal-header {
  display: flex;
  align-items: center;
  padding: clamp(0.4rem, 1vw, 0.8rem) clamp(0.6rem, 1.5vw, 1.2rem);
  background: #282a36;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  min-height: clamp(24px, 4vw, 40px);
}

.terminal-buttons {
  display: flex;
  gap: clamp(0.3rem, 0.6vw, 0.6rem);
}

.terminal-btn {
  width: clamp(8px, 1.2vw, 14px);
  height: clamp(8px, 1.2vw, 14px);
  border-radius: 50%;
}

.terminal-btn.close {
  background: #ff5f56;
}

.terminal-btn.minimize {
  background: #ffbd2e;
}

.terminal-btn.maximize {
  background: #27c93f;
}

.terminal-title {
  flex: 1;
  text-align: center;
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: clamp(0.55rem, 1vw, 0.8rem);
  color: rgba(255, 255, 255, 0.6);
  margin-right: 2.5rem;
}

/* Terminal typing effect */
#terminal-bg {
  flex: 1;
  padding: clamp(0.5rem, 2vw, 1.5rem);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: clamp(0.5rem, 1.2vw, 1rem);
  line-height: 1.5;
  color: rgba(228, 236, 247, 0.9);
  background: #1a1b26;
}

#terminal-bg::-webkit-scrollbar {
  display: none;
}

#terminal-bg .line {
  white-space: nowrap;
  overflow: hidden;
}

#terminal-bg .prompt {
  color: #27c93f;
  font-weight: 400;
}

#terminal-bg .path {
  color: #6196ff;
}

#terminal-bg .command {
  color: #fff;
}

#terminal-bg .output {
  color: rgba(228, 236, 247, 0.6);
}

#terminal-bg .cursor {
  animation: blink 1s step-start infinite;
  color: var(--color-yellow);
}

.values .asset img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
  z-index: 2;
}


/* ==========================================================================
   13. ABOUT SECTION
   --------------------------------------------------------------------------
   Light-themed about section (content hidden by default)
   ========================================================================== */

.about {
  background: var(--color-creme);
  min-height: 100vh;
  min-height: 100svh;
}

.about .about-content {
  display: none;
}


/* ==========================================================================
   14. CONTACT FORM
   --------------------------------------------------------------------------
   Inversa-styled contact form with custom inputs
   Features corner bracket decorations
   ========================================================================== */

.contact-inversa {
  --contact-color-creme: #f4f3e8;
  --contact-color-grey-2: #404040;
  --contact-color-yellow: #ebfc72;
  --contact-color-black: #13140e;
  --contact-font-primary: "JetBrains Mono", "Courier New", monospace;
  --contact-font-secondary: "NB International Pro", "Georgia", serif;
  --contact-font-size: calc((100vw / 1600) * 10);
  color: var(--contact-color-creme);
  font-family: var(--contact-font-primary);
  font-size: var(--contact-font-size);
}

.contact-inversa .container {
  margin: 0 auto;
  padding: 20svh 0;
  width: 85em;
}

.contact-inversa .heading {
  font-family: var(--contact-font-secondary);
  font-size: 8em;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.9;
  margin: 0 auto 4em;
  text-align: center;
}

/* Content box with corner brackets */
.contact-inversa .content {
  border: 1px solid var(--contact-color-grey-2);
  height: 50em;
  position: relative;
}

.contact-inversa .content::before {
  background:
    linear-gradient(90deg, currentcolor 1px, transparent 0) 0 0,
    linear-gradient(90deg, currentcolor 1px, transparent 0) 0 100%,
    linear-gradient(270deg, currentcolor 1px, transparent 0) 100% 0,
    linear-gradient(270deg, currentcolor 1px, transparent 0) 100% 100%,
    linear-gradient(180deg, currentcolor 1px, transparent 0) 0 0,
    linear-gradient(180deg, currentcolor 1px, transparent 0) 100% 0,
    linear-gradient(0deg, currentcolor 1px, transparent 0) 0 100%,
    linear-gradient(0deg, currentcolor 1px, transparent 0) 100% 100%;
  background-repeat: no-repeat;
  background-size: 0.6em 0.6em;
  content: "";
  inset: -1px;
  pointer-events: none;
  position: absolute;
}

/* Form Layout */
.contact-inversa .form {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 4em 0;
}

.contact-inversa .label {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.6em;
}

/* Form Inputs */
.contact-inversa .input,
.contact-inversa .textarea {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font-family: var(--contact-font-secondary);
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.6;
  resize: none;
  width: 41.2em;
}

.contact-inversa .input:focus,
.contact-inversa .textarea:focus {
  outline: none;
}

.contact-inversa .input::placeholder,
.contact-inversa .textarea::placeholder {
  color: color-mix(in srgb, var(--contact-color-creme) 50%, transparent);
  font-family: var(--contact-font-primary);
  font-size: 1.2em;
  font-weight: 300;
  text-transform: uppercase;
}

.contact-inversa .input {
  border-bottom: 1px solid color-mix(in srgb, var(--contact-color-creme) 20%, transparent);
  padding-bottom: 1em;
}

.contact-inversa .textarea {
  border: 1px solid color-mix(in srgb, var(--contact-color-creme) 20%, transparent);
  height: 16em;
  padding: 1em;
}

/* Submit Button */
.contact-inversa .submit {
  align-items: center;
  background: var(--contact-color-yellow);
  border: 0;
  border-radius: 0.4em;
  color: var(--contact-color-black);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--contact-font-primary);
  font-size: 1.4em;
  font-weight: 300;
  height: 4.5em;
  justify-content: center;
  padding: 0 2em;
  text-transform: uppercase;
}

.contact-inversa .hidden {
  display: none;
}


/* ==========================================================================
   15. FOOTER
   --------------------------------------------------------------------------
   Inversa-styled footer with multi-column layout
   Features large logo, navigation links, and newsletter signup
   ========================================================================== */

.footer-inversa {
  --footer-color-creme: #f4f3e8;
  --footer-color-grey-2: #404040;
  --footer-color-yellow: #ebfc72;
  --footer-color-black: #13140e;
  --footer-font-primary: "JetBrains Mono", "Courier New", monospace;
  --footer-font-secondary: "NB International Pro", "Georgia", serif;
  --footer-font-size: calc((100vw / 1600) * 10);
  --footer-inline-padding: 1.6em;
  --footer-logo-inset: clamp(6px, 1.2vw, 18px);
  background-color: #15181f;
  border: none;
  color: var(--footer-color-creme);
  display: flex;
  font-family: var(--footer-font-primary);
  font-size: var(--footer-font-size);
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  padding-inline: 0;
  padding-top: 1.6em;
}

.footer-inversa::before {
  content: none;
}

/* Footer Rows */
.footer-inversa .row:first-child,
.footer-inversa .row:nth-child(2) {
  border: 1px solid var(--footer-color-grey-2);
  border-top: none;
}

.footer-inversa .row:first-child {
  border-top: 1px solid var(--footer-color-grey-2);
}

.footer-inversa .row:nth-child(2) {
  align-items: center;
  display: flex;
  flex: 1;
  overflow: hidden;
  padding-inline: 0;
  padding-block: clamp(2.2em, 4vw, 3.2em);
}

.footer-inversa .row:nth-child(3) {
  justify-content: space-between;
  margin: 1.6em 0;
  padding-inline: var(--footer-inline-padding);
}

/* Footer Columns with corner brackets */
.footer-inversa .column {
  position: relative;
  flex: 1;
  padding: 4.2em;
}

.footer-inversa .column::before {
  background:
    linear-gradient(90deg, currentcolor 1px, transparent 0) 0 0,
    linear-gradient(90deg, currentcolor 1px, transparent 0) 0 100%,
    linear-gradient(270deg, currentcolor 1px, transparent 0) 100% 0,
    linear-gradient(270deg, currentcolor 1px, transparent 0) 100% 100%,
    linear-gradient(180deg, currentcolor 1px, transparent 0) 0 0,
    linear-gradient(180deg, currentcolor 1px, transparent 0) 100% 0,
    linear-gradient(0deg, currentcolor 1px, transparent 0) 0 100%,
    linear-gradient(0deg, currentcolor 1px, transparent 0) 100% 100%;
  background-repeat: no-repeat;
  background-size: 0.6em 0.6em;
  content: "";
  inset: -1px;
  position: absolute;
}

.footer-inversa .column:not(:first-child) {
  border-left: 1px solid var(--footer-color-grey-2);
}

/* Footer Titles with blinking indicator */
.footer-inversa .title {
  align-items: center;
  display: flex;
  margin-bottom: 3.6em;
  font-family: var(--footer-font-primary);
  font-size: 2em;
  font-weight: 300;
  line-height: 1.25;
  text-transform: uppercase;
}

.footer-inversa .title::before {
  animation: flash 1s step-start 0s infinite;
  background: currentcolor;
  display: block;
  height: 0.4em;
  margin-right: 1.2em;
  width: 0.4em;
}

.footer-inversa .title.is-blinker::before {
  content: "";
}

/* Footer Links */
.footer-inversa .links,
.footer-inversa .legal {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-inversa .item {
  margin: 0;
}

.footer-inversa .link {
  font-family: var(--footer-font-secondary);
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.62;
  position: relative;
}

/* Animated underline on hover */
.footer-inversa .link::after {
  background: currentcolor;
  color: var(--footer-color-yellow);
  content: "";
  height: 1px;
  inset: auto auto 0 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s cubic-bezier(1, 0, 0, 1);
  width: 100%;
  will-change: transform;
}

@media (hover: hover) {
  .footer-inversa .link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* Sublinks */
.footer-inversa .sublink {
  display: flex;
  font-family: var(--footer-font-secondary);
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1.25;
  position: relative;
}

.footer-inversa .sublink::after {
  background: currentcolor;
  color: var(--footer-color-yellow);
  content: "";
  height: 1px;
  inset: auto auto 0 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s cubic-bezier(1, 0, 0, 1);
  width: 100%;
  will-change: transform;
}

@media (hover: hover) {
  .footer-inversa .sublink:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* Leathers section */
.footer-inversa .leathers {
  display: inline-flex;
  margin-top: 6.2em;
}

.footer-inversa .leathers .sublink {
  flex-direction: column;
}

.footer-inversa .leathers .sublink::after {
  width: 7em;
}

.footer-inversa .more {
  display: flex;
  margin-top: 1em;
}

/* Large Footer Logo */
.footer-inversa .logo {
  align-items: center;
  color: var(--footer-color-yellow);
  display: flex;
  font-family: var(--footer-font-secondary);
  font-size: var(--footer-logo-size, clamp(4.8em, 11vw, 22em));
  font-weight: 400;
  gap: 0;
  justify-content: space-between;
  letter-spacing: -0.02em;
  line-height: 1;
  padding-inline: var(--footer-logo-inset);
  text-transform: uppercase;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  width: 100%;
  will-change: transform;
}

.footer-inversa .logo span {
  display: block;
}

/* Legal Links */
.footer-inversa .legal {
  display: flex;
  gap: 3.2em;
}

.footer-inversa .link-svg {
  color: var(--footer-color-yellow);
  height: 0.7em;
  margin: 0.6em 0 0 0.6em;
  width: 0.7em;
}

/* Newsletter Subscribe Form */
.footer-inversa .subscribe {
  position: relative;
}

.footer-inversa .subscribe .form {
  margin: 0;
}

.footer-inversa .subscribe .input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentcolor;
  border-radius: 0;
  color: inherit;
  font-family: var(--footer-font-secondary);
  font-size: 1.6em;
  font-weight: 400;
  padding: 0 0 0.5em;
  width: 100%;
}

.footer-inversa .subscribe .input::placeholder {
  color: var(--footer-color-creme);
}

.footer-inversa .subscribe .submit {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  height: 2.5em;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.footer-inversa .subscribe .arrow-svg {
  height: 1em;
  width: 1.2em;
}

.footer-inversa .hidden {
  display: none;
}

/* Adjacent section margin resets */
.contact + .footer-inversa,
.about + .footer-inversa {
  margin-top: 0;
}

/* Generic Footer Styles */
footer {
  position: relative;
  padding: 3rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.02));
  z-index: 0;
}

.footer-content {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.footer-logo {
  height: 2rem;
  width: 100%;
}

.footer-divider {
  height: 1px;
  width: 100%;
  max-width: 20rem;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.footer-copyright {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.footer-tagline {
  font-family: monospace;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}


/* ==========================================================================
   16. PAGE LOADER
   --------------------------------------------------------------------------
   Multi-phase curtain reveal animation on page load
   Features binary background pattern and progress indicator
   ========================================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.loader.is-hidden {
  visibility: hidden;
}

/* Horizontal Curtains (Left/Right)
   - Start at 15% from top
   - Open outward during reveal animation */
.loader-curtain-h {
  position: fixed;
  top: 15%;
  bottom: 0;
  width: 55%;
  background: var(--color-black);
  z-index: 9998;
  overflow: visible;
  transition:
    top 1s cubic-bezier(0.77, 0, 0.175, 1),
    width 1s cubic-bezier(0.77, 0, 0.175, 1);
  background-repeat: no-repeat;
  background-position: 0 0;
}

.loader-curtain-left { left: 0; }
.loader-curtain-right { right: 0; }

/* Accent line on curtain edges */
.loader-curtain-left::before,
.loader-curtain-right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-yellow);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.loader-curtain-left::before { right: 0; }
.loader-curtain-right::before { left: 0; }

/* Vertical Curtains (Top/Bottom)
   - Higher z-index to cover top area
   - Open vertically during reveal */
.loader-curtain-v {
  position: fixed;
  left: 0;
  right: 0;
  background: var(--color-black);
  z-index: 9999;
  overflow: visible;
  transition: height 1s cubic-bezier(0.77, 0, 0.175, 1);
  background-repeat: no-repeat;
  background-position: 0 0;
}

/* Top curtain - covers 75% initially */
.loader-curtain-top {
  top: 0;
  height: 75%;
}

.loader-curtain-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-yellow);
  opacity: 0.8;
}

.loader-curtain-top .loader-stats {
  position: absolute;
  right: 8%;
  bottom: 6px;
  margin: 0;
  z-index: 1;
}

/* Bottom curtain - covers 25% initially */
.loader-curtain-bottom {
  bottom: 0;
  height: 25%;
}

.loader-curtain-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--color-yellow);
  opacity: 0.8;
}

/* Phase 1: Horizontal curtains open ~30% */
.loader.is-revealing-h .loader-curtain-left,
.loader.is-revealing-h .loader-curtain-right {
  width: 35%;
}

.loader.is-revealing-h .loader-curtain-left::before,
.loader.is-revealing-h .loader-curtain-right::before {
  opacity: 0.8;
}

/* Phase 2: Top curtain opens upward */
.loader.is-revealing-v .loader-curtain-top {
  height: 15%;
}

/* Phase 3: Full reveal - all curtains fully open */
.loader.is-revealing-full .loader-curtain-h {
  top: 0;
}

.loader.is-revealing-full .loader-curtain-left,
.loader.is-revealing-full .loader-curtain-right {
  width: 0;
}

.loader.is-revealing-full .loader-curtain-top,
.loader.is-revealing-full .loader-curtain-bottom {
  height: 0;
}

/* Loader Content (Logo and progress) */
.loader-content {
  position: fixed;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  text-align: center;
  color: var(--color-creme);
  transition: opacity 0.5s ease-out;
}

.loader-logo {
  display: block;
  width: 240px;
  height: auto;
  margin: 0;
}

.loader-logo-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}

.loader.is-revealing-h .loader-logo-wrap {
  opacity: 0;
}

/* Loader Statistics Display */
.loader-stats {
  display: flex;
  gap: 3rem;
  justify-content: center;
  margin-bottom: 2rem;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.stat {
  display: flex;
  gap: 0.5rem;
}

.stat-label {
  color: var(--color-grey);
}

.stat-value {
  color: var(--color-yellow);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Animated Sine Wave Indicator */
.sine-wave {
  width: 52px;
  height: 14px;
  background: linear-gradient(90deg, transparent, var(--color-yellow), transparent);
  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 14'%3E%3Cpath d='M0 7 C6 1 12 1 18 7 C24 13 30 13 36 7 C42 1 48 1 52 7' fill='none' stroke='white' stroke-width='2.4'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  animation: sine-flow 1.4s linear infinite;
  opacity: 0.9;
}

.loader-text {
  font-family: 'Courier New', monospace;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 2rem;
  color: var(--color-creme);
}

/* Flicker effect for loading text */
.flicker {
  animation: flicker 2s infinite;
}

/* Progress Bar */
.loader-bar {
  width: 200px;
  height: 2px;
  background: var(--color-grey);
  margin: 0 auto;
  overflow: hidden;
}

.loader-progress {
  height: 100%;
  width: 0%;
  background: var(--color-yellow);
  transition: width 0.1s linear;
}


/* ==========================================================================
   17. BUTTONS & LINKS
   --------------------------------------------------------------------------
   Interactive button and link styles with hover effects
   Features clip-path animations and text scramble on hover
   ========================================================================== */

/* Layout helpers */
.stage {
  display: grid;
  min-height: 100svh;
  padding: 4rem 2rem;
  place-items: center;
}

.stack {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  justify-content: center;
}

/* Base Button Style */
.base-button {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-f-primary);
  font-size: 1.4rem;
  font-weight: 300;
  height: 4.5rem;
  line-height: 1.28;
  pointer-events: all;
  text-transform: uppercase;
  transition: clip-path 0.25s ease-out;
}

/* Solid button variant with angled corner */
.base-button.is-button {
  background: var(--color-yellow);
  border-radius: 0.4rem;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 1.5rem),
    calc(100% - 1.5rem) 100%,
    0 100%,
    0 0
  );
  color: var(--color-black);
  padding: 0 2rem;
}

/* Link button variant */
.base-button.is-link {
  color: var(--color-yellow);
  text-decoration: underline;
}

/* Hover: Flip the angled corner */
@media (hover: hover) {
  .base-button:hover {
    clip-path: polygon(1.5rem 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 1.5rem);
  }
}

/* Base Link Style with animated underline */
.base-link {
  color: var(--color-creme);
  display: inline-flex;
  font-family: var(--font-f-primary);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.28;
  position: relative;
  text-transform: uppercase;
  transition: color 0.25s linear;
  z-index: 0;
}

.base-link::before {
  background: var(--color-yellow);
  content: "";
  inset: 0 -0.5rem;
  position: absolute;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease-in-out;
  z-index: -1;
}

@media (hover: hover) {
  .base-link:hover {
    color: var(--color-black);
  }

  .base-link:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }
}


/* ==========================================================================
   18. ANIMATIONS & KEYFRAMES
   --------------------------------------------------------------------------
   Reusable animation definitions
   ========================================================================== */

/* Blinking indicator animation */
@keyframes flash {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Hero text rise animation */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(130%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}

/* Sine wave flow animation */
@keyframes sine-flow {
  0%   { background-position: -52px 0; }
  100% { background-position: 52px 0; }
}

/* Loading text flicker */
@keyframes flicker {
  0%   { opacity: 0.2; }
  5%   { opacity: 1; }
  10%  { opacity: 0.2; }
  15%  { opacity: 1; }
  20%  { opacity: 0.2; }
  25%  { opacity: 1; }
  100% { opacity: 1; }
}

/* Terminal cursor blink */
@keyframes blink {
  50% { opacity: 0; }
}


/* ==========================================================================
   19. MEDIA QUERIES - Responsive Breakpoints
   --------------------------------------------------------------------------
   Tablet (max-width: 900px) and Mobile (max-width: 600px) styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet Breakpoint (max-width: 900px)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --menu-width: 55vw;
  }

  /* Stats panel alignment reset */
  .panel-stat .panel-content {
    justify-self: start;
    text-align: left;
    transform: none;
  }

  /* Services grid to single column */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* Values section - tablet adjustments */
  .values {
    padding: 0 1.2rem 6rem;
  }

  .values .heading {
    font-size: 4.5rem;
    padding: 10rem 0 4rem;
  }

  .values .block {
    flex-direction: column !important;
    margin-bottom: 6.5rem;
  }

  .values .block:nth-child(odd) .content,
  .values .block:nth-child(even) .content {
    margin: 0 0 3rem 0;
  }

  .values .block:nth-child(odd) .asset,
  .values .block:nth-child(even) .asset {
    margin: 0;
  }

  .values .content {
    width: 100%;
    padding-top: 0;
  }

  .values .content > .title {
    font-size: 1.6rem;
  }

  .values .content .text {
    font-size: 1.4rem;
  }

  .values .asset {
    width: 100%;
    max-width: 100%;
    min-height: 37.5rem;
  }

  /* Menu adjustments */
  .menu-panel {
    padding: 0 4rem;
  }

  .menu-link {
    font-size: 2.8rem;
  }

  .menu-meta {
    bottom: -4rem;
  }
}

/* --------------------------------------------------------------------------
   Mobile Breakpoint (max-width: 600px)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --menu-width: 100vw;
  }

  /* Header positioning */
  .site-header {
    top: 16px;
    left: 16px;
    right: 16px;
  }

  /* Menu adjustments */
  .menu-panel {
    padding: 0 1.2rem;
  }

  .menu-link {
    font-size: 2.4rem;
  }

  .menu-link::before {
    left: auto;
    right: 0;
  }

  .menu-meta {
    flex-direction: column;
    gap: 0.4rem;
    bottom: -3.2rem;
  }

  /* Scroll indicator */
  .scroll-indicator {
    right: 12px;
    height: 170px;
  }

  /* Values section - mobile */
  .values .heading {
    font-size: 3rem;
    letter-spacing: -0.02em;
    padding: 8rem 0 3rem;
  }

  .values .block {
    margin-bottom: 5rem;
  }

  .values .content > .title {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
  }

  .values .content .text {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
  }

  .values .asset {
    min-height: 30rem;
  }

  /* Loader logo size */
  .loader-logo {
    width: 180px;
  }

  /* Contact form */
  .contact-inversa {
    --contact-font-size: calc((100vw / 375) * 10);
  }

  .contact-inversa .container {
    margin: 0 1.2em;
    padding: 10em 0 5em;
  }

  .contact-inversa .heading {
    font-size: 4em;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 auto 1.6em;
  }

  .contact-inversa .content::before {
    background-size: 0.3em 0.3em;
  }

  .contact-inversa .form {
    padding: 5em 0;
  }

  .contact-inversa .input,
  .contact-inversa .textarea {
    width: 29.1em;
  }

  /* Footer */
  .footer-inversa {
    --footer-font-size: calc((100vw / 375) * 10);
    --footer-inline-padding: 1.2em;
    margin: 0;
    padding-top: 1.2em;
  }

  .footer-inversa .row:nth-child(2) {
    border-bottom: none;
    padding-block: clamp(1.8em, 6vw, 2.8em);
  }

  .footer-inversa .row:nth-child(3) {
    border: 1px solid var(--footer-color-grey-2);
    border-top: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 1.2em;
    padding: 0 var(--footer-inline-padding) 1.2em;
  }

  .footer-inversa .column {
    height: 22em;
    padding: 2.2em;
  }

  .footer-inversa .column::before {
    background-size: 0.3em 0.3em;
  }

  .footer-inversa .column:not(:first-child) {
    border-top: 1px solid var(--footer-color-grey-2);
    border-left: none;
  }

  .footer-inversa .title {
    font-size: 1.6em;
    margin-bottom: 1.4em;
  }

  .footer-inversa .leathers {
    margin-top: 2.1em;
    width: 35em;
  }

  .footer-inversa .sublink {
    flex-basis: 50%;
  }

  .footer-inversa .sublink:last-child {
    justify-content: flex-end;
  }

  .footer-inversa .legal {
    flex-basis: 100%;
    justify-content: space-between;
    order: 3;
  }
}

/* --------------------------------------------------------------------------
   Desktop (min-width: 601px) - Progressive enhancement
   -------------------------------------------------------------------------- */
@media (min-width: 601px) {
  .values .asset::before {
    background-size: 0.6em 0.6em;
  }

  .footer-inversa {
    margin: 0;
    padding-bottom: 1.6em;
    padding-inline: 0;
  }

  .footer-inversa .row {
    display: flex;
  }

  .footer-inversa .row:nth-child(2) {
    padding-block: clamp(2.2em, 4vw, 3.2em);
  }

  .footer-inversa .row:nth-child(3) {
    justify-content: space-between;
    margin: 1.6em 0;
    padding-inline: var(--footer-inline-padding);
  }

  .footer-inversa .column {
    flex: 1;
    padding: 4.2em;
  }

  .footer-inversa .column::before {
    background-size: 0.6em 0.6em;
  }

  .footer-inversa .column:not(:first-child) {
    border-left: 1px solid var(--footer-color-grey-2);
  }

  .footer-inversa .title {
    font-size: 2em;
    margin-bottom: 3.6em;
  }

  .footer-inversa .leathers {
    margin-top: 6.2em;
  }
}


/* ==========================================================================
   20. ACCESSIBILITY - Reduced Motion
   --------------------------------------------------------------------------
   Respects user preference for reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .page-shell {
    scroll-behavior: auto;
  }

  .scroll-fill {
    transition: none;
  }

  .hero-line .line-inner,
  .hero-cta-text {
    animation: none;
    opacity: 1;
    transform: none;
  }
}