/* =========================================================
   AYNASIA LABS — Design System
   Premium Black / White / Luxury Gold
   Display: Poppins  |  Body/UI: Inter
   ========================================================= */

:root{
  /* --- Color tokens --- */
  --ink:            #0A0A0C;   /* true near-black background */
  --ink-2:          #111114;   /* raised surface */
  --ink-3:          #17171B;   /* card surface */
  --ink-4:          #1E1E23;   /* hover surface */
  --hairline:       rgba(255,255,255,0.08);
  --hairline-2:     rgba(255,255,255,0.14);

  --gold:           #C9A227;
  --gold-bright:    #E7C351;
  --gold-dim:       #8A701C;
  --gold-glass:     rgba(201,162,39,0.12);

  --paper:          #F7F5EF;   /* warm white for light panels */
  --white:          #FFFFFF;
  --ivory-60:       rgba(247,245,239,0.62);
  --ivory-40:       rgba(247,245,239,0.4);

  --ink-text:       #EDEBE4;
  --muted:          #9A9A9E;
  --muted-2:        #6D6D72;

  --success:        #3FBE8F;
  --danger:          #E1685F;

  /* --- Type --- */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* --- Radius / shadow --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --shadow-soft: 0 20px 60px -20px rgba(0,0,0,0.55);
  --shadow-gold: 0 10px 40px -8px rgba(201,162,39,0.35);
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--ink-text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }

::selection{ background:var(--gold); color:var(--ink); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
  border-radius:4px;
}

/* --- background texture: fine gold vignette + grain-like radial --- */
.bg-field{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(201,162,39,0.16), transparent 60%),
    radial-gradient(900px 700px at 108% 10%, rgba(201,162,39,0.10), transparent 55%),
    radial-gradient(1200px 900px at 50% 120%, rgba(201,162,39,0.07), transparent 60%),
    var(--ink);
}
.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(1000px 700px at 50% 0%, black, transparent 75%);
}

.container{ width:100%; max-width:1280px; margin:0 auto; padding:0 32px; }
@media (max-width:900px){ .container{ padding:0 22px; } }
@media (max-width:560px){ .container{ padding:0 18px; } }

section{ position:relative; }

/* =========== Typography =========== */
.eyebrow{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-bright);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--white);
  margin:0;
  letter-spacing:-0.01em;
  font-weight:600;
}
.display-1{ font-size:clamp(40px, 6.4vw, 76px); line-height:1.03; font-weight:600; letter-spacing:-0.025em; }
.display-2{ font-size:clamp(30px, 3.6vw, 46px); line-height:1.08; letter-spacing:-0.02em; }
.display-3{ font-size:clamp(22px, 2.2vw, 30px); line-height:1.2; }
.lede{ font-size:clamp(16px,1.4vw,19px); color:var(--muted); line-height:1.6; font-weight:400; }
.gold-text{
  background:linear-gradient(100deg, var(--gold-bright) 10%, var(--gold) 45%, #a67f1b 70%, var(--gold-bright) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-head{ max-width:680px; margin-bottom:52px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ margin-top:16px; }

/* =========== Buttons =========== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:100px; border:1px solid transparent;
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  letter-spacing:0.01em; transition:all .35s var(--ease); white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn-gold{
  background:linear-gradient(135deg, var(--gold-bright), var(--gold) 60%, #a8811e);
  color:#191305; box-shadow:var(--shadow-gold);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 46px -8px rgba(201,162,39,0.55); }
.btn-ghost{
  background:rgba(255,255,255,0.03); color:var(--ink-text); border-color:var(--hairline-2);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.28); transform:translateY(-2px); }
.btn-sm{ padding:10px 18px; font-size:13px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* =========== Glass card =========== */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow-soft);
}
.card{
  background:var(--ink-3);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
}

