:root {
  --white: #ffffff;
  --bg: #f9f9fb;
  --ink: #111118;
  --gray: #6b7280;
  --gray-light: #f3f4f6;
  --border: #e5e7eb;
  --grad-a: #6c63ff;
  --grad-b: #f953c6;
  --grad-c: #ff6b6b;
  --grad-d: #43e97b;
  --grad: linear-gradient(135deg, #6c63ff 0%, #f953c6 50%, #ff6b6b 100%);
  --grad-text: linear-gradient(135deg, #6c63ff 0%, #f953c6 60%, #ff6b6b 100%);
  --grad-subtle: linear-gradient(135deg, rgba(108,99,255,0.08) 0%, rgba(249,83,198,0.08) 50%, rgba(255,107,107,0.08) 100%);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Zen Kaku Gothic New', sans-serif; background:var(--white); color:var(--ink); font-weight:400; overflow-x:hidden; }

/* ===== ANIMATED BG CANVAS ===== */
#bg-canvas {
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.55;
}

/* ===== NAV ===== */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:0 48px;
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:box-shadow 0.3s;
}
nav.scrolled { box-shadow:0 4px 24px rgba(0,0,0,0.06); }
.nav-logo {
  font-family:'DM Sans', sans-serif;
  font-size:1.3rem; font-weight:900; letter-spacing:0.06em;
  background:var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-decoration:none;
}
.nav-links { display:flex; gap:28px; list-style:none; }
.nav-links a {
  font-family:'DM Sans', sans-serif; font-size:13px; font-weight:500;
  color:var(--gray); text-decoration:none; transition:color .2s;
}
.nav-links a:hover { color:var(--ink); }
.nav-cta {
  padding:10px 22px;
  background:var(--grad); color:#fff;
  font-family:'DM Sans', sans-serif; font-size:13px; font-weight:700;
  border-radius:100px; text-decoration:none;
  box-shadow:0 4px 16px rgba(108,99,255,0.3);
  transition:all .25s;
}
.nav-cta:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(108,99,255,0.4); }

/* ===== HERO ===== */
.hero {
  position:relative; z-index:1;
  min-height:100vh;
  padding:120px 48px 80px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
}
.hero-tag {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 18px;
  background:var(--grad-subtle);
  border:1px solid rgba(108,99,255,0.2);
  border-radius:100px;
  font-family:'DM Sans', sans-serif; font-size:12px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--grad-a); margin-bottom:28px;
  animation:fadeUp .8s ease both;
}
.hero-tag-dot { width:6px; height:6px; border-radius:50%; background:var(--grad); animation:pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.3)} }

.hero-title {
  font-family:'DM Sans', sans-serif;
  font-size:clamp(3.2rem,7vw,6.5rem);
  font-weight:900; line-height:1.0; letter-spacing:-0.03em;
  margin-bottom:12px;
  animation:fadeUp .8s 0.1s ease both;
}
.hero-title .grad-word {
  background:var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-title-ja {
  font-size:clamp(1rem,1.8vw,1.4rem); font-weight:300;
  color:var(--gray); margin-bottom:28px; letter-spacing:0.05em;
  animation:fadeUp .8s 0.15s ease both;
}
.hero-body {
  font-size:16px; line-height:1.9; color:var(--gray);
  max-width:540px; margin:0 auto 40px; font-weight:300;
  animation:fadeUp .8s 0.2s ease both;
}
.hero-actions {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-bottom:72px;
  animation:fadeUp .8s 0.25s ease both;
}
.btn-grad {
  padding:15px 32px;
  background:var(--grad); color:#fff;
  font-family:'DM Sans', sans-serif; font-size:14px; font-weight:700;
  border-radius:100px; text-decoration:none; display:inline-block;
  box-shadow:0 6px 24px rgba(108,99,255,0.35);
  transition:all .25s;
}
.btn-grad:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(108,99,255,0.45); }
.btn-outline {
  padding:15px 32px;
  border:1.5px solid var(--border); color:var(--ink);
  font-family:'DM Sans', sans-serif; font-size:14px; font-weight:600;
  border-radius:100px; text-decoration:none; display:inline-block;
  background:var(--white); transition:all .25s;
}
.btn-outline:hover { border-color:var(--grad-a); color:var(--grad-a); }

