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

:root{
  --radius:0.75rem;
  --background:oklch(0.995 0.003 250);
  --foreground:oklch(0.18 0.02 255);
  --ink:oklch(0.16 0.025 258);
  --ink-soft:oklch(0.46 0.018 258);
  --surface:oklch(0.975 0.008 250);
  --surface-tint:oklch(0.965 0.022 248);
  --brand:oklch(0.58 0.19 252);
  --brand-deep:oklch(0.42 0.18 256);
  --brand-soft:oklch(0.92 0.06 248);
  --accent-warm:oklch(0.74 0.15 60);
  --border:oklch(0.9 0.012 250);
  --gradient-hero:linear-gradient(135deg, oklch(0.97 0.025 248) 0%, oklch(0.955 0.04 252) 50%, oklch(0.96 0.04 70) 100%);
  --gradient-brand:linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  --gradient-warm:linear-gradient(135deg, var(--brand) 0%, var(--accent-warm) 100%);
  --gradient-mesh:radial-gradient(at 20% 20%, oklch(0.92 0.08 248 / 0.6) 0px, transparent 50%),
                  radial-gradient(at 80% 0%, oklch(0.94 0.07 70 / 0.5) 0px, transparent 50%),
                  radial-gradient(at 80% 80%, oklch(0.9 0.07 252 / 0.4) 0px, transparent 50%);
  --shadow-glow:0 20px 60px -20px oklch(0.58 0.19 252 / 0.35);
  --shadow-card:0 1px 0 oklch(1 0 0 / 0.6) inset, 0 1px 2px oklch(0.16 0.025 258 / 0.04), 0 12px 32px -16px oklch(0.16 0.025 258 / 0.12);
}
*{box-sizing:border-box;border-color:var(--border);margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{background:var(--background);color:var(--foreground);font-family:"Inter",system-ui,-apple-system,sans-serif;line-height:1.5;font-feature-settings:"ss01","cv11"}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
h1,h2,h3,h4{letter-spacing:-0.025em;font-weight:600;line-height:1.1}
::selection{background:var(--brand);color:#fff}

.container-px{padding-left:1.5rem;padding-right:1.5rem;max-width:1400px;margin:0 auto}
@media(min-width:768px){.container-px{padding-left:2.5rem;padding-right:2.5rem}}
@media(min-width:1280px){.container-px{padding-left:4rem;padding-right:4rem}}

.text-ink{color:var(--ink)}.text-ink-soft{color:var(--ink-soft)}.text-brand{color:var(--brand)}.text-bg{color:var(--background)}
.bg-bg{background:var(--background)}.bg-surface{background:var(--surface)}.bg-surface-tint{background:var(--surface-tint)}
.bg-gradient-hero{background-image:var(--gradient-hero)}
.bg-gradient-brand{background-image:var(--gradient-brand)}
.bg-mesh{background-image:var(--gradient-mesh)}
.shadow-glow{box-shadow:var(--shadow-glow)}.shadow-card{box-shadow:var(--shadow-card)}
.text-gradient-brand{background-image:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-outline{color:transparent;-webkit-text-stroke:1px oklch(0.18 0.01 260 / 0.18);font-weight:700;letter-spacing:-0.04em}
.text-outline-brand{color:transparent;-webkit-text-stroke:1.5px var(--brand);font-weight:700;letter-spacing:-0.04em}
.border-t{border-top:1px solid var(--border)}
.border-b{border-bottom:1px solid var(--border)}
.border{border:1px solid var(--border)}
.rounded-xl{border-radius:0.75rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .3s;background:transparent}
.site-header.scrolled{background:rgba(255,255,255,.8);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
@media(min-width:768px){.header-inner{height:80px}}
.brand-logo{display:flex;align-items:center;gap:10px}
.brand-logo img{height:36px;width:36px;object-fit:contain;border-radius:6px}
.brand-logo span{font-weight:600;letter-spacing:-0.02em;font-size:16px;color:var(--ink)}
@media(min-width:768px){.brand-logo img{height:40px;width:40px}.brand-logo span{font-size:17px}}
.nav-links{display:none;gap:36px}
@media(min-width:768px){.nav-links{display:flex;align-items:center}}
.nav-links a{font-size:14px;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--ink);font-weight:500}
.cta-btn{display:none;align-items:center;gap:8px;border-radius:9999px;background-image:var(--gradient-brand);color:#fff;padding:10px 20px;font-size:14px;font-weight:500;box-shadow:var(--shadow-glow);transition:opacity .2s}
.cta-btn:hover{opacity:.95}
@media(min-width:768px){.cta-btn{display:inline-flex}}
.menu-btn{display:inline-flex;padding:8px;color:var(--ink)}
@media(min-width:768px){.menu-btn{display:none}}
.mobile-menu{display:none;border-top:1px solid var(--border);background:var(--background)}
.mobile-menu.open{display:block}
.mobile-menu .container-px{padding-top:24px;padding-bottom:24px;display:flex;flex-direction:column;gap:16px}
.mobile-menu a{font-size:18px;color:var(--ink)}

main{min-height:60vh;padding-top:64px}
@media(min-width:768px){main{padding-top:80px}}

/* Buttons */
.btn-brand{display:inline-flex;align-items:center;gap:8px;border-radius:9999px;background-image:var(--gradient-brand);color:#fff;padding:14px 24px;font-size:14px;font-weight:500;box-shadow:var(--shadow-glow);transition:opacity .2s}
.btn-brand:hover{opacity:.95}
.btn-outline{display:inline-flex;align-items:center;gap:8px;border-radius:9999px;border:1px solid var(--border);background:rgba(255,255,255,.8);backdrop-filter:blur(8px);color:var(--ink);padding:14px 24px;font-size:14px;font-weight:500;transition:all .2s}
.btn-outline:hover{border-color:var(--brand);color:var(--brand)}
.btn-ink{display:inline-flex;align-items:center;gap:8px;border-radius:9999px;background:var(--ink);color:var(--background);padding:14px 28px;font-size:14px;font-weight:500;transition:background .2s}
.btn-ink:hover{background:var(--brand)}

/* Layout helpers */
.grid{display:grid}
.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}
.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.text-center{text-align:center}.text-right{text-align:right}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-16{margin-top:4rem}
.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}
.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}
.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-10{padding:2.5rem}.p-12{padding:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-7{padding-top:1.75rem;padding-bottom:1.75rem}
.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}
.relative{position:relative}.absolute{position:absolute}.inset-0{inset:0}
.overflow-hidden{overflow:hidden}.pointer-events-none{pointer-events:none}
.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}
.w-full{width:100%}.h-full{height:100%}
.uppercase{text-transform:uppercase}
.tracking-tight{letter-spacing:-0.025em}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.text-xs{font-size:12px}.text-sm{font-size:14px}.text-base{font-size:16px}.text-lg{font-size:18px}.text-xl{font-size:20px}.text-2xl{font-size:24px}.text-3xl{font-size:30px}.text-4xl{font-size:36px}.text-5xl{font-size:48px}.text-6xl{font-size:60px}.text-7xl{font-size:72px}.text-8xl{font-size:96px}
.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.1}
.tk{letter-spacing:0.22em}.tk2{letter-spacing:0.18em}.tk3{letter-spacing:0.14em}

