*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#05080c;
  color:#f4f7f7;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
button,input{font:inherit}
button{cursor:pointer}
svg{display:block}

:root{
  --bg:#070c10;
  --panel:#0b1013;
  --panel-2:#0d1317;
  --border:rgba(255,255,255,.06);
  --border-2:rgba(255,255,255,.04);
  --text:#edf4f3;
  --muted:rgba(232,240,239,.58);
  --muted-2:rgba(232,240,239,.34);
  --green:rgba(34,197,94,.7);
  --amber:rgba(234,179,8,.7);
  --teal:rgba(16,185,129,.7);
  --cyan:rgba(0,220,180,.7);
  --orange:rgba(245,158,11,.7);
  --orange2:rgba(255,140,50,.7);
  --softgreen:rgba(80,220,120,.7);
  --deepgreen:rgba(5,150,105,.7);
  --primary:#38bdb0;
  --accent:#efac39;
  --pink:#c43080;
}

.ga-section{
  position:relative;
  overflow:hidden;
  padding:110px 0 90px;
  isolation:isolate;
}
.ga-bg{
  position:absolute; inset:auto;
  border-radius:999px;
  filter:blur(70px);
  opacity:.22;
  pointer-events:none;
}
.ga-bg-1{width:38rem;height:22rem;left:-8rem;top:10rem;background:radial-gradient(circle, rgba(56,189,176,.18), transparent 65%)}
.ga-bg-2{width:40rem;height:24rem;right:-10rem;bottom:20rem;background:radial-gradient(circle, rgba(234,179,8,.16), transparent 65%)}

.ga-container{
  position:relative;
  z-index:2;
  width:min(1400px, calc(100% - 32px));
  margin-inline:auto;
}

.text-gradient{
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(56,189,176,.8) 55%, rgba(234,179,8,.85));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ga-intro{
  text-align:center;
  max-width:980px;
  margin:0 auto 76px;
}
.ga-main-title{
  margin:0 0 26px;
  font-size:clamp(44px, 7vw, 74px);
  line-height:1;
  letter-spacing:-.03em;
  font-weight:800;
}
.ga-copy-card{
  position:relative;
  border:1px solid var(--border);
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(13,20,24,.98), rgba(10,15,18,.96));
  box-shadow:0 20px 50px -10px rgba(0,0,0,.42);
}
.line-top{
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}
.ga-copy-content{position:relative;padding:38px 34px 34px}
.ga-copy-title{
  margin:0 0 16px;
  color:#f3f7f7;
  font-size:clamp(28px,3vw,44px);
  line-height:1.18;
  font-weight:800;
}
.ga-copy-text,.ga-copy-subtext{
  margin:0 auto;
  max-width:860px;
  color:var(--muted);
  line-height:1.75;
  font-size:clamp(15px,1.4vw,18px);
}
.ga-copy-subtext{margin-top:10px;color:rgba(232,240,239,.48)}

.ga-preview-wrap{
  position:relative;
  display:flex;
  justify-content:center;
  margin:0 0 72px;
}
.ga-preview-orb{
  position:absolute;left:50%;top:50%;
  border-radius:999px;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.orb-a{
  width:520px;height:520px;
  background:radial-gradient(circle, rgba(56,189,176,.12) 0%, transparent 60%);
  animation:pulseScale 5s ease-in-out infinite;
}
.orb-b{
  width:360px;height:360px;
  background:radial-gradient(circle, rgba(234,179,8,.10) 0%, transparent 60%);
  animation:pulseScale2 4s ease-in-out infinite 1s;
}
.ga-preview-box{
  position:relative;
  overflow:hidden;
  padding:42px 110px 38px;
  border-radius:28px;
  border:2px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(15,12,25,.95), rgba(20,15,35,.9));
}
.scan-line{
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
  transform:translateX(-120%);
  animation:scan 3s ease-in-out infinite;
}
.preview-border{
  position:absolute; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(56,189,176,.55), rgba(234,179,8,.55), transparent);
}
.preview-border.bottom{bottom:0; animation:fadeBlink 3s ease-in-out infinite 1.5s}
.preview-border.top{top:0; animation:fadeBlink 3s ease-in-out infinite}
.ga-preview-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.preview-word{
  font-size:clamp(52px,7vw,112px);
  line-height:.95;
  font-weight:900;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:0 transparent;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(56,189,176,.82));
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 40px rgba(255,255,255,.10));
}
.preview-subword{
  font-size:clamp(14px,1.6vw,25px);
  font-weight:900;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:transparent;
  background:linear-gradient(90deg, rgba(56,189,176,.95), rgba(234,179,8,.95));
  -webkit-background-clip:text;
  background-clip:text;
}
.preview-corner{
  position:absolute; width:18px; height:18px;
}
.preview-corner.tl{left:12px;top:12px;border-top:2px solid rgba(56,189,176,.35);border-left:2px solid rgba(56,189,176,.35);border-top-left-radius:12px}
.preview-corner.tr{right:12px;top:12px;border-top:2px solid rgba(234,179,8,.35);border-right:2px solid rgba(234,179,8,.35);border-top-right-radius:12px}
.preview-corner.bl{left:12px;bottom:12px;border-bottom:2px solid rgba(234,179,8,.35);border-left:2px solid rgba(234,179,8,.35);border-bottom-left-radius:12px}
.preview-corner.br{right:12px;bottom:12px;border-bottom:2px solid rgba(56,189,176,.35);border-right:2px solid rgba(56,189,176,.35);border-bottom-right-radius:12px}

