/* Barber Business page styles */

html{scroll-behavior:smooth;scroll-padding-top:70px;}
body{font-family:'Manrope',system-ui,sans-serif;background:#F8F9FA;color:#0F172A;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;}

/* ── Progress ── */
#progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,#006BE1,#3B93F7);z-index:9999;width:0%;transition:width .1s linear;pointer-events:none;}

/* ── Navbar ── */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,border-color .3s,box-shadow .3s;}
#nav.solid{background:rgba(32,37,41,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid #2e3740;box-shadow:0 4px 24px rgba(0,0,0,.3);}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:62px;display:flex;align-items:center;justify-content:space-between;}

/* ── Hero ── */
.hero{background:radial-gradient(80.01% 67.2% at 50% 100%,rgba(0,107,225,.5) 0%,rgba(0,107,225,0) 100%),#202529;position:relative;overflow:hidden;padding-top:62px;}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:52px 52px;pointer-events:none;}

/* ── Ticker ── */
.ticker-track{overflow:hidden;background:#111518;border-top:1px solid rgba(255,255,255,.06);}
.ticker-content{display:flex;align-items:center;width:max-content;animation:ticker-scroll 35s linear infinite;}
.ticker-item{display:flex;align-items:center;gap:8px;padding:14px 32px;color:rgba(248,249,250,.65);font-size:13px;font-weight:600;white-space:nowrap;}
.ticker-sep{color:rgba(248,249,250,.2);padding:0 8px;font-size:12px;}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Animations ── */
@keyframes float-a{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes float-b{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes float-c{0%,100%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(-7px) rotate(-1deg)}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(0,107,225,.4)}70%{box-shadow:0 0 0 10px rgba(0,107,225,0)}100%{box-shadow:0 0 0 0 rgba(0,107,225,0)}}
@keyframes slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.float-a{animation:float-a 5s ease-in-out infinite;}
.float-b{animation:float-b 6.5s ease-in-out infinite;}
.float-c{animation:float-c 4.5s ease-in-out infinite 1s;}

/* ── Scroll reveal ── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.reveal-left.in{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(30px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.reveal-right.in{opacity:1;transform:translateX(0);}

/* ── Glass notif cards ── */
.notif{background:rgba(255,255,255,.97);border:1px solid rgba(226,232,240,.8);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);padding:12px 16px;display:flex;align-items:center;gap:12px;white-space:nowrap;}
.notif-dark{background:rgba(0,0,0,.4);border:1px solid rgba(248,249,250,.2);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.2);padding:16px 20px;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);}

/* ── Calendar ── */
.cal-chrome{background:#F8FAFC;border-bottom:1px solid #E2E8F0;padding:10px 16px;display:flex;align-items:center;gap:7px;}
.cal-dot{width:11px;height:11px;border-radius:50%;}
.appt{border-radius:5px;padding:4px 7px;font-size:9.5px;line-height:1.35;position:absolute;left:2px;right:2px;overflow:hidden;}

/* ── Slider ── */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;outline:none;cursor:pointer;background:#E2E8F0;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#006BE1;border:3px solid #fff;box-shadow:0 0 0 2px #006BE1,0 2px 8px rgba(0,107,225,.3);cursor:pointer;transition:transform .15s,box-shadow .15s;}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 0 3px rgba(0,107,225,.25),0 2px 10px rgba(0,107,225,.4);}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#006BE1;border:3px solid #fff;cursor:pointer;}

/* ── Feature accordion ── */
.feat-body{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.4,0,.2,1);}
.feat-item:has(input:checked) .feat-body{max-height:160px;}
.feat-chevron{transition:transform .3s cubic-bezier(.4,0,.2,1);}
.feat-item:has(input:checked) .feat-chevron{transform:rotate(180deg);}
.feat-item label{cursor:pointer;display:flex;align-items:center;gap:12px;}

/* ── FAQ accordion ── */
.faq-body{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .2s;}
.faq-item:has(input:checked) .faq-body{max-height:800px;}
.faq-chevron{transition:transform .3s cubic-bezier(.4,0,.2,1);}
.faq-item:has(input:checked) .faq-chevron{transform:rotate(180deg);}
.faq-item label{cursor:pointer;}

