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

/* =================================================================
   Fun Fix — playful light theme, violet primary
   ================================================================= */
:root {
   --bg: #faf8ff;
   --bg-2: #f2ecff;
   --surface: #ffffff;
   --surface-2: #f4efff;
   --line: rgba(36, 27, 51, 0.09);
   --line-2: rgba(36, 27, 51, 0.16);

   --purple: #7c3aed;
   --purple-deep: #6025c9;
   --purple-bright: #9560ff;
   --purple-soft: #efe7ff;
   --purple-tint: rgba(124, 58, 237, 0.09);
   --yellow: #ffc93c;
   --star: #ffb020;

   /* playful pastel card tints */
   --c1: #efe7ff;
   --c2: #fff2cf;
   --c3: #ffe3ea;
   --c4: #ddf6ec;
   --c5: #e2f1ff;
   --c6: #f3e9ff;
   --ic1: #7c3aed;
   --ic2: #e5991b;
   --ic3: #f0466e;
   --ic4: #17b184;
   --ic5: #2b8fe0;
   --ic6: #9560ff;

   --ink: #241b33;
   --ink-2: #6b6280;
   --ink-3: #a29db3;

   --shadow-sm: 0 3px 12px rgba(36, 27, 51, 0.06);
   --shadow: 0 18px 38px -16px rgba(124, 58, 237, 0.28);
   --shadow-purple: 0 12px 26px -8px rgba(124, 58, 237, 0.5);

   --font-display: 'Fredoka', system-ui, sans-serif;
   --font-body: 'Nunito', system-ui, sans-serif;

   --r-sm: 14px;
   --r: 20px;
   --r-lg: 28px;
   --r-pill: 999px;

   --ease: cubic-bezier(0.34, 1.3, 0.5, 1);
   --t: 0.28s var(--ease);
   --maxw: 1200px;
}

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

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
}

body {
   background: var(--bg);
   color: var(--ink);
   font-family: var(--font-body);
   font-size: 16px;
   line-height: 1.6;
   min-height: 100vh;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}

/* playful ambient blobs */
body::before {
   content: '';
   position: fixed;
   inset: 0;
   background:
      radial-gradient(46% 40% at 88% -6%, rgba(124, 58, 237, 0.12), transparent 60%),
      radial-gradient(38% 32% at 4% 2%, rgba(255, 201, 60, 0.16), transparent 58%);
   pointer-events: none;
   z-index: 0;
}

body>* {
   position: relative;
   z-index: 1;
}

a {
   color: var(--purple);
   text-decoration: none;
   transition: color var(--t);
}

a:hover {
   color: var(--purple-deep);
}

img,
svg {
   max-width: 100%;
   display: block;
}

ul {
   list-style: none;
}

:focus-visible {
   outline: 3px solid var(--purple-bright);
   outline-offset: 3px;
   border-radius: 6px;
}

/* =================================================================
   type
   ================================================================= */
h1,
h2,
h3,
h4 {
   font-family: var(--font-display);
   font-weight: 600;
   line-height: 1.05;
   letter-spacing: -0.01em;
   color: var(--ink);
}

.eyebrow {
   font-family: var(--font-display);
   font-size: 0.82rem;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--purple);
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--purple-soft);
   padding: 6px 14px;
   border-radius: var(--r-pill);
}

.eyebrow::before {
   content: '✦';
   color: var(--yellow);
}

.eyebrow.center {}

.h-xl {
   font-size: clamp(2.6rem, 6.4vw, 4.6rem);
   font-weight: 700;
}

.h-lg {
   font-size: clamp(2rem, 4.6vw, 3.1rem);
}

.h-md {
   font-size: clamp(1.55rem, 3vw, 2.15rem);
}

.lead {
   color: var(--ink-2);
   font-size: 1.14rem;
   line-height: 1.6;
}

.muted {
   color: var(--ink-2);
}

.mark {
   color: var(--purple);
}

.hl {
   position: relative;
   white-space: nowrap;
}

.hl::after {
   content: '';
   position: absolute;
   left: -2px;
   right: -2px;
   bottom: 4%;
   height: 34%;
   background: var(--yellow);
   border-radius: 6px;
   z-index: -1;
   opacity: 0.85;
}

