/* ---------- Base ---------- */
:root {
  --ink: #0f1b23;
  --ink-soft: #4a5b64;
  --line: #dde6ea;
  --bg: #f6fafb;
  --surface: #ffffff;
  --accent: #1c7c8c;
  --accent-dark: #135a66;
  --accent-soft: #e4f4f6;
  --glass-tint: #cfe9ee;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(15, 27, 35, 0.08);
  --max: 1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}

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

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0 0 10px;
}

.center { text-align: center; margin-left: auto; margin-right: auto; }

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.section-sub {
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 0 32px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px rgba(28, 124, 140, 0.28);
}
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark); }

.btn-small { padding: 10px 20px; font-size: 0.88rem; }

.btn-full { width: 100%; padding: 14px; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  z-index: 100;
  background: var(--accent-dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 250, 251, 0.82);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.logo-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--glass-tint), var(--accent));
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: inset 0 0 8px rgba(255,255,255,0.5);
}

.nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.nav a {
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.nav a:hover { color: var(--accent-dark); }

.nav-cta { margin-left: 8px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 110px;
  background: radial-gradient(1200px 500px at 80% -10%, var(--accent-soft), transparent 60%), var(--bg);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.rotate-text {
  display: inline-block;
  color: var(--accent-dark);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.rotate-text.is-swapping {
  opacity: 0;
  transform: translateY(10px);
}

.hero-sub {
  font-size: 1.08rem;
  color: var(--ink-soft);
  margin: 0 0 34px;
  max-width: 540px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.hero-space {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.space-veil {
  position: absolute;
  top: -15%;
  right: -10%;
  width: 1000px;
  height: 900px;
  background: radial-gradient(ellipse at 65% 35%, rgba(8, 20, 30, 0.55) 0%, rgba(11, 26, 38, 0.32) 35%, rgba(11, 26, 38, 0.1) 60%, transparent 75%);
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.7;
  animation: driftGlow 11s ease-in-out infinite;
}
.glow-1 {
  width: 380px;
  height: 380px;
  top: 2%;
  right: 8%;
  background: radial-gradient(circle, rgba(45, 180, 200, 0.65), transparent 68%);
}
.glow-2 {
  width: 320px;
  height: 320px;
  top: 42%;
  right: 26%;
  background: radial-gradient(circle, rgba(154, 130, 255, 0.5), transparent 68%);
  animation-duration: 13s;
  animation-delay: 1.5s;
}
.glow-3 {
  width: 280px;
  height: 280px;
  top: 12%;
  left: 2%;
  background: radial-gradient(circle, rgba(45, 180, 200, 0.4), transparent 68%);
  animation-duration: 14s;
  animation-delay: 0.8s;
}
.glow-4 {
  width: 260px;
  height: 260px;
  bottom: 4%;
  left: 18%;
  background: radial-gradient(circle, rgba(154, 130, 255, 0.28), transparent 68%);
  animation-duration: 10s;
  animation-delay: 2.4s;
}
@keyframes driftGlow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-20px, 18px) scale(1.15); }
}

.shooting-star {
  position: absolute;
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0));
  border-radius: 999px;
  opacity: 0;
  transform: rotate(-30deg);
  animation: shoot 7s linear infinite;
}
.shoot-1 { top: 8%; right: 55%; animation-delay: 1s; }
.shoot-2 { top: 55%; right: 5%; animation-delay: 4.2s; animation-duration: 8s; }
@keyframes shoot {
  0% { opacity: 0; transform: translate(0, 0) rotate(-30deg); }
  4% { opacity: 1; }
  14% { opacity: 0; transform: translate(-260px, 150px) rotate(-30deg); }
  100% { opacity: 0; transform: translate(-260px, 150px) rotate(-30deg); }
}

