/* ============================================================
   soc.css — styles specific to soc.html
   Loaded in addition to styles.css
   Reuses page-hero, section-title, btn-*, cta-final from shared
   ============================================================ */

/* ---- Hero specific (extends .page-hero from about.css idea;
        we redeclare locally since about.css isn't loaded here) ---- */
.page-hero{padding:80px 0 90px;position:relative;overflow:hidden}
.soc-hero{border-bottom:1px solid var(--line)}
.page-hero-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(36px, 5.5vw, 64px);
  line-height:1.02;letter-spacing:-0.035em;
  margin-bottom:28px;color:var(--ink);
}
.page-hero-title em{font-style:italic;color:var(--accent);font-weight:300}
.page-hero-sub{
  font-size:18px;line-height:1.6;color:var(--ink-dim);
  max-width:680px;margin-bottom:36px;
}

.soc-hero-inner{max-width:820px;position:relative;z-index:2}

/* Subtle scrolling activity ribbon at the top of hero */
.soc-activity-strip{
  position:absolute;top:0;left:0;right:0;
  padding:10px 0;
  background:rgba(0,0,0,0.4);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  z-index:1;
  mask-image:linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
.activity-track{
  display:flex;gap:48px;
  white-space:nowrap;
  animation:activity-scroll 80s linear infinite;
  width:max-content;
}
@keyframes activity-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.activity-track span{
  font-family:var(--mono);font-size:11px;
  color:var(--ink-dim);letter-spacing:0.05em;
  display:inline-flex;align-items:center;gap:6px;
}
.activity-track b{font-size:8px;font-weight:400}
.a-ok{color:var(--accent)}
.a-warn{color:var(--warn)}
.a-crit{color:var(--crit)}
.a-human{color:var(--gold)}

/* Push content down to clear the activity strip */
.soc-hero .wrap{padding-top:48px;position:relative;z-index:2}

/* ---- Primer: what's a SOC ---- */
.soc-primer{
  padding:110px 0;border-top:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg-0), var(--bg-1));
}
@media (max-width:768px){.soc-primer{padding:72px 0}}

.primer-grid{
  display:grid;grid-template-columns:1fr 1.4fr;gap:80px;
  align-items:start;margin-bottom:64px;
}
@media (max-width:980px){.primer-grid{grid-template-columns:1fr;gap:40px;margin-bottom:48px}}

.primer-body{
  font-size:16px;line-height:1.65;
  color:var(--ink-dim);margin-top:22px;
}

.primer-breakdown{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
@media (max-width:880px){.primer-breakdown{grid-template-columns:1fr}}
.breakdown-item{
  background:var(--bg-1);padding:32px 28px;
  display:flex;flex-direction:column;gap:14px;
}
.breakdown-num{
  font-family:var(--display);font-weight:400;
  font-size:38px;letter-spacing:-0.03em;
  color:var(--ink-mute);line-height:1;
  text-decoration:line-through;
  text-decoration-color:var(--crit);
  text-decoration-thickness:3px;
}
.breakdown-item-yes .breakdown-num{
  color:var(--accent);
  text-decoration:none;
}
.breakdown-item-yes{
  background:linear-gradient(145deg, rgba(79,240,194,0.06), var(--bg-1));
  border-left:2px solid var(--accent);
}
.breakdown-item p{font-size:15px;line-height:1.55;color:var(--ink-dim)}
.breakdown-item p strong{color:var(--ink);font-weight:500;display:block;margin-bottom:4px}

/* ---- Inside the SOC - 4 pillar cards ---- */
.soc-inside{
  padding:110px 0;border-top:1px solid var(--line);
  background:var(--bg-0);
}
@media (max-width:768px){.soc-inside{padding:72px 0}}

.inside-grid{
  display:grid;grid-template-columns:repeat(2, 1fr);gap:24px;
  margin-top:56px;
}
@media (max-width:768px){.inside-grid{grid-template-columns:1fr}}

.inside-card{
  border:1px solid var(--line-bright);
  background:linear-gradient(145deg, var(--bg-1), var(--bg-2));
  padding:36px 32px;
  position:relative;overflow:hidden;
  transition:all 0.25s ease;
}
.inside-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.inside-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, var(--accent), transparent);
}
.inside-card-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
}
.inside-num{
  font-family:var(--mono);font-size:11px;
  color:var(--accent);letter-spacing:0.25em;
  padding:4px 10px;border:1px solid var(--accent);
  background:rgba(79,240,194,0.05);border-radius:2px;
}
.inside-icon{
  color:var(--accent);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
}
.inside-icon svg{width:28px;height:28px}
.inside-card h3{
  font-family:var(--display);font-weight:500;
  font-size:26px;letter-spacing:-0.02em;
  margin-bottom:10px;line-height:1.15;color:var(--ink);
}
.inside-summary{
  font-size:15px;line-height:1.55;color:var(--ink-dim);
  margin-bottom:20px;padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.inside-list{list-style:none;padding:0}
.inside-list li{
  position:relative;padding:8px 0 8px 24px;
  font-size:14px;line-height:1.55;color:var(--ink);
}
.inside-list li::before{
  content:"";position:absolute;left:0;top:14px;
  width:10px;height:1px;background:var(--accent);
}

/* ---- By the Numbers / KPIs ---- */
.soc-numbers{
  padding:110px 0;border-top:1px solid var(--line);
  background:
    radial-gradient(ellipse 800px 500px at 50% 0%, rgba(79,240,194,0.06), transparent 60%),
    var(--bg-1);
}
@media (max-width:768px){.soc-numbers{padding:72px 0}}

.kpi-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:1px;
  background:var(--line);
  border:1px solid var(--line-bright);
  margin-top:56px;
}
@media (max-width:880px){.kpi-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:540px){.kpi-grid{grid-template-columns:1fr}}