/* =================================================================
   layout
   ================================================================= */
.wrap {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: 0 24px;
}

.section {
   padding: 92px 0;
}

.section-sm {
   padding: 58px 0;
}

.sec-head {
   max-width: 640px;
   margin-bottom: 48px;
}

.sec-head.center {
   margin: 0 auto 48px;
   text-align: center;
}

.sec-head.center .eyebrow {}

.sec-head h2 {
   margin: 16px 0 14px;
}

.sec-head p {
   color: var(--ink-2);
   font-size: 1.05rem;
}

/* =================================================================
   buttons
   ================================================================= */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   font-family: var(--font-display);
   font-weight: 600;
   font-size: 1rem;
   padding: 13px 26px;
   border-radius: var(--r-pill);
   border: 2px solid transparent;
   cursor: pointer;
   transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t), color var(--t);
   white-space: nowrap;
}

.btn:active {
   transform: translateY(1px) scale(0.99);
}

.btn-primary {
   background: var(--purple);
   color: #fff;
   box-shadow: var(--shadow-purple);
}

.btn-primary:hover {
   background: var(--purple-deep);
   color: #fff;
   transform: translateY(-3px);
}

.btn-ghost {
   background: var(--surface);
   border-color: var(--line-2);
   color: var(--ink);
}

.btn-ghost:hover {
   border-color: var(--purple);
   color: var(--purple);
   transform: translateY(-3px);
}

.btn-lg {
   padding: 16px 32px;
   font-size: 1.08rem;
}

.btn-block {
   width: 100%;
}

.btn-light {
   background: #fff;
   color: var(--purple);
}

.btn-light:hover {
   background: var(--yellow);
   color: var(--ink);
}

/* =================================================================
   nav
   ================================================================= */
.nav {
   position: sticky;
   top: 0;
   z-index: 100;
   background: rgba(250, 248, 255, 0.82);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--line);
   transition: box-shadow var(--t), background var(--t);
}

.nav.scrolled {
   box-shadow: var(--shadow-sm);
   background: rgba(255, 255, 255, 0.9);
}

.nav-inner {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: 0 24px;
   height: 76px;
   display: flex;
   align-items: center;
   gap: 18px;
}

.brand {
   display: inline-flex;
   align-items: center;
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1.4rem;
   color: var(--ink);
   flex-shrink: 0;
}

.brand:hover {
   color: var(--ink);
}

.brand .ac {
   color: var(--purple);
}

.brand img {
   width: 34px;
   height: 34px;
   object-fit: contain;
   border-radius: 10px;
   flex-shrink: 0;
   padding-right: 7px;
}

.nav-links {
   display: flex;
   align-items: center;
   gap: 4px;
   margin-left: auto;
}

.nav-links a {
   color: var(--ink-2);
   font-family: var(--font-display);
   font-weight: 500;
   font-size: 0.96rem;
   padding: 9px 15px;
   border-radius: var(--r-pill);
   transition: color var(--t), background var(--t);
}

.nav-links a:hover {
   color: var(--purple);
   background: var(--purple-soft);
}

.nav-links a.active {
   color: var(--purple);
   background: var(--purple-soft);
}

.nav-right {
   display: flex;
   align-items: center;
   gap: 10px;
}

.nav-phone {
   font-family: var(--font-display);
   font-weight: 600;
   font-size: 0.95rem;
   color: var(--ink);
}

.nav-phone:hover {
   color: var(--purple);
}

.nav-right .btn-primary {
   height: 50px;
}

.burger {
   display: none;
   margin-left: auto;
   width: 46px;
   height: 46px;
   border-radius: 14px;
   border: 2px solid var(--line-2);
   background: var(--surface);
   cursor: pointer;
   position: relative;
}

.burger span {
   position: absolute;
   left: 12px;
   right: 12px;
   height: 2.5px;
   background: var(--purple);
   border-radius: 3px;
   transition: transform var(--t), opacity var(--t);
}

.burger span:nth-child(1) {
   top: 16px;
}

.burger span:nth-child(2) {
   top: 21.5px;
}