/* Hero photo mosaic */
.hero-mosaic {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  width:100%; max-width:960px;
  animation:fadeUp .8s 0.3s ease both;
}
.mosaic-item {
  border-radius:16px; overflow:hidden;
  position:relative;
  background:var(--gray-light);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px;
  border:1.5px dashed var(--border);
  transition:transform .3s, box-shadow .3s;
}
.mosaic-item:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.1); }
.mosaic-item:nth-child(1) { height:220px; }
.mosaic-item:nth-child(2) { height:160px; margin-top:60px; }
.mosaic-item:nth-child(3) { height:200px; margin-top:20px; }
.mosaic-item:nth-child(4) { height:180px; margin-top:40px; }
.mosaic-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:16px; }
.mosaic-ph {
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.mosaic-ph-icon { width:36px; height:36px; border-radius:50%; background:var(--border); display:flex; align-items:center; justify-content:center; }
.mosaic-ph-icon svg { opacity:0.5; }
.mosaic-ph-label {
  font-family:'DM Sans', sans-serif; font-size:10px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--border);
}
/* Gradient overlay tag on mosaic */
.mosaic-tag {
  position:absolute; bottom:12px; left:12px;
  padding:4px 10px; border-radius:100px;
  background:rgba(255,255,255,0.9);
  font-family:'DM Sans', sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.05em; color:var(--ink);
  display:none; /* show when image is present */
}

/* ===== STATS ===== */
.stats-row {
  position:relative; z-index:1;
  display:flex; justify-content:center; gap:0;
  background:var(--white);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:0 48px;
  overflow:hidden;
}
.stats-row::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad);
}
.stat-item {
  flex:1; max-width:220px;
  padding:28px 20px; text-align:center;
  border-right:1px solid var(--border);
  position:relative;
}
.stat-item:last-child { border-right:none; }
.stat-num {
  font-family:'DM Sans', sans-serif; font-size:2.2rem; font-weight:900;
  background:var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  line-height:1; margin-bottom:5px;
}
.stat-label { font-size:12px; font-weight:400; color:var(--gray); }

/* ===== SECTION COMMONS ===== */
section { padding:100px 48px; position:relative; z-index:1; }
.inner { max-width:1080px; margin:0 auto; }
.section-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px; border-radius:100px;
  background:var(--grad-subtle);
  font-family:'DM Sans', sans-serif; font-size:11px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--grad-a); margin-bottom:16px;
}
h2 {
  font-family:'DM Sans', sans-serif;
  font-size:clamp(1.9rem,3.2vw,2.8rem);
  font-weight:900; line-height:1.1; letter-spacing:-0.02em;
  margin-bottom:8px;
}
.h2-sub {
  font-size:clamp(0.95rem,1.4vw,1.1rem); font-weight:300;
  color:var(--gray); margin-bottom:36px; letter-spacing:0.03em;
}
.lead { font-size:15px; line-height:1.9; color:var(--gray); max-width:520px; margin-bottom:48px; font-weight:300; }

/* ===== SERVICES ===== */
#services { background:var(--bg); }
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.svc {
  background:var(--white); border-radius:20px;
  border:1.5px solid var(--border);
  overflow:hidden; transition:all .3s; cursor:default;
}
.svc:hover { transform:translateY(-6px); box-shadow:0 16px 48px rgba(0,0,0,0.09); border-color:rgba(108,99,255,0.3); }
.svc-photo {
  width:100%; height:180px;
  background:var(--gray-light);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px;
  position:relative; overflow:hidden;
  border-bottom:1.5px dashed var(--border);
}
.svc-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.svc-photo-overlay {
  position:absolute; inset:0;
  background:var(--grad);
  opacity:0; transition:opacity .3s;
}
.svc:hover .svc-photo-overlay { opacity:0.12; }
.svc-ph-label {
  font-family:'DM Sans', sans-serif; font-size:10px; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--border);
}
.svc-body { padding:24px 22px; }
.svc-chip {
  display:inline-block; padding:3px 10px; border-radius:100px;
  background:var(--grad-subtle);
  font-family:'DM Sans', sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  color:var(--grad-a); margin-bottom:10px;
}
.svc-title { font-family:'DM Sans', sans-serif; font-size:16px; font-weight:700; margin-bottom:4px; }
.svc-title-ja { font-size:12px; font-weight:300; color:var(--gray); margin-bottom:10px; }
.svc-desc { font-size:13px; color:var(--gray); line-height:1.85; font-weight:300; }