.kpi-card{
  background:var(--bg-1);
  padding:40px 36px;
  display:flex;flex-direction:column;gap:10px;
  transition:background 0.2s;
}
.kpi-card:hover{background:var(--bg-2)}
.kpi-primary{
  background:linear-gradient(145deg, rgba(79,240,194,0.08), var(--bg-1));
  border-left:2px solid var(--accent);
}
.kpi-primary:hover{background:linear-gradient(145deg, rgba(79,240,194,0.12), var(--bg-2))}

.kpi-label{
  font-family:var(--mono);font-size:10px;
  color:var(--ink-mute);letter-spacing:0.2em;
  text-transform:uppercase;
}
.kpi-value{
  font-family:var(--display);font-weight:400;
  font-size:60px;letter-spacing:-0.04em;
  line-height:1;color:var(--ink);
  display:flex;align-items:baseline;gap:4px;
}
.kpi-primary .kpi-value{color:var(--accent)}
.kpi-unit{
  font-family:var(--mono);font-size:16px;
  color:var(--ink-mute);letter-spacing:0;
  font-weight:500;
}
.kpi-primary .kpi-unit{color:var(--accent);opacity:0.7}
.kpi-sub{
  font-size:13px;color:var(--ink-dim);
  line-height:1.5;margin-top:6px;
}
.kpi-sub strong{color:var(--warn);font-weight:500}

.kpi-footnote{
  margin-top:24px;
  font-family:var(--mono);font-size:11px;
  color:var(--ink-mute);letter-spacing:0.05em;
  line-height:1.6;max-width:820px;
}

/* ---- Split pane: customer vs SOC ---- */
.soc-split{
  padding:110px 0;border-top:1px solid var(--line);
  background:var(--bg-0);
}
@media (max-width:768px){.soc-split{padding:72px 0}}

.split-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  margin-top:56px;
}
@media (max-width:880px){.split-grid{grid-template-columns:1fr}}

.split-pane{
  border:1px solid var(--line-bright);
  padding:36px 32px;
  background:var(--bg-1);
  position:relative;overflow:hidden;
}
.split-pane-customer{
  background:linear-gradient(145deg, rgba(79,240,194,0.04), var(--bg-1));
}
.split-pane-soc{
  background:linear-gradient(145deg, var(--bg-2), var(--bg-1));
  border-top:2px solid var(--accent);
}

.split-label{
  font-family:var(--mono);font-size:11px;
  color:var(--accent);letter-spacing:0.2em;
  text-transform:uppercase;margin-bottom:28px;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}

.split-event{
  display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--line);
  align-items:start;
}
.split-event:last-child{border-bottom:none}
.event-time{
  font-family:var(--mono);font-size:12px;
  color:var(--ink-mute);letter-spacing:0.05em;
  min-width:80px;padding-top:2px;
}
.split-pane-soc .event-time{color:var(--accent)}
.event-text{font-size:14px;line-height:1.55;color:var(--ink-dim)}
.event-text em{color:var(--ink);font-style:italic;
  display:block;margin-top:6px;padding:10px 14px;
  background:rgba(79,240,194,0.04);
  border-left:2px solid var(--accent);
  font-family:var(--display);font-size:14px;font-weight:400;
}
.event-text strong{color:var(--ink);font-weight:500}
.event-calm{background:rgba(79,240,194,0.04);border-radius:2px;padding:12px 14px;margin-top:10px;border-top:1px solid rgba(79,240,194,0.2) !important}