/* =========== Nav =========== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:18px 0;
  transition:all .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,10,12,0.78);
  backdrop-filter:blur(16px);
  border-bottom-color:var(--hairline);
  padding:13px 0;
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--white); letter-spacing:-0.01em; }
.brand-mark{
  width:36px; height:36px; border-radius:10px;
  background:linear-gradient(145deg, var(--gold-bright), var(--gold-dim));
  display:flex; align-items:center; justify-content:center;
  color:#171208; font-family:var(--font-display); font-weight:700; font-size:16px;
  box-shadow:0 6px 18px -4px rgba(201,162,39,0.6);
}
.brand small{ display:block; font-family:var(--font-body); font-weight:500; font-size:10.5px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; margin-top:1px;}
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-size:13.5px; font-weight:500; color:var(--ivory-60); transition:color .25s;
  position:relative; padding:6px 0;
}
.nav-links a:hover{ color:var(--white); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold-bright); transition:width .3s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-burger{ display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--hairline-2); background:rgba(255,255,255,0.03); align-items:center; justify-content:center; color:var(--white); }
.mobile-menu{
  position:fixed; inset:0 0 auto 0; top:0; z-index:250; background:var(--ink-2);
  padding:22px 22px 30px; transform:translateY(-110%); transition:transform .45s var(--ease);
  border-bottom:1px solid var(--hairline-2); max-height:100vh; overflow:auto;
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu .mm-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.mobile-menu a{ display:block; padding:14px 4px; font-size:16px; border-bottom:1px solid var(--hairline); color:var(--ink-text); }

@media (max-width:940px){
  .nav-links{ display:none; }
  .nav-cta .btn-ghost{ display:none; }
  .nav-burger{ display:flex; }
}

/* =========== Hero =========== */
.hero{ padding:168px 0 110px; position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.02fr 0.98fr; gap:56px; align-items:center; }
.hero-badge{
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 8px;
  border-radius:100px; background:rgba(255,255,255,0.04); border:1px solid var(--hairline-2);
  font-size:12.5px; font-weight:500; color:var(--ivory-60); margin-bottom:26px;
}
.hero-badge .dot-live{
  width:22px; height:22px; border-radius:50%; background:var(--gold-glass); display:flex; align-items:center; justify-content:center;
}
.hero-badge .dot-live i{ width:7px; height:7px; border-radius:50%; background:var(--gold-bright); animation:pulseDot 1.8s infinite; }
@keyframes pulseDot{ 0%,100%{ box-shadow:0 0 0 0 rgba(231,195,81,.55);} 70%{ box-shadow:0 0 0 8px rgba(231,195,81,0);} }

.hero h1{ margin-bottom:22px; }
.hero .lede{ max-width:520px; margin-bottom:36px; }
.hero-actions{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-bottom:44px; }
.hero-actions .btn i{ font-size:13px; }
.trustbar{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.trustbar span{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted-2); font-weight:600; }
.trustbar .logos{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.trustbar .logos i{ font-size:20px; color:var(--muted); opacity:.7; transition:opacity .3s, color .3s; }
.trustbar .logos i:hover{ opacity:1; color:var(--gold-bright); }

/* Hero device / live booking preview */
.hero-visual{ position:relative; }
.device{
  position:relative; border-radius:26px; padding:22px;
  background:linear-gradient(155deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border:1px solid var(--hairline-2);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(20px);
}
.device-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.device-top .who{ display:flex; align-items:center; gap:10px; }
.device-top .avatar{
  width:38px; height:38px; border-radius:50%; background:linear-gradient(145deg,var(--gold-bright),var(--gold-dim));
  display:flex; align-items:center; justify-content:center; color:#171208; font-weight:700; font-family:var(--font-display);
}
.device-top .name{ font-weight:600; font-size:14px; color:var(--white); }
.device-top .status{ font-size:11.5px; color:var(--success); display:flex; align-items:center; gap:5px;}
.device-top .status i{ font-size:7px; }
.device-controls{ display:flex; gap:8px; }
.device-controls span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.12); }

.chat-window{ height:392px; overflow:hidden; position:relative; padding:6px 4px; }
.chat-scroll{ display:flex; flex-direction:column; gap:14px; }
.bubble{
  max-width:82%; padding:12px 15px; border-radius:16px; font-size:13.5px; line-height:1.5;
  opacity:0; transform:translateY(10px); animation:bubbleIn .5s var(--ease) forwards;
}
.bubble.bot{ align-self:flex-start; background:var(--ink-4); border:1px solid var(--hairline); border-bottom-left-radius:5px; color:var(--ink-text); }
.bubble.user{ align-self:flex-end; background:linear-gradient(135deg, var(--gold-bright), var(--gold)); color:#1a1508; border-bottom-right-radius:5px; font-weight:500; }
.bubble.card-msg{ align-self:flex-start; padding:0; background:transparent; border:none; max-width:92%; }
@keyframes bubbleIn{ to{ opacity:1; transform:translateY(0);} }

.slot-card{
  background:var(--ink-2); border:1px solid var(--hairline-2); border-radius:14px; padding:14px 16px; width:100%;
}
.slot-card .sc-head{ display:flex; align-items:center; gap:8px; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-bright); font-weight:700; margin-bottom:10px;}
.slot-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px dashed var(--hairline); font-size:13px; }
.slot-row:first-of-type{ border-top:none; }
.slot-row b{ color:var(--white); font-weight:600; }
.slot-confirm{ margin-top:10px; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--success); font-weight:600; }

.typing-indicator{ display:flex; gap:4px; align-self:flex-start; background:var(--ink-4); border:1px solid var(--hairline); padding:12px 15px; border-radius:16px; border-bottom-left-radius:5px; }
.typing-indicator span{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:typingBounce 1.2s infinite ease-in-out; }
.typing-indicator span:nth-child(2){ animation-delay:.18s; }
.typing-indicator span:nth-child(3){ animation-delay:.36s; }
@keyframes typingBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5;} 30%{ transform:translateY(-5px); opacity:1;} }