/* ===== FEATURE BAND ===== */
.feature-band {
  position:relative; z-index:1;
  padding:80px 48px;
  background:var(--ink);
  overflow:hidden;
}
.feature-band::before {
  content:'';
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:linear-gradient(135deg, rgba(108,99,255,0.15) 0%, rgba(249,83,198,0.1) 50%, rgba(255,107,107,0.1) 100%);
}
.feature-band-inner { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative; }
.fb-title { font-family:'DM Sans', sans-serif; font-size:clamp(1.6rem,2.5vw,2.2rem); font-weight:900; color:#fff; line-height:1.2; margin-bottom:20px; }
.fb-title span { background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.fb-body { font-size:14px; line-height:1.9; color:rgba(255,255,255,0.55); font-weight:300; }
.fb-photos { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fb-photo {
  border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:6px;
  border:1.5px dashed rgba(255,255,255,0.12);
}
.fb-photo:nth-child(1) { height:180px; }
.fb-photo:nth-child(2) { height:140px; margin-top:40px; }
.fb-photo:nth-child(3) { height:140px; }
.fb-photo:nth-child(4) { height:180px; margin-top:-40px; }
.fb-photo img { width:100%; height:100%; object-fit:cover; border-radius:14px; }
.fb-ph-label { font-family:'DM Sans', sans-serif; font-size:9px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.2); }

/* ===== PRICING ===== */
#pricing { background:var(--white); }
.pg { margin-bottom:60px; }
.pg-header { margin-bottom:20px; padding-bottom:16px; border-bottom:2px solid var(--border); }
.pg-title { font-family:'DM Sans', sans-serif; font-size:1.2rem; font-weight:900; margin-bottom:2px; }
.pg-sub { font-size:13px; font-weight:300; color:var(--gray); }
.plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:10px; }
.plan-grid-2 { grid-template-columns:repeat(2,1fr); }
.plan {
  background:var(--bg); padding:28px 24px;
  border-radius:18px; border:1.5px solid var(--border);
  position:relative; transition:all .25s;
}
.plan:hover { border-color:rgba(108,99,255,0.3); box-shadow:0 8px 28px rgba(0,0,0,0.07); }
.plan.feat {
  background:var(--ink); border-color:var(--ink); color:#fff;
  box-shadow:0 8px 32px rgba(17,17,24,0.2);
}
.plan.feat:hover { box-shadow:0 12px 40px rgba(17,17,24,0.3); }
.p-badge {
  position:absolute; top:14px; right:14px;
  font-family:'DM Sans', sans-serif; font-size:10px; font-weight:700; letter-spacing:0.06em;
  background:var(--grad); color:#fff;
  padding:3px 10px; border-radius:100px;
}
.p-tier { font-family:'DM Sans', sans-serif; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray); margin-bottom:6px; }
.plan.feat .p-tier { color:rgba(255,255,255,0.4); }
.p-name { font-family:'DM Sans', sans-serif; font-size:16px; font-weight:700; margin-bottom:3px; }
.p-name-ja { font-size:12px; font-weight:300; color:var(--gray); margin-bottom:16px; }
.plan.feat .p-name-ja { color:rgba(255,255,255,0.4); }
.p-price { font-family:'DM Sans', sans-serif; font-size:2rem; font-weight:900; line-height:1; margin-bottom:3px; }
.plan:not(.feat) .p-price { background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.plan.feat .p-price { color:#fff; }
.p-note { font-size:11px; font-weight:300; color:var(--gray); margin-bottom:18px; }
.plan.feat .p-note { color:rgba(255,255,255,0.4); }
.p-div { height:1px; background:var(--border); margin:14px 0; }
.plan.feat .p-div { background:rgba(255,255,255,0.1); }
.p-feats { list-style:none; }
.p-feat { font-size:13px; font-weight:300; color:var(--gray); padding:7px 0; border-bottom:1px solid var(--border); display:flex; gap:10px; line-height:1.5; align-items:flex-start; }
.plan.feat .p-feat { color:rgba(255,255,255,0.6); border-bottom-color:rgba(255,255,255,0.08); }
.p-feat:last-child { border-bottom:none; }
.p-check { flex-shrink:0; font-weight:900; font-size:13px; font-family:'DM Sans',sans-serif; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.plan.feat .p-check { background:none; -webkit-text-fill-color:rgba(255,255,255,0.5); }
.p-notebox { font-size:12px; font-weight:300; color:var(--gray); padding:14px 18px; border-radius:12px; background:var(--gray-light); margin-top:8px; }

/* ===== FARM ===== */
#farm { background:var(--bg); }
.farm-hero-photo {
  width:100%; height:300px; border-radius:20px; overflow:hidden;
  background:var(--gray-light);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px;
  border:1.5px dashed var(--border);
  margin-bottom:40px; position:relative;
}
.farm-hero-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:20px; }
.farm-hero-photo-overlay {
  position:absolute; inset:0; border-radius:20px;
  background:linear-gradient(to right, rgba(108,99,255,0.6), rgba(249,83,198,0.4));
  display:none; /* show when image is present */
}
.farm-ph-label { font-family:'DM Sans', sans-serif; font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--border); }
.farm-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:40px; }
.fc {
  background:var(--white); border-radius:18px;
  border:1.5px solid var(--border); overflow:hidden;
  transition:all .3s;
}
.fc:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,0.08); border-color:rgba(108,99,255,0.3); }
.fc-photo {
  width:100%; height:140px;
  background:var(--gray-light);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:6px;
  border-bottom:1.5px dashed var(--border);
  position:relative; overflow:hidden;
}
.fc-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fc-ph-label { font-family:'DM Sans', sans-serif; font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--border); }
.fc-body { padding:22px 20px; }
.fc-title { font-family:'DM Sans', sans-serif; font-size:15px; font-weight:700; margin-bottom:4px; }
.fc-title-ja { font-size:12px; font-weight:300; color:var(--gray); margin-bottom:8px; }
.fc-desc { font-size:13px; font-weight:300; color:var(--gray); line-height:1.85; }
.fp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.fp {
  background:var(--white); padding:26px 22px; border-radius:18px;
  border:1.5px solid var(--border); transition:all .25s;
}
.fp:hover { border-color:rgba(108,99,255,0.3); box-shadow:0 8px 24px rgba(0,0,0,0.07); }
.fp-tier { font-family:'DM Sans', sans-serif; font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--gray); margin-bottom:6px; }
.fp-name { font-family:'DM Sans', sans-serif; font-size:15px; font-weight:700; margin-bottom:3px; }
.fp-name-ja { font-size:12px; font-weight:300; color:var(--gray); margin-bottom:14px; }
.fp-price { font-family:'DM Sans', sans-serif; font-size:1.6rem; font-weight:900; line-height:1; margin-bottom:3px; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.fp-note { font-size:11px; font-weight:300; color:var(--gray); margin-bottom:16px; }
.fp-feats { list-style:none; }
.fp-feat { font-size:12px; font-weight:300; color:var(--gray); padding:6px 0; border-bottom:1px solid var(--border); display:flex; gap:8px; }
.fp-feat:last-child { border-bottom:none; }
.fp-check { font-weight:900; font-family:'DM Sans',sans-serif; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* ===== WORKS ===== */
#works { background:var(--white); }
.works-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.works-grid .work-wide { grid-column:span 2; }
.work {
  border-radius:18px; overflow:hidden;
  background:var(--gray-light);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:8px;
  border:1.5px dashed var(--border);
  position:relative; cursor:default;
  transition:all .3s;
}
.work:not(.work-wide) { aspect-ratio:1; }
.work.work-wide { aspect-ratio:2/1; }
.work:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(0,0,0,0.1); }
.work img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:18px; }
.work:hover .work-ov { opacity:1; }
.work-ph-label { font-family:'DM Sans', sans-serif; font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--border); }
.work-ov {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(17,17,24,0.88) 0%, rgba(17,17,24,0.4) 50%, transparent 100%);
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-end;
  padding:22px; opacity:0; transition:opacity .3s;
  border-radius:18px;
}
.work-cat {
  font-family:'DM Sans', sans-serif; font-size:10px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:5px;
}
.work-title { font-family:'DM Sans', sans-serif; font-size:14px; font-weight:700; color:#fff; }

/* ===== ABOUT ===== */
#about { background:var(--bg); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.about-photos { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.about-photo {
  border-radius:16px; overflow:hidden;
  background:var(--gray-light);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:6px;
  border:1.5px dashed var(--border);
  position:relative;
}
.about-photo:nth-child(1) { aspect-ratio:1; }
.about-photo:nth-child(2) { aspect-ratio:1; margin-top:28px; }
.about-photo:nth-child(3) { aspect-ratio:3/2; grid-column:span 2; }
.about-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:16px; }
.about-ph-label { font-family:'DM Sans', sans-serif; font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--border); }
.about-content p { font-size:14px; line-height:2; color:var(--gray); font-weight:300; margin-bottom:16px; }
.phi { padding:16px 0; border-bottom:1px solid var(--border); display:grid; grid-template-columns:36px 1fr; gap:14px; }
.phi:last-child { border-bottom:none; }
.phi-num {
  width:32px; height:32px; border-radius:50%;
  background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Sans', sans-serif; font-size:13px; font-weight:900;
  flex-shrink:0; margin-top:2px;
}
.phi-title { font-family:'DM Sans', sans-serif; font-size:14px; font-weight:700; margin-bottom:4px; }
.phi-desc { font-size:13px; font-weight:300; color:var(--gray); line-height:1.8; }
.info-row { padding:13px 0; border-bottom:1px solid var(--border); display:grid; grid-template-columns:96px 1fr; gap:12px; }
.info-row:last-child { border-bottom:none; }
.info-key { font-family:'DM Sans', sans-serif; font-size:11px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--gray); padding-top:2px; }
.info-val { font-size:13px; font-weight:300; line-height:1.8; }