.ga-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.ga-panel{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(9,14,17,.98), rgba(7,11,14,.96));
  transition:border-color .4s ease, box-shadow .45s ease, transform .45s ease;
  isolation:isolate;
}
.ga-panel:hover{
  border-color:rgba(255,255,255,.12);
  transform:translateY(-2px);
}
.panel-sheen::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,255,255,.02);
}
.hover-glow::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(circle 420px at var(--mx,50%) var(--my,50%), var(--hoverGlow, rgba(56,189,176,.06)), transparent 70%);
}
.hover-glow:hover::before{opacity:1}
.ga-panel-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  height:100%;
  padding:20px 20px 0;
}
.ga-panel-header{
  display:flex;align-items:center;gap:10px;
  margin-bottom:8px;
}
.ga-badge-icon{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.05), transparent);
}
.ga-badge-icon svg{
  width:14px;height:14px;
  stroke:currentColor;
}
.ga-label{
  color:rgba(232,240,239,.34);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
  font-weight:800;
}
.ga-title {
    margin: 2px 0 0;
    color: rgba(244,248,248,.96);
    font-size: 20px;
    line-height: 1.12;
    font-weight: 850;
    font-family: 'Sora';
}
.ga-desc{
  margin:10px 0 0;
  max-width:420px;
  color:rgba(232,240,239,.54);
  line-height:1.6;
  font-size:13px;
}
.ga-visual{
  position:relative;
  overflow:hidden;
  flex:1;
  margin:14px 0 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.03);
  background:rgba(255,255,255,.015);
}
.bottom-accent{
  height:2px;
  margin-top:auto;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accentColor), transparent 78%), transparent);
}
.accent-green{--accentColor:var(--green); color:rgba(34,197,94,.88)}
.accent-amber{--accentColor:var(--amber); color:rgba(234,179,8,.88)}
.accent-teal{--accentColor:var(--teal); color:rgba(16,185,129,.88)}
.accent-cyan{--accentColor:var(--cyan); color:rgba(0,220,180,.88)}
.accent-orange{--accentColor:var(--orange); color:rgba(245,158,11,.88)}
.accent-orange2{--accentColor:var(--orange2); color:rgba(255,140,50,.88)}
.accent-softgreen{--accentColor:var(--softgreen); color:rgba(80,220,120,.88)}
.accent-deepgreen{--accentColor:var(--deepgreen); color:rgba(5,150,105,.88)}
.accent-green .ga-badge-icon{background:linear-gradient(135deg, rgba(34,197,94,.12), transparent); border-color:rgba(34,197,94,.16)}
.accent-amber .ga-badge-icon{background:linear-gradient(135deg, rgba(234,179,8,.12), transparent); border-color:rgba(234,179,8,.16)}
.accent-teal .ga-badge-icon{background:linear-gradient(135deg, rgba(16,185,129,.12), transparent); border-color:rgba(16,185,129,.16)}
.accent-cyan .ga-badge-icon{background:linear-gradient(135deg, rgba(0,220,180,.12), transparent); border-color:rgba(0,220,180,.16)}
.accent-orange .ga-badge-icon{background:linear-gradient(135deg, rgba(245,158,11,.12), transparent); border-color:rgba(245,158,11,.16)}
.accent-orange2 .ga-badge-icon{background:linear-gradient(135deg, rgba(255,140,50,.12), transparent); border-color:rgba(255,140,50,.16)}
.accent-softgreen .ga-badge-icon{background:linear-gradient(135deg, rgba(80,220,120,.12), transparent); border-color:rgba(80,220,120,.16)}
.accent-deepgreen .ga-badge-icon{background:linear-gradient(135deg, rgba(5,150,105,.12), transparent); border-color:rgba(5,150,105,.16)}

.size-large{grid-column:span 2;min-height:220px}
.size-medium{grid-row:span 2;min-height:220px}
.size-wide{grid-column:span 2;min-height:240px}
.size-small{min-height:250px}