.device-input{ margin-top:16px; display:flex; align-items:center; gap:10px; background:var(--ink-2); border:1px solid var(--hairline); border-radius:100px; padding:9px 9px 9px 18px; }
.device-input span{ font-size:12.5px; color:var(--muted-2); flex:1; }
.device-input .mic{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); display:flex; align-items:center; justify-content:center; color:#1a1508; flex-shrink:0; }

.float-chip{
  position:absolute; padding:12px 16px; border-radius:14px; display:flex; align-items:center; gap:10px;
  background:var(--ink-3); border:1px solid var(--hairline-2); box-shadow:var(--shadow-soft); font-size:12.5px; font-weight:600;
  animation:floatY 5s ease-in-out infinite;
}
.float-chip i{ color:var(--gold-bright); }
.chip-1{ top:6%; right:-6%; animation-delay:0s; }
.chip-2{ bottom:8%; left:-8%; animation-delay:1.4s; }
@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@media (max-width:1180px){ .chip-1,.chip-2{ display:none; } }

@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ padding:140px 0 70px; }
  .hero-visual{ order:-1; max-width:460px; margin:0 auto 10px; }
}

/* =========== Logo strip =========== */
.logo-strip{ padding:34px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.logo-strip .container{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.logo-strip span.tag{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); font-weight:600; }
.logo-row{ display:flex; gap:38px; align-items:center; flex-wrap:wrap; }
.logo-row div{ display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600; font-size:14px; letter-spacing:-.01em; opacity:.75; transition:opacity .3s,color .3s; }
.logo-row div:hover{ opacity:1; color:var(--ink-text); }
.logo-row i{ font-size:16px; }

/* =========== Generic section spacing =========== */
.section{ padding:120px 0; }
@media (max-width:768px){ .section{ padding:80px 0; } }

/* =========== Tabs (Live demo) =========== */
.tab-bar{ display:inline-flex; padding:5px; border-radius:100px; background:var(--ink-3); border:1px solid var(--hairline); gap:4px; margin-bottom:40px; }
.tab-bar button{
  border:none; background:transparent; color:var(--muted); padding:10px 22px; border-radius:100px; font-size:13.5px; font-weight:600;
  display:flex; align-items:center; gap:8px; transition:all .3s var(--ease);
}
.tab-bar button.active{ background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#1a1508; box-shadow:var(--shadow-gold); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadeUp .5s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }

.demo-layout{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:32px; align-items:start; }
@media (max-width:940px){ .demo-layout{ grid-template-columns:1fr; } }

/* Voice demo */
.voice-panel{ padding:40px 34px; text-align:center; }
.voice-orb{
  width:150px; height:150px; margin:0 auto 26px; border-radius:50%; position:relative;
  background:radial-gradient(circle at 35% 30%, rgba(231,195,81,.55), rgba(201,162,39,.12) 60%, transparent 70%);
  display:flex; align-items:center; justify-content:center;
}
.voice-orb::before,.voice-orb::after{
  content:''; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(201,162,39,.4);
  animation:orbPulse 2.6s infinite ease-out;
}
.voice-orb::after{ animation-delay:1.3s; }
@keyframes orbPulse{ 0%{ transform:scale(.8); opacity:.9;} 100%{ transform:scale(1.6); opacity:0;} }
.voice-orb-core{ width:78px; height:78px; border-radius:50%; background:linear-gradient(145deg,var(--gold-bright),var(--gold-dim)); display:flex; align-items:center; justify-content:center; color:#1a1508; font-size:26px; box-shadow:0 10px 30px -6px rgba(201,162,39,.6); z-index:2; }
.voice-bars{ display:flex; align-items:flex-end; gap:4px; height:34px; justify-content:center; margin:6px 0 22px; }
.voice-bars span{ width:4px; border-radius:3px; background:var(--gold-bright); opacity:.55; animation:bar 1.1s ease-in-out infinite; }
.voice-bars span:nth-child(1){ height:40%; animation-delay:0s;} .voice-bars span:nth-child(2){ height:80%; animation-delay:.1s;} .voice-bars span:nth-child(3){ height:55%; animation-delay:.2s;} .voice-bars span:nth-child(4){ height:100%; animation-delay:.3s;} .voice-bars span:nth-child(5){ height:65%; animation-delay:.4s;} .voice-bars span:nth-child(6){ height:35%; animation-delay:.5s;} .voice-bars span:nth-child(7){ height:75%; animation-delay:.6s;}
@keyframes bar{ 0%,100%{ transform:scaleY(.4);} 50%{ transform:scaleY(1);} }
.voice-panel.listening .voice-bars span{ animation-play-state:running; }
.voice-transcript{ background:var(--ink-2); border:1px solid var(--hairline); border-radius:14px; padding:16px 18px; text-align:left; font-size:13.5px; color:var(--ivory-60); min-height:56px; margin-bottom:22px; }
.voice-transcript b{ color:var(--gold-bright); }
.voice-status{ font-size:12.5px; color:var(--muted-2); margin-bottom:22px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; }

/* Info side cards */
.info-stack{ display:flex; flex-direction:column; gap:16px; }
.info-card{ padding:22px 24px; display:flex; gap:16px; align-items:flex-start; }
.info-card .ic-icon{ width:44px; height:44px; border-radius:12px; background:var(--gold-glass); color:var(--gold-bright); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.info-card h4{ font-size:15.5px; margin-bottom:5px; }
.info-card p{ font-size:13.5px; color:var(--muted); line-height:1.55; margin:0; }

/* =========== Feature grid =========== */
.feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:1080px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .feature-grid{ grid-template-columns:1fr; } }
.feature-card{ padding:28px 26px; transition:transform .4s var(--ease), border-color .4s; }
.feature-card:hover{ transform:translateY(-6px); border-color:var(--hairline-2); }
.feature-card .fc-icon{ width:46px; height:46px; border-radius:13px; background:linear-gradient(145deg, rgba(201,162,39,.22), rgba(201,162,39,.06)); border:1px solid rgba(201,162,39,.25); color:var(--gold-bright); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:18px; }
.feature-card h4{ font-size:16px; margin-bottom:9px; }
.feature-card p{ font-size:13.5px; color:var(--muted); line-height:1.6; margin:0; }

/* =========== Dashboard preview (marketing) =========== */
.dash-frame{ padding:14px; }
.dash-topbar{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; margin-bottom:14px;}
.dash-topbar .l{ display:flex; gap:8px; }
.dash-topbar .l span{ width:10px; height:10px; border-radius:50%; }
.dash-topbar .l span:nth-child(1){ background:#E1685F;} .dash-topbar .l span:nth-child(2){ background:#E7C351;} .dash-topbar .l span:nth-child(3){ background:#3FBE8F;}
.dash-topbar .url{ font-size:12px; color:var(--muted-2); background:var(--ink-2); padding:6px 16px; border-radius:100px; }

/* =========== Calendar =========== */
.cal-shell{ padding:26px; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:14px; }
.cal-head h3{ font-size:19px; }
.cal-nav{ display:flex; align-items:center; gap:10px; }
.cal-nav button{ width:36px; height:36px; border-radius:10px; background:var(--ink-2); border:1px solid var(--hairline); color:var(--ink-text); display:flex; align-items:center; justify-content:center; transition:.25s; }
.cal-nav button:hover{ border-color:var(--gold); color:var(--gold-bright); }
.cal-view-switch{ display:flex; gap:4px; background:var(--ink-2); padding:4px; border-radius:100px; border:1px solid var(--hairline); }
.cal-view-switch button{ border:none; background:transparent; color:var(--muted); font-size:12.5px; font-weight:600; padding:7px 15px; border-radius:100px; }
.cal-view-switch button.active{ background:var(--gold); color:#1a1508; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.cal-dow{ text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); font-weight:700; padding-bottom:6px; }
.cal-cell{
  aspect-ratio:1/0.92; border-radius:10px; background:var(--ink-2); border:1px solid var(--hairline); padding:8px; position:relative;
  font-size:12.5px; color:var(--ivory-60); cursor:pointer; transition:.25s;
}
.cal-cell:hover{ border-color:var(--gold-dim); background:var(--ink-4); }
.cal-cell.muted{ opacity:.32; }
.cal-cell.today{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; }
.cal-cell .n{ font-weight:600; color:var(--white); }
.cal-dots{ display:flex; gap:3px; margin-top:6px; flex-wrap:wrap; }
.cal-dots span{ width:5px; height:5px; border-radius:50%; background:var(--gold-bright); }
.cal-dots span.busy{ background:var(--danger); }
.cal-dots span.tele{ background:#7CA9E8; }

.cal-week{ display:grid; grid-template-columns:64px repeat(7,1fr); gap:6px; }
.cal-week .wh{ text-align:center; font-size:11px; color:var(--muted-2); font-weight:700; text-transform:uppercase; padding-bottom:6px;}
.cal-week .hour{ font-size:11px; color:var(--muted-2); text-align:right; padding-right:6px; padding-top:2px; }
.cal-slot{ background:var(--ink-2); border:1px solid var(--hairline); border-radius:6px; min-height:44px; position:relative; }
.cal-slot .evt{ position:absolute; inset:2px; border-radius:5px; padding:4px 6px; font-size:10.5px; font-weight:600; overflow:hidden; }
.evt.gold{ background:rgba(201,162,39,.22); border:1px solid rgba(201,162,39,.5); color:var(--gold-bright); }
.evt.blue{ background:rgba(124,169,232,.18); border:1px solid rgba(124,169,232,.4); color:#a8c5f0; }
.evt.green{ background:rgba(63,190,143,.18); border:1px solid rgba(63,190,143,.4); color:#8fdcbd; }

.day-list{ display:flex; flex-direction:column; gap:10px; max-height:520px; overflow:auto; padding-right:4px;}
.day-item{ display:flex; gap:14px; padding:14px 16px; border-radius:12px; background:var(--ink-2); border:1px solid var(--hairline); align-items:center; }
.day-item .time{ font-size:12px; font-weight:700; color:var(--gold-bright); width:64px; flex-shrink:0; }
.day-item .who{ flex:1; }
.day-item .who b{ display:block; font-size:13.5px; color:var(--white); }
.day-item .who span{ font-size:11.5px; color:var(--muted); }
.pill{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:5px 10px; border-radius:100px; }
.pill.confirmed{ background:rgba(63,190,143,.15); color:var(--success); }
.pill.pending{ background:rgba(231,195,81,.15); color:var(--gold-bright); }
.pill.cancelled{ background:rgba(225,104,95,.15); color:var(--danger); }

/* =========== Stat cards (analytics) =========== */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:28px;}
@media (max-width:980px){ .stat-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .stat-grid{ grid-template-columns:1fr;} }
.stat-card{ padding:24px; }
.stat-card .sc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.stat-card .sc-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.stat-card .sc-delta{ font-size:11.5px; font-weight:700; display:flex; align-items:center; gap:4px; }
.sc-delta.up{ color:var(--success); } .sc-delta.down{ color:var(--danger); }
.stat-card .sc-value{ font-family:var(--font-display); font-size:30px; color:var(--white); font-weight:600; margin-bottom:4px; }
.stat-card .sc-label{ font-size:12.5px; color:var(--muted); }

.chart-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:22px; }
@media (max-width:980px){ .chart-grid{ grid-template-columns:1fr; } }
.chart-card{ padding:26px; }
.chart-card .ch-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.chart-card h4{ font-size:15px; }
.chart-legend{ display:flex; gap:16px; font-size:11.5px; color:var(--muted); }
.chart-legend span{ display:inline-flex; align-items:center; gap:6px; }
.chart-legend i{ width:8px; height:8px; border-radius:2px; }
.chart-wrap{ position:relative; height:260px; }
.chart-wrap.sm{ height:220px; }

/* =========== ROI Calculator =========== */
.roi-shell{ display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden; }
@media (max-width:900px){ .roi-shell{ grid-template-columns:1fr; } }
.roi-inputs{ padding:44px; border-right:1px solid var(--hairline); }
@media (max-width:900px){ .roi-inputs{ border-right:none; border-bottom:1px solid var(--hairline); } }
.roi-field{ margin-bottom:28px; }
.roi-field label{ display:flex; justify-content:space-between; font-size:13px; color:var(--ivory-60); font-weight:500; margin-bottom:12px; }
.roi-field label b{ color:var(--gold-bright); font-family:var(--font-display); font-size:15px; }
input[type=range]{
  -webkit-appearance:none; width:100%; height:4px; border-radius:4px; background:var(--ink-4); outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold)); box-shadow:0 4px 14px rgba(201,162,39,.6); cursor:pointer; border:3px solid var(--ink);
}
input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--gold); border:3px solid var(--ink); cursor:pointer; }
.roi-select{ width:100%; padding:13px 16px; background:var(--ink-2); border:1px solid var(--hairline-2); border-radius:10px; color:var(--white); font-size:14px; }
.roi-results{ padding:44px; background:linear-gradient(155deg, rgba(201,162,39,.08), transparent 60%); display:flex; flex-direction:column; justify-content:center; }
.roi-big{ margin-bottom:30px; }
.roi-big .lbl{ font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-2); font-weight:700; margin-bottom:8px; }
.roi-big .val{ font-family:var(--font-display); font-size:52px; font-weight:600; color:var(--white); line-height:1; }
.roi-sub{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.roi-sub .item{ padding:16px; border-radius:12px; background:var(--ink-2); border:1px solid var(--hairline); }
.roi-sub .item .n{ font-family:var(--font-display); font-size:22px; color:var(--gold-bright); font-weight:600; }
.roi-sub .item .t{ font-size:11.5px; color:var(--muted); margin-top:4px; }

/* =========== Integrations =========== */
.integ-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
@media (max-width:900px){ .integ-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .integ-grid{ grid-template-columns:repeat(2,1fr);} }
.integ-card{ padding:26px 18px; text-align:center; transition:transform .35s var(--ease), border-color .35s; cursor:pointer; }
.integ-card:hover{ transform:translateY(-5px); border-color:var(--gold-dim); }
.integ-card i{ font-size:30px; margin-bottom:14px; color:var(--ink-text); }
.integ-card:hover i{ color:var(--gold-bright); }
.integ-card .name{ font-size:13px; font-weight:600; color:var(--ink-text); }
.integ-card .desc{ font-size:11px; color:var(--muted-2); margin-top:3px; }

/* =========== Automation workflow =========== */
.flow-wrap{ display:flex; align-items:stretch; gap:0; overflow-x:auto; padding:10px 4px 26px; }
.flow-step{ flex:0 0 240px; padding:24px; margin-right:0; position:relative; }
.flow-connector{ flex:0 0 44px; display:flex; align-items:center; justify-content:center; color:var(--gold-dim); font-size:18px; }
.flow-step .fs-num{ font-family:var(--font-display); font-size:12px; color:var(--gold-bright); font-weight:700; letter-spacing:.06em; margin-bottom:12px; }
.flow-step .fs-icon{ width:42px; height:42px; border-radius:12px; background:var(--gold-glass); color:var(--gold-bright); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:16px; }
.flow-step h4{ font-size:14.5px; margin-bottom:8px; }
.flow-step p{ font-size:12.5px; color:var(--muted); line-height:1.55; margin:0; }

/* =========== AI Settings panel =========== */
.settings-layout{ display:grid; grid-template-columns:240px 1fr; gap:24px; }
@media (max-width:860px){ .settings-layout{ grid-template-columns:1fr; } }
.settings-nav{ padding:14px; height:fit-content; }
.settings-nav button{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:13px 14px; border-radius:10px; border:none;
  background:transparent; color:var(--muted); font-size:13.5px; font-weight:500; margin-bottom:4px; transition:.25s;
}
.settings-nav button i{ width:16px; text-align:center; }
.settings-nav button.active{ background:var(--gold-glass); color:var(--gold-bright); font-weight:600; }
.settings-nav button:hover:not(.active){ background:var(--ink-2); color:var(--ink-text); }
.settings-panel{ padding:30px; }
.settings-panel h3{ font-size:17px; margin-bottom:4px; }
.settings-panel .sub{ font-size:13px; color:var(--muted); margin-bottom:26px; }
.settings-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-top:1px solid var(--hairline); gap:20px; }
.settings-row:first-of-type{ border-top:none; }
.settings-row .label{ font-size:14px; font-weight:500; color:var(--ink-text); }
.settings-row .hint{ font-size:12px; color:var(--muted-2); margin-top:3px; }

.switch{ width:46px; height:26px; border-radius:100px; background:var(--ink-4); border:1px solid var(--hairline-2); position:relative; flex-shrink:0; transition:.3s; }
.switch::after{ content:''; position:absolute; width:20px; height:20px; border-radius:50%; background:var(--muted); top:2px; left:2px; transition:.3s var(--ease); }
.switch.on{ background:var(--gold-glass); border-color:var(--gold-dim); }
.switch.on::after{ transform:translateX(20px); background:var(--gold-bright); }

.chip-select{ display:flex; gap:8px; flex-wrap:wrap; }
.chip-select button{ padding:9px 16px; border-radius:100px; background:var(--ink-2); border:1px solid var(--hairline-2); color:var(--muted); font-size:12.5px; font-weight:600; }
.chip-select button.active{ background:var(--gold); color:#1a1508; border-color:var(--gold); }

/* =========== Testimonials =========== */
.test-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:940px){ .test-grid{ grid-template-columns:1fr; } }
.test-card{ padding:28px; display:flex; flex-direction:column; gap:18px; }
.test-stars{ color:var(--gold-bright); font-size:13px; letter-spacing:2px; }
.test-quote{ font-size:14.5px; line-height:1.65; color:var(--ivory-60); }
.test-person{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.test-avatar{ width:44px; height:44px; border-radius:50%; background:linear-gradient(145deg,var(--gold-bright),var(--gold-dim)); display:flex; align-items:center; justify-content:center; color:#1a1508; font-weight:700; font-family:var(--font-display); font-size:15px; flex-shrink:0; }
.test-person b{ display:block; font-size:13.5px; color:var(--white); }
.test-person span{ font-size:12px; color:var(--muted); }

.metrics-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:60px; padding-top:50px; border-top:1px solid var(--hairline); }
@media (max-width:768px){ .metrics-strip{ grid-template-columns:repeat(2,1fr); } }
.metric-item{ text-align:center; }
.metric-item .num{ font-family:var(--font-display); font-size:clamp(30px,4vw,44px); color:var(--white); font-weight:600; }
.metric-item .num span{ color:var(--gold-bright); }
.metric-item .lbl{ font-size:12.5px; color:var(--muted); margin-top:6px; }

/* =========== Pricing =========== */
.pricing-toggle{ display:flex; align-items:center; justify-content:center; gap:14px; margin:0 auto 50px; width:fit-content; }
.pricing-toggle span{ font-size:13.5px; color:var(--muted); font-weight:600; }
.pricing-toggle span.active{ color:var(--white); }
.save-badge{ font-size:10.5px; background:var(--gold-glass); color:var(--gold-bright); padding:3px 9px; border-radius:100px; font-weight:700; margin-left:6px; }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
@media (max-width:940px){ .pricing-grid{ grid-template-columns:1fr; max-width:440px; margin:0 auto; } }
.price-card{ padding:36px 30px; display:flex; flex-direction:column; position:relative; }
.price-card.featured{ border-color:var(--gold-dim); background:linear-gradient(165deg, rgba(201,162,39,.1), var(--ink-3) 55%); transform:scale(1.03); box-shadow:0 30px 70px -20px rgba(201,162,39,.25); }
.price-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:#1a1508; font-size:11px; font-weight:700; padding:6px 16px; border-radius:100px; letter-spacing:.04em; }
.price-card .plan-name{ font-family:var(--font-display); font-size:19px; color:var(--white); margin-bottom:6px; }
.price-card .plan-desc{ font-size:13px; color:var(--muted); margin-bottom:24px; min-height:36px; }
.price-card .plan-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:26px; }
.price-card .plan-price .amt{ font-family:var(--font-display); font-size:42px; color:var(--white); font-weight:600; }
.price-card .plan-price .per{ font-size:13px; color:var(--muted); }
.plan-features{ margin-bottom:28px; display:flex; flex-direction:column; gap:12px; flex:1; }
.plan-features li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--ivory-60); }
.plan-features li i{ color:var(--gold-bright); font-size:12px; margin-top:3px; }

