/* ═══════════════════════════════════════════════════════════════
   AURUM — AURORA EDITION
   Bright · Luminous · Electric
   Plus Jakarta Sans (display) · DM Sans (body) · DM Mono (code)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&family=DM+Mono:wght@300;400;500&display=swap');

/* ═══════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════ */
:root {
  /* Canvas — deep navy, not pitch black */
  --bg:           #060612;
  --bg-2:         #0a0a1a;
  --bg-3:         #0e0e22;
  --surface:      #11112a;
  --surface-2:    #16163200;

  /* Glass — electric indigo tint, brighter than before */
  --g0: rgba(100, 120, 255, 0.03);
  --g1: rgba(100, 120, 255, 0.06);
  --g2: rgba(100, 120, 255, 0.10);
  --g3: rgba(100, 120, 255, 0.16);
  --g4: rgba(100, 120, 255, 0.24);
  --g5: rgba(100, 120, 255, 0.34);

  /* Borders — crisper, higher contrast */
  --b0: rgba(180, 200, 255, 0.06);
  --b1: rgba(180, 200, 255, 0.12);
  --b2: rgba(180, 200, 255, 0.20);
  --b3: rgba(180, 200, 255, 0.32);
  --b4: rgba(180, 200, 255, 0.50);

  /* Accent palette — BRIGHT, vivid, electric */
  --gold:         #f5c842;
  --gold-light:   #ffe066;
  --gold-dim:     #b8922a;
  --gold-glow:    rgba(245, 200, 66, 0.28);
  --gold-glow-2:  rgba(245, 200, 66, 0.12);

  --violet:       #7b7fff;
  --violet-soft:  #a8aaff;
  --violet-bright:#b4b6ff;
  --violet-glow:  rgba(123, 127, 255, 0.30);

  --cyan:         #00e5ff;
  --cyan-soft:    #60f0ff;
  --cyan-glow:    rgba(0, 229, 255, 0.25);

  --rose:         #ff6b9d;
  --rose-glow:    rgba(255, 107, 157, 0.25);

  --teal:         #00ffd5;
  --teal-glow:    rgba(0, 255, 213, 0.22);

  --danger:       #ff4757;
  --danger-glow:  rgba(255, 71, 87, 0.28);
  --success:      #2ed573;
  --success-glow: rgba(46, 213, 115, 0.25);

  /* Text — bright, legible */
  --ink:    #f0eeff;
  --ink-2:  #9b98c8;
  --ink-3:  #5a5880;
  --ink-4:  #2c2a4a;

  /* Fonts */
  --font-display: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body:    'DM Sans', -apple-system, sans-serif;
  --font-mono:    'DM Mono', 'Fira Code', monospace;

  /* Scale */
  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  13px;
  --text-md:  15px;
  --text-lg:  18px;
  --text-xl:  22px;

  /* Radii */
  --r-xs:   5px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   32px;
  --r-2xl:  48px;
  --r-pill: 9999px;

  /* Easing — smooth, snappy */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.5, 1.8, 0.4, 0.8);
  --dur-fast:  0.16s;
  --dur-mid:   0.32s;
  --dur-slow:  0.55s;
  --dur-xl:    0.85s;

  /* Shadows — deeper, more dramatic */
  --shadow-xs:  0 1px 6px rgba(0,0,8,0.55),    0 0 0 1px var(--b0);
  --shadow-sm:  0 4px 16px rgba(0,0,8,0.65),   0 0 0 1px var(--b1);
  --shadow-md:  0 10px 40px rgba(0,0,8,0.80),  0 0 0 1px var(--b1);
  --shadow-lg:  0 24px 72px rgba(0,0,8,0.90),  0 0 0 1px var(--b2);
  --shadow-xl:  0 48px 120px rgba(0,0,8,0.96), 0 0 0 1px var(--b2);
  --glow-gold:  0 0 48px var(--gold-glow), 0 0 100px var(--gold-glow-2);
  --glow-violet: 0 0 48px var(--violet-glow);
  --glow-cyan:  0 0 48px var(--cyan-glow);
  --glow-teal:  0 0 48px var(--teal-glow);
  --highlight:  inset 0 1px 0 rgba(255,255,255,0.09);
}

/* ═══════════════════════════════
   ANIMATION KEYFRAMES
   ═══════════════════════════════ */