.ga-control{
  min-height:238px;
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-template-rows:auto auto;
  gap:10px;
  padding:10px;
  background:
   radial-gradient(ellipse 60% 40% at 50% 0%, rgba(56,189,176,.04), transparent 70%),
   rgba(255,255,255,.015);
}
.widget{
  border:1px solid rgba(255,255,255,.04);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  padding:12px;
  overflow:hidden;
  position:relative;
}
.control-status{grid-column:1 / 2;grid-row:1 / 2}
.uptime-box{grid-column:2 / 3;grid-row:1 / 2;display:flex;flex-direction:column;justify-content:center}
.revenue-box{grid-column:1 / 2;grid-row:2 / 3}
.pipeline-box{grid-column:1 / 2;grid-row:2 / 3; margin-left:56%}
.tasks-box{grid-column:2 / 3;grid-row:2 / 3}
.widget-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.head-left{display:flex;align-items:center;gap:7px}
.head-left span,.mini-label{
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(56,189,176,.84);
}
.mini-label.accent{color:rgba(239,172,57,.8)}
.spin-slow,.spin,.tasks-box svg{
  width:12px;height:12px;color:var(--primary)
}
.spin-slow{animation:rotate 8s linear infinite}
.spin{animation:rotate 3s linear infinite}
.pulse-dot,.tiny-pulse,.live-pill i,.health-pill i,.sys-online i,.admin-access i{
  display:inline-block; border-radius:50%; background:#38d6c7;
}
.pulse-dot{width:8px;height:8px; animation:pulse 2s ease-in-out infinite}
.tiny-pulse{width:6px;height:6px; animation:pulse 1.6s ease-in-out infinite}
.status-bars{
  display:flex; gap:10px; align-items:flex-end;
}
.status-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:5px;
}
.status-pill{
  width:100%; height:72px; border-radius:999px; background:rgba(255,255,255,.05);
  position:relative; overflow:hidden;
}
.status-pill span{
  position:absolute;left:0;right:0;bottom:0;border-radius:999px;
  background:linear-gradient(to top, rgba(56,189,176,.62), rgba(56,189,176,.22));
  animation:riseUp 1s ease forwards;
  transform-origin:bottom;
}
.status-item small{
  color:rgba(56,189,176,.42);
  font-size:8px; font-weight:800;
}
.uptime-value{
  font-size:42px; font-weight:900; line-height:1; color:rgba(244,248,248,.92)
}
.uptime-row{
  display:flex; align-items:center; gap:6px; margin-top:8px;
}
.uptime-row small,.mini-note,.task-row small{
  color:rgba(232,240,239,.42); font-size:11px
}
.pop-in{animation:popIn .8s cubic-bezier(.22,1,.36,1) both .15s}
.mini-value{
  color:rgba(244,248,248,.9); font-size:32px; font-weight:850; line-height:1.1; margin-top:6px
}
.mini-trend{
  margin-top:8px; font-size:11px; color:rgba(56,189,176,.62);
  animation:softBlink 3s ease-in-out infinite;
}
.thin-progress{
  margin-top:9px; height:2px; background:rgba(255,255,255,.04); border-radius:999px; overflow:hidden;
}
.thin-progress span{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, rgba(239,172,57,.45), transparent);
  animation:growWidth 1s ease .4s both;
}
.task-row{display:flex;align-items:center;gap:7px;margin-top:8px;color:#72d8ce}
.bar-track{margin-top:14px;height:6px;border-radius:999px;background:rgba(255,255,255,.05);overflow:hidden}
.bar-track span{display:block;height:100%;background:rgba(56,189,176,.5);animation:growWidth 1.2s ease .4s both}

.ga-automation{
  min-height:120px;
  display:flex; align-items:center; justify-content:center; padding:18px;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(234,179,8,.03), transparent 70%), rgba(255,255,255,.01);
}
.workflow-svg{width:100%;height:auto;max-height:170px}
.wf-node,.wf-box{
  fill:rgba(234,179,8,.1);
  stroke:rgba(234,179,8,.32);
  stroke-width:1;
}
.node-done{fill:rgba(80,220,120,.12);stroke:rgba(80,220,120,.4)}
.wf-ring{fill:none;stroke-width:.5}
.ring-trigger{stroke:rgba(234,179,8,.18); animation:ringPulse 2.5s ease-in-out infinite}
.ring-done{stroke:rgba(80,220,120,.18); animation:ringPulse 2s ease-in-out infinite 1s}
.wf-line{
  stroke:rgba(234,179,8,.26); stroke-width:1; stroke-dasharray:4 3;
  stroke-dashoffset:22;
  animation:dashMove 2.2s linear infinite;
}
.green-line{stroke:rgba(80,220,120,.28)}
.wf-text,.wf-tag,.wf-muted,.wf-topnote{
  font-family:Inter, sans-serif;
}
.wf-text{fill:rgba(234,179,8,.76);font-size:6px;font-weight:800}
.wf-text-main{font-size:7px}
.wf-tag{fill:rgba(234,179,8,.5);font-size:5px}
.wf-tag.small{font-size:4.4px}
.wf-muted{fill:rgba(234,179,8,.3);font-size:5px;font-weight:700; animation:softBlink 3s ease-in-out infinite}
.wf-topnote{fill:rgba(234,179,8,.25);font-size:4.5px; animation:softBlink 4s ease-in-out infinite}
.greenish{fill:rgba(80,220,120,.85)}
.wf-particle{fill:rgba(234,179,8,.9); animation:particle 2.3s ease-in-out infinite}
.particle-2{animation-delay:.7s}
.particle-3{animation-delay:1.3s}

