/* =========================================================
   Friends Float Glass Co. — Landing Page Styles
   Plain CSS (no framework needed)
   ========================================================= */

:root {
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-900: #0f172a;
  --slate-950: #020617;
  --cyan-50: #ecfeff;
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --cyan-700: #0e7490;
  --sky-500: #0ea5e9;
  --emerald-500: #10b981;
  --amber-400: #fbbf24;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid transparent; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  line-height: 1.5;
  color: var(--slate-900);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: inherit; }

/* ---------- Icons ---------- */
.icon {
  width: 1em; height: 1em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

.section { position: relative; padding: 6rem 0; }
@media (min-width: 640px) { .section { padding: 8rem 0; } }
.bg-white { background: #fff; }
.bg-slate-50 { background: var(--slate-50); }
.bg-dark { background: var(--slate-950); }

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 9999px; font-size: .875rem; font-weight: 700; line-height: 1.25rem;
  transition: transform .3s, background-color .3s;
}
.btn .icon { font-size: 1rem; }
.btn-primary {
  background: linear-gradient(to right, var(--cyan-500), var(--cyan-600));
  color: #fff; padding: .875rem 1.75rem;
  box-shadow: 0 20px 25px -5px rgba(8,145,178,.3), 0 8px 10px -6px rgba(8,145,178,.3);
}
.btn-primary:hover { transform: scale(1.05); }
.btn-ghost {
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.05);
  color: #fff; padding: .875rem 1.75rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-ghost .icon { transition: transform .3s; }
.btn-ghost:hover .icon { transform: translateX(4px); }

/* ---------- Section heading ---------- */
.section-heading { max-width: 42rem; }
.section-heading.center { margin: 0 auto; text-align: center; }
.section-heading.left { text-align: left; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; border: 1px solid rgba(8,145,178,.2);
  background: var(--cyan-50); color: var(--cyan-700);
  padding: .375rem 1rem; font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em;
}
.eyebrow::before { content: ""; width: .375rem; height: .375rem; border-radius: 9999px; background: var(--cyan-500); }
.section-heading h2 {
  margin-top: 1rem; font-family: var(--font-display);
  font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; letter-spacing: -.025em; color: var(--slate-900);
}
.section-heading p { margin-top: 1rem; font-size: 1rem; line-height: 1.625; color: var(--slate-600); }
@media (min-width: 640px) {
  .section-heading h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .section-heading p { font-size: 1.125rem; }
}
.section-heading.light .eyebrow { border-color: rgba(34,211,238,.3); background: rgba(34,211,238,.1); color: var(--cyan-300); }
.section-heading.light h2 { color: #fff; }
.section-heading.light p { color: var(--slate-300); }

/* ---------- Logo ---------- */
.logo { display: flex; align-items: center; gap: .75rem; }
.logo svg { width: 42px; height: 42px; flex-shrink: 0; }
.logo-text { line-height: 1.25; }
.logo-name {
  font-family: var(--font-display); font-size: 1.125rem; line-height: 1.75rem;
  font-weight: 800; letter-spacing: -.025em; color: var(--slate-900);
}
.logo-name span { color: var(--cyan-500); }
.logo-sub {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .25em; color: var(--slate-500);
}
.logo.light .logo-name, .site-header:not(.scrolled) .logo .logo-name { color: #fff; }
.logo.light .logo-sub, .site-header:not(.scrolled) .logo .logo-sub { color: var(--slate-300); }

/* ---------- Header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; transition: all .3s; }
.site-header.scrolled {
  background: rgba(255,255,255,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 15px -3px rgba(15,23,42,.05), 0 4px 6px -4px rgba(15,23,42,.05);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: .75rem; padding-bottom: .75rem; }
.main-nav { display: none; align-items: center; gap: 2rem; }
.main-nav a { font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.9); transition: color .2s; }
.main-nav a:hover { color: var(--cyan-300); }
.site-header.scrolled .main-nav a { color: var(--slate-700); }
.site-header.scrolled .main-nav a:hover { color: var(--cyan-600); }
.header-cta { display: none; }
.header-cta .btn { padding: .625rem 1.25rem; }
.menu-toggle { padding: .5rem; border-radius: .5rem; color: #fff; display: block; }
.menu-toggle .icon { font-size: 26px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle.open .icon-open { display: none; }
.menu-toggle.open .icon-close { display: block; }
.site-header.scrolled .menu-toggle { color: var(--slate-900); }

.mobile-menu {
  display: none; border-top: 1px solid var(--slate-100); background: #fff;
  padding: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
}
.mobile-menu.open { display: block; }
.mobile-menu nav { display: flex; flex-direction: column; gap: .25rem; }
.mobile-menu nav a:not(.btn) { border-radius: .5rem; padding: .625rem .75rem; font-size: .875rem; font-weight: 600; color: var(--slate-700); }
.mobile-menu nav a:not(.btn):hover { background: var(--cyan-50); color: var(--cyan-700); }
.mobile-menu .btn { margin-top: .5rem; background: var(--cyan-600); color: #fff; padding: .75rem 1.25rem; }

@media (min-width: 1024px) {
  .main-nav { display: flex; }
  .header-cta { display: flex; align-items: center; gap: .75rem; }
  .menu-toggle, .mobile-menu, .mobile-menu.open { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--slate-950); padding-top: 5rem; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.hero-bg .shade-1 { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(2,6,23,.8), rgba(2,6,23,.85), var(--slate-950)); }
.hero-bg .shade-2 { position: absolute; inset: 0; background: linear-gradient(to right, var(--slate-950), rgba(2,6,23,.4), transparent); }
.pane { display: none; position: absolute; pointer-events: none; border-radius: 2rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pane-1 { right: -6rem; top: 6rem; width: 420px; height: 420px; transform: rotate(6deg); border: 1px solid rgba(34,211,238,.2); background: linear-gradient(to bottom right, rgba(34,211,238,.1), transparent); }
.pane-2 { right: -2.5rem; top: 14rem; width: 300px; height: 300px; transform: rotate(-3deg); border: 1px solid rgba(255,255,255,.1); background: linear-gradient(to bottom right, rgba(255,255,255,.05), transparent); }
.hero-grid { position: relative; display: grid; gap: 3rem; padding-top: 4rem; padding-bottom: 4rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem; border-radius: 9999px;
  border: 1px solid rgba(34,211,238,.3); background: rgba(34,211,238,.1); color: var(--cyan-300);
  padding: .375rem 1rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .2em;
}
.hero-badge .icon { font-size: 14px; }
.hero h1 {
  margin-top: 1.5rem; font-family: var(--font-display); font-size: 2.25rem; line-height: 1.1;
  font-weight: 800; letter-spacing: -.025em; color: #fff;
}
.hero h1 .grad {
  background: linear-gradient(to right, var(--cyan-300), var(--cyan-400), var(--sky-500));
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hero-text { margin-top: 1.5rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.625; color: var(--slate-300); }
.hero-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.hero-address { margin-top: 1.5rem; display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--slate-400); }
.hero-address .icon { font-size: 16px; color: var(--cyan-400); }
.hero-stats { display: flex; flex-direction: column; justify-content: center; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.stat {
  border-radius: 1rem; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  padding: 1.5rem; text-align: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color .3s;
}
.stat:hover { background: rgba(255,255,255,.08); }
.stat-value { font-family: var(--font-display); font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; color: var(--cyan-300); }
.stat-label { margin-top: .5rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--slate-300); }
.hero-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 6rem; background: linear-gradient(to top, #fff, transparent); }

@media (min-width: 640px) {
  .hero h1 { font-size: 3rem; }
  .stat-value { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 1024px) {
  .hero h1 { font-size: 3.75rem; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; }
  .pane { display: block; }
}

/* ---------- About ---------- */
.about-grid { display: grid; gap: 4rem; }
.about-media { position: relative; }
.about-frame { position: absolute; left: -1rem; top: -1rem; width: 100%; height: 100%; border-radius: 1.5rem; border: 2px solid rgba(6,182,212,.3); }
.about-media img {
  position: relative; z-index: 10; width: 100%; height: 420px; object-fit: cover;
  border-radius: 1.5rem; box-shadow: 0 25px 50px -12px rgba(15,23,42,.2);
}
.about-badge {
  display: none; position: absolute; z-index: 20; bottom: -2rem; right: -1.5rem; max-width: 220px;
  border-radius: 1rem; background: var(--slate-900); color: #fff; padding: 1.25rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}
.about-badge .big { font-family: var(--font-display); font-size: 1.875rem; line-height: 2.25rem; font-weight: 800; color: var(--cyan-400); }
.about-badge .small { margin-top: .25rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--slate-300); }
.about-body p { margin-top: 1.5rem; font-size: 1rem; line-height: 1.625; color: var(--slate-600); }
.about-body p + p { margin-top: 1rem; }
.about-body strong { font-weight: 700; }
.highlights { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.highlight {
  display: flex; align-items: flex-start; gap: .75rem; border-radius: 1rem;
  border: 1px solid var(--slate-100); background: rgba(248,250,252,.7); padding: 1rem;
}
.highlight-icon {
  display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  flex-shrink: 0; border-radius: .75rem; background: var(--cyan-600); color: #fff;
}
.highlight-icon .icon { font-size: 18px; }
.highlight .t { font-size: .875rem; line-height: 1.25rem; font-weight: 700; color: var(--slate-900); }
.highlight .d { font-size: .75rem; line-height: 1rem; color: var(--slate-500); }
@media (min-width: 640px) {
  .about-media img { height: 480px; }
  .about-badge { display: block; }
}
@media (min-width: 1024px) {
  .about-grid { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* ---------- Products ---------- */
.product-grid { margin-top: 4rem; display: grid; gap: 2rem; }
.product-card {
  position: relative; overflow: hidden; border-radius: 1.5rem; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px var(--slate-100);
  transition: transform .3s, box-shadow .3s;
}
.product-card:hover { transform: translateY(-.375rem); box-shadow: 0 25px 50px -12px rgba(15,23,42,.1), 0 0 0 1px var(--slate-100); }
.product-img { position: relative; height: 12rem; overflow: hidden; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.product-card:hover .product-img img { transform: scale(1.1); }
.product-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.7), rgba(15,23,42,0), transparent); }
.product-body { padding: 1.5rem; }
.product-body h3 { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: var(--slate-900); }
.product-body p { margin-top: .5rem; font-size: .875rem; line-height: 1.625; color: var(--slate-500); }
.tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .375rem; }
.tag { border-radius: 9999px; background: var(--cyan-50); color: var(--cyan-700); padding: .25rem .625rem; font-size: 11px; font-weight: 600; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.extras { margin-top: 3.5rem; border-radius: 1.5rem; background: var(--slate-900); padding: 2rem; }
.extras-top { display: flex; flex-direction: column; gap: 2rem; }
.extras h3 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: #fff; }
.extras-top p { margin-top: .5rem; max-width: 36rem; font-size: .875rem; color: var(--slate-400); }
.extras .btn { flex-shrink: 0; background: var(--cyan-500); color: var(--slate-950); padding: .75rem 1.5rem; }
.extras .btn:hover { transform: scale(1.05); }
.extras-list {
  margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: .75rem 2rem;
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 2rem;
}
.extra-item { display: flex; align-items: center; gap: .625rem; }
.extra-check {
  display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem;
  flex-shrink: 0; border-radius: 9999px; background: rgba(6,182,212,.2); color: var(--cyan-400);
}
.extra-check .icon { font-size: 12px; stroke-width: 3; }
.extra-item span:last-child { font-size: .875rem; color: var(--slate-300); }
@media (min-width: 640px) {
  .extras { padding: 2.5rem; }
  .extras h3 { font-size: 1.5rem; line-height: 2rem; }
  .extras-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .extras-top { flex-direction: row; align-items: center; justify-content: space-between; }
  .extras-list { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Infrastructure ---------- */
.infra { overflow: hidden; background: var(--slate-950); }
.infra-grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: linear-gradient(#22d3ee 1px, transparent 1px), linear-gradient(90deg, #22d3ee 1px, transparent 1px);
  background-size: 48px 48px;
}
.infra-grid { position: relative; display: grid; gap: 4rem; }
.units { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
.unit {
  display: flex; align-items: flex-start; gap: 1rem; border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); padding: 1.25rem; transition: background-color .3s;
}
.unit:hover { background: rgba(255,255,255,.06); }
.unit-icon {
  display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  flex-shrink: 0; border-radius: .75rem; background: rgba(6,182,212,.15); color: var(--cyan-400);
}
.unit-icon .icon { font-size: 20px; }
.unit .t { font-family: var(--font-display); font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: #fff; }
.unit .d { margin-top: .25rem; font-size: .875rem; line-height: 1.625; color: var(--slate-400); }
.infra-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-content: start; }
.infra-photos img { width: 100%; height: 16rem; object-fit: cover; border-radius: 1rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.infra-photos img:nth-child(even) { margin-top: 2rem; }
@media (min-width: 1024px) { .infra-grid { grid-template-columns: 1fr 1fr; align-items: center; } }

/* ---------- Why Us ---------- */
.why-grid { margin-top: 4rem; display: grid; gap: 1.5rem; }
.why-card {
  position: relative; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--slate-100);
  background: linear-gradient(to bottom right, var(--slate-50), #fff); padding: 1.75rem; transition: box-shadow .3s;
}
.why-card:hover { box-shadow: 0 20px 25px -5px rgba(15,23,42,.05), 0 8px 10px -6px rgba(15,23,42,.05); }
.why-icon {
  display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;
  border-radius: 1rem; background: var(--slate-900); color: var(--cyan-400);
}
.why-icon .icon { font-size: 22px; }
.why-card h3 { margin-top: 1.25rem; font-family: var(--font-display); font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: var(--slate-900); }
.why-card p { margin-top: .5rem; font-size: .875rem; line-height: 1.625; color: var(--slate-500); }
.why-card::after { content: ""; position: absolute; bottom: -1.5rem; right: -1.5rem; width: 6rem; height: 6rem; border-radius: 9999px; background: rgba(6,182,212,.05); }
@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Gallery ---------- */
.gallery { margin-top: 4rem; column-count: 2; column-gap: 1rem; }
.gallery-item { display: block; width: 100%; margin-bottom: 1rem; overflow: hidden; border-radius: 1rem; break-inside: avoid; }
.gallery-item:focus { outline: none; box-shadow: 0 0 0 2px var(--cyan-500); }
.gallery-item img { width: 100%; height: auto; transition: transform .5s; }
.gallery-item:hover img { transform: scale(1.05); }
@media (min-width: 640px) { .gallery { column-count: 3; } }
@media (min-width: 1024px) { .gallery { column-count: 4; } }

.lightbox {
  display: none; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center;
  background: rgba(2,6,23,.9); padding: 1.5rem;
}
.lightbox.open { display: flex; }
.lightbox img { max-height: 85vh; max-width: 100%; object-fit: contain; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); }
.lightbox-close {
  position: absolute; right: 1.5rem; top: 1.5rem; display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgba(255,255,255,.1); color: #fff;
}
.lightbox-close:hover { background: rgba(255,255,255,.2); }
.lightbox-close .icon { font-size: 20px; }

/* ---------- Factsheet ---------- */
.fact-grid { display: grid; gap: 3rem; }
.fact-pills { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.pill { border-radius: 9999px; padding: .5rem 1rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; }
.pill-dark { background: var(--slate-900); color: #fff; }
.pill-light { background: var(--cyan-50); color: var(--cyan-700); }
.fact-table { overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--slate-100); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.fact-table dl { display: grid; grid-template-columns: 1fr; }
.fact-item { padding: 1.5rem; background: #fff; border-top: 1px solid var(--slate-100); }
.fact-item:first-child { border-top: 0; }
.fact-item:nth-child(odd) { background: rgba(248,250,252,.6); }
.fact-item dt { font-size: .75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--slate-400); }
.fact-item dd { margin-top: .375rem; font-family: var(--font-display); font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: var(--slate-900); }
@media (min-width: 640px) {
  .fact-table dl { grid-template-columns: repeat(2, 1fr); }
  .fact-item:nth-child(-n+2) { border-top: 0; }
  .fact-item:nth-child(even) { border-left: 1px solid var(--slate-100); }
}
@media (min-width: 1024px) { .fact-grid { grid-template-columns: .9fr 1.1fr; align-items: center; } }

/* ---------- Testimonials ---------- */
.testi-grid { margin-top: 4rem; display: grid; gap: 1.5rem; }
.testi {
  position: relative; border-radius: 1.5rem; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); padding: 2rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.testi .quote-icon { font-size: 32px; color: rgba(6,182,212,.4); }
.stars { margin-top: 1rem; display: flex; gap: .25rem; color: var(--amber-400); }
.stars .icon { font-size: 14px; fill: currentColor; stroke-width: 0; }
.testi p { margin-top: 1rem; font-size: .875rem; line-height: 1.625; color: var(--slate-300); }
.testi-by { margin-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1rem; }
.testi-by .n { font-family: var(--font-display); font-size: .875rem; line-height: 1.25rem; font-weight: 700; color: #fff; }
.testi-by .r { font-size: .75rem; line-height: 1rem; color: var(--slate-400); }
@media (min-width: 1024px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Contact ---------- */
.contact-grid { margin-top: 4rem; display: grid; gap: 2rem; }
.info-list { display: flex; flex-direction: column; gap: 1rem; }
.info-card {
  display: flex; align-items: flex-start; gap: 1rem; border-radius: 1rem; background: #fff;
  padding: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px var(--slate-100);
}
.info-icon {
  display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  flex-shrink: 0; border-radius: .75rem; background: var(--cyan-600); color: #fff;
}
.info-icon .icon { font-size: 19px; }
.info-card .t { font-size: .875rem; line-height: 1.25rem; font-weight: 700; color: var(--slate-900); }
.info-card .d { margin-top: .25rem; font-size: .875rem; line-height: 1.25rem; color: var(--slate-500); }
.info-card a.d { display: block; font-weight: 600; color: var(--cyan-700); }
.info-card a.d:hover { text-decoration: underline; }
.map-box { margin-top: 1rem; overflow: hidden; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px var(--slate-100); }
.map-box iframe { display: block; width: 100%; height: 220px; border: 0; filter: grayscale(20%); }
.contact-form {
  border-radius: 1.5rem; background: #fff; padding: 2rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px var(--slate-100);
}
.form-grid { display: grid; gap: 1.25rem; }
.form-grid label { display: block; font-size: .75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--slate-500); }
.form-grid input, .form-grid select, .form-grid textarea {
  display: block; width: 100%; margin-top: .5rem; border-radius: .75rem; border: 1px solid var(--slate-200);
  background: #fff; padding: .75rem 1rem; font-size: .875rem; line-height: 1.25rem; color: var(--slate-900); outline: none;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { box-shadow: 0 0 0 2px var(--cyan-500); }
.form-grid textarea { resize: none; }
.form-submit {
  margin-top: 1.5rem; display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .75rem; background: linear-gradient(to right, var(--cyan-500), var(--cyan-600)); color: #fff;
  padding: .875rem 1.5rem; font-size: .875rem; line-height: 1.25rem; font-weight: 700;
  box-shadow: 0 10px 15px -3px rgba(8,145,178,.3), 0 4px 6px -4px rgba(8,145,178,.3); transition: transform .3s;
}
.form-submit:hover { transform: scale(1.01); }
.form-submit .icon { font-size: 16px; }
.form-success { display: none; margin-top: 1rem; font-size: .875rem; line-height: 1.25rem; font-weight: 600; color: var(--cyan-700); }
.form-success.show { display: block; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid .span-2 { grid-column: span 2; }
  .form-submit { width: auto; }
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: repeat(5, 1fr); }
  .contact-info { grid-column: span 2; }
  .contact-formwrap { grid-column: span 3; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--slate-950); padding-top: 4rem; color: var(--slate-400); }
.footer-grid { display: grid; gap: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 3rem; }
.footer-about > p { margin-top: 1.25rem; max-width: 24rem; font-size: .875rem; line-height: 1.625; }
.footer-contact { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; }
.footer-contact a { display: flex; align-items: flex-start; gap: .5rem; }
.footer-contact a:hover, .footer-links a:hover { color: var(--cyan-400); }
.footer-contact .icon { font-size: 16px; margin-top: .125rem; color: var(--cyan-500); }
.footer-title { font-family: var(--font-display); font-size: .875rem; line-height: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .025em; color: #fff; }
.footer-links { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; }
.footer-bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; font-size: .75rem; }
@media (min-width: 640px) { .footer-bottom { flex-direction: row; } }
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-about { grid-column: span 2; }
}

/* ---------- Floating buttons ---------- */
.floating { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 40; display: flex; flex-direction: column; gap: .75rem; }
.float-btn {
  display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;
  border-radius: 9999px; color: #fff; transition: transform .3s;
}
.float-btn:hover { transform: scale(1.1); }
.float-btn .icon { font-size: 22px; }
.float-wa { background: var(--emerald-500); box-shadow: 0 20px 25px -5px rgba(16,185,129,.4), 0 8px 10px -6px rgba(16,185,129,.4); }
.float-call { background: var(--cyan-600); box-shadow: 0 20px 25px -5px rgba(8,145,178,.4), 0 8px 10px -6px rgba(8,145,178,.4); }