@keyframes bodyReveal  { from{opacity:0} to{opacity:1} }
@keyframes aUp         { from{opacity:0;transform:translateY(24px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes aDown       { from{opacity:0;transform:translateY(-20px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes aLeft       { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:translateX(0)} }
@keyframes aRight      { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }
@keyframes aScale      { from{opacity:0;transform:scale(0.86) translateY(14px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes aBlur       { from{opacity:0;filter:blur(14px);transform:translateY(16px) scale(0.96)} to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)} }
@keyframes aFade       { from{opacity:0} to{opacity:1} }
@keyframes aClip       { from{opacity:0;clip-path:inset(0 100% 0 0)} to{opacity:1;clip-path:inset(0 0% 0 0)} }
@keyframes aSpin       { from{opacity:0;transform:rotate(-6deg) scale(0.88)} to{opacity:1;transform:rotate(0) scale(1)} }
@keyframes labelPulse  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.5)} }
@keyframes labelSheen  { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@keyframes gradientFlow{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes heroFloat   { 0%,100%{transform:translateY(0) rotate(0deg)} 33%{transform:translateY(-12px) rotate(1.2deg)} 66%{transform:translateY(-6px) rotate(-0.8deg)} }
@keyframes ringPulse   { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.4} 50%{transform:translate(-50%,-50%) scale(1.05);opacity:0.8} }
@keyframes ambientDrift{ 0%{opacity:0.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.04) translateY(-1%)} 100%{opacity:0.75;transform:scale(1.02) translateX(0.5%)} }
@keyframes liquidScroll{ 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-50%,0,0)} }
@keyframes menuSlide   { from{transform:translateX(-20px);opacity:0;filter:blur(4px)} to{transform:translateX(0);opacity:1;filter:blur(0)} }
@keyframes shimmerLux  { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes progressFlow{ 0%{background-position:0% 0} 100%{background-position:200% 0} }
@keyframes dotPulse    { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:0.6} }
@keyframes toastIn     { from{opacity:0;transform:translateY(16px) scale(0.92)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes topLineFlow { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes barProgress { 0%{transform:scaleX(0)} 100%{transform:scaleX(1)} }
@keyframes barColor    { 0%,100%{background-position:0% 0} 50%{background-position:200% 0} }
@keyframes pageOut     { to{opacity:0;transform:scale(0.98) translateY(-8px);filter:blur(4px)} }
@keyframes grainShift  {
  0%{transform:translate(0,0)} 10%{transform:translate(-2%,-3%)} 20%{transform:translate(3%,1%)}
  30%{transform:translate(-1%,4%)} 40%{transform:translate(4%,-1%)} 50%{transform:translate(-3%,2%)}
  60%{transform:translate(2%,3%)} 70%{transform:translate(-4%,0)} 80%{transform:translate(1%,-4%)}
  90%{transform:translate(3%,-2%)} 100%{transform:translate(-2%,3%)}
}

/* ── APPEAR TIMING ── */
[class*="appear-"], .appear { animation-fill-mode:both; animation-duration:var(--dur-slow); animation-timing-function:var(--ease); }
.appear-up    { animation-name:aUp; }
.appear-down  { animation-name:aDown; }
.appear-left  { animation-name:aLeft; }
.appear-right { animation-name:aRight; }
.appear-scale { animation-name:aScale; }
.appear-blur  { animation-name:aBlur; }
.appear-fade  { animation-name:aFade; }
.appear-clip  { animation-name:aClip; }
.appear-spin  { animation-name:aSpin; }
.appear       { animation-name:aUp; }

/* Delay utilities */
.d-0  { animation-delay:0s !important }    .d-1  { animation-delay:0.06s !important }
.d-2  { animation-delay:0.12s !important } .d-3  { animation-delay:0.18s !important }
.d-4  { animation-delay:0.25s !important } .d-5  { animation-delay:0.33s !important }
.d-6  { animation-delay:0.42s !important } .d-7  { animation-delay:0.52s !important }
.d-8  { animation-delay:0.63s !important } .d-9  { animation-delay:0.75s !important }
.d-10 { animation-delay:0.88s !important } .d-11 { animation-delay:1.02s !important }
.d-12 { animation-delay:1.18s !important }
.delay-100 { animation-delay:0.10s }
.delay-200 { animation-delay:0.20s }
.delay-300 { animation-delay:0.30s }
.fade-up   { animation:aUp 0.60s var(--ease) both }

/* ═══════════════════════════════
   RESET
   ═══════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html {
  scroll-behavior:smooth;
  scroll-padding-top:80px;
  cursor:crosshair;
}

/* ═══════════════════════════════
   CUSTOM CURSOR
   ═══════════════════════════════ */
body::before {
  content:'';
  position:fixed;
  width:7px; height:7px;
  background:var(--cyan);
  border-radius:50%;
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  transition:transform 0.1s var(--ease), width 0.18s var(--ease), height 0.18s var(--ease), background 0.18s;
  mix-blend-mode:screen;
  box-shadow:0 0 10px var(--cyan-glow);
}

/* ═══════════════════════════════
   BODY & AMBIENT
   ═══════════════════════════════ */
body {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-md);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
  min-height:100vh;
  position:relative;
  animation:bodyReveal 0.7s var(--ease) both;
  transform:none !important;
  filter:none !important;
  perspective:none !important;
}

body::after {
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 10% -10%, rgba(123,127,255,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 90% 100%, rgba(245,200,66,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 45% 55% at 55% 45%, rgba(0,229,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 90% 35% at 50% 100%, rgba(100,120,255,0.10) 0%, transparent 70%);
  animation:ambientDrift 22s ease-in-out infinite alternate;
}

/* Grain */
html::after {
  content:'';
  position:fixed;
  inset:-200%;
  width:400%; height:400%;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size:200px 200px;
  opacity:0.025;
  pointer-events:none;
  z-index:0;
  animation:grainShift 0.2s steps(1) infinite;
}

/* ═══════════════════════════════
   LAYOUT
   ═══════════════════════════════ */
main {
  position:relative;
  z-index:1;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 48px;
}
.container { max-width:1280px; margin:0 auto; padding:0 48px; }

section {
  padding:88px 0;
  position:relative;
  z-index:1;
}
section + section { padding-top:60px; }

section::before {
  content:'';
  position:absolute;
  top:0; left:8%; right:8%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--b2), transparent);
  opacity:0.7;
}
section:first-child::before { display:none; }

/* ═══════════════════════════════
   UNIVERSAL ELEMENT ANIMATIONS
   ═══════════════════════════════ */
body { animation:bodyReveal 0.7s var(--ease) both; }

h1 { animation:aBlur 0.85s 0.08s var(--ease) both; }
h2 { animation:aUp 0.65s 0.05s var(--ease) both; }
h3 { animation:aUp 0.52s 0.07s var(--ease) both; }
h4,h5,h6 { animation:aUp 0.44s 0.04s var(--ease) both; }
p  { animation:aUp 0.48s 0.08s var(--ease) both; }
.label       { animation:aClip 0.44s 0.04s var(--ease) both; }
.badge       { animation:aScale 0.40s 0.07s var(--ease-back) both; }
.stat-number { animation:aBlur 0.70s 0.10s var(--ease) both; }
.text-gradient { animation:aBlur 0.80s 0.12s var(--ease) both; }

.card,.glass-card,.job-card { animation:aScale 0.58s var(--ease) both; }
.card:nth-child(1),.glass-card:nth-child(1),.job-card:nth-child(1) { animation-delay:0.04s }
.card:nth-child(2),.glass-card:nth-child(2),.job-card:nth-child(2) { animation-delay:0.10s }
.card:nth-child(3),.glass-card:nth-child(3),.job-card:nth-child(3) { animation-delay:0.16s }
.card:nth-child(4),.glass-card:nth-child(4),.job-card:nth-child(4) { animation-delay:0.22s }
.card:nth-child(5),.glass-card:nth-child(5),.job-card:nth-child(5) { animation-delay:0.28s }
.card:nth-child(6),.glass-card:nth-child(6),.job-card:nth-child(6) { animation-delay:0.34s }

.service-card { animation:aScale 0.54s var(--ease) both; }
.service-card:nth-child(1){animation-delay:0.04s} .service-card:nth-child(2){animation-delay:0.10s}
.service-card:nth-child(3){animation-delay:0.16s} .service-card:nth-child(4){animation-delay:0.22s}
.service-card:nth-child(5){animation-delay:0.28s} .service-card:nth-child(6){animation-delay:0.34s}

.testimonial-card { animation:aScale 0.54s var(--ease) both; }
.testimonial-card:nth-child(1){animation-delay:0.05s}
.testimonial-card:nth-child(2){animation-delay:0.12s}
.testimonial-card:nth-child(3){animation-delay:0.19s}

.order-card  { animation:aUp 0.44s var(--ease) both; }
.orders-box  { animation:aScale 0.72s 0.08s var(--ease) both; }

button,.btn,.primary,.ghost,.btn-primary,.btn-ghost,.folder-btn { animation:aUp 0.44s var(--ease) both; animation-fill-mode:both; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
textarea,select { animation:aUp 0.42s var(--ease) both; animation-fill-mode:both; }
label          { animation:aFade 0.36s var(--ease) both; animation-fill-mode:both; }
.alert         { animation:aLeft 0.44s var(--ease) both; animation-fill-mode:both; }
.tag,.chip     { animation:aScale 0.36s var(--ease-back) both; animation-fill-mode:both; }
.table-wrap,table { animation:aUp 0.54s 0.06s var(--ease) both; animation-fill-mode:both; }
details        { animation:aUp 0.44s 0.04s var(--ease) both; animation-fill-mode:both; }
progress       { animation:aUp 0.44s 0.08s var(--ease) both; animation-fill-mode:both; }
footer,.footer { animation:aUp 0.54s 0.04s var(--ease) both; animation-fill-mode:both; }
input[type="checkbox"],input[type="radio"] { animation:aScale 0.36s var(--ease-back) both; animation-fill-mode:both; }

.nav-left       { animation:aLeft  0.50s 0.04s var(--ease) both; }
#header-buttons { animation:aRight 0.50s 0.08s var(--ease) both; }
nav             { animation:aFade  0.44s 0.10s var(--ease) both; }
.nav-center a:nth-child(1){animation:aDown 0.36s 0.08s var(--ease) both;}
.nav-center a:nth-child(2){animation:aDown 0.36s 0.12s var(--ease) both;}
.nav-center a:nth-child(3){animation:aDown 0.36s 0.16s var(--ease) both;}
.nav-center a:nth-child(4){animation:aDown 0.36s 0.20s var(--ease) both;}
.nav-center a:nth-child(5){animation:aDown 0.36s 0.24s var(--ease) both;}

.hero .logo   { animation:aBlur 0.80s 0.10s var(--ease) both, heroFloat 8s ease-in-out infinite; }
.hero h1      { animation:aBlur 0.95s 0.18s var(--ease) both; }
.hero-sub     { animation:aUp   0.65s 0.36s var(--ease) both; }
.hero-buttons { animation:aUp   0.60s 0.50s var(--ease) both; }

.marquee-container,.editors,.online-grid-wrapper { animation:aFade 0.60s 0.16s var(--ease) both; }
.folder-navigation  { animation:aUp 0.44s 0.08s var(--ease) both; }
.portfolio-wrapper  { animation:aScale 0.58s 0.14s var(--ease) both; }
.chat-float,.cosmic-discord { animation:aScale 0.50s 0.40s var(--ease-back) both; }
.avatar { animation:aScale 0.68s 0.14s var(--ease) both; }

/* ═══════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════ */
h1,h2,h3,h4,h5,h6 {
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--ink);
}

h1 {
  font-size:clamp(2.8rem, 7vw, 5.8rem);
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:1.0;
  background:linear-gradient(135deg, #ffffff 0%, var(--violet-bright) 40%, var(--cyan-soft) 70%, var(--gold-light) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:200% 100%;
  animation:aBlur 0.95s 0.18s var(--ease) both, gradientFlow 9s ease-in-out infinite;
}

h2 {
  font-size:clamp(1.8rem, 3.5vw, 3rem);
  font-weight:700;
  margin-bottom:28px;
}

h3 { font-size:clamp(1.1rem, 2vw, 1.45rem); font-weight:600; }
h4 { font-size:1.05rem; font-weight:600; }
h5 { font-size:0.82rem; font-weight:600; letter-spacing:0.10em; text-transform:uppercase; font-family:var(--font-mono); }
h6 { font-size:0.72rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; font-family:var(--font-mono); color:var(--ink-3); }

p {
  color:var(--ink-2);
  margin-bottom:16px;
  font-size:var(--text-md);
  line-height:1.78;
  font-weight:400;
}
p:last-child { margin-bottom:0; }

a {
  color:inherit;
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease);
}

/* ── LABEL ── */
.label {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:var(--text-2xs);
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:16px;
  padding:5px 14px 5px 10px;
  border:1px solid rgba(0,229,255,0.25);
  border-radius:var(--r-pill);
  background:linear-gradient(135deg, rgba(0,229,255,0.08), rgba(0,229,255,0.03));
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(10px);
}

.label::before {
  content:'';
  display:block;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan-glow);
  animation:labelPulse 2.5s ease-in-out infinite;
  flex-shrink:0;
}

.label::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 30%, rgba(0,229,255,0.10) 50%, transparent 70%);
  transform:translateX(-100%);
  animation:labelSheen 4s 1s ease-in-out infinite;
}