.ga-comms{
  min-height:220px;
  padding:12px;
  background:radial-gradient(ellipse 50% 40% at 20% 30%, rgba(56,189,176,.03), transparent 60%), rgba(255,255,255,.01);
}
.tabs-row{
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.tab{
  font-size:8px; font-weight:800; padding:4px 8px; border-radius:6px;
  color:rgba(255,255,255,.25); text-transform:uppercase;
}
.tab.active{
  background:rgba(20,185,160,.15); color:rgba(56,189,176,.95)
}
.live-pill,.health-pill,.sys-online{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 7px; border-radius:7px;
  background:rgba(56,189,176,.1); color:rgba(56,189,176,.85);
  font-size:8px; font-weight:800; letter-spacing:.06em;
}
.msg-card{
  position:relative;
  display:flex; gap:10px; align-items:flex-start;
  padding:10px; border-radius:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.04);
}
.msg-card + .msg-card{margin-top:8px}
.msg-icon{
  width:28px; height:28px; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06); color:rgba(56,189,176,.75)
}
.msg-icon svg{width:14px;height:14px}
.msg-body{min-width:0; flex:1}
.msg-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.msg-top strong{font-size:12px; color:rgba(244,248,248,.84)}
.msg-top span{font-size:10px; color:rgba(232,240,239,.26)}
.msg-body p{
  margin:3px 0 0;
  font-size:11px;
  color:rgba(232,240,239,.46);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.msg-unread{
  position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%;
  background:#38d6c7; animation:pulse 1.6s ease-in-out infinite;
}
.reply-row{
  display:flex; gap:8px; align-items:center; padding-top:10px;
}
.typing-box{
  flex:1; height:34px; border-radius:10px; padding:0 12px;
  display:flex; align-items:center;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.03);
  color:rgba(232,240,239,.28);
  font-size:11px;
  animation:softBlink 2s ease-in-out infinite;
}
.send-btn{
  width:34px;height:34px;border:none;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(20,185,160,.2); color:rgba(56,189,176,.8);
  transition:transform .25s ease, background .25s ease;
}
.send-btn:hover{transform:scale(1.08);background:rgba(20,185,160,.3)}
.send-btn svg{width:14px;height:14px}