.burger span:nth-child(3) {
   top: 27px;
}

.burger.open span:nth-child(1) {
   transform: translateY(5.5px) rotate(45deg);
}

.burger.open span:nth-child(2) {
   opacity: 0;
}

.burger.open span:nth-child(3) {
   transform: translateY(-5.5px) rotate(-45deg);
}

.mobile-panel {
   position: fixed;
   inset: 0 0 0 auto;
   width: min(82vw, 360px);
   background: var(--surface);
   border-left: 1px solid var(--line);
   z-index: 200;
   transform: translateX(100%);
   transition: transform 0.34s var(--ease);
   padding: 92px 26px 30px;
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.mobile-panel.open {
   transform: translateX(0);
}

.mobile-panel a {
   color: var(--ink);
   font-family: var(--font-display);
   font-size: 1.45rem;
   font-weight: 500;
   padding: 13px 0;
   border-bottom: 1px solid var(--line);
}

.mobile-panel a:hover {
   color: var(--purple);
}

.mobile-panel .btn {
   margin-top: 18px;
}

.panel-close {
   position: absolute;
   top: 22px;
   right: 22px;
   width: 46px;
   height: 46px;
   border-radius: 14px;
   border: 2px solid var(--line-2);
   background: var(--surface);
   cursor: pointer;
}

.panel-close::before,
.panel-close::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 17px;
   height: 2.5px;
   background: var(--purple);
   border-radius: 3px;
}

.panel-close::before {
   transform: translate(-50%, -50%) rotate(45deg);
}

.panel-close::after {
   transform: translate(-50%, -50%) rotate(-45deg);
}

.scrim {
   position: fixed;
   inset: 0;
   background: rgba(36, 27, 51, 0.34);
   backdrop-filter: blur(2px);
   z-index: 150;
   opacity: 0;
   pointer-events: none;
   transition: opacity var(--t);
}

.scrim.open {
   opacity: 1;
   pointer-events: auto;
}

/* =================================================================
   hero
   ================================================================= */
.hero {
   padding: 66px 0 84px;
}

.hero-grid {
   display: grid;
   grid-template-columns: 1.05fr 0.95fr;
   gap: 54px;
   align-items: center;
}

.hero h1 {
   margin: 20px 0 20px;
}

.hero .lead {
   max-width: 30em;
}

.hero-cta {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin: 28px 0 24px;
}

.trust-row {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
}

.rating-chip {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--r-pill);
   padding: 8px 16px;
   box-shadow: var(--shadow-sm);
}

.rating-chip .stars {
   color: var(--star);
   letter-spacing: 1px;
}

.rating-chip b {
   font-family: var(--font-display);
}

.rating-chip span {
   color: var(--ink-2);
   font-size: 0.86rem;
}

.chip {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 0.88rem;
   font-weight: 700;
   color: var(--ink);
   padding: 8px 15px;
   border-radius: var(--r-pill);
   background: var(--yellow);
}

/* signature: playful "all fixed!" card */
.fixcard {
   background: var(--surface);
   border-radius: var(--r-lg);
   box-shadow: var(--shadow);
   padding: 12px;
   position: relative;
}

.fixcard::before {
   content: '✦';
   position: absolute;
   top: -14px;
   right: 26px;
   font-size: 2rem;
   color: var(--yellow);
   animation: twinkle 2.4s ease-in-out infinite;
}

.fixcard::after {
   content: '✦';
   position: absolute;
   bottom: 14px;
   left: -12px;
   font-size: 1.3rem;
   color: var(--purple-bright);
   animation: twinkle 2.4s ease-in-out infinite 0.8s;
}

.fixcard-inner {
   background: linear-gradient(160deg, var(--purple-soft), #fff 65%);
   border-radius: 22px;
   padding: 30px 28px;
}

.fixcard-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 18px;
}

.fixcard-badge {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 0.78rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #fff;
   background: var(--purple);
   padding: 5px 12px;
   border-radius: var(--r-pill);
}

.fixcard-dots {
   display: flex;
   gap: 6px;
}

.fixcard-dots i {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   display: block;
}