/* ── TEXT GRADIENT ── */
.text-gradient {
  background:linear-gradient(130deg, #ffffff 0%, var(--violet-bright) 35%, var(--cyan-soft) 65%, var(--gold-light) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:200% 100%;
  animation:gradientFlow 8s ease-in-out infinite, aBlur 0.80s 0.12s var(--ease) both;
}

/* ── STAT NUMBER ── */
.stat-number {
  font-family:var(--font-display);
  font-size:clamp(3.5rem, 7vw, 6rem);
  font-weight:800;
  letter-spacing:-0.06em;
  line-height:1;
  background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dim) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 0 28px var(--gold-glow));
}

.text-muted     { color:var(--ink-3); }
.text-secondary { color:var(--ink-2); }
.muted          { color:var(--ink-3); }
.small          { font-size:var(--text-xs); }
.text-subtle    { color:var(--ink-4); }

/* ═══════════════════════════════
   NAVIGATION
   ═══════════════════════════════ */
.apple-nav, header {
  position:sticky !important;
  top:0 !important;
  z-index:500 !important;
  height:68px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:0 48px !important;
  background:rgba(6,6,18,0.75) !important;
  backdrop-filter:blur(48px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(48px) saturate(180%) !important;
  border-bottom:1px solid var(--b1) !important;
  box-shadow:0 1px 0 var(--b0), inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.5) !important;
  transition:background var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease) !important;
}

.apple-nav::after, header::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 5%, var(--violet) 30%, var(--cyan) 50%, var(--gold) 70%, transparent 95%);
  opacity:0.40;
}

.nav-logo {
  width:30px; height:30px;
  filter:drop-shadow(0 0 14px var(--cyan-glow));
  transition:filter var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.nav-logo:hover {
  filter:drop-shadow(0 0 24px rgba(0,229,255,0.55));
  transform:rotate(5deg) scale(1.1);
}

.nav-left {
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-size:1.0rem;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--ink);
}

.nav-center { display:flex; gap:36px; }

.nav-center a {
  position:relative;
  color:var(--ink-3);
  font-family:var(--font-body);
  font-size:var(--text-xs);
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease);
  padding-bottom:2px;
}

.nav-center a::before {
  content:'';
  position:absolute;
  bottom:-4px; left:50%; right:50%;
  height:1px;
  background:linear-gradient(90deg, var(--cyan), var(--violet));
  transition:left var(--dur-mid) var(--ease), right var(--dur-mid) var(--ease);
  border-radius:2px;
}

.nav-center a::after {
  content:'';
  position:absolute;
  bottom:-9px; left:50%;
  transform:translateX(-50%) scale(0);
  width:3px; height:3px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan-glow);
  transition:transform var(--dur-mid) var(--ease-back);
}

.nav-center a:hover { color:var(--ink); }
.nav-center a:hover::before { left:0; right:0; }
.nav-center a:hover::after  { transform:translateX(-50%) scale(1); }
.nav-center a.active { color:var(--ink); }
.nav-center a.active::before { left:0; right:0; }
.nav-center a.active::after  { transform:translateX(-50%) scale(1); }

/* ── PILL NAV ── */
nav {
  display:flex !important;
  align-items:center !important;
  gap:3px !important;
  background:var(--g1) !important;
  padding:5px !important;
  border-radius:var(--r-pill) !important;
  border:1px solid var(--b1) !important;
  overflow-x:auto;
  scrollbar-width:none;
  box-shadow:var(--shadow-xs), var(--highlight) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
}
nav::-webkit-scrollbar { display:none; }

nav a {
  flex-shrink:0;
  padding:7px 18px;
  font-family:var(--font-body);
  font-size:var(--text-xs);
  font-weight:500;
  color:var(--ink-3);
  border-radius:var(--r-pill);
  border:1px solid transparent;
  transition:all var(--dur-fast) var(--ease);
  white-space:nowrap;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-decoration:none;
  position:relative;
}

nav a::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:var(--r-pill);
  background:radial-gradient(circle at center, rgba(0,229,255,0.10), transparent 70%);
  opacity:0;
  transition:opacity var(--dur-mid) var(--ease);
}

nav a:hover { color:var(--ink); background:var(--g2); }
nav a:hover::after { opacity:1; }
nav a.active {
  color:var(--cyan);
  background:var(--g3);
  border-color:rgba(0,229,255,0.22);
  box-shadow:var(--shadow-xs), 0 0 20px rgba(0,229,255,0.10);
}

/* ═══════════════════════════════
   BUTTONS
   ═══════════════════════════════ */
button,.btn,.primary,.ghost,.btn-primary,.btn-ghost,.folder-btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px;
  padding:12px 28px;
  border-radius:var(--r-pill);
  font-family:var(--font-body) !important;
  font-size:var(--text-xs) !important;
  font-weight:600 !important;
  letter-spacing:0.08em !important;
  text-transform:uppercase !important;
  cursor:pointer;
  border:1px solid transparent;
  text-decoration:none;
  min-height:44px;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  width:auto;
  isolation:isolate;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

/* Shimmer sweep */
button::before,.btn::before,.primary::before,.ghost::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.07) 38%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.07) 62%, transparent 80%);
  transform:translateX(-120%) skewX(-15deg);
  transition:transform 0.65s var(--ease-expo);
  pointer-events:none;
  z-index:1;
}
button:hover::before,.btn:hover::before,.primary:hover::before,.ghost:hover::before {
  transform:translateX(120%) skewX(-15deg);
}

button::after,.btn::after {
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  opacity:0;
  transition:opacity var(--dur-mid) var(--ease);
  z-index:-1;
}
button:hover::after,.btn:hover::after { opacity:1; }

/* PRIMARY */
.primary,.btn-primary {
  background:linear-gradient(135deg, var(--cyan) 0%, var(--violet) 60%, var(--violet-soft) 100%) !important;
  color:#06060f !important;
  border-color:rgba(0,229,255,0.3) !important;
  box-shadow:0 4px 24px rgba(0,229,255,0.18), var(--highlight) !important;
}
.primary::after,.btn-primary::after { background:radial-gradient(circle, rgba(0,229,255,0.25) 0%, transparent 70%); }
.primary:hover,.btn-primary:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 12px 44px rgba(0,229,255,0.30), var(--highlight) !important; }
.primary:active,.btn-primary:active { transform:scale(0.97) translateY(1px); }