.star-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
}
.star-small {
  box-shadow: 663px 154px 1px rgba(255,255,255,0.85), 1333px 49px 1px rgba(207,233,238,0.85), 1681px 548px 1px rgba(207,233,238,0.85), 748px 596px 1px rgba(207,233,238,0.85), 1039px 219px 1px rgba(207,233,238,0.85), 176px 444px 1px rgba(255,255,255,0.85), 143px 246px 1px rgba(207,233,238,0.85), 1128px 434px 1px rgba(207,233,238,0.85), 1693px 579px 1px rgba(207,233,238,0.85), 457px 645px 1px rgba(180,200,255,0.8), 1193px 63px 1px rgba(180,200,255,0.8), 1199px 406px 1px rgba(207,233,238,0.85), 452px 47px 1px rgba(180,200,255,0.8), 1758px 136px 1px rgba(255,255,255,0.85), 858px 147px 1px rgba(180,200,255,0.8), 241px 584px 1px rgba(255,255,255,0.85), 1147px 698px 1px rgba(207,233,238,0.85), 211px 595px 1px rgba(180,200,255,0.8), 1308px 192px 1px rgba(255,255,255,0.85), 199px 560px 1px rgba(180,200,255,0.8), 128px 577px 1px rgba(207,233,238,0.85), 1267px 210px 1px rgba(255,255,255,0.85), 1393px 544px 1px rgba(255,255,255,0.85), 1591px 321px 1px rgba(255,255,255,0.85), 1199px 464px 1px rgba(255,255,255,0.85), 613px 254px 1px rgba(207,233,238,0.85), 1431px 249px 1px rgba(207,233,238,0.85), 1176px 307px 1px rgba(180,200,255,0.8), 1013px 351px 1px rgba(180,200,255,0.8), 919px 294px 1px rgba(180,200,255,0.8), 149px 120px 1px rgba(180,200,255,0.8), 856px 168px 1px rgba(255,255,255,0.85), 311px 500px 1px rgba(255,255,255,0.85), 80px 684px 1px rgba(207,233,238,0.85), 1565px 571px 1px rgba(180,200,255,0.8), 1616px 321px 1px rgba(255,255,255,0.85), 1423px 358px 1px rgba(180,200,255,0.8), 1017px 593px 1px rgba(255,255,255,0.85), 140px 95px 1px rgba(255,255,255,0.85), 970px 680px 1px rgba(207,233,238,0.85), 124px 317px 1px rgba(180,200,255,0.8), 1183px 697px 1px rgba(255,255,255,0.85), 582px 395px 1px rgba(180,200,255,0.8), 710px 23px 1px rgba(255,255,255,0.85), 727px 172px 1px rgba(180,200,255,0.8), 239px 505px 1px rgba(207,233,238,0.85), 446px 294px 1px rgba(207,233,238,0.85), 1512px 253px 1px rgba(255,255,255,0.85), 800px 508px 1px rgba(207,233,238,0.85), 340px 459px 1px rgba(255,255,255,0.85), 1125px 284px 1px rgba(207,233,238,0.85), 1677px 440px 1px rgba(180,200,255,0.8), 570px 425px 1px rgba(255,255,255,0.85), 1398px 389px 1px rgba(207,233,238,0.85), 309px 84px 1px rgba(207,233,238,0.85), 309px 237px 1px rgba(180,200,255,0.8), 477px 12px 1px rgba(255,255,255,0.85), 1702px 603px 1px rgba(207,233,238,0.85), 538px 288px 1px rgba(207,233,238,0.85), 298px 429px 1px rgba(180,200,255,0.8), 756px 624px 1px rgba(180,200,255,0.8), 652px 128px 1px rgba(180,200,255,0.8), 1759px 527px 1px rgba(180,200,255,0.8), 1341px 692px 1px rgba(180,200,255,0.8), 110px 467px 1px rgba(180,200,255,0.8), 1634px 572px 1px rgba(255,255,255,0.85), 815px 408px 1px rgba(255,255,255,0.85), 212px 493px 1px rgba(180,200,255,0.8), 820px 63px 1px rgba(207,233,238,0.85), 137px 213px 1px rgba(255,255,255,0.85);
  animation: twinkle 4s ease-in-out infinite;
}
.star-med {
  width: 2px;
  height: 2px;
  box-shadow: 332px 112px 1.5px rgba(255,255,255,0.9), 1230px 53px 1.5px rgba(207,233,238,0.9), 0px 580px 1.5px rgba(207,233,238,0.9), 1098px 103px 1.5px rgba(255,255,255,0.9), 1256px 26px 1.5px rgba(207,233,238,0.9), 1790px 212px 1.5px rgba(180,200,255,0.85), 770px 152px 1.5px rgba(180,200,255,0.85), 516px 355px 1.5px rgba(180,200,255,0.85), 745px 485px 1.5px rgba(207,233,238,0.9), 236px 499px 1.5px rgba(255,255,255,0.9), 983px 495px 1.5px rgba(255,255,255,0.9), 175px 147px 1.5px rgba(207,233,238,0.9), 1535px 350px 1.5px rgba(180,200,255,0.85), 542px 490px 1.5px rgba(180,200,255,0.85), 330px 528px 1.5px rgba(207,233,238,0.9), 420px 540px 1.5px rgba(255,255,255,0.9), 300px 556px 1.5px rgba(207,233,238,0.9), 1552px 540px 1.5px rgba(255,255,255,0.9), 1316px 93px 1.5px rgba(180,200,255,0.85), 1731px 267px 1.5px rgba(180,200,255,0.85), 751px 171px 1.5px rgba(255,255,255,0.9), 1580px 228px 1.5px rgba(180,200,255,0.85), 1109px 514px 1.5px rgba(255,255,255,0.9), 1303px 228px 1.5px rgba(180,200,255,0.85), 1661px 199px 1.5px rgba(207,233,238,0.9), 1675px 410px 1.5px rgba(180,200,255,0.85), 1645px 232px 1.5px rgba(207,233,238,0.9), 1060px 504px 1.5px rgba(255,255,255,0.9), 1497px 29px 1.5px rgba(207,233,238,0.9), 1618px 286px 1.5px rgba(255,255,255,0.9);
  animation: twinkle 5.5s ease-in-out infinite 1.2s;
}
.star-big {
  width: 3px;
  height: 3px;
  box-shadow: 926px 573px 4px rgba(255,255,255,1), 925px 520px 4px rgba(207,233,238,1), 388px 189px 4px rgba(180,200,255,0.95), 974px 644px 4px rgba(180,200,255,0.95), 1624px 190px 4px rgba(255,255,255,1), 914px 310px 4px rgba(255,255,255,1), 185px 551px 4px rgba(180,200,255,0.95), 1299px 42px 4px rgba(180,200,255,0.95), 811px 463px 4px rgba(180,200,255,0.95);
  animation: twinkle 3s ease-in-out infinite 0.6s;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@media (max-width: 860px) {
  .hero-glass { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .glow, .star-small, .star-med, .star-big, .shooting-star { animation: none; opacity: 0.6; }
  .shooting-star { display: none; }
  .rotate-text { transition: none; }
}

/* ---------- Strip ---------- */
.strip {
  background: var(--accent-dark);
  color: #fff;
}
.strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 30px 24px;
}
.strip-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  border-left: 1px solid rgba(255,255,255,0.15);
}
.strip-item:first-child { border-left: none; padding-left: 0; }