.fixcard-dots i:nth-child(1) {
   background: var(--ic3);
}

.fixcard-dots i:nth-child(2) {
   background: var(--yellow);
}

.fixcard-dots i:nth-child(3) {
   background: var(--ic4);
}

.fixcard-face {
   font-size: 2.6rem;
   margin-bottom: 6px;
}

.fixcard-h {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1.7rem;
   margin-bottom: 18px;
}

.fixcard-rows {
   display: flex;
   flex-direction: column;
   gap: 11px;
   margin-bottom: 20px;
}

.fix-row {
   display: flex;
   align-items: center;
   gap: 12px;
   font-weight: 600;
   color: var(--ink);
}

.fix-row .tick {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--ic4);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: 0.85rem;
   flex-shrink: 0;
}

.fix-row .old {
   color: var(--ink-3);
   text-decoration: line-through;
   font-weight: 500;
   margin-left: auto;
   font-size: 0.9rem;
}

.fixcard-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-top: 16px;
   border-top: 2px dashed var(--line-2);
}

.fixcard-foot .stars {
   color: var(--star);
   letter-spacing: 1px;
}

.fixcard-foot .rdy {
   font-family: var(--font-display);
   font-weight: 600;
   color: var(--purple);
}

@keyframes twinkle {

   0%,
   100% {
      transform: scale(1) rotate(0);
      opacity: 0.9;
   }

   50% {
      transform: scale(1.25) rotate(15deg);
      opacity: 1;
   }
}

/* =================================================================
   brands
   ================================================================= */
.brands {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: center;
}

.brands span {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: 0.9rem;
   color: var(--ink-2);
   padding: 9px 18px;
   border-radius: var(--r-pill);
   background: var(--surface);
   box-shadow: var(--shadow-sm);
   transition: transform var(--t), color var(--t);
}

.brands span:hover {
   color: var(--purple);
   transform: translateY(-3px);
}

/* =================================================================
   services — playful pastel cards
   ================================================================= */
.svc-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
}

.svc {
   border-radius: var(--r-lg);
   padding: 30px 28px;
   transition: transform var(--t), box-shadow var(--t);
   position: relative;
}

.svc:hover {
   transform: translateY(-6px) rotate(-0.6deg);
   box-shadow: var(--shadow);
}

.svc .ic {
   width: 58px;
   height: 58px;
   border-radius: 18px;
   background: #fff;
   display: grid;
   place-items: center;
   font-size: 1.7rem;
   margin-bottom: 18px;
   box-shadow: var(--shadow-sm);
}

.svc h3 {
   font-size: 1.22rem;
   margin-bottom: 9px;
}

.svc p {
   color: var(--ink-2);
   font-size: 0.94rem;
}

.svc .tag {
   display: inline-block;
   margin-top: 16px;
   font-family: var(--font-display);
   font-weight: 600;
   font-size: 0.82rem;
   color: var(--ink);
   background: #fff;
   padding: 4px 13px;
   border-radius: var(--r-pill);
}

.svc:nth-child(6n+1) {
   background: var(--c1);
}

.svc:nth-child(6n+2) {
   background: var(--c2);
}

.svc:nth-child(6n+3) {
   background: var(--c3);
}

.svc:nth-child(6n+4) {
   background: var(--c4);
}

.svc:nth-child(6n+5) {
   background: var(--c5);
}

.svc:nth-child(6n+6) {
   background: var(--c6);
}

/* =================================================================
   steps
   ================================================================= */
.steps {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 22px;
}

.step {
   text-align: center;
}

.step .num {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 1.4rem;
   color: #fff;
   margin: 0 auto 18px;
   box-shadow: var(--shadow-sm);
}

.step:nth-child(1) .num {
   background: var(--ic1);
}

.step:nth-child(2) .num {
   background: var(--ic3);
}

.step:nth-child(3) .num {
   background: var(--ic4);
}

.step:nth-child(4) .num {
   background: var(--ic5);
}

.step h4 {
   font-size: 1.14rem;
   margin-bottom: 8px;
}

.step p {
   color: var(--ink-2);
   font-size: 0.92rem;
}

/* =================================================================
   stats band (purple)
   ================================================================= */