.ga-visibility{
  min-height:220px;
  padding:12px;
  background:radial-gradient(ellipse 60% 50% at 70% 80%, rgba(0,220,180,.03), transparent 60%), rgba(255,255,255,.01);
}
.kpi-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px;
}
.kpi-card{
  position:relative;
  padding:12px; border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.04);
}
.kpi-card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:#38bdb0; transform:scaleX(0); transform-origin:left; animation:growScale .7s ease .4s forwards;
}
.kpi-card.danger::after{background:#ef4444}
.kpi-label{
  font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(232,240,239,.42);
}
.kpi-value{
  margin-top:4px; font-size:30px; font-weight:850; line-height:1; color:rgba(244,248,248,.92)
}
.kpi-change{
  margin-top:6px; font-size:11px; font-weight:700;
}
.kpi-change.up{color:rgba(56,189,176,.78)}
.kpi-change.down{color:rgba(239,68,68,.78)}
.live-chart{
  position:relative;
  display:flex; align-items:flex-end; gap:6px;
  height:96px; padding:14px 8px 8px;
  border-radius:12px; border:1px solid rgba(255,255,255,.04);
  background:rgba(255,255,255,.02);
}
.chart-live{
  position:absolute; top:10px; right:10px; margin-left:0;
}
.live-chart span{
  flex:1; min-width:0;
  height:0;
  border-radius:8px;
  background:linear-gradient(to top, rgba(56,189,176,.44), rgba(56,189,176,.12));
  animation:chartRise .7s ease forwards;
}
.live-chart span:nth-child(2){animation-delay:.2s}.live-chart span:nth-child(3){animation-delay:.24s}.live-chart span:nth-child(4){animation-delay:.28s}.live-chart span:nth-child(5){animation-delay:.32s}.live-chart span:nth-child(6){animation-delay:.36s}.live-chart span:nth-child(7){animation-delay:.40s}.live-chart span:nth-child(8){animation-delay:.44s}.live-chart span:nth-child(9){animation-delay:.48s}.live-chart span:nth-child(10){animation-delay:.52s}.live-chart span:nth-child(11){animation-delay:.56s}.live-chart span:nth-child(12){animation-delay:.60s}.live-chart span:nth-child(13){animation-delay:.64s}.live-chart span:nth-child(14){animation-delay:.68s}.live-chart span:nth-child(15){animation-delay:.72s}.live-chart span:nth-child(16){animation-delay:.76s}.live-chart span:nth-child(17){animation-delay:.80s}.live-chart span:nth-child(18){animation-delay:.84s}

.ga-team{
  min-height:150px;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:12px;
  background:radial-gradient(ellipse 50% 50% at 80% 20%, rgba(245,158,11,.03), transparent 60%), rgba(255,255,255,.01);
}
.member-row{
  position:relative;
  display:flex; align-items:center; gap:10px;
  padding:10px 10px 11px; border-radius:12px;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04);
  overflow:hidden;
}
.member-row b{
  position:absolute;left:0;bottom:0;height:1px;background:#38bdb0;transform:scaleX(0);transform-origin:left;animation:growScale .7s ease .4s forwards;
}
.avatar{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:800;color:rgba(244,248,248,.9)
}
.avatar.a{background:rgba(56,189,176,.22)}
.avatar.s{background:rgba(16,185,129,.22)}
.avatar.m{background:rgba(239,172,57,.22)}
.avatar.d{background:rgba(56,189,176,.22)}
.member-row strong{font-size:11px;color:rgba(244,248,248,.74);font-weight:700}
.tag{
  margin-left:auto;
  padding:4px 8px; border-radius:999px; font-size:8px; font-weight:800;
}
.tag.ok{background:rgba(56,189,176,.14); color:#38bdb0}
.tag.warn{background:rgba(245,158,11,.14); color:#f59e0b}
.member-dot{
  width:7px;height:7px;border-radius:50%; animation:pulse 2s ease-in-out infinite;
}
.member-dot.ok{background:#38bdb0}
.member-dot.warn{background:#f59e0b}

.ga-growth{
  min-height:150px;
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding:12px;
  background:radial-gradient(ellipse 50% 50% at 30% 80%, rgba(255,140,50,.03), transparent 60%), rgba(255,255,255,.01);
}
.stage-top{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;
  font-size:10px; color:rgba(232,240,239,.56); font-weight:700;
}
.stage-bar{
  position:relative; height:20px; border-radius:8px;
  overflow:hidden; background:rgba(255,255,255,.03);
}
.stage-bar b{
  position:absolute;left:0;top:0;bottom:0;border-radius:8px;
  width:0;
  background:linear-gradient(90deg, rgba(255,140,50,.35), rgba(255,140,50,.12));
  animation:growWidth .8s ease forwards;
}
.stage:nth-child(2) .stage-bar b{animation-delay:.12s}
.stage:nth-child(3) .stage-bar b{animation-delay:.24s}
.stage:nth-child(4) .stage-bar b{animation-delay:.36s}
.stage-bar.close b{
  background:linear-gradient(90deg, rgba(56,189,176,.38), rgba(56,189,176,.15));
}
.stage-bar em{
  position:absolute; right:7px; top:50%; transform:translateY(-50%);
  font-style:normal; font-size:8px; font-weight:800; color:rgba(244,248,248,.36);
}

.ga-experience{
  min-height:150px;
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding:12px;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(80,220,120,.02), transparent 60%), rgba(255,255,255,.01);
}
.exp-box{
  position:relative;
  border:1px solid rgba(255,255,255,.04);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  padding:12px;
}
.exp-box:first-child::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg, transparent, rgba(56,189,176,.3), transparent);animation:softBlink 3s ease-in-out infinite
}
.exp-top{
  display:flex; align-items:center; gap:8px;
  color:rgba(244,248,248,.74);
}
.exp-icon,.exp-star{color:rgba(56,189,176,.8)}
.exp-star{color:rgba(250,204,21,.8); animation:sway 3s ease-in-out infinite}
.exp-top strong{font-size:11px}
.exp-top em{
  margin-left:auto; padding:4px 8px; border-radius:999px;
  background:rgba(56,189,176,.12); color:#38bdb0; font-size:8px; font-style:normal; font-weight:800;
}
.exp-top big{
  margin-left:auto; font-size:26px; font-weight:850; color:rgba(244,248,248,.82)
}
.exp-tabs{display:flex; gap:6px; margin-top:10px}
.exp-tabs span{
  font-size:9px; color:rgba(232,240,239,.5);
  padding:4px 8px; border-radius:7px; background:rgba(255,255,255,.04)
}
.star-row{
  margin-top:6px; color:rgba(250,204,21,.76); font-size:12px; letter-spacing:2px;
}
.exp-progress{
  margin-top:8px; height:5px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.03)
}
.exp-progress span{
  display:block;height:100%;width:98%;
  background:linear-gradient(90deg, rgba(250,204,21,.34), rgba(56,189,176,.25));
  animation:growWidth .9s ease .3s both;
}

