/* Drift — AI Personal Library & Collections
   Pastel gradient wash, frosted glass, bento collections, Siri orb */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --dr-font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --dr-white: #FFFFFF;
  --dr-text: #1C1C1E;
  --dr-text-sec: #636366;
  --dr-text-mut: #AEAEB2;
  --dr-text-light: #8E8E93;
  --dr-border: rgba(0,0,0,0.06);
  --dr-pink: #E84393;
  --dr-blue: #3478F6;
  --dr-green: #34C759;
  --dr-orange: #FF6B35;
  --dr-glass: rgba(255,255,255,0.82);
  --dr-glass-border: rgba(255,255,255,0.6);
  --dr-radius: 20px;
  --dr-radius-sm: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--dr-font);
  background: #F0EEEC;
  color: var(--dr-text);
  -webkit-font-smoothing: antialiased;
}

.showcase {
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.showcase__title { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 6px; }
.showcase__subtitle { font-size: 1rem; color: var(--dr-text-sec); font-weight: 400; margin-bottom: 48px; }
.showcase__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 40px; justify-items: center; }
.showcase__item { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.showcase__label { font-size: 0.8125rem; font-weight: 600; color: var(--dr-text-sec); letter-spacing: 0.02em; }
.showcase__step { font-size: 0.6875rem; color: var(--dr-text-mut); font-weight: 500; }

.phone {
  width: 280px;
  height: 606px;
  border-radius: 44px;
  background: var(--dr-white);
  box-shadow: 0 0 0 2px #D1D1D6, 0 20px 60px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
  overflow: hidden;
  position: relative;
}
.phone::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 28px;
  background: #1A1A1A;
  border-radius: 20px;
  z-index: 20;
}
.phone__screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Pastel gradient background */
.dr-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    160deg,
    #FFFFFF 0%,
    #F0E8F4 15%,
    #E8E0F4 25%,
    #E0E8F8 35%,
    #E8F0F4 45%,
    #F0F4F0 55%,
    #E8F0F0 65%,
    #E0ECF4 75%,
    #E8E4F0 85%,
    #F0E8F0 100%
  );
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Orb */
.dr-orb {
  width: 32px; height: 32px; border-radius: 50%;
  background: conic-gradient(#FF6B9D,#C084FC,#60A5FA,#34D399,#FBBF24,#FF6B9D);
  filter: blur(0.5px);
  position: relative; flex-shrink: 0;
}
.dr-orb::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.3); backdrop-filter: blur(4px);
}

@media (max-width: 720px) {
  .showcase__grid { grid-template-columns: 1fr; }
}