.statband {
   background: linear-gradient(135deg, var(--purple), var(--purple-bright));
   border-radius: var(--r-lg);
   padding: 48px 36px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 26px;
   box-shadow: var(--shadow-purple);
}

.stat {
   text-align: center;
}

.stat .n {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: clamp(2rem, 4vw, 2.9rem);
   color: #fff;
}

.stat .n small {
   font-size: 1rem;
   opacity: 0.9;
}

.stat .l {
   color: rgba(255, 255, 255, 0.9);
   font-size: 0.92rem;
   margin-top: 4px;
}

/* =================================================================
   products
   ================================================================= */
.prod-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
}

.prod {
   background: var(--surface);
   border-radius: var(--r-lg);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
   transition: transform var(--t), box-shadow var(--t);
}

.prod:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow);
}

.prod .ph {
   aspect-ratio: 4/3;
   display: grid;
   place-items: center;
   font-size: 3.2rem;
}

.prod:nth-child(6n+1) .ph {
   background: var(--c1);
}

.prod:nth-child(6n+2) .ph {
   background: var(--c2);
}

.prod:nth-child(6n+3) .ph {
   background: var(--c3);
}

.prod:nth-child(6n+4) .ph {
   background: var(--c4);
}

.prod:nth-child(6n+5) .ph {
   background: var(--c5);
}

.prod:nth-child(6n+6) .ph {
   background: var(--c6);
}

.prod .body {
   padding: 24px;
}

.prod h3 {
   font-size: 1.16rem;
   margin-bottom: 7px;
}

.prod p {
   color: var(--ink-2);
   font-size: 0.92rem;
}

/* =================================================================
   cta
   ================================================================= */
.cta {
   background: linear-gradient(135deg, var(--purple), var(--purple-bright));
   color: #fff;
   border-radius: var(--r-lg);
   padding: 60px;
   text-align: center;
   position: relative;
   overflow: hidden;
   box-shadow: var(--shadow-purple);
}

.cta::after {
   content: '✦';
   position: absolute;
   right: 40px;
   top: 26px;
   font-size: 3rem;
   color: var(--yellow);
}

.cta::before {
   content: '✦';
   position: absolute;
   left: 44px;
   bottom: 30px;
   font-size: 2rem;
   color: rgba(255, 255, 255, 0.5);
}

.cta h2 {
   color: #fff;
   margin-bottom: 14px;
}

.cta p {
   color: rgba(255, 255, 255, 0.85);
   max-width: 42em;
   margin: 0 auto 28px;
}

.cta .row {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
}

/* =================================================================
   reviews
   ================================================================= */
.reviews-slot {
   max-width: 1000px;
   margin: 0 auto;
}

.rv-head {
   text-align: center;
   margin-bottom: 30px;
}

.rv-head .big {
   font-family: var(--font-display);
   font-weight: 700;
   font-size: 3.2rem;
   color: var(--purple);
   line-height: 1;
}

.rv-head .stars {
   color: var(--star);
   font-size: 1.5rem;
   letter-spacing: 3px;
   margin: 8px 0;
}

.rv-head p {
   color: var(--ink-2);
}

.rv-placeholder {
   text-align: center;
   padding: 44px 30px;
   border: 2px dashed var(--line-2);
   border-radius: var(--r-lg);
   background: var(--surface);
}

.rv-placeholder p {
   color: var(--ink-2);
}

.rv-cta {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 28px;
}

/* =================================================================
   contact
   ================================================================= */
.contact-grid {
   display: grid;
   grid-template-columns: 0.95fr 1.05fr;
   gap: 26px;
   align-items: start;
}

.info-stack {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.info-card {
   background: var(--surface);
   border-radius: var(--r-lg);
   padding: 26px;
   box-shadow: var(--shadow-sm);
}

.info-card .k {
   font-family: var(--font-display);
   font-size: 0.76rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--ink-3);
   margin-bottom: 10px;
}

.info-card .v {
   font-family: var(--font-display);
   font-weight: 600;
   font-size: 1.35rem;
}

.info-card .v a {
   color: var(--ink);
}