/* GHOST */
.ghost,.btn-ghost {
  background:var(--g2) !important;
  color:var(--ink) !important;
  border-color:var(--b2) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  box-shadow:var(--shadow-xs), var(--highlight) !important;
}
.ghost::after,.btn-ghost::after { background:radial-gradient(circle, rgba(0,229,255,0.08) 0%, transparent 70%); }
.ghost:hover,.btn-ghost:hover { background:var(--g3) !important; border-color:var(--b3) !important; transform:translateY(-2px); box-shadow:var(--shadow-md), var(--highlight) !important; }
.ghost:active,.btn-ghost:active { transform:scale(0.97); }

/* DANGER */
.btn.danger,button.danger {
  background:rgba(255,71,87,0.08) !important;
  color:var(--danger) !important;
  border-color:rgba(255,71,87,0.22) !important;
  width:auto !important;
}
.btn.danger:hover,button.danger:hover { background:var(--danger) !important; color:#fff !important; box-shadow:0 8px 30px var(--danger-glow) !important; transform:translateY(-2px); }

/* LOGOUT */
#logout-btn {
  background:rgba(255,71,87,0.07) !important;
  color:var(--danger) !important;
  border-color:rgba(255,71,87,0.18) !important;
  font-size:var(--text-2xs) !important;
  padding:7px 14px !important;
  min-height:34px !important;
}
#logout-btn:hover { background:var(--danger) !important; color:#fff !important; box-shadow:0 4px 20px var(--danger-glow) !important; }

/* HEADER BUTTONS */
header button,#header-buttons button { padding:6px 14px !important; font-size:var(--text-2xs) !important; min-height:34px !important; }

/* ADD TO CART */
.btn-add-cart {
  flex:1;
  padding:9px 0;
  border-radius:var(--r-sm);
  border:none;
  background:linear-gradient(135deg, var(--cyan) 0%, var(--violet) 100%);
  color:#06060f !important;
  font-size:0.88rem;
  font-weight:700;
  cursor:pointer;
  transition:opacity 0.15s, transform 0.1s;
}
.btn-add-cart:hover { opacity:0.88; transform:translateY(-1px); }

/* ORDER DIRECT */
.btn-order-direct {
  padding:9px 14px;
  border-radius:var(--r-sm);
  border:1.5px solid var(--b2);
  background:transparent;
  color:var(--ink) !important;
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, transform 0.1s;
  white-space:nowrap;
}
.btn-order-direct:hover { background:var(--g2); border-color:var(--b3); transform:translateY(-1px); }

button:focus-visible,a:focus-visible {
  outline:1px solid var(--cyan);
  outline-offset:4px;
  box-shadow:0 0 0 3px rgba(0,229,255,0.15);
}

/* ═══════════════════════════════
   CARDS
   ═══════════════════════════════ */
.card,.glass-card,.job-card {
  background:linear-gradient(145deg, var(--g2) 0%, var(--g1) 100%) !important;
  backdrop-filter:blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(40px) saturate(180%) !important;
  border:1px solid var(--b1) !important;
  border-radius:var(--r-lg) !important;
  padding:28px !important;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-sm), var(--highlight);
  transition:transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), background var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
  isolation:isolate;
}

.card::before,.glass-card::before,.job-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--cyan) 25%, var(--violet) 50%, var(--gold) 75%, transparent 100%);
  background-size:200% 100%;
  opacity:0;
  transition:opacity var(--dur-mid) var(--ease);
  animation:topLineFlow 3.5s linear infinite paused;
}

.card::after,.glass-card::after,.job-card::after {
  content:'';
  position:absolute;
  bottom:-60px; right:-60px;
  width:150px; height:150px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,229,255,0.07) 0%, transparent 70%);
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  pointer-events:none;
}

.card:hover::before,.glass-card:hover::before,.job-card:hover::before { opacity:1; animation-play-state:running; }
.card:hover::after,.glass-card:hover::after,.job-card:hover::after { opacity:1; transform:translate(-10px,-10px); }
.card:hover,.glass-card:hover,.job-card:hover {
  transform:translateY(-7px) !important;
  background:linear-gradient(145deg, var(--g3) 0%, var(--g2) 100%) !important;
  border-color:var(--b2) !important;
  box-shadow:var(--shadow-lg), var(--glow-cyan) !important;
}

/* JOB CARD */
.job-card h3 { font-family:var(--font-display); font-size:1.25rem; font-weight:700; color:var(--ink); line-height:1.2; }
.job-card p  { font-size:var(--text-sm); color:var(--ink-2); font-weight:400; }
.job-card .primary { margin-top:auto; width:100% !important; }
.job-card a {
  color:var(--cyan) !important;
  font-weight:600;
  padding:3px 10px;
  background:rgba(0,229,255,0.08);
  border:1px solid rgba(0,229,255,0.18);
  border-radius:var(--r-xs);
  font-size:var(--text-xs);
  letter-spacing:0.04em;
  transition:all var(--dur-fast) var(--ease);
}
.job-card a:hover { background:rgba(0,229,255,0.16); border-color:rgba(0,229,255,0.32); box-shadow:0 0 16px rgba(0,229,255,0.15); }

/* BADGE */
.badge {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border-radius:var(--r-pill);
  font-family:var(--font-mono);
  font-size:var(--text-2xs);
  font-weight:500;
  letter-spacing:0.10em;
  text-transform:uppercase;
  background:var(--g2);
  border:1px solid var(--b2);
  color:var(--ink-2);
  box-shadow:var(--highlight);
  transition:all var(--dur-fast) var(--ease);
}
.badge:hover { background:var(--g3); border-color:var(--b3); color:var(--ink); }
.badge-orange { color:var(--gold); background:rgba(245,200,66,0.08); border-color:rgba(245,200,66,0.22); }

/* DIVIDER */
.job-divider { height:1px; background:linear-gradient(90deg, transparent, var(--b2), var(--b1), transparent); border:none; margin:6px 0; }

/* ═══════════════════════════════
   GRIDS
   ═══════════════════════════════ */
.grid,.jobs-grid,.portfolio-grid,.grid-auto,.services-grid,.testimonial-grid {
  display:grid !important;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
  gap:20px !important;
}

/* ═══════════════════════════════
   HERO
   ═══════════════════════════════ */
.hero {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:100px 24px 80px !important;
  min-height:unset !important;
  gap:22px !important;
  position:relative;
}

.hero::before,.hero::after {
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid;
  pointer-events:none;
}
.hero::before { width:min(780px,94vw); height:min(780px,94vw); border-color:rgba(0,229,255,0.08); animation:ringPulse 7s ease-in-out infinite; }
.hero::after  { width:min(480px,74vw); height:min(480px,74vw); border-color:rgba(123,127,255,0.08); animation:ringPulse 7s 2.5s ease-in-out infinite; }

.hero .logo {
  width:clamp(60px, 7vw, 96px);
  height:auto;
  filter:drop-shadow(0 0 28px var(--cyan-glow)) drop-shadow(0 0 60px rgba(0,229,255,0.08));
}

.hero h1 { max-width:900px; }

.hero-sub {
  color:var(--ink-2);
  max-width:480px;
  font-size:clamp(13.5px, 1.6vw, 15px);
  line-height:1.85;
  font-weight:400;
  letter-spacing:0.01em;
}

.hero-buttons {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:8px;
}

/* ═══════════════════════════════
   SERVICES
   ═══════════════════════════════ */
.services { padding:60px 0 52px !important; }
.services .intro { text-align:center; max-width:620px; margin:0 auto 36px; }
.services-grid { grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)) !important; gap:14px !important; }

.service-card {
  background:linear-gradient(145deg, var(--g1), var(--g0));
  border:1px solid var(--b1);
  border-radius:var(--r-lg);
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease), background var(--dur-mid) var(--ease);
  position:relative;
  overflow:hidden;
  cursor:pointer;
}

.service-card::before {
  content:counter(service-counter);
  counter-increment:service-counter;
  position:absolute;
  top:14px; right:16px;
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--ink-4);
  letter-spacing:0.08em;
  transition:color var(--dur-mid) var(--ease);
}