/* ===== CONTACT ===== */
#contact { background:var(--white); }
.contact-wrap {
  background:var(--ink); border-radius:24px;
  padding:64px; overflow:hidden; position:relative;
}
.contact-wrap::before {
  content:'';
  position:absolute; top:-60%; right:-20%;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(108,99,255,0.2) 0%, transparent 70%);
  pointer-events:none;
}
.contact-wrap::after {
  content:'';
  position:absolute; bottom:-40%; left:-10%;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(249,83,198,0.15) 0%, transparent 70%);
  pointer-events:none;
}
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; position:relative; }
.contact-title { font-family:'DM Sans', sans-serif; font-size:clamp(1.6rem,2.5vw,2.2rem); font-weight:900; color:#fff; line-height:1.2; margin-bottom:16px; }
.contact-title span { background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.contact-note { font-size:14px; line-height:1.9; color:rgba(255,255,255,0.55); font-weight:300; margin-bottom:28px; }
.meta-row { display:flex; gap:14px; align-items:center; margin-bottom:10px; }
.meta-key { font-family:'DM Sans', sans-serif; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.3); width:60px; }
.meta-val { font-size:13px; font-weight:300; color:rgba(255,255,255,0.55); }
.fg { margin-bottom:14px; }
.fl { font-family:'DM Sans', sans-serif; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.4); display:block; margin-bottom:7px; }
.fi, .fsel, .fta {
  width:100%; padding:12px 16px;
  background:rgba(255,255,255,0.07);
  border:1.5px solid rgba(255,255,255,0.12);
  color:#fff; font-family:'Zen Kaku Gothic New', sans-serif;
  font-size:14px; font-weight:300;
  border-radius:12px; outline:none; transition:border-color .2s;
  appearance:none;
}
.fi:focus, .fsel:focus, .fta:focus { border-color:var(--grad-a); background:rgba(108,99,255,0.08); }
.fi::placeholder, .fta::placeholder { color:rgba(255,255,255,0.25); }
.fta { height:110px; resize:vertical; }
.fsel option { background:var(--ink); }
.fsub {
  width:100%; padding:16px;
  background:var(--grad); color:#fff;
  font-family:'DM Sans', sans-serif;
  font-size:14px; font-weight:700;
  border:none; cursor:pointer;
  border-radius:12px; transition:all .25s; margin-top:6px;
  box-shadow:0 4px 20px rgba(108,99,255,0.4);
}
.fsub:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(108,99,255,0.5); }

