/* Font Awesome (icons) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* ===== CSS Variables ===== */
:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(210, 25%, 7.8431%);
  --card: hsl(180, 6.6667%, 97.0588%);
  --card-foreground: hsl(210, 25%, 7.8431%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(210, 25%, 7.8431%);
  --primary: hsl(203.8863, 88.2845%, 53.1373%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(210, 25%, 7.8431%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --muted: hsl(240, 1.9608%, 90%);
  --muted-foreground: hsl(210, 25%, 7.8431%);
  --accent: hsl(211.5789, 51.3514%, 92.7451%);
  --accent-foreground: hsl(203.8863, 88.2845%, 53.1373%);
  --destructive: hsl(356.3033, 90.5579%, 54.3137%);
  --destructive-foreground: hsl(0, 0%, 100%);
  --border: hsl(201.4286, 30.4348%, 90.9804%);
  --input: hsl(200, 23.0769%, 97.4510%);
  --ring: hsl(202.8169, 89.1213%, 53.1373%);
  --chart-1: hsl(203.8863, 88.2845%, 53.1373%);
  --chart-2: hsl(159.7826, 100%, 36.0784%);
  --chart-3: hsl(42.0290, 92.8251%, 56.2745%);
  --chart-4: hsl(147.1429, 78.5047%, 41.9608%);
  --chart-5: hsl(341.4894, 75.2000%, 50.9804%);
  --sidebar: hsl(180, 6.6667%, 97.0588%);
  --sidebar-foreground: hsl(210, 25%, 7.8431%);
  --sidebar-primary: hsl(203.8863, 88.2845%, 53.1373%);
  --sidebar-primary-foreground: hsl(0, 0%, 100%);
  --sidebar-accent: hsl(211.5789, 51.3514%, 92.7451%);
  --sidebar-accent-foreground: hsl(203.8863, 88.2845%, 53.1373%);
  --sidebar-border: hsl(205.0000, 25.0000%, 90.5882%);
  --sidebar-ring: hsl(202.8169, 89.1213%, 53.1373%);
  --font-sans: 'Inter', 'Helvetica Now', 'Helvetica', 'Arial', sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Menlo, monospace;
  --radius: 1.3rem;
  --shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-sm: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-md: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-lg: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0);
  --shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
  /* Brand (Chic Y2K) */
  --brand-pink: #ffc0cb;
  --brand-cream: #fffaed;
  --brand-dark: #636363;
  --brand-medium: #545454;
  --brand-rose: #d1919c;
}

.dark {
  --background: hsl(0, 0%, 0%);
  --foreground: hsl(200, 6.6667%, 91.1765%);
  --card: hsl(228, 9.8039%, 10%);
  --card-foreground: hsl(0, 0%, 85.0980%);
  --popover: hsl(0, 0%, 0%);
  --popover-foreground: hsl(200, 6.6667%, 91.1765%);
  --primary: hsl(203.7736, 87.6033%, 52.5490%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(195, 15.3846%, 94.902%);
  --secondary-foreground: hsl(210, 25%, 7.8431%);
  --muted: hsl(0, 0%, 9.4118%);
  --muted-foreground: hsl(210, 3.3898%, 46.2745%);
  --accent: hsl(205.7143, 70%, 7.8431%);
  --accent-foreground: hsl(203.7736, 87.6033%, 52.5490%);
  --destructive: hsl(356.3033, 90.5579%, 54.3137%);
  --destructive-foreground: hsl(0, 0%, 100%);
  --border: hsl(210, 5.2632%, 14.9020%);
  --input: hsl(207.6923, 27.6596%, 18.4314%);
  --ring: hsl(202.8169, 89.1213%, 53.1373%);
  --chart-1: hsl(203.8863, 88.2845%, 53.1373%);
  --chart-2: hsl(159.7826, 100%, 36.0784%);
  --chart-3: hsl(42.0290, 92.8251%, 56.2745%);
  --chart-4: hsl(147.1429, 78.5047%, 41.9608%);
  --chart-5: hsl(341.4894, 75.2%, 50.9804%);
  --sidebar: hsl(228, 9.8039%, 10%);
  --sidebar-foreground: hsl(0, 0%, 85.0980%);
  --sidebar-primary: hsl(202.8169, 89.1213%, 53.1373%);
  --sidebar-primary-foreground: hsl(0, 0%, 100%);
  --sidebar-accent: hsl(205.7143, 70%, 7.8431%);
  --sidebar-accent-foreground: hsl(203.7736, 87.6033%, 52.5490%);
  --sidebar-border: hsl(205.7143, 15.7895%, 26.0784%);
  --sidebar-ring: hsl(202.8169, 89.1213%, 53.1373%);
}

/* ===== Base styles (replacing @layer base/@apply) ===== */
* { border-color: var(--border); }
body {
  font-family: 'Helvetica Now Black', 'Helvetica Black', Arial, sans-serif;
  font-weight: 900;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background: var(--background);
  color: var(--foreground);
}

/* ===== Y2K / Retro UI Pieces ===== */
.phone-screen {
  background: linear-gradient(135deg, rgba(255,250,237,.95) 0%, rgba(255,192,203,.9) 30%, rgba(209,145,156,.9) 100%);
  border: 8px solid #2a2a2a; border-radius: 25px; position: relative; overflow: hidden;
  box-shadow: inset 0 3px 6px rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.6), 0 6px 20px rgba(0,0,0,.4);
  backdrop-filter: blur(10px);
}
.phone-screen::before{ content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%); width:60px; height:6px; background:var(--brand-dark); border-radius:3px; }

