/* Fitonist-inspired tokens — dark, purple accent */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --f-bg:        #0B0B14;
  --f-bg-1:      #0F0F1A;
  --f-bg-2:      #15162340;
  --f-card:      #000000;
  --f-card-2:    #1C1C2A;
  --f-sheet:     #F6F3EC;   /* warm off-white for contrast cards */

  --f-border:    rgba(255,255,255,0.08);
  --f-border-soft: rgba(255,255,255,0.05);

  --f-fg:        #FFFFFF;
  --f-fg-2:      #A5A5B8;
  --f-fg-3:      #6C6C82;
  --f-fg-ink:    #0B0B14;

  --f-accent:    #7B5CFF;    /* hero purple */
  --f-accent-2:  #A98CFF;
  --f-cta:       #3B82F6;    /* Petroll-nod blue for CTAs */
  --f-cta-2:     #5B9BFF;

  --f-success:   #3FB27A;
  --f-warn:      #E8A53C;

  --f-font: 'Inter', -apple-system, sans-serif;

  --f-radius-xl: 32px;
  --f-radius-lg: 24px;
  --f-radius: 18px;
  --f-radius-sm: 12px;
  --f-radius-pill: 999px;

  --f-shadow-glow: 0 0 48px rgba(123,92,255,0.25);
  --f-ease: cubic-bezier(0.2,0.7,0.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--f-font); background: #1a1528; color: var(--f-fg); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }

/* ====== shared ====== */
.f-card {
  background: var(--f-card);
  border: 1px solid var(--f-border-soft);
  border-radius: var(--f-radius-lg);
  padding: 20px;
}
.f-sheet {
  background: var(--f-sheet);
  color: var(--f-fg-ink);
  border-radius: var(--f-radius-lg);
  padding: 20px;
}

.f-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 24px; border-radius: var(--f-radius-pill);
  font-weight: 600; font-size: 14px;
  transition: all .2s var(--f-ease);
  width: 100%;
}
.f-btn-primary { background: var(--f-cta); color: #fff; }
.f-btn-primary:hover { background: var(--f-cta-2); }
.f-btn-primary:active { transform: scale(0.98); }
.f-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.f-btn-ghost:hover { border-color: rgba(255,255,255,0.5); }
.f-btn-dark { background: #000; color: #fff; }
.f-btn-purple { background: var(--f-accent); color: #fff; }
.f-btn-purple:hover { background: var(--f-accent-2); }

.f-input {
  width: 100%; background: rgba(255,255,255,0.06); border: 1px solid var(--f-border);
  border-radius: var(--f-radius-sm); padding: 14px 16px; font-size: 14px; color: var(--f-fg);
  outline: none; transition: border-color .2s;
}
.f-input:focus { border-color: var(--f-accent); }

.f-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--f-radius-pill);
  background: rgba(255,255,255,0.06); color: #fff;
  font-size: 13px; font-weight: 500;
  border: 1px solid transparent;
  transition: all .2s;
}
.f-chip.active { background: rgba(123,92,255,0.15); border-color: var(--f-accent); color: var(--f-accent-2); }

/* ====== phone frame ====== */
.f-phone {
  width: 390px; margin: 24px auto; background: var(--f-bg);
  border-radius: 44px; overflow: hidden;
  border: 10px solid #1a1a28;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 2px #2a2a3a;
  position: relative;
  min-height: 780px;
}
.f-statusbar {
  height: 44px; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 600; color: #fff;
  position: relative; z-index: 10;
}
.f-notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 32px; background: #000; border-radius: 20px; z-index: 20;
}

.f-screen {
  padding: 0 20px 100px;
  position: relative;
}

.f-tabbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(11,11,20,0.92); backdrop-filter: blur(20px);
  padding: 12px 20px 26px;
  display: flex; justify-content: space-around;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.f-tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--f-fg-3); font-size: 10px; font-weight: 500;
  padding: 6px 14px; border-radius: 12px;
  transition: all .2s;
}
.f-tab.active { color: var(--f-accent-2); background: rgba(123,92,255,0.12); }

::-webkit-scrollbar { width: 0; }

.f-gradient-text {
  background: linear-gradient(135deg, #7B5CFF 0%, #3B82F6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.glow-ring {
  filter: drop-shadow(0 0 16px rgba(123,92,255,0.4));
}