.service-card::after {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--violet));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--dur-mid) var(--ease);
}

.services-grid { counter-reset:service-counter; }

.service-card:hover { transform:translateY(-6px); border-color:var(--b2); background:linear-gradient(145deg, var(--g2), var(--g1)); box-shadow:var(--shadow-lg), var(--glow-cyan); }
.service-card:hover::after { transform:scaleX(1); }
.service-card:hover::before { color:var(--cyan); }

.service-title { font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--ink); margin-top:4px; }
.service-desc  { color:var(--ink-2); font-size:var(--text-sm); line-height:1.72; font-weight:400; }

/* ═══════════════════════════════
   MARQUEE
   ═══════════════════════════════ */
.marquee-container,.editors,.online-grid-wrapper {
  width:100%; overflow:hidden; position:relative; padding:24px 0;
  mask-image:linear-gradient(to right, transparent, black 7%, black 93%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, black 7%, black 93%, transparent);
}

.marquee-container .marquee-track,
.editors .editor-grid,
.online-grid-wrapper .editor-grid {
  display:flex !important; flex-wrap:nowrap !important; gap:18px !important;
  width:max-content !important; grid-template-columns:unset !important;
  animation:liquidScroll 38s linear infinite; will-change:transform;
}
.marquee-container:hover .marquee-track,
.editors:hover .editor-grid,
.online-grid-wrapper:hover .editor-grid { animation-play-state:paused; }

.editor-card {
  flex:0 0 270px !important; width:270px !important;
  background:linear-gradient(145deg, var(--g2), var(--g1));
  border:1px solid var(--b1);
  border-radius:var(--r-lg);
  padding:26px 22px; text-align:center;
  display:flex; flex-direction:column; gap:12px;
  transition:transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), background var(--dur-slow) var(--ease);
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden; cursor:pointer;
}

.editor-card:nth-child(3n+1) { border-top-color:rgba(0,229,255,0.28); }
.editor-card:nth-child(3n+2) { border-top-color:rgba(245,200,66,0.28); }
.editor-card:nth-child(3n+3) { border-top-color:rgba(123,127,255,0.28); }

.editor-card::before {
  content:'';
  position:absolute; top:-40px; left:-40px;
  width:120px; height:120px;
  border-radius:50%;
  background:radial-gradient(circle, var(--violet-glow) 0%, transparent 70%);
  opacity:0; transition:opacity var(--dur-slow) var(--ease);
}
.editor-card:hover::before { opacity:1; }
.editor-card:hover { transform:translateY(-10px) scale(1.02) !important; border-color:var(--b3) !important; background:linear-gradient(145deg, var(--g3), var(--g2)) !important; box-shadow:var(--shadow-xl), var(--glow-violet) !important; z-index:10; }

.editor-card img {
  border-radius:50%;
  box-shadow:0 8px 28px rgba(0,0,0,0.7), 0 0 0 2px var(--b2), 0 0 0 4px var(--b1);
  max-width:100%; height:auto;
  transition:transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
.editor-card:hover img { transform:scale(1.07); box-shadow:0 10px 36px rgba(0,0,0,0.8), 0 0 0 2px var(--cyan), 0 0 0 5px var(--b1), 0 0 24px var(--cyan-glow); }

.online-grid-wrapper { padding-bottom:16px; }
.online-grid-wrapper::after {
  content:''; position:absolute; bottom:0; left:0; width:100%; height:1px;
  background:linear-gradient(90deg, var(--cyan), var(--violet), var(--gold), var(--cyan));
  background-size:200% 100%;
  transform:scaleX(0); transform-origin:left;
  animation:barProgress 38s linear infinite, barColor 8s linear infinite;
}
.online-grid-wrapper:hover::after { animation-play-state:paused; }

/* ═══════════════════════════════
   ORDERS BOX
   ═══════════════════════════════ */
.orders-box {
  margin:60px auto !important; max-width:800px !important; padding:68px 44px !important;
  text-align:center;
  background:linear-gradient(145deg, var(--g2), var(--g1)) !important;
  backdrop-filter:blur(60px) !important; -webkit-backdrop-filter:blur(60px) !important;
  border:1px solid var(--b2) !important; border-radius:var(--r-2xl) !important;
  box-shadow:var(--shadow-xl), var(--glow-gold);
  position:relative; overflow:hidden; isolation:isolate;
}

.orders-box::before {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:480px; height:480px; border-radius:50%;
  border:1px solid var(--b1); pointer-events:none;
  animation:ringPulse 5.5s ease-in-out infinite;
}

.orders-box::after {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(245,200,66,0.06) 0%, transparent 70%);
  pointer-events:none;
}

.orders-box h2 {
  font-family:var(--font-display);
  font-size:clamp(1.8rem, 4.5vw, 2.8rem) !important;
  font-weight:700; margin-bottom:14px; position:relative;
}

.orders-number {
  display:block;
  font-family:var(--font-display);
  font-size:clamp(3.8rem, 9vw, 7rem) !important;
  font-weight:800; letter-spacing:-0.06em; line-height:1;
  background:linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 40%, var(--gold-dim) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 0 40px var(--gold-glow)); position:relative;
}

/* ═══════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════ */
.testimonials { padding:52px 0 !important; }
.testimonial-grid { grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)) !important; gap:18px !important; margin-top:28px; }

.testimonial-card {
  background:linear-gradient(145deg, var(--g1), var(--g0)) !important;
  border:1px solid var(--b1) !important; border-radius:var(--r-lg) !important;
  padding:30px 26px !important; color:var(--ink-2);
  transition:background var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
  position:relative; overflow:hidden;
}

.testimonial-card::before {
  content:'\201C'; position:absolute; top:8px; left:14px;
  font-family:var(--font-display); font-size:5rem; font-style:normal;
  color:var(--cyan); opacity:0.10; line-height:1; pointer-events:none;
  transition:opacity var(--dur-mid) var(--ease);
}

.testimonial-card::after {
  content:''; position:absolute; bottom:-30px; right:-30px;
  width:100px; height:100px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,229,255,0.07) 0%, transparent 70%);
  opacity:0; transition:opacity var(--dur-mid) var(--ease);
}

.testimonial-card:hover { background:linear-gradient(145deg, var(--g2), var(--g1)) !important; border-color:var(--b2) !important; box-shadow:var(--shadow-md), var(--glow-cyan) !important; transform:translateY(-4px); }
.testimonial-card:hover::before { opacity:0.20; }
.testimonial-card:hover::after  { opacity:1; }

.stars { color:var(--gold); margin-top:14px; display:flex; gap:3px; font-size:14px; filter:drop-shadow(0 0 6px var(--gold-glow)); }

/* ═══════════════════════════════
   FORMS
   ═══════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
textarea, select {
  width:100% !important; padding:13px 16px !important;
  background:var(--g1) !important; border:1px solid var(--b2) !important;
  border-radius:var(--r-md) !important; color:var(--ink) !important;
  font-size:var(--text-sm) !important; font-family:var(--font-body) !important;
  font-weight:400 !important; letter-spacing:0.02em !important;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease) !important;
  box-sizing:border-box !important; margin-bottom:12px !important;
  -webkit-appearance:none; appearance:none;
}

input::placeholder,textarea::placeholder { color:var(--ink-4) !important; font-weight:400; }
input:hover,textarea:hover,select:hover { border-color:var(--b3) !important; background:var(--g2) !important; }
input:focus,textarea:focus,select:focus {
  outline:none !important; border-color:var(--cyan) !important;
  box-shadow:0 0 0 3px rgba(0,229,255,0.12), 0 0 20px rgba(0,229,255,0.08), var(--highlight) !important;
  background:var(--g2) !important;
}

label {
  display:block; margin-bottom:7px;
  font-family:var(--font-mono); font-size:var(--text-2xs);
  font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3); transition:color var(--dur-fast) var(--ease);
}
label:has(+ input:focus), label:has(+ textarea:focus) { color:var(--cyan); }

textarea { resize:vertical; min-height:100px; line-height:1.65; }

/* ═══════════════════════════════
   MODAL
   ═══════════════════════════════ */