.tag-info,.tag-crit,.tag-human,.tag-ok{
  display:inline-block;
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.15em;padding:2px 8px;
  margin-right:8px;border-radius:2px;font-weight:500;
  vertical-align:middle;
}
.tag-info{color:var(--accent);background:rgba(79,240,194,0.1);border:1px solid rgba(79,240,194,0.3)}
.tag-crit{color:var(--crit);background:rgba(255,77,109,0.1);border:1px solid rgba(255,77,109,0.3)}
.tag-human{color:var(--gold);background:rgba(232,200,114,0.1);border:1px solid rgba(232,200,114,0.3)}
.tag-ok{color:var(--accent);background:rgba(79,240,194,0.12);border:1px solid rgba(79,240,194,0.4)}

/* ---- Communication tiers ---- */
.soc-comms{
  padding:110px 0;border-top:1px solid var(--line);
  background:var(--bg-1);
}
@media (max-width:768px){.soc-comms{padding:72px 0}}

.comms-tiers{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;
  margin-top:56px;
}
@media (max-width:880px){.comms-tiers{grid-template-columns:1fr}}

.tier-card{
  border:1px solid var(--line-bright);
  background:var(--bg-0);
  padding:32px 28px;
  position:relative;
  transition:all 0.25s ease;
}
.tier-card:hover{transform:translateY(-2px)}

.tier-head{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.tier-level{
  font-family:var(--display);font-weight:500;
  font-size:22px;letter-spacing:-0.015em;color:var(--ink);
}
.tier-dot{
  width:12px;height:12px;border-radius:50%;
  box-shadow:0 0 12px currentColor;
}
.tier-card-info .tier-dot{background:var(--accent);color:var(--accent)}
.tier-card-elevated .tier-dot{background:var(--warn);color:var(--warn)}
.tier-card-critical .tier-dot{background:var(--crit);color:var(--crit);animation:pulse 1.5s infinite}

.tier-card-info{border-top:2px solid var(--accent)}
.tier-card-elevated{border-top:2px solid var(--warn)}
.tier-card-critical{
  border-top:2px solid var(--crit);
  background:linear-gradient(145deg, rgba(255,77,109,0.03), var(--bg-0));
}

.tier-desc{
  font-size:14px;line-height:1.6;
  color:var(--ink-dim);margin-bottom:24px;
}

.tier-action{
  display:flex;flex-direction:column;gap:4px;
  margin-bottom:14px;padding-bottom:14px;
  border-bottom:1px dashed var(--line);
}
.tier-action:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.tier-action-label{
  font-family:var(--mono);font-size:10px;
  color:var(--accent);letter-spacing:0.2em;
  text-transform:uppercase;
}
.tier-action-value{
  font-size:13px;color:var(--ink);line-height:1.5;
}

/* ---- Credentials grid ---- */
.soc-creds{
  padding:110px 0;border-top:1px solid var(--line);
  background:var(--bg-0);
}
@media (max-width:768px){.soc-creds{padding:72px 0}}

.creds-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;
  margin-top:56px;
}
@media (max-width:880px){.creds-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:540px){.creds-grid{grid-template-columns:1fr}}

.cred-card{
  border:1px solid var(--line-bright);
  background:var(--bg-1);
  padding:28px 26px;
  display:flex;flex-direction:column;gap:12px;
  transition:all 0.2s ease;
}
.cred-card:hover{border-color:var(--accent);background:var(--bg-2);transform:translateY(-2px)}

.cred-icon{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);
  border:1px solid var(--accent);
  background:rgba(79,240,194,0.05);border-radius:2px;
  margin-bottom:8px;
}
.cred-icon svg{width:22px;height:22px}
.cred-title{
  font-family:var(--display);font-weight:500;
  font-size:19px;letter-spacing:-0.015em;color:var(--ink);
  line-height:1.2;
}
.cred-desc{
  font-size:13px;color:var(--ink-dim);line-height:1.55;
}

/* ---- Section eyebrow / section title / lede
       (redeclared since this page doesn't import about.css) ---- */
.section-eyebrow{
  font-family:var(--mono);font-size:11px;color:var(--accent);
  text-transform:uppercase;letter-spacing:0.25em;margin-bottom:16px;
  display:flex;align-items:center;gap:14px;
}
.section-eyebrow::before{
  content:"";width:32px;height:1px;background:var(--accent);
}
.section-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(32px, 4.5vw, 52px);
  line-height:1.05;letter-spacing:-0.03em;
  margin-bottom:24px;max-width:820px;
}
.section-title em{font-style:italic;color:var(--accent);font-weight:300}
.section-lede{font-size:18px;color:var(--ink-dim);max-width:680px;line-height:1.6;margin-bottom:20px}