.ga-infra{
  min-height:238px;
  display:grid; grid-template-columns:2fr 1fr; gap:10px;
  padding:12px;
  background:radial-gradient(ellipse 60% 40% at 40% 60%, rgba(5,150,105,.03), transparent 60%), rgba(255,255,255,.01);
}
.infra-main{
  position:relative;
  border:1px solid rgba(255,255,255,.04);
  background:rgba(255,255,255,.02);
  border-radius:14px;
  padding:14px 14px 10px;
}
.infra-main::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(56,189,176,.25), transparent);
  animation:softBlink 3s ease-in-out infinite;
}
.infra-head{
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
  color:rgba(244,248,248,.74); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
}
.layers-icon{color:#38bdb0; animation:rotate 12s linear infinite}
.infra-svg{width:100%;height:auto}
.infra-line{
  stroke:rgba(5,150,105,.18); stroke-width:.5; stroke-dasharray:3 2; animation:dashMove 2.5s linear infinite;
}
.infra-node rect{
  fill:rgba(5,150,105,.08); stroke:rgba(5,150,105,.22); stroke-width:.5;
}
.infra-node text{
  fill:rgba(5,150,105,.66); font-size:6px; font-weight:800; font-family:Inter,sans-serif;
}
.infra-side{display:flex;flex-direction:column;gap:10px}
.infra-stat{
  position:relative; flex:1;
  padding:12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.04);
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
.infra-stat b{
  position:absolute;left:0;right:0;bottom:0;height:1px;background:#38bdb0;transform:scaleX(0);transform-origin:left;animation:growScale .7s ease .35s forwards;
}
.infra-stat b.pink{background:#c43080}
.infra-icon{color:#38bdb0;font-size:14px}
.infra-stat small{
  display:block;margin-top:6px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(232,240,239,.36)
}
.infra-stat strong{
  display:block;margin-top:5px;font-size:18px;color:rgba(244,248,248,.82)
}

.ga-login-wrap{
  position:relative;
  margin-top:88px;
  border-radius:32px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(8,11,20,.99), rgba(6,9,16,.97));
  box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
}
.login-grid-overlay{
  position:absolute; inset:0;
  opacity:.05;
  background-image:
   linear-gradient(rgba(234,179,8,.55) .5px, transparent .5px),
   linear-gradient(90deg, rgba(234,179,8,.55) .5px, transparent .5px);
  background-size:100% 5%, 3.3% 100%;
  pointer-events:none;
}
.diag-lines{
  position:absolute; inset:0;
  width:100%; height:100%; pointer-events:none;
}
.diag-lines line{
  stroke-width:1; fill:none
}
.diag-lines line:nth-child(1){stroke:rgba(234,179,8,.06)}
.diag-lines line:nth-child(2){stroke:rgba(255,255,255,.03)}
.diag-lines line:nth-child(3){stroke:rgba(234,179,8,.03)}
.login-glow-1,.login-glow-2,.login-glow-3{
  position:absolute; border-radius:999px; filter:blur(60px); pointer-events:none;
}
.login-glow-1{left:10%;top:30%;width:34%;height:44%;background:radial-gradient(circle, rgba(234,179,8,.08), transparent 65%)}
.login-glow-2{right:12%;top:20%;width:28%;height:38%;background:radial-gradient(circle, rgba(56,189,176,.05), transparent 65%)}
.login-glow-3{left:32%;bottom:-6%;width:42%;height:24%;background:radial-gradient(circle, rgba(234,179,8,.05), transparent 60%)}
.ga-login-content{
  position:relative;
  z-index:2;
  display:grid; grid-template-columns:1fr 460px;
  gap:48px;
  align-items:center;
  padding:72px 52px 88px;
}
.admin-access{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:24px;
  color:rgba(56,189,176,.86);
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
}
.admin-access i{width:8px;height:8px; animation:pulse 2s ease infinite}
.enterprise-note{
  margin:0 0 10px; color:rgba(239,172,57,.62);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:800;
}
.logo-stack{
  margin:0; line-height:.94; font-weight:900; letter-spacing:.15em;
}
.logo-stack span:first-child{
  display:block; font-size:clamp(58px,7vw,104px); color:rgba(244,248,248,.96)
}
.logo-stack span:last-child{
  display:block; font-size:clamp(58px,7vw,104px)
}
.login-copy{
  max-width:470px; margin:22px 0 28px;
  color:rgba(232,240,239,.58); line-height:1.75; font-size:17px;
}
.login-cta{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:280px; min-height:58px;
  padding:16px 28px; border:none; border-radius:16px;
  overflow:hidden;
  color:#fff; font-size:15px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  background:linear-gradient(135deg, hsl(152 70% 38%), hsl(160 60% 42%), hsl(145 65% 35%));
  box-shadow:0 6px 20px rgba(56,189,176,.15), inset 0 1px 0 rgba(255,255,255,.12);
}
.login-cta .shimmer{
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform:translateX(-100%);
  animation:scan 3s ease-in-out infinite;
}
.btn-inner{
  position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px;
}
.login-cta svg,.primary-btn svg,.sign-btn svg{
  width:18px;height:18px;
}
.sys-meta{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:26px;
  color:rgba(232,240,239,.38);
  font-size:11px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

.login-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(18,22,31,.98), rgba(12,16,23,.96));
  box-shadow:0 25px 50px -10px rgba(0,0,0,.5), 0 0 30px rgba(234,179,8,.06);
}
.login-card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(234,179,8,.05) 0%, transparent 50%);
  pointer-events:none;
}
.login-card-top{
  display:flex; align-items:center; gap:12px;
  padding:24px 24px 0;
}
.sys-online{
  margin-left:0;
}
.dpa-pill{
  margin-left:6px;
  padding:4px 8px; border-radius:999px;
  border:1px solid rgba(239,172,57,.22);
  background:rgba(239,172,57,.1);
  color:rgba(239,172,57,.74);
  text-transform:uppercase; font-size:9px; font-weight:800; letter-spacing:.1em;
}
.lock-icon{
  margin-left:auto; width:16px; height:16px; color:rgba(232,240,239,.28)
}
.login-title-block{padding:18px 24px 0}
.login-title-block p{
  margin:0 0 4px;
  color:rgba(56,189,176,.55);
  font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
}
.login-title-block h4{
  margin:0;
  font-size:28px; line-height:1.1; color:rgba(244,248,248,.96); font-weight:850;
}
.login-title-block span{
  display:block; margin-top:6px; color:rgba(232,240,239,.46); font-size:12px;
}
.field-wrap{
  padding:18px 24px 0;
}
.field-wrap label{
  display:block; margin-bottom:8px;
  color:rgba(244,248,248,.72); font-size:12px; font-weight:700;
}
.field-box{
  position:relative;
}
.field-box svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px;height:16px; color:rgba(232,240,239,.3)
}
.field-box input{
  width:100%; height:52px;
  padding:0 46px 0 42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  outline:none;
  color:rgba(244,248,248,.84);
  background:rgba(255,255,255,.04);
  box-shadow:none;
}
.field-box input:focus{
  border-color:rgba(56,189,176,.4);
  box-shadow:0 0 10px rgba(56,189,176,.08);
}
.eye-btn{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; color:rgba(232,240,239,.34);
}
.eye-btn svg{width:16px;height:16px}
.login-actions-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 24px 0;
}
.remember-row{
  display:flex; align-items:center; gap:8px;
  color:rgba(232,240,239,.5); font-size:12px;
  cursor:pointer;
}
.remember-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.checkbox-box{
  width:16px;height:16px;border-radius:4px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);
  color:rgba(56,189,176,.65); font-size:10px; font-weight:800;
}
.forgot-btn{
  border:none; background:none; padding:0;
  color:rgba(239,172,57,.68); font-size:12px; font-weight:600;
}
.sign-row{
  display:flex; align-items:center; gap:12px;
  padding:20px 24px 0;
}
.sign-hint{
  display:flex; align-items:center; gap:6px; white-space:nowrap;
  color:rgba(234,179,8,.82); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.14em;
  animation:hintMove 1.2s ease-in-out infinite;
}
.sign-hint svg{
  width:24px; height:16px; color:rgba(234,179,8,.92)
}
.sign-btn{
  position:relative; overflow:hidden;
  flex:1; min-height:54px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:none; border-radius:14px;
  color:#fff; font-size:14px; font-weight:800;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow:0 4px 20px rgba(56,189,176,.2);
}
.btn-sweep{
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.11), transparent);
  transform:translateX(-100%);
  animation:scan2 2s linear infinite;
}
.sign-btn > *:not(.btn-sweep){position:relative;z-index:2}
.login-footer{
  padding:18px 24px 24px;
  text-align:center;
}
.enc-row{
  display:flex; align-items:center; justify-content:center; gap:6px;
  color:rgba(232,240,239,.28); font-size:10px;
}
.login-footer p{
  margin:8px 0 0; color:rgba(232,240,239,.24); font-size:10px;
}
.login-footer b{color:rgba(56,189,176,.56)}