.cosmic-modal-overlay,.media-modal {
  position:fixed !important; inset:0 !important; z-index:1300 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:24px;
  background:rgba(3,3,10,0.88) !important;
  backdrop-filter:blur(48px) saturate(120%) !important; -webkit-backdrop-filter:blur(48px) saturate(120%) !important;
  opacity:0; pointer-events:none; transition:opacity var(--dur-mid) var(--ease);
}
.cosmic-modal-overlay.open,.media-modal.active { opacity:1 !important; pointer-events:auto !important; }

.cosmic-modal,.modal-content {
  width:min(760px,94vw) !important; max-height:88vh !important; overflow:auto;
  background:linear-gradient(145deg, rgba(10,10,24,0.98), rgba(6,6,16,0.99)) !important;
  border:1px solid var(--b2) !important; border-radius:var(--r-xl) !important;
  padding:38px !important; box-shadow:var(--shadow-xl), var(--glow-cyan) !important;
  transform:translateY(22px) scale(0.95);
  transition:transform var(--dur-mid) var(--ease-expo);
  position:relative; isolation:isolate;
}

.cosmic-modal::before,.modal-content::before {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent);
  opacity:0.35; border-radius:var(--r-pill);
}

.cosmic-modal-overlay.open .cosmic-modal,
.media-modal.active .modal-content { transform:translateY(0) scale(1) !important; }

.cosmic-modal-close,.modal-close {
  position:absolute !important; top:16px !important; right:16px !important;
  background:var(--g2) !important; border:1px solid var(--b2) !important;
  color:var(--ink-2) !important; width:32px !important; height:32px !important;
  border-radius:50% !important; cursor:pointer;
  transition:all var(--dur-fast) var(--ease), transform var(--dur-mid) var(--ease-back) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  z-index:10; font-size:14px; min-height:unset !important;
}
.cosmic-modal-close:hover,.modal-close:hover {
  color:#fff !important; border-color:var(--danger) !important;
  background:rgba(255,71,87,0.15) !important;
  transform:rotate(90deg) scale(1.15) !important;
  box-shadow:0 0 24px var(--danger-glow) !important;
}

/* ═══════════════════════════════
   PORTFOLIO
   ═══════════════════════════════ */
.portfolio-container { width:100%; max-width:1280px; margin:0 auto; padding:24px; overflow-x:hidden; }

.folder-navigation {
  display:flex !important; align-items:center; gap:4px !important;
  padding:5px !important; border-radius:var(--r-pill) !important;
  border:1px solid var(--b1) !important; background:var(--g1) !important;
  backdrop-filter:blur(24px) !important; -webkit-backdrop-filter:blur(24px) !important;
  width:fit-content; max-width:100%; overflow-x:auto; scrollbar-width:none;
  margin-bottom:20px; box-shadow:var(--shadow-xs);
}
.folder-navigation::-webkit-scrollbar { display:none; }

.folder-btn {
  background:transparent !important; color:var(--primary) !important;
  border:1px solid transparent !important; padding:7px 18px !important;
  font-family:var(--font-mono) !important; font-size:var(--text-2xs) !important;
  font-weight:500 !important; letter-spacing:0.10em !important; text-transform:uppercase !important;
  border-radius:var(--r-pill) !important; cursor:pointer;
  transition:all var(--dur-fast) var(--ease) !important; white-space:nowrap; min-height:34px !important;
}
.folder-btn:hover { color:var(--ink) !important; background:var(--g2) !important; border-color:var(--b2) !important; }
.folder-btn.active { background:var(--g3) !important; color:var(--cyan) !important; border-color:rgba(0,229,255,0.22) !important; box-shadow:0 0 16px rgba(0,229,255,0.10); }

.portfolio-wrapper {
  width:100%; height:72vh;
  border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--b2); background:var(--g1);
  box-shadow:var(--shadow-lg), var(--glow-cyan); position:relative;
}

.portfolio-wrapper::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--violet), var(--gold));
  z-index:2; opacity:0.7;
}

.responsive-iframe { width:100%; height:100%; border:none; display:block; }

/* ═══════════════════════════════
   ADMIN ORDERS
   ═══════════════════════════════ */
.order-card {
  padding:18px;
  border-radius:var(--r-md);
  background:linear-gradient(145deg, var(--g1), var(--g0));
  border:1px solid var(--b1); box-shadow:var(--shadow-xs);
  transition:background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  position:relative; overflow:hidden;
}

.order-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--cyan), var(--violet));
  opacity:0; transition:opacity var(--dur-mid) var(--ease);
}

.order-card:hover { background:linear-gradient(145deg, var(--g2), var(--g1)); box-shadow:var(--shadow-md); border-color:var(--b2); transform:translateX(4px); }
.order-card:hover::before { opacity:1; }
.order-card h4 { font-family:var(--font-display); font-size:1.0rem; font-weight:700; margin-bottom:6px; color:var(--ink); }
.order-card p  { font-size:var(--text-xs); margin:4px 0; color:var(--ink-2); }

#orders-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:12px; }

#header-buttons { display:flex; align-items:center; gap:8px; }

/* ═══════════════════════════════
   FLOATING ELEMENTS
   ═══════════════════════════════ */
.chat-float,.cosmic-discord {
  position:fixed; bottom:30px; right:30px;
  width:54px; height:54px; border-radius:var(--r-md);
  background:var(--g3); border:1px solid var(--b2);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); text-decoration:none; font-size:22px;
  box-shadow:var(--shadow-md); z-index:1400;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  cursor:pointer;
}

.chat-float::before,.cosmic-discord::before {
  content:''; position:absolute; inset:-1px;
  border-radius:inherit;
  background:linear-gradient(135deg, var(--cyan), var(--violet), var(--gold));
  opacity:0; transition:opacity var(--dur-mid) var(--ease); z-index:-1;
}

.chat-float:hover,.cosmic-discord:hover { transform:translateY(-6px) scale(1.08) rotate(-3deg); box-shadow:var(--shadow-lg), var(--glow-cyan); border-color:var(--cyan); }
.chat-float:hover::before,.cosmic-discord:hover::before { opacity:0.25; }