/* Responsive grid columns */
@media(min-width:640px){.sm-cols-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){
  .md-cols-2{grid-template-columns:repeat(2,1fr)}
  .md-cols-3{grid-template-columns:repeat(3,1fr)}
  .md-cols-12{grid-template-columns:repeat(12,1fr)}
  .md\:text-4xl{font-size:36px}.md\:text-5xl{font-size:48px}.md\:text-6xl{font-size:60px}.md\:text-7xl{font-size:72px}.md\:text-8xl{font-size:96px}.md\:text-lg{font-size:18px}.md\:text-xl{font-size:20px}.md\:text-2xl{font-size:24px}.md\:text-3xl{font-size:30px}
  .md\:py-32{padding-top:8rem;padding-bottom:8rem}.md\:py-36{padding-top:9rem;padding-bottom:9rem}.md\:py-28{padding-top:7rem;padding-bottom:7rem}
  .md\:p-10{padding:2.5rem}.md\:p-20{padding:5rem}
  .md\:block{display:block}.md\:hidden{display:none}
}
@media(min-width:1024px){
  .lg-cols-3{grid-template-columns:repeat(3,1fr)}
  .lg-cols-4{grid-template-columns:repeat(4,1fr)}
  .lg-cols-12{grid-template-columns:repeat(12,1fr)}
  .lg\:block{display:block}.lg\:hidden{display:none}
  .lg\:text-7xl{font-size:72px}
}

