/* =====================================================================
   GrazeX gateway (landing) — page-specific styles
   ===================================================================== */

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1fr; align-items: center; gap: 24px;
  padding: calc(var(--nav-h) + 56px) var(--gutter) 56px; max-width: 1400px; margin: 0 auto; isolation: isolate; }
@media (min-width: 1024px) { .hero { grid-template-columns: 1.05fr .95fr; gap: 32px; padding-top: calc(var(--nav-h) + 40px); } }
.hero-copy { position: relative; z-index: 2; }
.hero-title { margin: 22px 0 22px; }
.hero-title span { display: block; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-actions .btn { flex: 1 1 auto; }
@media (min-width: 560px) { .hero-actions .btn { flex: 0 0 auto; } }

.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 34px 0 0; max-width: 560px; }
.hero-stats > div { display: grid; }
.hero-stats dd { margin: 0; display: grid; align-content: start; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, .025); }
.hs-num { font-family: var(--font-display); font-size: clamp(34px, 6vw, 46px); font-weight: 800; line-height: 1; color: var(--text); }
.hs-label { font-size: 11px; line-height: 1.3; color: var(--muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.hero-art { position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; }
@media (min-width: 1024px) { .hero-art { min-height: 620px; } }
.orb { position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, rgba(255, 132, 0, .24), rgba(134, 213, 26, .08) 40%, transparent 68%); filter: blur(4px);
  animation: breathe 9s ease-in-out infinite; }
.ring { position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .11); animation: spinSlow 80s linear infinite; }
.ring::before, .ring::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed rgba(255, 127, 0, .2); }
.ring::after { inset: 18%; border-color: rgba(134, 213, 26, .2); }
@keyframes breathe { 50% { transform: scale(1.06); opacity: .85; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }

.logo-stage { position: relative; width: min(760px, 100%); aspect-ratio: 2 / 1; transform-style: preserve-3d;
  transform: perspective(1200px) rotateY(-6deg) rotateX(3deg); mix-blend-mode: screen; transition: transform .5s var(--ease); }
.logo-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0;
  transform: scale(.96); transition: opacity .45s ease-in, transform .6s ease-in; }
/* The old logo fades out first, then the new one fades in — they never overlap */
.logo-slide.is-active { opacity: 1; transform: none; transition: opacity .9s var(--ease) .5s, transform 1.3s var(--ease) .5s; }

.hero-watermark { position: absolute; left: -2vw; bottom: -1vw; z-index: -1; font-family: var(--font-display); font-style: italic; font-weight: 800;
  font-size: 26vw; line-height: .8; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .04); white-space: nowrap; pointer-events: none; user-select: none; }

/* ---------- Portals ---------- */
.portals { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .portals { grid-template-columns: 1fr 1fr; gap: 18px; } }
.portal { position: relative; display: block; min-height: 520px; border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden;
  background: #0b0d0c; isolation: isolate; transition: transform .45s var(--ease), border-color .3s; }
@media (min-width: 1024px) { .portal { min-height: 640px; } }
.portal:hover { transform: translateY(-8px); border-color: rgba(255, 255, 255, .24); }
.portal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 8%; opacity: .62;
  transition: transform .8s var(--ease), opacity .5s; filter: saturate(.95) contrast(1.06); }
.portal:hover img { transform: scale(1.05); opacity: .78; }
.portal::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(4, 5, 5, .98) 0%, rgba(4, 5, 5, .7) 40%, rgba(4, 5, 5, .1) 78%); }
.portal-ranch::before, .portal-feeds::before { content: ""; position: absolute; inset: auto -20% -40% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; z-index: 1; opacity: .6;
  transition: opacity .4s; }
.portal-ranch::before { background: radial-gradient(circle, rgba(134, 213, 26, .25), transparent 65%); }
.portal-feeds::before { background: radial-gradient(circle, rgba(255, 122, 0, .3), transparent 65%); }
.portal:hover::before { opacity: 1; }
.portal-copy { position: absolute; left: 22px; right: 22px; bottom: 24px; z-index: 2; }
@media (min-width: 720px) { .portal-copy { left: 34px; right: 34px; bottom: 34px; } }
.portal-num { font-size: 12px; color: #d0d5d0; letter-spacing: .16em; font-weight: 800; text-transform: uppercase; }
.portal h3 { margin: 10px 0 12px; }
.portal-ranch h3 { background: linear-gradient(180deg, #fff, #c4c8c6 60%, #8d9290); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portal-feeds h3 { color: var(--orange); text-shadow: 0 18px 60px rgba(255, 105, 0, .25); }
.portal p { color: #c3cac4; max-width: 520px; line-height: 1.55; }
.portal-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.portal-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); transition: .3s; }
.portal:hover .portal-cta { background: #fff; color: #111; }
.portal:hover .portal-cta .arrow { transform: translateX(4px); }

/* ---------- Model ---------- */
.model { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .015) 50%, transparent); }
.process { list-style: none; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .process { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .process { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding: 32px 24px; border-bottom: 1px solid var(--line); min-height: 220px; transition: background .3s; }
@media (min-width: 640px) { .step { border-right: 1px solid var(--line); } }
@media (min-width: 1024px) { .step { border-bottom: 0; } .step:last-child { border-right: 0; } }
.step:hover { background: rgba(255, 255, 255, .025); }
.step b { font-size: 12px; letter-spacing: .16em; color: var(--orange); }
.step h3 { font-family: var(--font-display); font-size: 44px; text-transform: uppercase; margin: 28px 0 8px; }
.step p { color: var(--muted); margin: 0; }
.step::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--orange), var(--green));
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.step:hover::after { transform: scaleX(1); }

/* ---------- Testimonials ---------- */
.quote blockquote { margin: 0 0 14px; font-size: 17px; line-height: 1.6; color: #dfe4e0; }
.quote figcaption { color: var(--muted); font-size: 14px; }
.stars { color: var(--orange-2); letter-spacing: 3px; margin-bottom: 10px; }

/* ---------- CTA ---------- */
.cta { padding: 20px 0 80px; }
.cta-box { position: relative; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid rgba(255, 255, 255, .14); padding: 40px 22px;
  background: linear-gradient(120deg, #151b16 0%, #0d100e 55%, #18110b 100%); }
@media (min-width: 900px) { .cta-box { padding: 72px; } }
.cta-box::before { content: ""; position: absolute; top: -40%; right: -10%; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 0, .3), transparent 65%); pointer-events: none; }
.cta-box h2 { max-width: 900px; margin: 10px 0 16px; position: relative; }
.cta-box .lead { position: relative; }
.cta-box .hero-actions { position: relative; }