.cosmic-discord { background:rgba(88,101,242,0.18); border-color:rgba(88,101,242,0.30); }
.cosmic-discord:hover { box-shadow:var(--shadow-lg), 0 0 40px rgba(88,101,242,0.30); border-color:#5865f2; }

/* ═══════════════════════════════
   HAMBURGER MENU
   ═══════════════════════════════ */
.cosmic-hamburger {
  display:inline-flex; flex-direction:column; justify-content:space-between;
  width:32px; height:20px; padding:3px;
  border-radius:var(--r-sm); background:var(--g2); border:1px solid var(--b2);
  cursor:pointer; transition:all var(--dur-fast) var(--ease);
}
.cosmic-hamburger:hover { background:var(--g3); border-color:var(--b3); box-shadow:var(--shadow-xs); }
.cosmic-hamburger span { display:block; height:1px; background:var(--ink-2); border-radius:2px; transition:all var(--dur-mid) var(--ease); }
.cosmic-hamburger:hover span { background:var(--ink); }
.cosmic-hamburger:hover span:nth-child(1) { transform:scaleX(0.7); transform-origin:right; }
.cosmic-hamburger:hover span:nth-child(3) { transform:scaleX(0.7); transform-origin:left; }

.cosmic-menu-overlay {
  position:fixed !important; inset:0 !important;
  width:100vw !important; height:100vh !important;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  background:rgba(3,3,10,0.60); z-index:99999 !important;
  opacity:0; pointer-events:none; transition:opacity var(--dur-mid) ease;
}
.cosmic-menu-overlay.open { opacity:1; pointer-events:auto; }

.cosmic-menu {
  position:absolute !important; top:0 !important; left:0 !important;
  width:min(360px, 84vw); height:100vh !important; max-height:100vh !important;
  background:rgba(6,6,18,0.99); backdrop-filter:blur(60px); -webkit-backdrop-filter:blur(60px);
  border-right:1px solid var(--b2); padding:40px 28px;
  display:flex; flex-direction:column; gap:14px;
  animation:menuSlide var(--dur-mid) var(--ease) both;
  overflow-y:auto !important; margin:0 !important;
  align-items:flex-start !important;
}

.cosmic-menu::before {
  content:''; position:absolute; top:0; bottom:0; right:0; width:1px;
  background:linear-gradient(180deg, transparent, var(--cyan), transparent); opacity:0.20;
}

.cosmic-menu-close {
  position:sticky !important; top:0 !important;
  align-self:flex-end !important; margin-top:-10px !important; margin-right:-10px !important;
  z-index:100 !important; flex-shrink:0 !important;
  border:1px solid var(--b1); background:var(--g2);
  color:var(--ink); font-size:16px; cursor:pointer;
  min-height:unset !important; width:32px; height:32px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:all var(--dur-fast) var(--ease);
}
.cosmic-menu-close:hover { background:var(--danger); border-color:var(--danger); color:white; transform:rotate(90deg); }

.cosmic-menu-items { display:flex; flex-direction:column; gap:4px; margin-top:32px; width:100% !important; padding-bottom:40px !important; }

.cosmic-menu-items a {
  display:flex; align-items:center; gap:12px;
  color:var(--ink-2); font-family:var(--font-body);
  font-weight:500; font-size:var(--text-xs);
  letter-spacing:0.10em; text-transform:uppercase;
  padding:12px 16px; border-radius:var(--r-md);
  border:1px solid transparent; transition:all var(--dur-fast) var(--ease);
  position:relative; overflow:hidden;
}

.cosmic-menu-items a::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--cyan), var(--violet));
  transform:scaleY(0); transition:transform var(--dur-mid) var(--ease);
  border-radius:0 2px 2px 0;
}

.cosmic-menu-items a:hover { color:var(--ink); background:var(--g2); border-color:var(--b1); transform:translateX(6px); }
.cosmic-menu-items a:hover::before { transform:scaleY(1); }

/* ═══════════════════════════════
   FOOTER
   ═══════════════════════════════ */
footer,.footer {
  padding:44px 48px !important; text-align:center;
  color:var(--ink-3); font-size:var(--text-xs);
  border-top:1px solid var(--b1) !important;
  margin-top:52px !important; position:relative; z-index:1; letter-spacing:0.04em;
}

footer::before {
  content:''; position:absolute; top:-1px; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--violet), var(--gold), transparent);
  opacity:0.30;
}

footer::after {
  content:''; position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:280px; height:70px;
  background:radial-gradient(ellipse, rgba(0,229,255,0.06) 0%, transparent 70%);
  pointer-events:none;
}

.footer-logo {
  width:48px; margin-bottom:10px; opacity:0.65;
  filter:drop-shadow(0 0 10px var(--cyan-glow));
  transition:opacity var(--dur-mid) var(--ease), filter var(--dur-mid) var(--ease);
}
.footer-logo:hover { opacity:1; filter:drop-shadow(0 0 20px rgba(0,229,255,0.50)); }

footer a,.footer a {
  color:var(--cyan); text-decoration:none;
  transition:all var(--dur-fast) var(--ease); position:relative;
}
footer a::after { content:''; position:absolute; bottom:-2px; left:0; right:100%; height:1px; background:var(--cyan); transition:right var(--dur-mid) var(--ease); }
footer a:hover::after { right:0; }

/* ═══════════════════════════════
   SCROLLBAR
   ═══════════════════════════════ */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg, var(--cyan), var(--violet)); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg, var(--cyan-soft), var(--violet-soft)); }
* { scrollbar-width:thin; scrollbar-color:var(--violet) var(--bg); }

/* ═══════════════════════════════
   UTILITIES & EXTRAS
   ═══════════════════════════════ */
.pressable { transition:transform 0.12s ease; }
.pressable:active { transform:scale(0.97); }
.cosmic-rocket { pointer-events:none; z-index:0; }

/* ── CHECKBOX & RADIO ── */
input[type="checkbox"],input[type="radio"] {
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; min-width:18px;
  background:var(--g2); border:1px solid var(--b3);
  cursor:pointer; margin:0; margin-bottom:0; position:relative;
  transition:all 0.18s var(--ease); vertical-align:middle; flex-shrink:0;
  box-shadow:var(--highlight);
}
input[type="checkbox"] { border-radius:5px; }
input[type="radio"]    { border-radius:50%; }
input[type="checkbox"]:hover,input[type="radio"]:hover { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,229,255,0.12), var(--highlight); }
input[type="checkbox"]:checked,input[type="radio"]:checked {
  background:linear-gradient(135deg, var(--cyan), var(--violet));
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,229,255,0.12), 0 0 16px var(--cyan-glow);
}
input[type="checkbox"]:checked::after {
  color: #000;
  content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--cyan), var(--violet));
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7l3.5 3.5L12 4' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  mask-repeat:no-repeat; mask-position:center; mask-size:68%;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7l3.5 3.5L12 4' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:68%;
}
input[type="radio"]:checked::after {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); width:6px; height:6px;
  background:#06060f; border-radius:50%;
}

/* ── ALERTS ── */
.alert {
  display:flex; align-items:flex-start; gap:12px; padding:14px 18px;
  border-radius:var(--r-md); border:1px solid; font-size:var(--text-sm);
  line-height:1.65; margin-bottom:12px; position:relative; overflow:hidden;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.alert::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:0 3px 3px 0; }
.alert-info    { background:rgba(123,127,255,0.08); border-color:rgba(123,127,255,0.22); color:var(--violet-soft); }
.alert-info::before { background:var(--violet); box-shadow:0 0 12px var(--violet-glow); }
.alert-success { background:rgba(46,213,115,0.07); border-color:rgba(46,213,115,0.22); color:var(--success); }
.alert-success::before { background:var(--success); box-shadow:0 0 12px var(--success-glow); }
.alert-warning { background:rgba(245,200,66,0.07); border-color:rgba(245,200,66,0.22); color:var(--gold); }
.alert-warning::before { background:var(--gold); box-shadow:0 0 12px var(--gold-glow); }
.alert-danger  { background:rgba(255,71,87,0.07); border-color:rgba(255,71,87,0.22); color:var(--danger); }
.alert-danger::before { background:var(--danger); box-shadow:0 0 12px var(--danger-glow); }
.alert p { color:inherit; margin:0; font-size:var(--text-sm); }