.col-span-1{grid-column:span 1}.col-span-2{grid-column:span 2}
@media(min-width:768px){
  .md\:col-1{grid-column:span 1}.md\:col-3{grid-column:span 3}.md\:col-4{grid-column:span 4}.md\:col-5{grid-column:span 5}.md\:col-6{grid-column:span 6}.md\:col-7{grid-column:span 7}.md\:col-8{grid-column:span 8}
}
@media(min-width:1024px){
  .lg\:col-2{grid-column:span 2}.lg\:col-5{grid-column:span 5}.lg\:col-7{grid-column:span 7}
  .lg\:row-2{grid-row:span 2}
}

/* Aspect ratios */
.aspect-43{aspect-ratio:4/3}.aspect-45{aspect-ratio:4/5}.aspect-1613{aspect-ratio:16/13}

/* Hover */
.hover-grow{transition:transform .9s cubic-bezier(.22,1,.36,1)}
.card-img:hover .hover-grow{transform:scale(1.05)}
.card-img{position:relative;overflow:hidden;border-radius:1rem;background:var(--surface);box-shadow:var(--shadow-card);transition:box-shadow .3s;display:block}
.card-img:hover{box-shadow:var(--shadow-glow)}
.card-overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(35,55,120,.8), rgba(80,120,220,.2), transparent);opacity:0;transition:opacity .3s}
.card-img:hover .card-overlay{opacity:1}
.card-caption{position:absolute;left:20px;bottom:20px;right:20px;color:#fff;opacity:0;transition:opacity .3s;display:flex;justify-content:space-between;align-items:flex-end}
.card-img:hover .card-caption{opacity:1}

/* FAQ details */
details summary{list-style:none;display:flex;justify-content:space-between;gap:24px;cursor:pointer;align-items:flex-start}
details summary::-webkit-details-marker{display:none}
details .plus{flex-shrink:0;height:28px;width:28px;border-radius:9999px;background:var(--surface-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;transition:transform .2s}
details[open] .plus{transform:rotate(45deg)}
details summary span:first-child{font-size:18px;font-weight:500;color:var(--ink);transition:color .2s}
details:hover summary span:first-child{color:var(--brand)}

/* Form */
input,textarea{width:100%;border-radius:8px;border:1px solid var(--border);background:var(--background);padding:12px 16px;color:var(--ink);font-family:inherit;font-size:14px;transition:border-color .2s}
input:focus,textarea:focus{outline:none;border-color:var(--ink)}
label{display:block;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
form{border-radius:1rem;border:1px solid var(--border);background:var(--background);padding:24px}
@media(min-width:768px){form{padding:40px}}

/* Service rows */
.svc-row{display:grid;gap:24px;padding:32px 0;border-bottom:1px solid var(--border);transition:background .2s}
.svc-row:hover{background:var(--surface-tint)}
@media(min-width:768px){.svc-row{grid-template-columns:1fr 4fr 6fr 1fr;gap:24px;padding:40px 0}}
.svc-icon{display:inline-flex;height:36px;width:36px;align-items:center;justify-content:center;border-radius:9999px;background:var(--surface-tint);border:1px solid var(--border);transition:all .2s}
.svc-row:hover .svc-icon{background-image:var(--gradient-brand);border-color:transparent;color:#fff}

/* Process card */
.proc-card{position:relative;padding:32px;min-height:260px;display:flex;flex-direction:column;border-radius:1rem;box-shadow:var(--shadow-card);border:1px solid var(--border);background:var(--background)}
.proc-card.first{background-image:var(--gradient-brand);color:#fff;border-color:transparent}

/* Reviews */
.review-card{position:relative;border-radius:1rem;border:1px solid var(--border);padding:32px;background:var(--background);box-shadow:var(--shadow-card);overflow:hidden}
@media(min-width:768px){.review-card{padding:40px}}
.review-bar{position:absolute;top:0;left:0;height:4px;width:100%;background-image:var(--gradient-brand)}
.review-bar.warm{background-image:var(--gradient-warm)}
.bg-gradient-warm{background-image:var(--gradient-warm)}

/* Hero blobs */
.blob{position:absolute;border-radius:9999px;filter:blur(60px);pointer-events:none}

/* Footer */
.site-footer{border-top:1px solid var(--border);background:var(--surface)}
.footer-link:hover{color:var(--brand)}

/* Stat tile */
.stat-tile{border-radius:1rem;background:var(--surface-tint);border:1px solid var(--border);padding:20px;box-shadow:var(--shadow-card)}
@media(min-width:768px){.stat-tile{padding:24px}}
.stat-tile .k{font-size:24px;font-weight:600}
@media(min-width:768px){.stat-tile .k{font-size:36px}}