/* =========== FAQ =========== */
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ border-radius:16px; overflow:hidden; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; padding:22px 26px; gap:16px; }
.faq-q span{ font-size:15px; font-weight:500; color:var(--white); }
.faq-q i{ color:var(--gold-bright); transition:transform .35s var(--ease); flex-shrink:0; }
.faq-item.open .faq-q i{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ padding:0 26px 22px; font-size:13.5px; color:var(--muted); line-height:1.65; margin:0; }

/* =========== CTA =========== */
.cta-section{ padding:100px 0; }
.cta-box{ padding:70px 60px; text-align:center; position:relative; overflow:hidden; }
.cta-box::before{ content:''; position:absolute; inset:0; background:radial-gradient(700px 300px at 50% 0%, rgba(201,162,39,.22), transparent 70%); pointer-events:none; }
.cta-box h2{ margin-bottom:16px; }
.cta-box p{ max-width:500px; margin:0 auto 34px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
@media (max-width:640px){ .cta-box{ padding:50px 26px; } }

/* =========== Footer =========== */
.footer{ padding:80px 0 30px; border-top:1px solid var(--hairline); }
.footer-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; margin-bottom:60px; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand p{ font-size:13.5px; color:var(--muted); line-height:1.65; margin:16px 0 20px; max-width:280px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:9px; background:var(--ink-2); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:.3s; }
.footer-social a:hover{ color:var(--gold-bright); border-color:var(--gold-dim); }
.footer-col h5{ font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--white); font-weight:700; margin-bottom:18px; }
.footer-col a{ display:block; font-size:13.5px; color:var(--muted); margin-bottom:12px; transition:color .25s; }
.footer-col a:hover{ color:var(--gold-bright); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:26px; border-top:1px solid var(--hairline); font-size:12.5px; color:var(--muted-2); flex-wrap:wrap; gap:14px; }
.footer-bottom .flinks{ display:flex; gap:22px; }