.info-card .v a:hover {
   color: var(--purple);
}

.info-card.accent-card {
   background: linear-gradient(140deg, var(--purple), var(--purple-bright));
}

.info-card.accent-card .k {
   color: rgba(255, 255, 255, 0.85);
}

.info-card.accent-card .v,
.info-card.accent-card .v a,
.info-card.accent-card p {
   color: #fff;
}

.info-card p {
   color: var(--ink-2);
   font-size: 0.9rem;
}

.hours {
   width: 100%;
}

.hours .r {
   display: flex;
   justify-content: space-between;
   padding: 9px 0;
   font-size: 0.94rem;
   border-bottom: 1px solid var(--line);
}

.hours .r:last-child {
   border-bottom: 0;
}

.hours .d {
   color: var(--ink-2);
}

.hours .h {
   font-family: var(--font-display);
   font-weight: 500;
   font-size: 0.9rem;
   color: var(--ink);
}

.hours .r.today .d {
   color: var(--purple);
   font-weight: 700;
}

.hours .r.today .h {
   color: var(--purple);
}

.map-card {
   border-radius: var(--r-lg);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
}

.map-card iframe {
   width: 100%;
   height: 430px;
   border: 0;
   display: block;
}

/* =================================================================
   book a repair form
   ================================================================= */
.book-section {
   scroll-margin-top: 90px;
}

.book-card {
   max-width: 860px;
   margin: 0 auto;
   background: var(--surface);
   border-radius: var(--r-lg);
   padding: 46px;
   box-shadow: var(--shadow);
}

.book-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
}

.book-field {
   display: flex;
   flex-direction: column;
   gap: 7px;
}

.book-field.full {
   grid-column: 1 / -1;
}

.book-field label {
   font-family: var(--font-display);
   font-size: 0.82rem;
   font-weight: 600;
   letter-spacing: 0.03em;
   color: var(--ink);
}

.book-field label .req {
   color: var(--purple);
}

.book-field input,
.book-field select,
.book-field textarea {
   width: 100%;
   padding: 13px 16px;
   font: inherit;
   font-size: 0.95rem;
   color: var(--ink);
   background: var(--surface-2);
   border: 2px solid transparent;
   border-radius: var(--r);
   outline: none;
   transition: border-color var(--t), background var(--t);
}

.book-field textarea {
   min-height: 130px;
   resize: vertical;
}

.book-field input::placeholder,
.book-field textarea::placeholder {
   color: var(--ink-3);
}

.book-field input:focus,
.book-field select:focus,
.book-field textarea:focus {
   border-color: var(--purple);
   background: #fff;
}

.book-field select {
   cursor: pointer;
}

.book-actions {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin-top: 26px;
   flex-wrap: wrap;
}

.book-note {
   font-size: 0.85rem;
   color: var(--ink-2);
}

.book-hp {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   opacity: 0;
}

/* =================================================================
   legal
   ================================================================= */
.legal {
   display: grid;
   grid-template-columns: 240px 1fr;
   gap: 46px;
   align-items: start;
}

.legal-toc {
   position: sticky;
   top: 100px;
   background: var(--surface);
   border-radius: var(--r);
   padding: 22px;
   box-shadow: var(--shadow-sm);
}

.legal-toc h4 {
   font-family: var(--font-display);
   font-size: 0.76rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--ink-3);
   margin-bottom: 14px;
}

.legal-toc a {
   display: block;
   color: var(--ink-2);
   font-size: 0.88rem;
   padding: 7px 10px;
   border-radius: 10px;
}

.legal-toc a:hover {
   color: var(--purple);
   background: var(--purple-soft);
}

.legal-body h2 {
   font-size: 1.35rem;
   margin: 40px 0 14px;
   padding-top: 38px;
   border-top: 1px solid var(--line);
}

.legal-body h2:first-child {
   margin-top: 0;
   padding-top: 0;
   border-top: 0;
}

.legal-body p {
   color: var(--ink-2);
   margin-bottom: 14px;
   line-height: 1.75;
}

.legal-body strong {
   color: var(--ink);
}

.legal-body ul {
   margin: 0 0 16px;
}