.section-label{
  position:absolute; left:52px; bottom:24px; z-index:2;
}
.section-label p{
  margin:0; color:rgba(232,240,239,.34); font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
}
.section-label span{
  display:block; margin-top:3px; color:rgba(232,240,239,.18); font-size:10px;
}

.ga-principle{
  position:relative;
  margin-top:86px;
  border-radius:28px;
  overflow:hidden;
  text-align:center;
  padding:70px 22px 76px;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(56,189,176,.03), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 50%, rgba(234,179,8,.04), transparent 60%),
    linear-gradient(180deg, rgba(9,14,17,.98), rgba(7,11,14,.96));
}
.principle-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  background:rgba(56,189,176,.1); border:1px solid rgba(56,189,176,.2);
  color:var(--primary); font-size:12px; font-weight:800; letter-spacing:.1em;
}
.ga-principle h3{
  margin:22px 0 0;
  font-size:clamp(36px,5vw,74px);
  line-height:1.08;
  font-weight:850;
}
.ga-principle p{
  max-width:860px; margin:22px auto 0;
  color:rgba(232,240,239,.66); font-size:clamp(17px,1.7vw,22px); line-height:1.8;
}

.ga-cta-row{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:36px;
}
.primary-btn,.secondary-btn{
  min-height:54px;
  padding:0 28px;
  border-radius:14px;
  font-size:14px;
  font-weight:800;
}
.primary-btn{
  border:none; display:inline-flex; align-items:center; gap:8px;
  color:#fff;
  background:var(--primary);
  box-shadow:0 4px 16px rgba(56,189,176,.14);
}
.secondary-btn{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  color:rgba(244,248,248,.9);
}