/* ── Pill toggle ── */
.pill{width:48px;height:26px;background:#334155;border-radius:13px;position:relative;cursor:pointer;transition:background .25s;}
.pill.on{background:#006BE1;}
.pill-dot{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 4px rgba(0,0,0,.2);}
.pill.on .pill-dot{transform:translateX(22px);}

/* ── Pricing ── */
.plan-card{background:var(--color-navyb);border:1px solid #2e3740;border-radius:16px;padding:28px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;}
.plan-card:hover{transform:translateY(-3px);}
.plan-featured{border-color:#006BE1;box-shadow:0 0 0 1px rgba(0,107,225,.4),0 24px 64px rgba(0,107,225,.2),0 8px 24px rgba(0,0,0,.3);}
.plan-featured:hover{box-shadow:0 0 0 1px rgba(0,107,225,.6),0 32px 80px rgba(0,107,225,.25),0 8px 32px rgba(0,0,0,.4);}
.pricing-seg{color:rgba(248,249,250,.45);transition:background .2s,color .2s;}

/* ── Buttons ── */
.btn-blue{display:inline-flex;align-items:center;gap:7px;background:#006BE1;color:#fff;border-radius:9px;font-weight:700;font-size:14px;padding:11px 22px;transition:background .15s,transform .15s,box-shadow .15s;white-space:nowrap;border:none;cursor:pointer;}
.btn-blue:hover{background:#0057B8;transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,107,225,.45);}
.btn-blue:active{transform:translateY(0);}
.btn-ghost-w{display:inline-flex;align-items:center;gap:7px;border:1.5px solid rgba(255,255,255,.2);color:#fff;border-radius:9px;font-weight:500;font-size:14px;padding:11px 22px;transition:all .15s;white-space:nowrap;background:transparent;cursor:pointer;}
.btn-ghost-w:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07);}
.btn-ghost-d{display:inline-flex;align-items:center;gap:7px;border:1.5px solid #CBD5E1;color:#334155;border-radius:9px;font-weight:500;font-size:14px;padding:11px 22px;transition:all .15s;background:#fff;cursor:pointer;white-space:nowrap;}
.btn-ghost-d:hover{border-color:#94A3B8;background:#F8FAFC;}

/* ── Trust bar ── */
.trust-item{display:flex;align-items:center;gap:12px;padding:20px 28px;}

/* ── Testimonial ── */
.tcard{background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:22px;break-inside:avoid;margin-bottom:16px;transition:box-shadow .2s,transform .2s;}
.tcard:hover{box-shadow:0 8px 32px rgba(0,0,0,.08);transform:translateY(-2px);}

/* ── CTA bg ── */
.cta-section{background:#202529;position:relative;overflow:hidden;}
.cta-orb-1{position:absolute;top:-150px;left:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(0,107,225,.25),transparent 70%);pointer-events:none;}
.cta-orb-2{position:absolute;bottom:-150px;right:-100px;width:450px;height:450px;background:radial-gradient(circle,rgba(75,240,155,.1),transparent 70%);pointer-events:none;}

/* ── Masonry ── */
.masonry{columns:1;column-gap:16px;}
@media(min-width:640px){.masonry{columns:2;}}
@media(min-width:1024px){.masonry{columns:3;}}

/* ── Mobile menu ── */
#mob-menu{display:none;position:fixed;top:62px;left:0;right:0;background:#1a1f24;border-bottom:1px solid #2e3740;z-index:99;flex-direction:column;}
#mob-cb:checked ~ #mob-menu{display:flex;}

/* ── Bell ring ── */
@keyframes bell-ring {
  0%,42%,100%  { transform: rotate(0deg); }
  5%           { transform: rotate(22deg); }
  12%          { transform: rotate(-20deg); }
  19%          { transform: rotate(16deg); }
  26%          { transform: rotate(-12deg); }
  33%          { transform: rotate(7deg); }
  40%          { transform: rotate(0deg); }
}
.bell-ring { animation: bell-ring 2.8s ease-in-out infinite; transform-origin: top center; }

/* ── Misc ── */
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;}
.section-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#006BE1;}
.divider-x{height:1px;background:linear-gradient(90deg,transparent,#E2E8F0,transparent);}
.divider-x-dark{height:1px;background:linear-gradient(90deg,transparent,#1E2D42,transparent);}
.app-badge{display:inline-flex;align-items:center;gap:9px;border:1px solid #243650;border-radius:10px;padding:9px 16px;color:#fff;font-size:12px;background:rgba(255,255,255,.04);transition:background .15s,border-color .15s;}
.app-badge:hover{background:rgba(255,255,255,.08);border-color:#006BE1;}
.footer-link{color:#64748B;font-size:14px;transition:color .15s;}
.footer-link:hover{color:#fff;}

/* ── Features calendar: 1 col on mobile ── */
.feat-cal-grid{grid-template-columns:34px 1fr 1fr;}
@media(max-width:768px){
  .hide-mobile{display:none;}
  .trust-item{padding:14px 16px;}
  .feat-cal-grid{grid-template-columns:34px 1fr;}
  .feat-cal-tue{display:none;}
}