.legal-body li {
   color: var(--ink-2);
   padding: 6px 0 6px 24px;
   position: relative;
}

.legal-body li::before {
   content: '✦';
   position: absolute;
   left: 2px;
   top: 8px;
   font-size: 0.72rem;
   color: var(--purple);
}

.pill-note {
   display: inline-block;
   font-family: var(--font-display);
   font-size: 0.78rem;
   color: var(--ink-3);
   background: var(--surface);
   box-shadow: var(--shadow-sm);
   border-radius: var(--r-pill);
   padding: 6px 15px;
   margin-bottom: 22px;
}

/* =================================================================
   footer (deep purple)
   ================================================================= */
.ft {
   background: #2a1b45;
   color: #fff;
   padding: 66px 0 34px;
   margin-top: 20px;
}

.ft .brand {
   color: #fff;
}

.ft .brand .ac {
   color: var(--yellow);
}

.ft-grid {
   display: grid;
   grid-template-columns: 1.6fr 1fr 1fr 1fr;
   gap: 40px;
   margin-bottom: 46px;
}

.ft-brand p {
   color: rgba(255, 255, 255, 0.6);
   font-size: 0.94rem;
   margin: 16px 0;
   max-width: 32ch;
}

.ft-col h5 {
   font-family: var(--font-display);
   font-size: 0.78rem;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.55);
   margin-bottom: 15px;
}

.ft-col a {
   display: block;
   color: rgba(255, 255, 255, 0.72);
   font-size: 0.94rem;
   padding: 6px 0;
}

.ft-col a:hover {
   color: var(--yellow);
}

.ft-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.14);
   padding-top: 26px;
   display: flex;
   justify-content: space-between;
   gap: 14px;
   flex-wrap: wrap;
}

.ft-bottom p {
   color: rgba(255, 255, 255, 0.5);
   font-size: 0.84rem;
}

.callbar {
   display: none;
   position: fixed;
   left: 16px;
   right: 16px;
   bottom: 16px;
   z-index: 90;
   background: var(--purple);
   color: #fff;
   text-align: center;
   padding: 15px;
   border-radius: var(--r-pill);
   font-family: var(--font-display);
   font-weight: 600;
   box-shadow: var(--shadow-purple);
}

.callbar:hover {
   color: #fff;
}

/* reveal */
.reveal {
   opacity: 0;
   transform: translateY(22px);
   transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.in {
   opacity: 1;
   transform: none;
}

.reveal.d1 {
   transition-delay: 0.08s;
}

.reveal.d2 {
   transition-delay: 0.16s;
}

.reveal.d3 {
   transition-delay: 0.24s;
}

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 1000px) {
   .hero-grid {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .fixcard {
      max-width: 460px;
   }

   .contact-grid {
      grid-template-columns: 1fr;
   }

   .statband {
      grid-template-columns: repeat(2, 1fr);
      row-gap: 32px;
   }

   .steps {
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
   }

   .legal {
      grid-template-columns: 1fr;
   }

   .legal-toc {
      position: static;
   }
}

@media (max-width: 760px) {
   .section {
      padding: 64px 0;
   }

   .nav-links,
   .nav-phone,
   .nav-right {
      display: none;
   }

   .burger {
      display: block;
   }

   .svc-grid,
   .prod-grid {
      grid-template-columns: 1fr 1fr;
   }

   .ft-grid {
      grid-template-columns: 1fr 1fr;
      gap: 30px;
   }

   .cta {
      padding: 44px 26px;
   }

   .book-grid {
      grid-template-columns: 1fr;
   }

   .book-actions {
      flex-direction: column;
      align-items: stretch;
   }

   .callbar {
      display: block;
   }

   body {
      padding-bottom: 84px;
   }
}

@media (max-width: 480px) {

   .svc-grid,
   .prod-grid {
      grid-template-columns: 1fr;
   }

   .steps,
   .statband {
      grid-template-columns: 1fr 1fr;
   }

   .ft-grid {
      grid-template-columns: 1fr;
   }
}

@media (prefers-reduced-motion: reduce) {
   * {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important;
   }

   .reveal {
      opacity: 1;
      transform: none;
   }
}