/* ==========================================================
   Landing Page Optimization -creative animated visuals (v2, richer/no gaps)
   Every panel is built to fill 100% of its .grs-visual slot,
   with layered, denser content so no empty space is left
   regardless of column height (desktop stretch or mobile stack).
   ========================================================== */

@keyframes grsFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes grsFloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes grsCountBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes grsBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes grsRise{0%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes grsPop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes grsRingSweep{from{stroke-dashoffset:283}to{stroke-dashoffset:var(--grs-off,60)}}
@keyframes grsRingPulse{0%,100%{stroke-dashoffset:var(--grs-off,60)}50%{stroke-dashoffset:calc(var(--grs-off,60) - 6)}}
@keyframes grsSweepGlow{0%{background-position:-150% 0}100%{background-position:250% 0}}
@keyframes grsDraw{to{stroke-dashoffset:0}}
@keyframes grsDotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.35}}
@keyframes grsSpin{to{transform:rotate(360deg)}}
@keyframes grsChartRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- Card shells: flex column that STRETCHES to fill visual slot ---------- */
.grs-visual{position:relative;width:100%;max-width:100%;height:100%;min-height:340px;display:flex;align-items:stretch;justify-content:center;overflow:hidden;box-sizing:border-box;}

.grs-frame,.grs-terminal{width:100%;max-width:560px;height:100%;border-radius:1.1rem;overflow:hidden;
  display:flex;flex-direction:column;animation:grsFloatA 6.5s ease-in-out infinite;box-sizing:border-box;}