.app-icon{ transition: all .3s cubic-bezier(.4,0,.2,1); transform: perspective(1000px) rotateX(0); }
.app-icon:hover{ transform: perspective(1000px) rotateX(-10deg) scale(1.1); filter: brightness(1.2) saturate(1.3); }

.retro-button{
  background: linear-gradient(145deg, var(--brand-pink), var(--brand-rose));
  border: 3px solid var(--brand-dark);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 4px 4px 0 var(--brand-medium), 0 4px 16px rgba(0,0,0,.2);
  transition: all .2s ease; text-transform: uppercase; letter-spacing:1px; font-weight:900;
}
.retro-button:hover{ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--brand-medium); }
.retro-button:active{ transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--brand-medium); }

.music-player{ backdrop-filter: blur(10px); background: rgba(255,250,237,.95); border:3px solid var(--brand-dark); border-radius:20px;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.6), 0 8px 24px rgba(0,0,0,.3); transition: all .3s ease; }

.landing-screen{ background: linear-gradient(135deg, #1a1a1a 0%, var(--brand-dark) 50%, #2a2a2a 100%); position:relative; overflow:hidden; }
.landing-screen::before{ content:""; position:absolute; inset:0; background-image:
  radial-gradient(circle at 20% 30%, var(--brand-pink) 0%, transparent 50%),
  radial-gradient(circle at 80% 70%, var(--brand-rose) 0%, transparent 50%),
  radial-gradient(circle at 40% 80%, var(--brand-cream) 0%, transparent 30%);
  opacity:.1; pointer-events:none; }

.home-screen{ background: url('/landing-bg.jpg') center/cover fixed no-repeat; position:relative; overflow:hidden; }
.home-screen::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.3); pointer-events:none; }

.section-card{ background: linear-gradient(135deg, rgba(255,250,237,.98) 0%, rgba(255,192,203,.95) 100%);
  border:3px solid var(--brand-dark); border-radius:15px; box-shadow: inset 0 2px 4px rgba(255,255,255,.6), inset 0 -1px 2px rgba(0,0,0,.1), 8px 8px 0 rgba(99,99,99,.4), 0 12px 24px rgba(0,0,0,.2);
  transition: all .3s ease; backdrop-filter: blur(8px); }
.section-card:hover{ transform: translate(-3px,-3px); box-shadow: 11px 11px 0 rgba(99,99,99,.3); }
.shadow-retro{ box-shadow: 8px 8px 0 rgba(99,99,99,.3); }

/* Animations */
@keyframes glitter{ 0%{opacity:1; transform:scale(1);} 100%{opacity:0; transform:scale(0) rotate(180deg);} }
@keyframes phoneRing{ 0%,100%{ transform: rotate(0) scale(1);} 25%{ transform: rotate(-5deg) scale(1.05);} 75%{ transform: rotate(5deg) scale(1.05);} }
@keyframes pulseGlow{ 0%{ box-shadow:0 0 20px rgba(255,192,203,.5);} 100%{ box-shadow:0 0 40px rgba(255,192,203,.8), 0 0 80px rgba(255,192,203,.3);} }
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
.animate-glitter{ animation: glitter .6s ease-out forwards; }
.animate-phone-ring{ animation: phoneRing 1s ease-in-out infinite; }
.animate-pulse-glow{ animation: pulseGlow 2s ease-in-out infinite alternate; }
.animate-float{ animation: float 3s ease-in-out infinite; }

/* Advanced Typography FX */
.cyber-text{ text-shadow:0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.5)); }
.chrome-text{ background: linear-gradient(135deg,#fff 0%,#f0f0f0 25%,#d0d0d0 50%,#f0f0f0 75%,#fff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(1px 1px 2px rgba(0,0,0,.3)); }
.glitch-text{ position:relative; }
.glitch-text::before, .glitch-text::after{ content: attr(data-text); position:absolute; inset:0; }
.glitch-text::before{ animation: glitch-1 .5s infinite linear alternate-reverse; color:#ff0080; z-index:-1; }
.glitch-text::after{ animation: glitch-2 .5s infinite linear alternate-reverse; color:#00ffff; z-index:-2; }
@keyframes glitch-1{ 0%{ transform: translateX(-2px) skew(-5deg);} 100%{ transform: translateX(0) skew(-5deg);} }
@keyframes glitch-2{ 0%{ transform: translateX(2px) skew(5deg);} 100%{ transform: translateX(0) skew(5deg);} }

/* Matrix stripe */
.matrix-bg{ background: linear-gradient(90deg, transparent 0%, rgba(0,255,65,.03) 50%, transparent 100%); animation: matrix-scroll 20s linear infinite; }
@keyframes matrix-scroll{ 0%{ background-position:0 0;} 100%{ background-position:100% 100%; } }

/* Simple utilities (no Tailwind) */
.cursor-none{ cursor: none !important; }
.bg-brand-pink{ background-color: var(--brand-pink); }
.bg-brand-cream{ background-color: var(--brand-cream); }
.bg-brand-dark{ background-color: var(--brand-dark); }
.bg-brand-medium{ background-color: var(--brand-medium); }
.bg-brand-rose{ background-color: var(--brand-rose); }
.text-brand-pink{ color: var(--brand-pink); }
.text-brand-cream{ color: var(--brand-cream); }
.text-brand-dark{ color: var(--brand-dark); }
.text-brand-medium{ color: var(--brand-medium); }
.text-brand-rose{ color: var(--brand-rose); }
.border-brand-pink{ border-color: var(--brand-pink); }
.border-brand-cream{ border-color: var(--brand-cream); }
.border-brand-dark{ border-color: var(--brand-dark); }
.border-brand-medium{ border-color: var(--brand-medium); }
.border-brand-rose{ border-color: var(--brand-rose); }