@font-face{font-family:FioGeist;src:url('/assets/geist-latin-20260930.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}body{--font-geist:FioGeist,Arial,sans-serif}html{line-height:1.5}svg{vertical-align:middle}
:root {
  --ink: #111d2b;
  --ink-soft: #334255;
  --navy: #123c69;
  --blue: #19538a;
  --red: #d52d32;
  --red-dark: #a81f24;
  --cream: #f8f5ef;
  --paper: #fffdfa;
  --white: #ffffff;
  --line: #dedbd4;
  --muted: #6d7783;
  --green: #18734a;
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-geist), Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 90%, transparent); border-bottom: 1px solid rgba(18,60,105,.10); backdrop-filter: blur(18px); }
.nav-row { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand strong { display: block; font-family: Georgia, serif; font-size: 25px; line-height: 1; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.logo-wrap { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 15px; background: white; border: 1px solid rgba(18,60,105,.12); box-shadow: 0 7px 18px rgba(18,60,105,.08); }
.logo-wrap img { width: 38px; height: 38px; object-fit: contain; }
.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.desktop-nav a { color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.desktop-nav a:hover { color: var(--red); }
.nav-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.login-link { padding-block: 12px; color: var(--navy); font-size: 14px; font-weight: 800; }
.login-link:hover { color: var(--red); }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 22px; border: 1px solid transparent; border-radius: 16px; font-size: 14px; font-weight: 850; transition: .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 43px; padding-inline: 17px; border-radius: 13px; }
.button-primary { color: white; background: linear-gradient(135deg, var(--red), var(--red-dark)); box-shadow: 0 14px 34px rgba(213,45,50,.22); }
.button-ghost { color: var(--navy); background: white; border-color: rgba(18,60,105,.16); }

.hero { position: relative; overflow: hidden; min-height: 720px; display: grid; align-items: center; padding: 76px 0 88px; background: linear-gradient(145deg, #fffdfa 0%, #f9f6f0 52%, #eef4fa 100%); }
.hero::before { content: ''; position: absolute; inset: 0; opacity: .14; background-image: radial-gradient(#123c69 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to right, black, transparent 58%); }
.hero-glow { position: absolute; width: 380px; height: 380px; border-radius: 999px; filter: blur(5px); opacity: .13; }
.hero-glow-red { left: -190px; top: 100px; background: var(--red); }
.hero-glow-blue { right: -120px; bottom: -160px; background: var(--blue); }
.hero-grid { position: relative; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 64px; }
.hero-copy { max-width: 580px; }
.eyebrow { width: fit-content; display: inline-flex; align-items: center; gap: 8px; color: var(--red-dark); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hero h1, .section-heading h2 { margin: 20px 0 20px; font-family: Georgia, serif; font-size: clamp(52px, 6vw, 84px); line-height: .98; letter-spacing: -.055em; }
.hero h1 em { color: var(--navy); font-weight: inherit; }
.hero-copy > p { max-width: 580px; margin: 0; color: var(--ink-soft); font-size: 18px; line-height: 1.68; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.trust-line { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--muted); font-size: 13px; font-weight: 650; }
.trust-line svg { color: var(--green); }

.product-stage { position: relative; min-height: 555px; display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 10px; }
.product-stage .dashboard-card { width: 100%; transform: none; padding: 20px; }
.barber-sign { width: 100%; height: 365px; margin: 0; position: relative; }
.pole-view { position: relative; width: 100%; height: 100%; }
.pole-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pole-fallback { position: absolute; width: 78%; height: 84%; object-fit: contain; top: 8%; left: 11%; }
.barber-sign[data-render="webgl"] .pole-fallback { visibility: hidden; }
.preview-disclaimer { grid-column: 1 / -1; margin: 0; text-align: center; color: var(--muted); font-size: 13px; }
.product-stage .float-card-top { top: 0; right: 0; }
.product-stage .float-card-bottom { bottom: 48px; left: 65px; }
.barber-ribbon { position: absolute; inset: 10px 18px auto auto; width: 148px; height: 148px; border-radius: 50%; overflow: hidden; opacity: .11; transform: rotate(-18deg); }
.barber-ribbon i { position: absolute; width: 250px; height: 34px; left: -40px; transform: rotate(45deg); }
.barber-ribbon i:nth-child(1) { top: 12px; background: var(--red); }
.barber-ribbon i:nth-child(2) { top: 57px; background: white; }
.barber-ribbon i:nth-child(3) { top: 102px; background: var(--blue); }
.dashboard-card { position: relative; z-index: 2; width: min(480px, 92%); padding: 23px; border: 1px solid rgba(18,60,105,.12); border-radius: 30px; background: rgba(255,255,255,.94); box-shadow: 0 34px 90px rgba(18,60,105,.17); transform: rotate(1.4deg); }
.dashboard-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid #e9ecef; }
.mini-brand { display: flex; align-items: center; gap: 8px; font-family: Georgia, serif; font-weight: 800; }
.mini-brand img { width: 31px; height: 31px; object-fit: contain; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; color: white; border-radius: 50%; background: var(--navy); font-size: 12px; font-weight: 850; }
.dashboard-greeting { padding: 22px 0 16px; }
.dashboard-greeting small { color: var(--red); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.dashboard-greeting h2 { margin: 5px 0 3px; font-family: Georgia, serif; font-size: 25px; }
.dashboard-greeting p { margin: 0; color: var(--muted); font-size: 12px; }
.metric-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.metric-grid > div { display: grid; gap: 3px; padding: 15px; border-radius: 17px; background: var(--cream); }
.metric-grid span, .metric-grid small { color: var(--muted); font-size: 10px; font-weight: 700; }
.metric-grid strong { font-size: 22px; }
.metric-grid .metric-highlight { color: white; background: linear-gradient(135deg, var(--navy), var(--blue)); }
.metric-grid .metric-highlight span, .metric-grid .metric-highlight small { color: #dce9f5; }
.agenda-card { margin-top: 12px; padding: 15px; border: 1px solid #e6e8ea; border-radius: 19px; }
.agenda-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; font-weight: 850; }
.agenda-title svg { color: var(--red); }
.appointment { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #edf0f2; }
.appointment time { color: var(--navy); font-size: 12px; font-weight: 900; }
.appointment span { display: grid; gap: 2px; }
.appointment strong { font-size: 11px; }
.appointment small { color: var(--muted); font-size: 9px; }
.appointment b { padding: 5px 7px; color: var(--green); border-radius: 999px; background: #e7f5ed; font-size: 8px; }
.appointment:last-child b { color: #876300; background: #fff4cf; }
.float-card { position: absolute; z-index: 3; min-width: 176px; display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid rgba(18,60,105,.1); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 18px 45px rgba(18,60,105,.13); }
.float-card-top { top: 55px; right: -16px; }
.float-card-bottom { bottom: 35px; left: -17px; }
.float-icon { width: 38px; height: 38px; display: grid; place-items: center; color: white; border-radius: 12px; background: var(--navy); }
.float-icon.red { background: var(--red); }
.float-card span:last-child { display: grid; gap: 2px; }
.float-card small { color: var(--muted); font-size: 9px; font-weight: 700; }
.float-card strong { font-size: 15px; }

.proof-strip { color: white; background: var(--ink); }
.proof-grid { min-height: 96px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: 18px; }
.proof-grid span { display: flex; align-items: center; gap: 9px; color: #eaf0f5; font-size: 13px; font-weight: 750; }
.proof-grid svg { width: 19px; color: #f04b50; }
.section { padding: 110px 0; }
.section-heading { max-width: 720px; margin: 0 auto 50px; text-align: center; }
.section-heading h2 { margin: 15px 0 17px; font-size: clamp(42px, 5vw, 64px); }
.section-heading > p { margin: 0 auto; max-width: 660px; color: var(--muted); font-size: 17px; line-height: 1.65; }
.section-heading .eyebrow { margin-inline: auto; }
.align-left { margin: 0; text-align: left; }
.align-left .eyebrow { margin-inline: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature-grid article { min-height: 260px; padding: 27px; border: 1px solid var(--line); border-radius: var(--radius); background: white; transition: .2s ease; }
.feature-grid article:hover { transform: translateY(-5px); border-color: rgba(18,60,105,.26); box-shadow: 0 22px 50px rgba(18,60,105,.08); }
.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 35px; color: white; border-radius: 15px; background: var(--navy); }
.feature-icon.red { background: var(--red); }
.feature-icon svg { width: 22px; }
.feature-grid h3 { margin: 0 0 10px; font-family: Georgia, serif; font-size: 22px; }
.feature-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.process-section { color: white; background: var(--navy); }
.process-grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: start; gap: 90px; }
.process-section .section-heading h2 { color: white; }
.process-section .section-heading p { color: #c9d8e7; }
.eyebrow.light { color: #ff7e82; }
.steps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 66px 1fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.steps li > span { color: #ff777b; font: 700 28px/1 Georgia, serif; }
.steps h3 { margin: 0 0 7px; font-family: Georgia, serif; font-size: 23px; }
.steps p { margin: 0; color: #c9d8e7; line-height: 1.6; }

.pricing-section { background: var(--cream); }
.pricing-grid { display: grid; grid-template-columns: 1fr .82fr; align-items: center; gap: 90px; }
.secure-note { display: flex; align-items: flex-start; gap: 11px; margin-top: 28px; padding: 16px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.62); font-size: 13px; line-height: 1.5; }
.secure-note svg { flex: 0 0 auto; color: var(--green); }
.price-card { position: relative; overflow: hidden; padding: 34px; border: 1px solid rgba(18,60,105,.18); border-radius: 30px; background: white; box-shadow: 0 30px 70px rgba(18,60,105,.12); }
.price-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 7px; background: linear-gradient(90deg, var(--red) 0 33%, white 33% 66%, var(--blue) 66%); }
.price-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.price-top > span { color: var(--navy); font-size: 11px; font-weight: 950; letter-spacing: .1em; }
.price-top strong { padding: 7px 10px; color: var(--red-dark); border-radius: 999px; background: #ffe8e7; font-size: 10px; }
.price { display: flex; align-items: flex-end; margin: 28px 0 14px; }
.price sup { align-self: flex-start; margin-top: 10px; font-size: 16px; font-weight: 850; }
.price b { font: 700 58px/1 Georgia, serif; letter-spacing: -.06em; }
.price span { padding: 0 0 7px 7px; color: var(--muted); font-size: 13px; font-weight: 750; }
.price-card > p { color: var(--muted); line-height: 1.55; }
.price-card ul { display: grid; gap: 11px; margin: 25px 0; padding: 22px 0; border-block: 1px solid #e8e8e5; list-style: none; }
.price-card li { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; }
.price-card li svg { color: var(--green); }
.button-full { width: 100%; }
.price-card > small { display: block; margin-top: 13px; color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; }

.site-footer { padding: 54px 0 26px; color: white; background: var(--ink); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 80px; }
.footer-grid > div > p { max-width: 390px; margin: 18px 0 0; color: #aab8c6; font-size: 13px; line-height: 1.65; }
.footer-grid nav { display: grid; gap: 10px; }
.footer-grid nav strong { margin-bottom: 3px; font-family: Georgia, serif; font-size: 17px; }
.footer-grid nav a { width: fit-content; color: #aab8c6; font-size: 12px; }
.footer-grid nav a:hover { color: white; }
.footer-brand strong { color: white; }
.footer-brand small { color: #aab8c6; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 42px; padding-top: 20px; color: #8493a1; border-top: 1px solid rgba(255,255,255,.1); font-size: 11px; }

.legal-hero { padding: 92px 0 62px; color: white; background: linear-gradient(140deg, var(--ink), var(--navy)); }
.legal-shell { max-width: 820px; }
.legal-hero .eyebrow { color: #ff8b8e; }
.legal-hero h1 { max-width: 760px; margin: 18px 0 18px; font: 700 clamp(45px, 6vw, 70px)/1 Georgia, serif; letter-spacing: -.045em; }
.legal-hero p { max-width: 680px; margin: 0; color: #d9e4ee; font-size: 17px; line-height: 1.65; }
.legal-hero small { display: block; margin-top: 22px; color: #9fb0c0; }
.back-link { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 38px; color: #c9d7e4; font-size: 13px; font-weight: 750; }
.legal-content { padding: 70px 0 100px; }
.legal-content article { padding: 8px 0 34px; border-bottom: 1px solid var(--line); }
.legal-content article + article { padding-top: 34px; }
.legal-content h2 { margin: 0 0 14px; font: 700 27px/1.2 Georgia, serif; }
.legal-content p, .legal-content li { color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
.legal-content p { margin: 10px 0; }
.legal-content ul { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 22px; }
.support-hero { padding-bottom: 74px; }
.support-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 18px; }
.support-card { padding: 34px; border: 1px solid var(--line); border-radius: 26px; background: white; }
.support-card.secondary { background: var(--cream); }
.support-card .feature-icon { margin-bottom: 28px; }
.support-card h2 { font-size: 30px; }
.support-card .button { width: fit-content; margin-top: 15px; }
.response-time { padding-top: 15px; border-top: 1px solid var(--line); }

@media (max-width: 960px) {
  .hero-grid, .process-grid, .pricing-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 60px; }
  .hero-copy { text-align: center; margin-inline: auto; }
  .hero-copy .eyebrow { margin-inline: auto; }
  .hero-actions, .trust-line { justify-content: center; }
  .product-stage { margin-top: 10px; }
  .product-stage { width: min(650px, 100%); margin-inline: auto; grid-template-columns: 110px minmax(0, 1fr); }
  .desktop-nav { gap: 16px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-grid { grid-template-columns: repeat(2, 1fr); padding: 24px 0; }
  .process-grid, .pricing-grid { gap: 52px; }
  .support-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 28px, 1160px); }
  .site-header .brand small, .desktop-nav { display: none; }
  .nav-row { min-height: 70px; }
  .logo-wrap { width: 40px; height: 40px; }
  .hero { min-height: auto; padding: 52px 0 64px; }
  .hero h1 { font-size: 49px; }
  .hero-copy > p { font-size: 16px; }
  .button { width: 100%; }
  .nav-row > .button { width: auto; }
  .nav-row { gap: 12px; }
  .nav-actions { gap: 14px; }
  .nav-actions .button { width: auto; padding-inline: 13px; }
  .product-stage { min-height: 0; grid-template-columns: 1fr; gap: 18px; }
  .barber-sign { width: 100px; height: 230px; margin-inline: auto; }
  .product-stage .dashboard-card { padding: 17px; }
  .product-stage .float-card { display: none; }
  .dashboard-card { width: 100%; padding: 17px; }
  .float-card-top { top: 8px; right: -4px; }
  .float-card-bottom { bottom: 0; left: -3px; }
  .appointment { grid-template-columns: 42px 1fr; }
  .appointment b { display: none; }
  .proof-grid, .feature-grid { grid-template-columns: 1fr; }
  .feature-grid article { min-height: 230px; }
  .section { padding: 78px 0; }
  .section-heading h2 { font-size: 42px; }
  .price-card { padding: 28px 22px; }
  .price b { font-size: 52px; }
  .footer-grid { grid-template-columns: 1fr; gap: 38px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .legal-hero { padding: 60px 0 46px; }
  .legal-content { padding: 50px 0 70px; }
  .support-card { padding: 26px 22px; }
  .support-card .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .feature-grid article { transition: none; }
}

/* Fio · light, glass and depth. Homepage-only so legal pages remain independent. */
.fio-home{--ink:#071e39;--ink-soft:#516d8c;--navy:#0c4075;--blue:#2876cb;--red:#ef123b;--red-dark:#cc0a2d;--paper:#fff;--cream:#f3f7fc;--line:#e1e9f2;--muted:#61748a;background:#fff;overflow:clip}
.fio-home .shell{width:min(1360px,calc(100% - 80px))}
.fio-home .skip-link{position:fixed;top:8px;left:20px;z-index:100;transform:translateY(-150%);padding:12px 18px;border-radius:12px;background:white;color:var(--ink)}
.fio-home .skip-link:focus{transform:none}
.fio-home .site-header{position:relative;top:18px;width:min(1310px,calc(100% - 80px));margin:0 auto -84px;border:1px solid #ffffffd9;border-radius:25px;background:linear-gradient(110deg,#ffffffd9,#ffffff79);box-shadow:0 8px 38px #183f7110,inset 0 1px 1px white;backdrop-filter:blur(22px)}
.fio-home .nav-row{width:100%;padding:0 26px;min-height:76px;gap:28px}
.fio-home .brand strong{font-size:31px;color:#09203b}
.fio-home .brand small{color:#4f6580;font-size:9px}
.fio-home .logo-wrap{width:46px;height:49px;border-radius:16px;box-shadow:0 5px 12px #3857770c}
.fio-home .logo-wrap img{width:40px;height:42px}
.fio-home .desktop-nav{margin:auto;gap:30px}
.fio-home .desktop-nav a{font-size:14px;font-weight:500;color:#173a61}
.fio-home .nav-actions{gap:12px}
.fio-home .login-link{padding:14px 25px;background:#fff;border:1px solid #edf1f7;border-radius:12px;box-shadow:0 7px 16px #24456106}
.fio-home .button{border-radius:13px;min-height:57px;padding-inline:24px;font-size:15px;font-weight:750;transition:transform .22s,box-shadow .22s,background-color .22s}
.fio-home .button-primary{background:linear-gradient(155deg,#ff3455 0%,#ec0931 55%,#c90c2c 100%);box-shadow:0 12px 28px #e31b3d30,inset 0 1px 1px #ff8c9f}
.fio-home .button-primary:hover{box-shadow:0 17px 35px #e31b3d40;transform:translateY(-3px)}
.fio-home .button-ghost{border:1px solid #e4eaf2;background:linear-gradient(145deg,#fff,#f8fbff);box-shadow:0 12px 24px #1b3d6310;color:#092442}
.fio-home .button-ghost svg{flex-shrink:0}
.fio-home .button-small{min-height:48px;font-size:14px;padding-inline:22px}
.fio-home .nav-actions .button svg{display:none}
.fio-home .hero{min-height:780px;padding:156px 0 80px;background:#f8fbff;isolation:isolate}
.hero-interior{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}
.fio-home .hero::before{background:linear-gradient(90deg,#fffefdfa 0%,#fffefde0 26%,#f7fbff66 65%,#eef7ff05 100%);opacity:1;mask-image:none;z-index:-2}
.fio-home .hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#fff,transparent 16%),radial-gradient(ellipse at 68% 60%,#91d2ff48,transparent 54%);pointer-events:none}
.fio-home .hero-glow{filter:blur(45px);opacity:.16;pointer-events:none}
.fio-home .hero-glow-red{background:#dcecff;top:260px;left:-200px}
.fio-home .hero-glow-blue{background:#37aafa;right:120px;bottom:0;width:520px;height:250px}
.fio-home .hero-grid{grid-template-columns:1fr 1.09fr;gap:20px}
.fio-home .hero-copy{position:relative;z-index:5;max-width:620px;padding-bottom:10px}
.fio-home .eyebrow{color:#d70b30;font-size:11px;font-weight:800;letter-spacing:.065em;gap:11px}
.fio-home .eyebrow:before{content:'';width:28px;height:2px;background:currentColor;flex-shrink:0}
.fio-home .hero h1{font-family:var(--font-geist),Arial,sans-serif;font-size:clamp(56px,5.85vw,87px);font-weight:800;letter-spacing:-.059em;line-height:1.04;margin:23px 0 21px;color:#071e39;text-shadow:0 3px 2px #ffffff80}
.fio-home .hero h1 em,.fio-home .section-heading h2 em{color:#266cb7;font-weight:750;background:linear-gradient(125deg,#357cca,#14558f);background-clip:text;-webkit-text-fill-color:transparent}
.fio-home .hero-copy>p{max-width:550px;color:#55708e;font-size:18px;line-height:1.65}
.fio-home .hero-actions{gap:12px;margin-top:29px;flex-wrap:nowrap}
.fio-home .hero-actions .button{padding-inline:21px;font-size:14px;white-space:nowrap}
.hero-checks{display:flex;flex-wrap:wrap;gap:18px;padding:0;margin:24px 0 0;list-style:none;color:#3f5e7e}
.hero-checks li{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:650}
.hero-checks svg{width:19px;height:19px;stroke-width:3;color:#145d9f}
.fio-home .product-stage{min-height:546px;grid-template-columns:143px minmax(0,1fr);gap:0;perspective:1300px;align-items:center;padding:0 0 22px;isolation:isolate}
.stage-aura{position:absolute;inset:30% -5% -4% -6%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#51c8ff55,transparent 67%);filter:blur(14px);pointer-events:none}
.fio-home .barber-sign{z-index:4;width:170px;height:510px;margin:0 0 0 -10px;filter:drop-shadow(12px 20px 13px #0b294444)}
.fio-home .barber-sign:after{content:'';position:absolute;inset:24% -4% 27% -18%;border:3px solid #fff7dfb0;border-right-color:transparent;border-bottom-color:#bceaff3b;transform:rotate(-27deg);border-radius:50%;box-shadow:0 0 13px #fff7c878,inset 0 0 10px #d9f7ff40;pointer-events:none;animation:orbit-light 7s ease-in-out infinite}
.fio-home .product-stage .dashboard-card{width:100%;padding:13px;border:1px solid #ffffffec;border-radius:28px;background:linear-gradient(145deg,#eef8ffb8,#ffffff5c 45%,#c3e1fa8c);backdrop-filter:blur(18px);box-shadow:0 35px 48px -20px #153f7059,0 2px 3px #fffffff0 inset,10px 2px 30px #eaf7ffad inset;transform:rotateY(-9deg) rotateZ(2deg);animation:dashboard-float 7s ease-in-out infinite}
.fio-home .dashboard-top{height:33px;padding:0 7px 11px;display:flex;gap:14px;justify-content:flex-start;border:0;font-size:10px;color:#50729b}
.window-dots{display:flex;gap:6px}
.window-dots i{width:7px;height:7px;border-radius:50%;background:#f44b6e}
.window-dots i:nth-child(2){background:#f8be71}.window-dots i:nth-child(3){background:#65c7a5}
.window-pill{width:72px;height:9px;margin-left:auto;background:#ffffffa6;border-radius:10px}
.dashboard-surface{border-radius:17px;background:linear-gradient(145deg,#fffffffa,#f7f9fff0);padding:23px 19px 16px;box-shadow:0 10px 23px #375b8522}
.fio-home .dashboard-greeting{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 0 22px}
.fio-home .dashboard-greeting h2{font:750 25px/1.2 var(--font-geist),Arial,sans-serif;letter-spacing:-1px;margin:0;color:#0b2748}
.fio-home .dashboard-greeting>svg{color:#1b5595}
.fio-home .metric-grid{grid-template-columns:1fr 1fr 1.16fr;gap:8px}
.fio-home .metric-grid>div{padding:15px 12px 13px;border-radius:13px;background:linear-gradient(130deg,#f0f5fc,#eaf0f9);gap:9px}
.fio-home .metric-grid span{display:flex;align-items:center;gap:6px;color:#416291;font-size:10px;font-weight:500;white-space:nowrap}
.fio-home .metric-grid span svg{width:16px;height:16px;flex-shrink:0}
.fio-home .metric-grid strong{font-size:27px;letter-spacing:-1px;white-space:nowrap}
.fio-home .metric-grid .metric-highlight{background:linear-gradient(145deg,#1264b8,#063366);box-shadow:0 8px 16px #14569225}
.fio-home .metric-grid .metric-highlight span{color:#fff}
.fio-home .agenda-card{border:0;border-radius:0;padding:0;margin-top:24px}
.fio-home .appointment{grid-template-columns:43px minmax(0,1fr) auto;gap:10px;padding:18px 0;border-top:1px solid #e3eaf5}
.fio-home .appointment strong{font-size:11px;font-weight:750;line-height:1.4}
.fio-home .appointment small{font-size:9px;color:#5d7da1;line-height:1.4}
.fio-home .appointment time{font-size:11px}
.fio-home .appointment b{font-size:8px;font-weight:500;padding:6px 8px;color:#13815d;background:#e2f4eb}
.fio-home .appointment:last-child b{color:#4d719f;background:#e8eff8}
.fio-home .confirmation-card{min-width:0;top:44%;right:-35px;bottom:auto;left:auto;transform:rotate(-4deg);padding:16px 17px;border-radius:17px;border:1px solid #ffffffdd;background:linear-gradient(140deg,white,#f9fbff);box-shadow:0 21px 36px #15314e38,0 1px 2px white inset;animation:confirmation-float 6s ease-in-out infinite;z-index:6}
.fio-home .confirmation-card .float-icon{width:36px;height:36px;border-radius:50%;background:linear-gradient(140deg,#28b579,#07804d);box-shadow:0 3px 9px #11925d36}
.fio-home .confirmation-card strong{font-size:12px;line-height:1.3}
.fio-home .confirmation-card small{font-size:8px;color:#58708c;margin-top:3px;font-weight:400}
.fio-home .preview-disclaimer{position:absolute;bottom:-5px;left:150px;right:0;font-size:10px;color:#48627d;letter-spacing:.015em}
.fio-home .product-stage:not(.in-view) *,.fio-home.motion-paused *{animation-play-state:paused!important}
.fio-home .proof-strip{position:relative;z-index:8;max-width:1480px;width:calc(100% - 72px);margin:-24px auto 0;border:1px solid #7bb4e298;border-radius:24px;background:linear-gradient(120deg,#24425c,#0b2338 55%,#253e55);box-shadow:0 24px 42px -13px #0a294552,inset 0 2px 3px #a1d8ff58}
.fio-home .proof-grid{width:calc(100% - 64px);min-height:94px;gap:0}
.fio-home .proof-grid>span{min-height:52px;padding:0 20px;border-right:1px solid #ffffff13;gap:15px;font-size:12px;line-height:1.5;color:#fff}
.fio-home .proof-grid>span:last-child{border:0}
.fio-home .proof-grid svg{width:48px;height:50px;padding:13px;flex-shrink:0;border-radius:16px;color:#eef7ff;background:linear-gradient(145deg,#4768818c,#0d253b80);box-shadow:0 4px 8px #05152633,inset 0 1px 2px #9abdd52b}
.fio-home .proof-grid>span:first-child svg{color:#ff4561}
.fio-home .section{padding:104px 0}
.fio-home .section-heading{max-width:870px;margin-bottom:50px}
.fio-home .section-heading h2{font:780 clamp(37px,4.2vw,58px)/1.1 var(--font-geist),Arial,sans-serif;letter-spacing:-.048em;color:#09233e}
.fio-home .section-heading>p{font-size:16px;line-height:1.7}
.fio-home .feature-grid{gap:20px}
.fio-home .feature-grid article{min-height:240px;padding:29px;border:1px solid #e3ebf4;background:linear-gradient(150deg,#fff,#f8faff);box-shadow:0 7px 24px #10345c06}
.fio-home .feature-grid article:hover{box-shadow:0 22px 34px #133f6412;border-color:#c2d6ee}
.fio-home .feature-icon{margin-bottom:26px;background:linear-gradient(140deg,#3d7ebb,#123f6c);box-shadow:0 7px 15px #1e59872c}
.fio-home .feature-icon.red{background:linear-gradient(140deg,#ff4a62,#d81436);box-shadow:0 7px 15px #dc214324}
.fio-home .feature-grid h3{font:750 20px/1.3 var(--font-geist),Arial,sans-serif;letter-spacing:-.5px}
.fio-home .process-section{background:radial-gradient(ellipse at 100% 100%,#205789,transparent 65%),#09263f;border-block:1px solid #b1dfff3d}
.fio-home .process-section h2{color:white}
.fio-home .process-section .eyebrow{color:#ff8394}
.fio-home .process-grid,.fio-home .pricing-grid{gap:95px}
.fio-home .steps li>span{font:650 26px/1.3 var(--font-geist),Arial,sans-serif;color:#ff8094}
.fio-home .steps h3{font:700 22px/1.3 var(--font-geist),Arial,sans-serif}
.fio-home .pricing-section{background:radial-gradient(ellipse at 75% 50%,#e1efff,transparent 55%),#f5f8fd}
.fio-home .price-card{padding:38px;border-color:#ffffff;border-radius:29px;box-shadow:0 24px 55px -12px #224e7733,0 2px 2px white inset}
.fio-home .price-card:before{height:5px;background:linear-gradient(90deg,#ec153b,#ec153b 33%,#f3f6fc 33%,#f3f6fc 66%,#1b5c99 66%)}
.fio-home .price b{font:760 62px/1 var(--font-geist),Arial,sans-serif}
.fio-home .price-card>small{font-size:11px;line-height:1.6}
.fio-home .secure-note{background:#ffffffa3;border-color:#dbe5f2}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}
.faq-section .section-heading{margin:0}
.faq-section .button{margin-top:24px}
.faq-list details{padding:23px 0;border-bottom:1px solid #e0e9f2}
.faq-list summary{cursor:pointer;color:#143454;font-size:16px;font-weight:650;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px}
.faq-list summary:after{content:'+';font-size:25px;font-weight:400;color:#2468ac;flex-shrink:0}
.faq-list details[open] summary:after{content:'−'}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list p{color:#61748a;font-size:14px;line-height:1.8;margin:15px 0 0}
.fio-home .site-footer{background:#071f36}
.fio-home .footer-brand strong{color:#fff}
.fio-home .footer-brand small{color:#b5c5d6}
.fio-home :is(a,summary):focus-visible{outline:3px solid #217ccc;outline-offset:5px}
.fio-home [id]{scroll-margin-top:30px}
@keyframes dashboard-float{0%,100%{transform:rotateY(-9deg) rotateZ(2deg) translateY(0)}50%{transform:rotateY(-8deg) rotateZ(1deg) translateY(-9px)}}
@keyframes confirmation-float{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-8px)}}
@keyframes orbit-light{0%,100%{opacity:.65;transform:rotate(-27deg) translateY(0)}50%{opacity:1;transform:rotate(-23deg) translateY(-6px)}}
@keyframes section-arrive{from{transform:translateY(18px);opacity:.8}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:no-preference){.fio-home [data-reveal].revealed{animation:section-arrive .55s ease-out both}}
@media(min-width:1600px){.fio-home .hero{min-height:820px}.fio-home .hero-grid{gap:30px}.fio-home .product-stage{grid-template-columns:158px 1fr}}
@media(max-width:1180px) and (min-width:961px){.fio-home .shell{width:calc(100% - 48px)}.fio-home .hero-actions{flex-wrap:wrap}.fio-home .hero h1{font-size:62px}.fio-home .product-stage{grid-template-columns:110px 1fr}.fio-home .barber-sign{width:140px;height:450px}.fio-home .confirmation-card{right:-12px;top:48%}.fio-home .dashboard-surface{padding:20px 13px 13px}.fio-home .metric-grid>div{padding:11px 8px}.fio-home .metric-grid strong{font-size:23px}.fio-home .appointment{gap:5px;grid-template-columns:39px 1fr auto}.fio-home .appointment small{font-size:8px}.fio-home .desktop-nav{gap:19px}.fio-home .nav-row{gap:15px;padding-inline:20px}.fio-home .brand small{display:none}.fio-home .proof-grid>span{padding-inline:10px;font-size:11px;gap:10px}}
@media(max-width:960px){.fio-home .hero{padding-top:144px;padding-bottom:58px}.fio-home .hero-grid{grid-template-columns:1fr;gap:34px}.fio-home .hero-copy{max-width:670px;margin:auto;text-align:center}.fio-home .hero h1{font-size:76px}.fio-home .hero-copy>p{margin:auto;max-width:600px}.fio-home .hero-actions,.hero-checks{justify-content:center}.fio-home .product-stage{width:min(650px,100%);grid-template-columns:150px 1fr;min-height:525px;margin:0 auto}.fio-home .barber-sign{height:500px;width:165px}.fio-home .hero-interior{object-position:68% center;opacity:.6}.fio-home .confirmation-card{right:-8px}.fio-home .desktop-nav{display:none}.fio-home .nav-row{min-height:74px}.fio-home .proof-strip{width:calc(100% - 40px)}.fio-home .proof-grid{width:calc(100% - 30px);grid-template-columns:1fr 1fr;padding:14px 0;gap:10px}.fio-home .proof-grid>span{padding:8px 14px;border:0}.fio-home .process-grid,.fio-home .pricing-grid,.faq-grid{grid-template-columns:1fr;gap:40px}.fio-home .section-heading.align-left{max-width:650px;margin:0}.fio-home .price-card{max-width:600px;width:100%;margin:auto}}
@media(max-width:680px){.fio-home .shell{width:calc(100% - 36px)}.fio-home .site-header{top:12px;width:calc(100% - 24px);border-radius:19px;margin-bottom:-65px}.fio-home .nav-row{min-height:64px;padding-inline:12px;gap:8px}.fio-home .logo-wrap{width:35px;height:39px;border-radius:12px}.fio-home .logo-wrap img{width:31px;height:34px}.fio-home .brand{gap:6px}.fio-home .brand strong{font-size:25px}.fio-home .nav-actions{gap:7px}.fio-home .login-link{padding:11px 12px;font-size:12px}.fio-home .nav-actions .button{min-height:41px;font-size:11px;padding-inline:12px;border-radius:11px}.fio-home .hero{padding:116px 0 60px;min-height:auto}.fio-home .hero-grid{gap:31px}.fio-home .hero-copy{padding:0}.fio-home .eyebrow{font-size:9px;letter-spacing:.06em;gap:8px}.fio-home .eyebrow:before{width:18px}.fio-home .hero h1{font-size:clamp(43px,10.5vw,68px);margin:20px 0;line-height:1.06;letter-spacing:-.058em}.fio-home .hero-copy>p{font-size:15px;line-height:1.7;max-width:450px}.fio-home .hero-actions{flex-direction:column;align-items:center;margin-top:23px;gap:10px}.fio-home .hero-actions .button{width:100%;max-width:410px;min-height:53px;font-size:14px}.hero-checks{gap:8px 12px;margin-top:19px}.hero-checks li{font-size:10px;gap:4px}.hero-checks svg{width:15px;height:15px}.fio-home .product-stage{grid-template-columns:65px minmax(0,1fr);gap:0;min-height:350px;width:100%;padding-bottom:24px}.fio-home .barber-sign{width:83px;height:295px;margin-left:-10px}.fio-home .barber-sign:after{border-width:2px;inset:30% -2% 32% -10%}.fio-home .product-stage .dashboard-card{padding:8px;border-radius:21px}.fio-home .dashboard-top{height:24px;padding:0 5px 8px;gap:8px;font-size:7px}.window-dots{gap:4px}.window-dots i{width:5px;height:5px}.window-pill{width:40px;height:6px}.dashboard-surface{padding:16px 11px 11px;border-radius:13px}.fio-home .dashboard-greeting{padding-bottom:16px}.fio-home .dashboard-greeting h2{font-size:18px;letter-spacing:-.6px}.fio-home .dashboard-greeting>svg{width:15px}.fio-home .metric-grid{gap:5px}.fio-home .metric-grid>div{padding:9px 7px;gap:6px;border-radius:9px}.fio-home .metric-grid span{font-size:7px;gap:3px}.fio-home .metric-grid span svg{width:11px;height:11px}.fio-home .metric-grid strong{font-size:19px;letter-spacing:-.5px}.fio-home .agenda-card{margin-top:16px}.fio-home .appointment{grid-template-columns:32px minmax(0,1fr) auto;gap:5px;padding:12px 0}.fio-home .appointment time{font-size:8px}.fio-home .appointment strong{font-size:8px}.fio-home .appointment small{font-size:6.5px}.fio-home .appointment b{display:block;font-size:6px;padding:4px 5px}.fio-home .confirmation-card{display:flex;top:auto;bottom:15px;right:4px;padding:10px 12px;border-radius:12px;gap:7px}.fio-home .confirmation-card .float-icon{width:25px;height:25px}.fio-home .confirmation-card .float-icon svg{width:17px}.fio-home .confirmation-card strong{font-size:9px}.fio-home .confirmation-card small{font-size:6px}.fio-home .preview-disclaimer{bottom:-13px;left:20px;font-size:8px;text-align:left}.fio-home .proof-strip{width:calc(100% - 24px);margin:0 auto;border-radius:20px}.fio-home .proof-grid{width:calc(100% - 16px);gap:4px;padding:12px 0}.fio-home .proof-grid>span{gap:8px;padding:9px 6px;font-size:10px}.fio-home .proof-grid svg{width:36px;height:39px;padding:10px;border-radius:11px}.fio-home .section{padding:67px 0}.fio-home .section-heading{margin-bottom:30px}.fio-home .section-heading h2{font-size:38px}.fio-home .section-heading>p{font-size:15px}.fio-home .feature-grid{grid-template-columns:1fr;gap:14px}.fio-home .feature-grid article{min-height:0;padding:25px}.fio-home .feature-icon{margin-bottom:21px}.fio-home .price-card{padding:30px 24px}.fio-home .price b{font-size:56px}.fio-home .price-top{gap:7px}.fio-home .price-top>span{font-size:9px}.fio-home .price-top strong{font-size:9px}.fio-home .faq-list summary{font-size:15px}.fio-home .steps li{grid-template-columns:43px 1fr;gap:10px}.fio-home .footer-grid{gap:30px}.fio-home .footer-bottom{gap:12px}}
.fio-home .hero h1{text-shadow:none}
@media(max-width:680px){.fio-home .hero::before{background:linear-gradient(180deg,#ffffffeb,#ffffffc9 45%,#eef8ff85 75%,#ffffffdc)}}
@media(max-width:360px){.fio-home .nav-actions .button{font-size:10px;padding-inline:9px}.fio-home .login-link{padding-inline:9px}.fio-home .product-stage{grid-template-columns:48px 1fr}.fio-home .barber-sign{width:65px;height:260px}.fio-home .appointment b{padding-inline:3px;font-size:5px}.fio-home .dashboard-greeting h2{font-size:16px}.fio-home .metric-grid strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){.fio-home *,.fio-home *:before,.fio-home *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.fio-home .product-stage .dashboard-card{transform:rotateZ(1deg)}}

/* Reference composition: coordinates scale together, perspective stays fixed. */
.fio-home .barber-sign:after{display:none}
.fio-home .barber-sign{animation:reference-pole-float 9s ease-in-out infinite}
.fio-home .barber-sign:before{content:'';position:absolute;left:24%;bottom:2%;width:54%;height:2.5%;background:#10365138;border-radius:50%;filter:blur(10px);pointer-events:none}
@keyframes reference-pole-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.fio-home .pole-housing{position:absolute;top:5.75%;left:50%;height:89.85%;width:auto;max-width:none;transform:translateX(-48.13%);z-index:2;pointer-events:none;visibility:hidden}
.fio-home .barber-sign[data-render="webgl"] .pole-housing{visibility:visible}
.fio-home .product-stage .dashboard-card{transform:perspective(1050px) rotateY(16deg);animation:reference-panel-float 8s ease-in-out infinite}
@keyframes reference-panel-float{0%,100%{transform:perspective(1050px) rotateY(16deg) translateY(0)}50%{transform:perspective(1050px) rotateY(16deg) translateY(-4px)}}
@media(min-width:1024px){
 .fio-home{--u:min(.05980861244vw,1.14832536px);position:relative;background:#fff url('/assets/barbershop-reference.webp') no-repeat center top;background-size:calc(1672 * var(--u)) calc(941 * var(--u))}
 .fio-home .site-header{position:absolute;top:calc(18 * var(--u));left:50%;transform:translateX(-50%);width:calc(1254 * var(--u));margin:0;border-radius:calc(26 * var(--u));z-index:20}
 .fio-home .nav-row{min-height:calc(68 * var(--u));padding-inline:calc(26 * var(--u));gap:calc(28 * var(--u))}
 .fio-home .desktop-nav{gap:calc(40 * var(--u))}.fio-home .desktop-nav a{font-size:calc(16 * var(--u))}
 .fio-home .brand{gap:calc(15 * var(--u))}.fio-home .brand strong{font-size:calc(34 * var(--u))}.fio-home .brand small{display:block;font-size:calc(11 * var(--u));letter-spacing:.12em}
 .fio-home .logo-wrap{width:calc(46 * var(--u));height:calc(49 * var(--u))}.fio-home .logo-wrap img{width:calc(42 * var(--u));height:calc(44 * var(--u))}
 .fio-home .nav-actions{gap:calc(14 * var(--u))}.fio-home .login-link{padding:calc(15 * var(--u)) calc(26 * var(--u));font-size:calc(16 * var(--u))}
 .fio-home .nav-actions .button{min-height:calc(50 * var(--u));padding-inline:calc(26 * var(--u));font-size:calc(16 * var(--u))}
 .fio-home .hero{height:calc(720 * var(--u));min-height:0;padding:0;background:transparent;overflow:visible}
 .fio-home .hero-interior,.fio-home .hero::before,.fio-home .hero::after,.fio-home .hero-glow{display:none}
 .fio-home .hero-grid{position:relative;display:block;width:calc(1384 * var(--u));height:100%;margin:0 auto}
 .fio-home .hero-copy{position:absolute;top:calc(174 * var(--u));left:0;width:calc(570 * var(--u));max-width:none;padding:0}
 .fio-home .hero .eyebrow{font-size:calc(13 * var(--u));line-height:1.4;gap:calc(14 * var(--u));letter-spacing:.045em}
 .fio-home .hero .eyebrow:before{width:calc(32 * var(--u))}
 .fio-home .hero h1{font-size:calc(96 * var(--u));font-weight:800;line-height:.93;letter-spacing:-.055em;margin:calc(24 * var(--u)) 0 calc(25 * var(--u));white-space:nowrap}
 .fio-home .hero h1 em{font-weight:750;background-image:linear-gradient(110deg,#347ccc,#0d4783 65%,#3475c3)}
 .fio-home .hero-copy>p{font-size:calc(20 * var(--u));line-height:1.55;max-width:calc(550 * var(--u));margin:0}
 .fio-home .hero-actions{margin-top:calc(31 * var(--u));gap:calc(16 * var(--u));flex-wrap:nowrap}
 .fio-home .hero-actions .button{height:calc(58 * var(--u));min-height:0;padding:0 calc(23 * var(--u));font-size:calc(18 * var(--u));border-radius:calc(14 * var(--u));gap:calc(13 * var(--u))}
 .fio-home .hero-actions .button-primary{width:calc(319 * var(--u));justify-content:space-between}
 .fio-home .hero-actions .button-ghost{width:calc(217 * var(--u));font-size:calc(16 * var(--u));padding-inline:calc(20 * var(--u));gap:calc(12 * var(--u))}
 .fio-home .hero-actions .button-ghost svg{width:calc(26 * var(--u));height:calc(26 * var(--u));padding:calc(7 * var(--u));border-radius:50%;color:white;background:#08253e;box-shadow:0 3px 6px #183f7125}
 .fio-home .hero-checks{margin-top:calc(32 * var(--u));gap:calc(22 * var(--u));flex-wrap:nowrap}
 .fio-home .hero-checks li{font-size:calc(16 * var(--u));gap:calc(7 * var(--u));white-space:nowrap;font-weight:600}
 .fio-home .hero-checks svg{width:calc(20 * var(--u));height:calc(20 * var(--u))}
 .fio-home .product-stage{position:absolute;left:calc(600 * var(--u));top:calc(100 * var(--u));width:calc(775 * var(--u));height:calc(560 * var(--u));min-height:0;padding:0;display:block;perspective:none}
 .fio-home .stage-aura{inset:12% -2% -10% 0;background:radial-gradient(ellipse at 52% 80%,#74d7ff59,transparent 65%);filter:blur(20px)}
 .fio-home .barber-sign{position:absolute;left:calc(-28 * var(--u));top:calc(-25 * var(--u));width:calc(300 * var(--u));height:calc(610 * var(--u));margin:0;filter:drop-shadow(12px 22px 14px #142e4a45);z-index:4}
 .fio-home .product-stage .dashboard-card{position:absolute;left:calc(249 * var(--u));top:calc(30 * var(--u));width:calc(510 * var(--u));height:calc(520 * var(--u));padding:calc(20 * var(--u));border-radius:calc(30 * var(--u));backdrop-filter:blur(15px);background:linear-gradient(135deg,#f6fbffbc,#eaf4ff4f 48%,#e6f3ffa1);box-shadow:0 28px 25px -16px #20446766,0 2px 2px white inset,12px 0 22px #e8f8ffaa inset;transform:perspective(calc(1050 * var(--u))) rotateY(16deg);animation:reference-desktop-panel 8s ease-in-out infinite}
 .fio-home .dashboard-top{height:calc(30 * var(--u));padding:0 calc(3 * var(--u)) calc(13 * var(--u));gap:calc(24 * var(--u));font-size:calc(11 * var(--u));align-items:center}
 .fio-home .window-dots{gap:calc(7 * var(--u))}.fio-home .window-dots i{width:calc(7 * var(--u));height:calc(7 * var(--u))}
 .fio-home .window-pill{width:calc(90 * var(--u));height:calc(10 * var(--u))}
 .fio-home .dashboard-surface{height:calc(450 * var(--u));border-radius:calc(18 * var(--u));padding:calc(22 * var(--u));box-shadow:0 14px 23px #36567a25;background:linear-gradient(140deg,#fff,#fbfcffe8)}
 .fio-home .dashboard-greeting{padding-bottom:calc(22 * var(--u))}.fio-home .dashboard-greeting h2{font-size:calc(29 * var(--u));letter-spacing:-.04em;line-height:1.2}
 .fio-home .dashboard-greeting>svg{width:calc(32 * var(--u));height:calc(32 * var(--u));padding:calc(6 * var(--u));border-radius:calc(10 * var(--u));background:#eff4fb}
 .fio-home .metric-grid{grid-template-columns:1fr 1fr 1.02fr;gap:calc(11 * var(--u))}
 .fio-home .metric-grid>div{padding:calc(16 * var(--u)) calc(14 * var(--u));gap:calc(11 * var(--u));height:calc(91 * var(--u));border-radius:calc(14 * var(--u))}
 .fio-home .metric-grid span{font-size:calc(12 * var(--u));gap:calc(8 * var(--u))}.fio-home .metric-grid span svg{width:calc(19 * var(--u));height:calc(19 * var(--u))}
 .fio-home .metric-grid strong{font-size:calc(29 * var(--u));letter-spacing:-.02em}
 .fio-home .agenda-card{margin-top:calc(21 * var(--u))}
 .fio-home .appointment{position:relative;grid-template-columns:calc(54 * var(--u)) minmax(0,1fr) auto;gap:calc(8 * var(--u));padding:calc(19 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u)) 0;min-height:calc(69 * var(--u))}
 .fio-home .appointment:after{content:'';position:absolute;right:calc(3 * var(--u));top:45%;width:calc(7 * var(--u));height:calc(7 * var(--u));border-top:1.5px solid #7b9bbf;border-right:1.5px solid #7b9bbf;transform:rotate(45deg)}
 .fio-home .appointment time,.fio-home .appointment strong{font-size:calc(14 * var(--u))}.fio-home .appointment small{font-size:calc(12 * var(--u));white-space:nowrap}
 .fio-home .appointment b{font-size:calc(10 * var(--u));padding:calc(7 * var(--u)) calc(11 * var(--u))}
 .fio-home .confirmation-card{position:absolute;top:calc(233 * var(--u));left:calc(685 * var(--u));right:auto;bottom:auto;width:calc(190 * var(--u));height:calc(99 * var(--u));padding:calc(17 * var(--u));gap:calc(10 * var(--u));border-radius:calc(17 * var(--u));transform:rotate(-3deg);animation:reference-confirmation 7s ease-in-out infinite}
 .fio-home .confirmation-card .float-icon{flex-shrink:0;width:calc(41 * var(--u));height:calc(41 * var(--u))}.fio-home .confirmation-card .float-icon svg{width:calc(25 * var(--u));height:calc(25 * var(--u))}
 .fio-home .confirmation-card strong{font-size:calc(14 * var(--u));letter-spacing:-.025em}.fio-home .confirmation-card small{font-size:calc(10 * var(--u));margin-top:calc(7 * var(--u));white-space:nowrap}
 .fio-home .preview-disclaimer{left:calc(345 * var(--u));bottom:calc(-29 * var(--u));font-size:calc(10 * var(--u));color:#395777;text-shadow:0 1px 4px #fff}
 .fio-home .proof-strip{position:relative;width:calc(1532 * var(--u));max-width:none;height:calc(98 * var(--u));margin:calc(-26 * var(--u)) auto 0;border-radius:calc(25 * var(--u));background:linear-gradient(145deg,#1d3a54,#0b2238 70%,#1f3b54);box-shadow:0 23px 28px #18395233,inset 0 1px 4px #acd8ff9e;border:1px solid #95bad3b3;z-index:6}
 .fio-home .proof-grid{width:calc(1315 * var(--u));min-height:0;height:100%;padding:0;grid-template-columns:1fr 1fr 1.16fr 1fr}
 .fio-home .proof-grid>span{padding:0 calc(28 * var(--u));gap:calc(20 * var(--u));font-size:calc(16 * var(--u));letter-spacing:-.035em;height:calc(52 * var(--u));align-self:center;white-space:nowrap}
 .fio-home .proof-grid>span:first-child{padding-left:0}.fio-home .proof-grid>span:last-child{padding-right:0}
 .fio-home .proof-grid svg{width:calc(56 * var(--u));height:calc(56 * var(--u));padding:calc(15 * var(--u));border-radius:calc(17 * var(--u))}
 .fio-home #recursos{padding-top:calc(54 * var(--u));background:transparent}
 .fio-home #recursos .section-heading{max-width:calc(1120 * var(--u));text-align:left;margin:0 auto calc(50 * var(--u))}
 .fio-home #recursos .section-heading .eyebrow{font-size:calc(12 * var(--u));letter-spacing:.055em}
 .fio-home #recursos .section-heading h2{font-size:calc(57 * var(--u));white-space:nowrap;letter-spacing:-.055em;margin-top:calc(17 * var(--u))}
 .fio-home #recursos .section-heading>p{max-width:740px}
 @keyframes reference-desktop-panel{0%,100%{transform:perspective(calc(1050 * var(--u))) rotateY(16deg) translateY(0)}50%{transform:perspective(calc(1050 * var(--u))) rotateY(16deg) translateY(calc(-4 * var(--u)))}}
}
@keyframes reference-confirmation{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-5px)}}
@media(min-width:1024px){
 .fio-home{background-image:linear-gradient(to bottom,transparent 82%,#fff 100%),url('/assets/barbershop-reference.webp');background-repeat:no-repeat;background-position:left top;background-size:calc(1672 * var(--u)) calc(941 * var(--u))}
 .fio-home .site-header{left:calc(209 * var(--u));transform:none}
 .fio-home .hero-grid{margin-left:calc(144 * var(--u));margin-right:0}
 .fio-home .hero h1{margin-top:calc(13 * var(--u));margin-bottom:calc(17 * var(--u));transform:scaleX(.915);transform-origin:left center}
 .fio-home .hero-actions{margin-top:calc(24 * var(--u))}
 .fio-home .hero-actions .button-primary{font-size:calc(19 * var(--u));letter-spacing:-.04em;gap:calc(7 * var(--u));padding-inline:calc(22 * var(--u))}
 .fio-home .hero-actions .button-primary svg{flex-shrink:0}
 .fio-home .desktop-nav{position:absolute;left:calc(416 * var(--u));margin:0}
 .fio-home .desktop-nav a{font-weight:400}
 .fio-home .nav-actions{margin-left:auto}
 .fio-home .appointment{height:calc(64 * var(--u));min-height:0;padding-top:calc(12 * var(--u));padding-bottom:calc(11 * var(--u));line-height:1.2}
 .fio-home .appointment b{line-height:1.3}
 .fio-home .proof-strip{margin-left:calc(70 * var(--u));margin-right:0}
 .fio-home .proof-grid>span{font-weight:650;letter-spacing:-.03em}
 .fio-home #recursos .section-heading h2{margin-top:calc(11 * var(--u))}
}
@media(max-width:1023px) and (min-width:961px){.fio-home .hero{padding-top:144px}.fio-home .hero-grid{grid-template-columns:1fr;gap:34px}.fio-home .hero-copy{max-width:670px;margin:auto;text-align:center}.fio-home .hero-actions,.fio-home .hero-checks{justify-content:center}.fio-home .product-stage{width:650px;margin:auto}.fio-home .desktop-nav{display:none}}
@media(max-width:960px){.fio-home .barber-sign{width:215px;margin-left:-40px}.fio-home .product-stage{grid-template-columns:150px minmax(0,1fr)}}
@media(max-width:680px){.fio-home .barber-sign{width:127px;height:310px;margin-left:-28px}.fio-home .product-stage{grid-template-columns:65px minmax(0,1fr)}.fio-home .product-stage .dashboard-card{transform:perspective(700px) rotateY(12deg)}}
@media(max-width:360px){.fio-home .barber-sign{width:105px;height:270px;margin-left:-25px}.fio-home .product-stage{grid-template-columns:48px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.fio-home .product-stage .dashboard-card{animation:none!important;transform:perspective(1050px) rotateY(16deg)}}