/* =========== Toast / notification =========== */
.toast-stack{ position:fixed; bottom:26px; right:26px; z-index:400; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.toast{
  display:flex; align-items:center; gap:12px; padding:14px 18px; border-radius:14px; background:var(--ink-3); border:1px solid var(--hairline-2);
  box-shadow:var(--shadow-soft); min-width:280px; transform:translateX(120%); opacity:0; transition:all .5s var(--ease);
}
.toast.show{ transform:translateX(0); opacity:1; }
.toast .t-icon{ width:34px; height:34px; border-radius:9px; background:rgba(63,190,143,.15); color:var(--success); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.toast .t-body b{ display:block; font-size:13px; color:var(--white); }
.toast .t-body span{ font-size:11.5px; color:var(--muted); }
@media (max-width:600px){ .toast-stack{ left:16px; right:16px; align-items:stretch; } .toast{ min-width:0; } }

/* =========== Modal =========== */
.modal-overlay{ position:fixed; inset:0; background:rgba(4,4,5,.72); backdrop-filter:blur(6px); z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); }
.modal-overlay.show{ opacity:1; pointer-events:auto; }
.modal-box{ width:100%; max-width:460px; padding:36px 32px; transform:translateY(24px) scale(.97); transition:transform .4s var(--ease); }
.modal-overlay.show .modal-box{ transform:translateY(0) scale(1); }
.modal-close{ position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:9px; background:var(--ink-2); border:1px solid var(--hairline); color:var(--muted); display:flex; align-items:center; justify-content:center; }
.modal-icon{ width:56px; height:56px; border-radius:16px; background:var(--gold-glass); color:var(--gold-bright); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:20px; }
.modal-box h3{ font-size:20px; margin-bottom:8px; }
.modal-box p.msub{ font-size:13.5px; color:var(--muted); margin-bottom:24px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ivory-60); margin-bottom:8px; }
.field input, .field select{ width:100%; padding:12px 14px; background:var(--ink-2); border:1px solid var(--hairline-2); border-radius:10px; color:var(--white); font-size:13.5px; }
.field input:focus, .field select:focus{ border-color:var(--gold-dim); }

