/* fone.farm page styles. No hero image (owner, 2026-10-18): the headline sits
   on a dark field with live circuitry drawn by circuit.js on #circuit. The
   illustrated banner is kept only as the social share image (og.jpg). */
.intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: min(760px, calc(100vh - 77px));
  display: flex;
  align-items: center;
  padding: 72px 0;
  background: radial-gradient(ellipse at 70% 45%, #10403b 0%, var(--field-deep) 65%);
}
.circuit { position: absolute; inset: 0; z-index: -1; display: block; }
/* Keep the headline readable over the circuitry. */
.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 42, 40, 0.82) 0%, rgba(10, 42, 40, 0.5) 50%, rgba(10, 42, 40, 0.08) 100%);
}
.intro .wrap { width: 100%; }
/* A soft dark glow behind the headline column: the board stays visible all
   round it, but no phone or trace sits sharply behind the words. */
.intro-grid > div:first-child { position: relative; }
.intro-grid > div:first-child::before {
  content: "";
  position: absolute;
  inset: -56px -72px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 42, 40, 0.94) 55%, rgba(10, 42, 40, 0));
}
.intro h1 { color: #ffffff; }
.intro-grid { display: grid; gap: 36px; align-items: center; }
.intro-ticks {
  background: rgba(17, 59, 55, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.offer { background: linear-gradient(180deg, var(--field-deep), #0d3532); }
.offer-grid { display: grid; gap: 22px; margin-top: 28px; }
.offer-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; }
.offer-icon { width: 72px; height: 72px; margin-bottom: 14px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; }
.offer-card p { color: var(--muted); }

.use-grid { display: grid; gap: 36px; }

/* Small screens: the text spans the full width, so the circuitry steps back. */
@media (max-width: 720px) {
  .circuit { opacity: 0.45; }
}
@media (min-width: 860px) {
  .intro-grid { grid-template-columns: 1.3fr 1fr; }
  .offer-grid, .use-grid { grid-template-columns: 1fr 1fr; }
}