/* ── TAGS & CHIPS ── */
.tag,.chip {
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px;
  background:var(--g2); border:1px solid var(--b2); border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:500;
  letter-spacing:0.08em; color:var(--ink-2);
  transition:all var(--dur-fast) var(--ease); cursor:default;
}
.tag:hover,.chip:hover { background:var(--g3); border-color:var(--b3); color:var(--ink); }
.tag.blue   { color:var(--violet-soft); background:rgba(123,127,255,0.10); border-color:rgba(123,127,255,0.25); }
.tag.blue:hover   { box-shadow:0 0 16px var(--violet-glow); }
.tag.green  { color:var(--success);     background:rgba(46,213,115,0.08);  border-color:rgba(46,213,115,0.22); }
.tag.green:hover  { box-shadow:0 0 16px var(--success-glow); }
.tag.orange { color:var(--gold);        background:rgba(245,200,66,0.08);  border-color:rgba(245,200,66,0.22); }
.tag.orange:hover { box-shadow:0 0 16px var(--gold-glow); }
.tag.red    { color:var(--danger);      background:rgba(255,71,87,0.08);   border-color:rgba(255,71,87,0.22); }
.tag.red:hover    { box-shadow:0 0 16px var(--danger-glow); }
.tag.purple { color:#c0a0ff;            background:rgba(170,130,255,0.08); border-color:rgba(170,130,255,0.22); }
.tag.purple:hover { box-shadow:0 0 16px rgba(170,130,255,0.30); }

/* ── SKELETON ── */
.skeleton {
  background:linear-gradient(105deg, var(--g1) 25%, var(--g3) 37%, var(--g4) 50%, var(--g3) 63%, var(--g1) 75%);
  background-size:400% 100%;
  animation:shimmerLux 2s ease-in-out infinite;
  border-radius:var(--r-xs); border:1px solid var(--b1);
}

/* ── TABLES ── */
table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
thead tr { background:linear-gradient(135deg, var(--g2), var(--g1)); border-bottom:1px solid var(--b2); }
thead th { padding:12px 14px; text-align:left; font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
tbody tr { border-bottom:1px solid var(--b1); transition:background var(--dur-fast) var(--ease); position:relative; }
tbody tr:last-child { border-bottom:none; }
tbody tr::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(180deg, var(--cyan), var(--violet)); opacity:0; transition:opacity var(--dur-fast) var(--ease); }
tbody tr:hover { background:var(--g1); }
tbody tr:hover::before { opacity:1; }
tbody td { padding:11px 14px; color:var(--ink); vertical-align:middle; font-weight:400; }

.table-wrap {
  width:100%; overflow-x:auto; border-radius:var(--r-lg);
  border:1px solid var(--b2); background:var(--g1);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
}

/* ── PROGRESS ── */
progress {
  -webkit-appearance:none; appearance:none; width:100%;
  height:3px; border-radius:var(--r-pill); border:none;
  background:var(--g3); display:block; overflow:hidden;
}
progress::-webkit-progress-bar { background:var(--g3); border-radius:var(--r-pill); }
progress::-webkit-progress-value {
  background:linear-gradient(90deg, var(--cyan), var(--violet), var(--gold));
  background-size:200% 100%;
  border-radius:var(--r-pill); transition:width 0.5s var(--ease);
  animation:progressFlow 3s linear infinite;
  box-shadow:0 0 8px var(--cyan-glow);
}
progress::-moz-progress-bar { background:linear-gradient(90deg, var(--cyan), var(--violet)); border-radius:var(--r-pill); }

/* ── DETAILS / ACCORDION ── */
details {
  background:linear-gradient(145deg, var(--g1), var(--g0));
  border:1px solid var(--b1); border-radius:var(--r-md);
  overflow:hidden; margin-bottom:10px;
  transition:background var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
details[open] { background:linear-gradient(145deg, var(--g2), var(--g1)); border-color:var(--b2); box-shadow:var(--shadow-sm); }

summary {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; cursor:pointer;
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:500;
  color:var(--ink); list-style:none; user-select:none; gap:12px;
  transition:background var(--dur-fast) var(--ease); position:relative;
}
summary::-webkit-details-marker { display:none; }
summary:hover { background:var(--g2); }
summary::after {
  content:''; width:16px; height:16px; min-width:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a5880' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform 0.32s var(--ease-back); flex-shrink:0;
}
details[open] > summary::after { transform:rotate(180deg); }
details[open] > summary::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--cyan), var(--violet));
  border-radius:0 2px 2px 0;
}

.details-body {
  padding:6px 18px 18px; color:var(--ink-2);
  font-size:var(--text-sm); font-weight:400; line-height:1.75;
  border-top:1px solid var(--b1);
}

/* ── TOAST ── */
.toast-container {
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:9000; pointer-events:none;
}

.toast {
  display:flex; align-items:center; gap:12px; padding:11px 20px;
  background:rgba(8,8,20,0.97); border:1px solid var(--b3);
  border-radius:var(--r-pill); box-shadow:var(--shadow-xl);
  backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
  font-family:var(--font-body); font-size:var(--text-sm);
  font-weight:400; letter-spacing:0.02em; color:var(--ink);
  pointer-events:all; animation:toastIn 0.40s var(--ease-back) both;
  white-space:nowrap; position:relative; overflow:hidden;
}

.toast::before {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent); opacity:0.40;
}

.toast-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; animation:dotPulse 2s ease-in-out infinite; }
.toast-dot.blue   { background:var(--violet); box-shadow:0 0 8px var(--violet-glow); }
.toast-dot.green  { background:var(--success); box-shadow:0 0 8px var(--success-glow); }
.toast-dot.orange { background:var(--gold);    box-shadow:0 0 8px var(--gold-glow); }
.toast-dot.red    { background:var(--danger);  box-shadow:0 0 8px var(--danger-glow); }

/* ── OWNER / AVATAR ── */
.owner { display:flex !important; gap:3rem !important; align-items:center !important; }

.avatar {
  border-radius:50%; object-fit:cover; display:block; flex-shrink:0;
  border:1px solid var(--b3);
  box-shadow:0 0 0 4px var(--g2), 0 0 0 8px var(--g1), var(--shadow-lg);
  transition:box-shadow var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
}
.avatar:hover {
  transform:scale(1.04) rotate(2deg);
  border-color:var(--cyan);
  box-shadow:0 0 0 4px var(--g3), 0 0 0 8px var(--g2), var(--shadow-xl), var(--glow-cyan);
}
.avatar.large { width:136px; height:136px; }

/* ── PAGE TRANSITIONS ── */
.page-exit { animation:pageOut 0.38s ease-in forwards; }

/* ═══════════════════════════════
   MOBILE
   ═══════════════════════════════ */
@media (max-width:768px) {
  main,.container { padding:0 18px !important; }
  .apple-nav,header { height:auto !important; padding:12px 18px !important; flex-wrap:wrap; gap:10px; }
  .nav-center { width:100%; overflow-x:auto; gap:20px; scrollbar-width:none; padding-bottom:4px; }
  .nav-center::-webkit-scrollbar { display:none; }
  .nav-center a { font-size:10px; white-space:nowrap; }
  .hero { padding:60px 18px 48px !important; }
  .hero::before,.hero::after { display:none; }
  .hero-buttons { flex-direction:column !important; width:100%; padding:0 14px; }
  .hero-buttons .btn,.hero-buttons .primary,.hero-buttons .ghost { width:100% !important; }
  .cosmic-modal button,.cosmic-modal .btn { width:100% !important; }
  .owner { flex-direction:column !important; text-align:center !important; gap:1.5rem !important; }
  section { padding:44px 0 !important; }
  section + section { padding-top:28px !important; }
  .orders-box { margin:28px auto !important; padding:40px 22px !important; border-radius:var(--r-xl) !important; }
  .editor-card { flex:0 0 240px !important; width:240px !important; }
  .grid,.jobs-grid,.grid-auto,.services-grid,.testimonial-grid { grid-template-columns:1fr !important; gap:14px !important; }
  .portfolio-wrapper { height:56vh; }
  .folder-btn { padding:6px 12px !important; font-size:9px !important; }
}

@media (max-width:480px) {
  main { padding:0 12px !important; }
  .card,.glass-card,.job-card { padding:18px 14px !important; }
  h2 { font-size:1.6rem; }
}

/* ═══════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  html { cursor:auto; }
  body::before { display:none; }
}

@media (prefers-contrast:high) {
  :root {
    --g2:rgba(150,160,255,0.60);
    --b2:rgba(180,200,255,0.50);
    --ink:#ffffff; --ink-2:#d0d0ff;
    --cyan:#00ffff; --gold:#ffdd00;
  }
}

@supports not (backdrop-filter:blur(1px)) {
  .card,.glass-card,.job-card,.editor-card,
  .cosmic-modal,.modal-content,
  .apple-nav,header,nav,.ghost,.btn-ghost,
  .toast,.service-card,.folder-navigation {
    background:rgba(10,10,26,0.98) !important;
  }
}

@media (hover:none) and (pointer:coarse) {
  html { cursor:auto; }
  body::before { display:none; }
  .card:hover,.glass-card:hover,.job-card:hover,.service-card:hover,.editor-card:hover,.testimonial-card:hover { transform:none !important; }
  button,.btn,.primary,.ghost,.btn-primary,.btn-ghost,.folder-btn,a,summary,.cosmic-hamburger { cursor:pointer; }
}

input[type="date"]{
  color: white;
}
/* ═══════════════════════════════
   END AURUM AURORA
   ═══════════════════════════════ */