.strip-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.strip-icon svg { width: 20px; height: 20px; }

.strip-text { display: flex; flex-direction: column; gap: 3px; }
.strip-item strong { font-size: 0.98rem; }
.strip-item span { font-size: 0.82rem; opacity: 0.75; }

@media (max-width: 860px) {
  .strip-inner { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .strip-item:nth-child(3) { border-left: none; padding-left: 0; }
}
@media (max-width: 520px) {
  .strip-inner { grid-template-columns: 1fr; }
  .strip-item { border-left: none; padding-left: 0; }
}

/* ---------- Services ---------- */
.services { padding: 96px 0; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15,27,35,0.12); }

.card-photo {
  height: 170px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #a9d6de, #1c7c8c);
}
.card-photo .illustration {
  width: 62%;
  height: auto;
  max-height: 80%;
}
.card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-1 { background: linear-gradient(150deg, #a9d6de, #1c7c8c); }
.photo-2 { background: linear-gradient(150deg, #cfe9ee, #7fb8c4); }
.photo-3 { background: linear-gradient(150deg, #135a66, #4a5b64); }
.photo-4 { background: linear-gradient(150deg, #7fb8c4, #135a66); }
.photo-5 { background: linear-gradient(150deg, #1c7c8c, #0f1b23); }
.photo-6 { background: linear-gradient(150deg, #0f1b23, #1c7c8c); }

.card-body { padding: 26px 26px 30px; }

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.card-icon svg { width: 26px; height: 26px; }

.card h3 { margin: 0 0 10px; font-size: 1.15rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
}

/* ---------- Brands ---------- */
.brands { padding: 96px 0; background: var(--surface); }

.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brand-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid rgba(28, 124, 140, 0.2);
}

.brand-name {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

@media (max-width: 900px) {
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .brand-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* ---------- About ---------- */
.about { padding: 96px 0; background: var(--surface); }

.about-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.about-visual {
  position: relative;
  height: 360px;
}

.glass-swatch {
  position: absolute;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--shadow);
}
.swatch-clear {
  width: 220px; height: 280px; top: 0; left: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.9), rgba(207,233,238,0.5));
}
.swatch-frost {
  width: 170px; height: 210px; top: 90px; left: 160px;
  background: linear-gradient(160deg, #eef6f7, #cfe9ee);
  filter: blur(0.3px);
  opacity: 0.95;
}
.swatch-tint {
  width: 140px; height: 170px; top: 40px; left: 0;
  background: linear-gradient(160deg, var(--accent), var(--accent-dark));
  opacity: 0.85;
}

.check-list { margin: 22px 0 30px; display: flex; flex-direction: column; gap: 12px; }
.check-list li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-soft);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 6px; top: 8px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--accent-dark);
  border-bottom: 2px solid var(--accent-dark);
  transform: rotate(-45deg);
}

@media (max-width: 860px) {
  .about-inner { grid-template-columns: 1fr; }
  .about-visual { height: 260px; margin-bottom: 10px; }
}

/* ---------- Gallery ---------- */
.gallery { padding: 96px 0; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.gallery-item {
  position: relative;
  height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  border: 1px solid var(--line);
}
.gallery-item span {
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.g-1 { background: linear-gradient(150deg, #a9d6de, #1c7c8c); }
.g-2 { background: linear-gradient(150deg, #135a66, #4a5b64); }
.g-3 { background: linear-gradient(150deg, #cfe9ee, #7fb8c4); }
.g-4 { background: linear-gradient(150deg, #1c7c8c, #0f1b23); }
.g-5 { background: linear-gradient(150deg, #7fb8c4, #135a66); }
.g-6 { background: linear-gradient(150deg, #0f1b23, #1c7c8c); }

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ---------- CTA ---------- */
.cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  padding: 80px 0;
  text-align: center;
}
.cta h2 { margin: 0 0 12px; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cta p { margin: 0 0 28px; opacity: 0.9; max-width: 520px; margin-left: auto; margin-right: auto; }
.cta .btn-primary { background: #fff; color: var(--accent-dark); box-shadow: none; }
.cta .btn-primary:hover { background: #eef6f7; }

/* ---------- Contact ---------- */
.contact { padding: 96px 0; background: var(--surface); }

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.contact-details { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.contact-details li { color: var(--ink-soft); }
.contact-details strong { color: var(--ink); margin-right: 6px; }
.contact-details [data-placeholder] {
  text-transform: uppercase;
  font-style: normal;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: #b45309;
  background: #fef3e2;
  padding: 3px 8px;
  border-radius: 6px;
}
.contact-details a { color: var(--accent-dark); font-weight: 600; }
.contact-details a:hover { text-decoration: underline; }

.contact-form {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
}

.form-row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); }

.form-row input,
.form-row select,
.form-row textarea {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.form-note {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--accent-dark);
  min-height: 1.2em;
}

@media (max-width: 860px) {
  .contact-inner { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,0.7);
  padding: 34px 0;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer .logo { color: #fff; }
.footer-inner p { margin: 0; font-size: 0.85rem; }

/* ---------- Mobile nav ---------- */
@media (max-width: 780px) {
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav.open { max-height: 260px; }
  .nav a {
    padding: 16px 24px;
    border-top: 1px solid var(--line);
  }
}