/* Urbance Brand Theme - VisionOS + Liquid UI */
:root{
  --blue-royal:#1A73E8;/* Primary */
  --blue-ultralight:#E8F1FD;/* Ultra-Light */
  --blue-aqua:#4FC3F7;/* Accent */
  --purple-soft:#B39DFF;/* Accent */
  --white:#FFFFFF;
  --gray-soft:#F5F7FA;
  --navy:#0A1A2F;
  --text:#0A1A2F;
  --radius-lg:28px;
  --radius-md:20px;
  --blur-strong:18px;
  --glass-alpha:0.15;
  --shadow-soft:0 20px 40px rgba(10,26,47,0.12);
  --shadow-hover:0 30px 60px rgba(26,115,232,0.18);
  --transition-fast:200ms;
  --transition-base:350ms;
}

/* Premium font stack */
html,body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;color:var(--text);background:var(--white);} 

/* VisionOS glass card */
.glass{background:rgba(255,255,255,var(--glass-alpha));backdrop-filter:saturate(180%) blur(var(--blur-strong));border:1px solid rgba(255,255,255,0.4);box-shadow:var(--shadow-soft);border-radius:var(--radius-lg);} 

/* Primary gradient */
.gradient-primary{background:radial-gradient(1200px 600px at 10% 10%, rgba(79,195,247,0.6) 0%, rgba(27,115,232,0.45) 30%, rgba(10,26,47,0.5) 100%),
 linear-gradient(135deg, #1A73E8 0%, #4FC3F7 50%, #B39DFF 100%);} 

/* Animated blurred shapes */
.shape{position:absolute;filter:blur(40px);opacity:0.35;mix-blend-mode:screen;border-radius:50%;animation:float var(--transition-base) ease-in-out infinite alternate;} 
@keyframes float{from{transform:translateY(0) scale(1);}to{transform:translateY(-16px) scale(1.04);} }

/* Liquid/Jelly buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,0.35);color:var(--white);background:linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.06));box-shadow:var(--shadow-soft);transition:transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);} 
.btn-primary{background:linear-gradient(180deg, rgba(26,115,232,0.9), rgba(26,115,232,0.7));}
.btn-outline{color:var(--blue-royal);background:rgba(255,255,255,0.8);} 
.btn:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);filter:saturate(120%);} 

/* Pill categories */
.pill{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;background:rgba(232,241,253,0.8);border:1px solid rgba(26,115,232,0.15);color:var(--navy);gap:8px;transition:all var(--transition-fast);} 
.pill:hover{background:rgba(26,115,232,0.08);color:var(--blue-royal);box-shadow:0 8px 20px rgba(26,115,232,0.12);} 

/* Card style */
.card{border-radius:24px;background:linear-gradient(180deg, #FFFFFF, #F9FBFF);border:1px solid rgba(26,115,232,0.12);box-shadow:var(--shadow-soft);transition:transform var(--transition-fast), box-shadow var(--transition-fast);} 
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover);} 

/* Animated search bar */
.search{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:24px;background:rgba(255,255,255,0.7);backdrop-filter:blur(14px);border:1px solid rgba(26,115,232,0.18);box-shadow:0 8px 28px rgba(10,26,47,0.12);} 
.search input{flex:1;border:none;background:transparent;outline:none;font-size:18px;color:var(--navy);} 

/* Mascot bubble */
.mascot-bubble{position:fixed;right:22px;bottom:22px;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg, #1A73E8, #4FC3F7);box-shadow:0 20px 40px rgba(26,115,232,0.35);display:grid;place-items:center;cursor:pointer;animation:wave 3.5s ease-in-out infinite;} 
@keyframes wave{0%{transform:rotate(0deg) translateY(0);}50%{transform:rotate(2deg) translateY(-4px);}100%{transform:rotate(0deg) translateY(0);} }

/* Jelly separators */
.separator{height:80px;background:radial-gradient(600px 200px at 50% 50%, rgba(26,115,232,0.12), rgba(10,26,47,0) 70%);} 

/* Utility */
.container{max-width:1200px;margin:0 auto;padding:0 24px;} 
.h1{font-size:56px;letter-spacing:-0.02em;line-height:1.05;} 
.h2{font-size:36px;letter-spacing:-0.01em;} 
.text-sub{font-size:20px;color:#24364f;}