.grs-frame{background:#fff;border:1px solid #E6ECF5;box-shadow:0 18px 40px -16px rgba(17,24,39,.14);}
.grs-terminal{background:#0A0E17;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px -16px rgba(0,0,0,.4);animation-name:grsFloatB;animation-duration:7.2s;}

.grs-frame-bar,.grs-terminal-bar{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.1rem;min-width:0;flex:0 0 auto;}
.grs-frame-bar{background:#F7F8FC;border-bottom:1px solid #ECEFF6;}
.grs-terminal-bar{border-bottom:1px solid rgba(255,255,255,.07);}
.grs-dot{width:10px;height:10px;border-radius:9999px;flex-shrink:0;}
.grs-frame-url{flex:1;min-width:0;margin-left:.5rem;height:24px;border-radius:9999px;background:#EEF1F8;display:flex;align-items:center;
  padding:0 .75rem;font:600 11px/1 'Inter',monospace;color:#475569;gap:.35rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.grs-frame-tag{margin-left:auto;display:flex;align-items:center;gap:.35rem;font:800 10px/1 'Inter',monospace;color:#6A58E4;letter-spacing:.05em;flex-shrink:0;}
.grs-frame-tag .grs-live-dot{width:7px;height:7px;border-radius:9999px;background:#6A58E4;animation:grsBlink 1.4s ease-in-out infinite;}
.grs-terminal-title{font:600 12px/1 'Inter',monospace;color:#94A3B8;margin-left:.35rem;}
.grs-terminal-live{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:9999px;flex-shrink:0;
  border:1px solid rgba(52,211,153,.35);background:rgba(52,211,153,.08);font:800 10px/1 'Inter',monospace;color:#6A58E4;letter-spacing:.05em;}

/* Body flexes to consume 100% of remaining card height and distributes children EVENLY
   (space-between so leftover space is spread across every gap, never dumped into one) */
.grs-frame-body,.grs-terminal-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(1.1rem,2.6vw,1.6rem) clamp(1.1rem,2.6vw,1.6rem) clamp(1.2rem,2.8vw,1.7rem);gap:1.1rem;}

.grs-block-label{font:800 10.5px/1 'Inter',monospace;color:#6A58E4;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:.4rem;}
.grs-block-label.dark{color:#6A58E4;}
.grs-block-label .dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:grsDotPulse 1.6s ease-in-out infinite;}
.grs-divider{border-top:1px dashed #E6ECF5;padding-top:.9rem;}
.grs-divider.dark{border-top:1px dashed rgba(255,255,255,.08);}

/* ---------- Bars ---------- */
.grs-frame-bar-row,.grs-t-bar-row{display:flex;align-items:center;gap:.65rem;min-width:0;}
.grs-bar-label,.grs-t-bar-label{flex-shrink:0;width:96px;font:700 11px/1.25 'Inter',monospace;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.grs-t-bar-label{width:106px;color:#94A3B8;}
.grs-frame-bar-track,.grs-t-bar-track{flex:1;min-width:0;height:6px;border-radius:9999px;background:#EEF1F8;overflow:hidden;position:relative;}
.grs-t-bar-track{background:rgba(255,255,255,.08);}
.grs-frame-bar-fill{position:absolute;inset:0;border-radius:9999px;
  background:linear-gradient(90deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4);background-size:250% 100%;transform-origin:left;
  animation:grsCountBar 1.1s cubic-bezier(.2,.8,.2,1) both, grsSweepGlow 3.2s linear infinite 1.1s;}
.grs-t-bar-fill{position:absolute;inset:0;border-radius:9999px;
  background:linear-gradient(135deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4);background-size:250% 100%;transform-origin:left;
  animation:grsCountBar 1.1s cubic-bezier(.2,.8,.2,1) both, grsSweepGlow 3.2s linear infinite 1.1s;}
.grs-frame-bar-val{flex-shrink:0;width:40px;text-align:right;font:800 12.5px/1 'Inter',monospace;color:#6A58E4;}
.grs-t-bar-val{flex-shrink:0;width:38px;text-align:right;font:800 12px/1 'Inter',monospace;color:#6A58E4;}

/* ---------- Footers / pills ---------- */
.grs-frame-footer,.grs-t-footer{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.05rem;flex:0 0 auto;
  border-radius:.95rem;}
.grs-frame-footer{background:rgba(106,88,228,.06);border:1px solid rgba(106,88,228,.18);}
.grs-t-footer{background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.22);}
.grs-frame-footer b{font:700 12.5px/1 'Inter',sans-serif;color:#111827;}
.grs-t-footer b{font:700 12.5px/1 'Inter',sans-serif;color:#fff;}
.grs-pill-violet{padding:.4rem .8rem;border-radius:9999px;background:linear-gradient(135deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4);background-size:250% 100%;color:#fff;font:800 10.5px/1 'Inter',monospace;animation:grsSweepGlow 3.6s linear infinite;white-space:nowrap;}
.grs-pill-green{padding:.4rem .8rem;border-radius:9999px;background:linear-gradient(135deg,#6A58E4,#4A86F5,#28A8D9,#4A86F5,#6A58E4);background-size:250% 100%;animation:grsSweepGlow 3.6s linear infinite;color:#04140D;font:800 10.5px/1 'Inter',monospace;white-space:nowrap;}

/* ---------- Stat tiles ---------- */
.grs-stat-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;flex:0 0 auto;}
.grs-stat-tile{text-align:center;padding:.85rem .4rem;border-radius:.85rem;background:#FAFBFF;border:1px solid #ECEFF6;transition:transform .3s;}
.grs-stat-tile-dark{text-align:center;padding:.85rem .4rem;border-radius:.85rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);}
.grs-stat-tile b,.grs-stat-tile-dark b{display:block;font:800 16px/1.1 'Inter',sans-serif;color:#111827;}
.grs-stat-tile-dark b{color:#6A58E4;}
.grs-stat-tile span,.grs-stat-tile-dark span{display:block;margin-top:.3rem;font:700 10px/1.2 'Inter',monospace;color:#475569;letter-spacing:.04em;text-transform:uppercase;}
.grs-stat-tile-dark span{color:#94A3B8;}

/* ---------- Ring grid (progress rings) -stretches full width ---------- */
.grs-ring-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;width:100%;flex:0 0 auto;}
.grs-ring-card{background:#FAFBFF;border:1px solid #ECEFF6;border-radius:1rem;padding:.85rem .5rem;text-align:center;
  animation:grsRise .55s ease-out both;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;}
.grs-ring-svg{transform:rotate(-90deg);width:clamp(38px,6.4vw,54px);height:clamp(38px,6.4vw,54px);flex-shrink:0;}
.grs-ring-svg .track{fill:none;stroke:#EDEFF6;stroke-width:7;}
.grs-ring-svg .fill{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:283;animation:grsRingSweep 1.3s cubic-bezier(.2,.8,.2,1) both, grsRingPulse 2.6s ease-in-out infinite 1.3s;}
.grs-ring-card-num{font:800 15px/1 'Inter',sans-serif;color:#111827;}
.grs-ring-card-label{font:700 10px/1 'Inter',monospace;color:#475569;text-transform:uppercase;letter-spacing:.03em;}

/* ---------- Check rows ---------- */
.grs-check-list{display:flex;flex-direction:column;gap:.5rem;flex:0 0 auto;}
.grs-check-row{display:flex;align-items:center;gap:.65rem;animation:grsRise .5s ease-out both;}
.grs-check-icon{flex-shrink:0;width:22px;height:22px;border-radius:.5rem;background:rgba(16,185,129,.12);color:#059669;display:flex;align-items:center;justify-content:center;}
.grs-check-icon-dark{flex-shrink:0;width:22px;height:22px;border-radius:.5rem;background:rgba(52,211,153,.15);color:#6A58E4;display:flex;align-items:center;justify-content:center;}
.grs-check-text{font:600 12.5px/1.3 'Inter',sans-serif;color:#1E293B;}
.grs-check-text-dark{font:600 12.5px/1.3 'Inter',sans-serif;color:#E2E8F0;}

/* ---------- NEW: mini bar-chart (fills width, adds visual richness) ---------- */
.grs-chart{display:flex;align-items:flex-end;justify-content:space-between;gap:.45rem;height:64px;flex:0 0 auto;padding:0 .1rem;}
.grs-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.35rem;height:100%;}
.grs-chart-bar{width:100%;max-width:16px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#6A58E4,#4A86F5);
  transform:scaleY(0);transform-origin:bottom;animation:grsChartRise .8s cubic-bezier(.2,.8,.2,1) both;
  box-shadow:0 0 0 1px rgba(106,88,228,.06), 0 4px 10px -4px rgba(106,88,228,.5);position:relative;overflow:hidden;}
.grs-chart-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 55%);}
.grs-chart-bar.dark{background:linear-gradient(180deg,#6A58E4,#10B981);box-shadow:0 0 0 1px rgba(52,211,153,.08), 0 4px 10px -4px rgba(52,211,153,.55);}
.grs-chart-lbl{font:700 10px/1 'Inter',monospace;color:#8E97A8;text-transform:uppercase;letter-spacing:.02em;}
.grs-chart-lbl.dark{color:#64748B;}

/* ---------- NEW: luxury animated line/area graph (replaces boring flat bars) ---------- */
.grs-linegraph{position:relative;flex:0 0 auto;width:100%;border-radius:1rem;padding:1rem 1.05rem .9rem;
  background:linear-gradient(180deg,rgba(106,88,228,.045),rgba(74,134,245,.02));border:1px solid #ECEFF6;overflow:hidden;}
.grs-linegraph.dark{background:linear-gradient(180deg,rgba(52,211,153,.06),rgba(16,185,129,.02));border:1px solid rgba(255,255,255,.07);}
.grs-linegraph-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;}
.grs-linegraph-peak{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .6rem;border-radius:9999px;
  background:rgba(106,88,228,.1);color:#6A58E4;font:800 10px/1 'Inter',monospace;animation:grsPop .5s ease-out both 1.4s;white-space:nowrap;}
.grs-linegraph-peak.dark{background:rgba(52,211,153,.14);color:#6A58E4;}
.grs-linegraph svg{display:block;width:100%;height:auto;overflow:visible;}
.grs-lg-grid line{stroke:#E6ECF5;stroke-width:1;stroke-dasharray:3 4;}
.grs-lg-grid.dark line{stroke:rgba(255,255,255,.08);}
.grs-lg-area{opacity:0;animation:grsPop .7s ease-out both .9s;}
.grs-lg-path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 6px rgba(106,88,228,.35));
  stroke-dasharray:400;stroke-dashoffset:400;animation:grsDraw 1.7s cubic-bezier(.3,.7,.2,1) forwards .15s;}
.grs-lg-path.dark{filter:drop-shadow(0 2px 6px rgba(52,211,153,.4));}
.grs-lg-dot{opacity:0;animation:grsPop .45s ease-out both;}
.grs-lg-dot-ring{animation:grsDotPulse 1.8s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
.grs-lg-xlabels{display:flex;justify-content:space-between;margin-top:.5rem;}
.grs-lg-xlabels span{font:700 10px/1 'Inter',monospace;color:#8E97A8;text-transform:uppercase;letter-spacing:.03em;}
.grs-lg-xlabels.dark span{color:#64748B;}

/* ---------- NEW: sparkline trend row ---------- */
.grs-trend{display:flex;align-items:center;gap:.7rem;flex:0 0 auto;}
.grs-trend svg{flex-shrink:0;}
.grs-trend-path{fill:none;stroke:#6A58E4;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:220;stroke-dashoffset:220;animation:grsDraw 1.6s ease-out forwards .2s;}
.grs-trend-path.dark{stroke:#6A58E4;}
.grs-trend-fill{opacity:.12;animation:grsPop .6s ease-out both .9s;}
.grs-trend-copy b{display:block;font:800 15px/1.1 'Inter',sans-serif;color:#111827;}
.grs-trend-copy.dark b{color:#fff;}
.grs-trend-copy span{display:block;margin-top:.15rem;font:700 10px/1.2 'Inter',monospace;color:#059669;text-transform:uppercase;letter-spacing:.03em;}

/* ---------- NEW: device badge row (icon chips) ---------- */
.grs-chip-row{display:flex;flex-wrap:wrap;gap:.5rem;flex:0 0 auto;}
.grs-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .7rem;border-radius:9999px;background:#FAFBFF;border:1px solid #ECEFF6;
  font:700 10.5px/1 'Inter',sans-serif;color:#475569;animation:grsPop .45s ease-out both;}
.grs-chip.dark{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#CBD5E1;}
.grs-chip i{width:12px;height:12px;color:#6A58E4;}
.grs-chip.dark i{color:#6A58E4;}

/* ---------- NEW: activity / log feed rows for terminals ---------- */
.grs-log{display:flex;flex-direction:column;gap:.5rem;flex:0 0 auto;}
.grs-log-row{display:flex;align-items:center;gap:.6rem;font:600 11.5px/1.3 'Inter',monospace;color:#94A3B8;animation:grsRise .5s ease-out both;}
.grs-log-row .t{color:#526078;flex-shrink:0;font-size:10px;}
.grs-log-row .msg{color:#CBD5E1;}
.grs-log-row .ok{color:#6A58E4;flex-shrink:0;}

/* ---------- device mockup for mobile-specific hero ---------- */
.grs-phone{width:224px;height:100%;max-height:520px;border-radius:2.2rem;background:#0A0E17;border:6px solid #0A0E17;box-shadow:0 24px 55px -18px rgba(17,24,39,.38);
  position:relative;overflow:hidden;animation:grsFloatA 6s ease-in-out infinite;flex-shrink:0;}
.grs-phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:90px;height:20px;background:#0A0E17;border-radius:0 0 12px 12px;z-index:3;}
.grs-phone-screen{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;}
.grs-phone-bar{padding:1.4rem .9rem .6rem;background:#F7F8FC;border-bottom:1px solid #ECEFF6;flex:0 0 auto;}
.grs-phone-body{flex:1;min-height:0;padding:.85rem;display:flex;flex-direction:column;justify-content:space-between;gap:.7rem;overflow:hidden;}

/* Second floating chip beside phone (fills side dead-space on hero) */
.grs-float-chip{position:absolute;display:flex;align-items:center;gap:.55rem;padding:.7rem .95rem;border-radius:1rem;background:#fff;
  border:1px solid #E6ECF5;box-shadow:0 16px 34px -14px rgba(17,24,39,.18);animation:grsFloatB 5.5s ease-in-out infinite;z-index:2;}
.grs-float-chip .ic{width:30px;height:30px;border-radius:.6rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.grs-float-chip b{display:block;font:800 13px/1 'Inter',sans-serif;color:#111827;}
.grs-float-chip span{display:block;margin-top:.15rem;font:700 10px/1 'Inter',monospace;color:#8E97A8;text-transform:uppercase;letter-spacing:.03em;}
.grs-hero-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.grs-orbit-ring{position:absolute;border-radius:50%;border:1.5px dashed rgba(106,88,228,.18);pointer-events:none;animation:grsSpin 22s linear infinite;}

@media (max-width:1023px){
  .grs-visual{min-height:300px;}
}
@media (max-width:640px){
  .grs-visual{min-height:auto;padding:0;}
  .grs-frame,.grs-terminal{height:auto;min-height:280px;}
  .grs-frame-body,.grs-terminal-body{padding:1rem 1.05rem 1.15rem;gap:.75rem;}
  .grs-bar-label,.grs-t-bar-label{width:78px;font-size:10px;}
  .grs-ring-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;}
  .grs-ring-svg{width:34px;height:34px;}
  .grs-ring-card{padding:.6rem .3rem;}
  .grs-ring-card-num{font-size:13px;}
  .grs-stat-tiles{gap:.5rem;}
  .grs-stat-tile,.grs-stat-tile-dark{padding:.65rem .3rem;}
  .grs-stat-tile b,.grs-stat-tile-dark b{font-size:14px;}
  .grs-chart{height:52px;}
  .grs-phone{width:190px;height:400px;}
  .grs-hero-stage{min-height:400px;}
  .grs-float-chip{display:none;}
}
@media (max-width:400px){
  .grs-bar-label,.grs-t-bar-label{width:74px;font-size:10px;}
  .grs-frame-bar-val,.grs-t-bar-val{width:32px;font-size:11px;}
}
@media (prefers-reduced-motion: reduce){
  .grs-visual *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
}
.grid > *{min-width:0;}
.grs-frame,.grs-terminal,.grs-phone{min-width:0;box-sizing:border-box;}
.grs-frame *,.grs-terminal *,.grs-phone *{box-sizing:border-box;}


/* ==========================================================
   MOBILE 2-UP FIX -- fixed 3-item metric/stat strips show only
   2 tiles per row on small phones (3 tiles in a row was either
   cramped/clipped, or stacking all 3 full-width made the card
   too tall). The 3rd tile is hidden rather than wrapped to its
   own half-empty row, and the CTA nothing else references it.
   ========================================================== */
@media (max-width: 480px) {
  .grs-stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; }
  .grs-stat-tiles > *:nth-child(3) { display: none !important; }
}