/* utility */
.mt-40{ margin-top:40px; } .center-text{ text-align:center; }
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* =========== Dashboard app shell (dashboard.html) =========== */
.app-shell{ display:grid; grid-template-columns:264px 1fr; min-height:100vh; }
.app-sidebar{ background:var(--ink-2); border-right:1px solid var(--hairline); padding:22px 18px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.app-sidebar .brand{ padding:0 8px; margin-bottom:34px; }
.side-nav{ display:flex; flex-direction:column; gap:3px; flex:1; }
.side-nav a{ display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:11px; font-size:13.5px; font-weight:500; color:var(--muted); transition:.25s; }
.side-nav a i{ width:18px; text-align:center; font-size:14.5px; }
.side-nav a:hover{ background:var(--ink-4); color:var(--ink-text); }
.side-nav a.active{ background:var(--gold-glass); color:var(--gold-bright); font-weight:600; }
.side-nav .nav-section{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-2); font-weight:700; margin:20px 14px 8px; }
.side-foot{ padding:14px; border-radius:14px; background:var(--ink-3); border:1px solid var(--hairline); display:flex; align-items:center; gap:12px; }
.side-foot .avatar{ width:38px; height:38px; border-radius:10px; background:linear-gradient(145deg,var(--gold-bright),var(--gold-dim)); display:flex; align-items:center; justify-content:center; color:#1a1508; font-weight:700; font-family:var(--font-display); font-size:14px; flex-shrink:0; }
.side-foot b{ display:block; font-size:12.5px; color:var(--white); }
.side-foot span{ font-size:11px; color:var(--muted-2); }

.app-main{ padding:26px 34px 60px; max-width:1400px; }
.app-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; gap:20px; flex-wrap:wrap; }
.app-topbar h1{ font-size:24px; }
.app-topbar .sub{ font-size:13.5px; color:var(--muted); margin-top:4px; }
.topbar-actions{ display:flex; align-items:center; gap:12px; }
.icon-btn{ width:42px; height:42px; border-radius:12px; background:var(--ink-3); border:1px solid var(--hairline); display:flex; align-items:center; justify-content:center; color:var(--ink-text); position:relative; }
.icon-btn .badge{ position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:50%; background:var(--gold); color:#1a1508; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; }

.app-section{ display:none; }
.app-section.active{ display:block; animation:fadeUp .45s var(--ease); }

.mobile-sidebar-toggle{ display:none; }
@media (max-width:1080px){
  .app-shell{ grid-template-columns:1fr; }
  .app-sidebar{ position:fixed; left:0; top:0; z-index:300; width:264px; transform:translateX(-105%); transition:transform .4s var(--ease); }
  .app-sidebar.open{ transform:translateX(0); }
  .mobile-sidebar-toggle{ display:flex; }
  .app-main{ padding:22px 18px 60px; }
}
@media (max-width:640px){
  .stat-grid, .chart-grid, .settings-layout{ grid-template-columns:1fr; }
}

.sidebar-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:290; opacity:0; pointer-events:none; transition:opacity .35s; }
.sidebar-overlay.show{ opacity:1; pointer-events:auto; }

.table-card{ padding:0; overflow:hidden; }
.table-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--hairline); flex-wrap:wrap; gap:14px; }
table.data-table{ width:100%; border-collapse:collapse; }
table.data-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted-2); font-weight:700; padding:14px 24px; border-bottom:1px solid var(--hairline); }
table.data-table td{ padding:16px 24px; font-size:13.5px; color:var(--ivory-60); border-bottom:1px solid var(--hairline); }
table.data-table tr:last-child td{ border-bottom:none; }
table.data-table tr:hover td{ background:rgba(255,255,255,0.015); }
.row-user{ display:flex; align-items:center; gap:12px; }
.row-avatar{ width:34px; height:34px; border-radius:9px; background:var(--ink-4); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:var(--gold-bright); flex-shrink:0; }
.search-box{ display:flex; align-items:center; gap:10px; background:var(--ink-2); border:1px solid var(--hairline-2); border-radius:10px; padding:10px 14px; min-width:240px; }
.search-box input{ background:none; border:none; outline:none; color:var(--white); font-size:13px; width:100%; }
.search-box i{ color:var(--muted-2); }