/* ===== FOOTER ===== */
footer {
  padding:32px 48px; background:var(--ink);
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.f-logo { font-family:'DM Sans', sans-serif; font-size:1.2rem; font-weight:900; letter-spacing:0.06em; background:var(--grad-text); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.f-copy { font-family:'DM Sans', sans-serif; font-size:11px; font-weight:300; color:rgba(255,255,255,0.2); }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s ease; }
.reveal.on { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:0.1s; }
.reveal-d2 { transition-delay:0.2s; }
.reveal-d3 { transition-delay:0.3s; }

/* ===== RESPONSIVE ===== */
@media(max-width:960px) {
  nav { padding:0 20px; }
  .nav-links { display:none; }
  .hero { padding:96px 20px 60px; }
  .hero-mosaic { grid-template-columns:repeat(2,1fr); }
  .hero-mosaic .mosaic-item { margin-top:0 !important; height:160px !important; }
  section { padding:72px 20px; }
  .stats-row { padding:0 20px; flex-wrap:wrap; }
  .stat-item { min-width:50%; border-bottom:1px solid var(--border); }
  .svc-grid, .plan-grid, .plan-grid-2, .farm-grid, .fp-grid, .works-grid, .about-grid, .contact-grid { grid-template-columns:1fr; }
  .works-grid .work-wide { grid-column:span 1; aspect-ratio:4/3; }
  .about-photos { grid-template-columns:1fr 1fr; }
  .about-photo:nth-child(3) { grid-column:span 2; }
  .contact-wrap { padding:40px 24px; }
  .feature-band { padding:60px 20px; }
  .feature-band-inner { grid-template-columns:1fr; gap:40px; }
  .fb-photos { grid-template-columns:repeat(4,1fr); }
  .fb-photo { height:100px !important; margin-top:0 !important; }
}