@keyframes pulseScale{
  0%,100%{transform:translate(-50%,-50%) scale(1); opacity:.3}
  50%{transform:translate(-50%,-50%) scale(1.3); opacity:.7}
}
@keyframes pulseScale2{
  0%,100%{transform:translate(-50%,-50%) scale(1.2); opacity:.4}
  50%{transform:translate(-50%,-50%) scale(.9); opacity:.8}
}
@keyframes fadeBlink{
  0%,100%{opacity:.3}
  50%{opacity:1}
}
@keyframes scan{
  0%{transform:translateX(-120%)}
  50%,100%{transform:translateX(120%)}
}
@keyframes scan2{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}
@keyframes rotate{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.5);opacity:.4}
}
@keyframes riseUp{
  from{height:0}
}
@keyframes chartRise{
  from{height:0}
}
@keyframes growWidth{
  from{width:0}
}
@keyframes growScale{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes popIn{
  0%{transform:scale(.6);opacity:0}
  100%{transform:scale(1);opacity:1}
}
@keyframes softBlink{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
@keyframes ringPulse{
  0%,100%{transform-origin:center;transform:scale(1);opacity:.4}
  50%{transform-origin:center;transform:scale(1.45);opacity:0}
}
@keyframes dashMove{
  from{stroke-dashoffset:24}
  to{stroke-dashoffset:0}
}
@keyframes particle{
  0%,100%{transform:scale(0); opacity:0}
  50%{transform:scale(1); opacity:1}
}
@keyframes sway{
  0%,100%{transform:rotate(0)}
  25%{transform:rotate(10deg)}
  75%{transform:rotate(-10deg)}
}
@keyframes hintMove{
  0%,100%{transform:translateX(0);opacity:.5}
  50%{transform:translateX(6px);opacity:1}
}

@media (max-width: 1200px){
  .ga-login-content{grid-template-columns:1fr; gap:28px}
  .ga-login-right{max-width:520px; width:100%; margin:0 auto}
}
@media (max-width: 1024px){
  .ga-grid{grid-template-columns:1fr 1fr}
  .size-large,.size-wide{grid-column:span 2}
  .size-medium{grid-row:auto}
  .ga-preview-box{padding:34px 58px}
}
@media (max-width: 820px){
  .ga-grid{grid-template-columns:1fr}
  .size-large,.size-wide,.size-medium{grid-column:auto}
  .ga-control,.ga-infra{grid-template-columns:1fr}
  .pipeline-box{margin-left:0}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .ga-login-content{padding:54px 24px 82px}
  .section-label{left:24px}
  .sign-row{flex-direction:column; align-items:stretch}
  .sign-hint{justify-content:center}
  .ga-cta-row{flex-direction:column}
  .ga-preview-box{padding:28px 28px}
}
@media (max-width: 560px){
  .ga-section{padding-top:72px}
  .ga-container{width:min(1400px, calc(100% - 20px))}
  .ga-copy-content,.ga-panel-content,.ga-login-content{padding-left:18px;padding-right:18px}
  .ga-panel-content{padding-top:18px}
  .ga-control,.ga-comms,.ga-visibility,.ga-automation,.ga-team,.ga-growth,.ga-experience,.ga-infra{padding:10px}
  .ga-preview-word{letter-spacing:.14em}
  .ga-copy-title{font-size:26px}
  .ga-copy-text,.ga-copy-subtext,.login-copy,.ga-principle p{font-size:15px}
  .ga-login-content{padding-top:42px}
  .login-card-top,.login-title-block,.field-wrap,.login-actions-row,.sign-row,.login-footer{padding-left:18px;padding-right:18px}
  .sys-meta{font-size:10px}
}