/* ========================================
   HORIZON SUITE — Layer 1 Public Section
   Portfolio page intro section
   assets/css/sections/horizon-suite-public.css
======================================== */

.hsp { position: relative; background: linear-gradient(168deg, #0b1120 0%, #070a14 55%, #05070d 100%); padding: clamp(5rem,8vw,8rem) 0; overflow: hidden; isolation: isolate; }
.hsp::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; z-index:0; }
.hsp-inner { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 4rem; }

/* Hero row */
.hsp-hero { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; margin-bottom:4rem; }
.hsp-hero-text { padding-top:1rem; }
.hsp-title { font-family:'DM Sans',sans-serif; font-size:clamp(2.4rem,4.5vw,3.6rem); font-weight:800; line-height:.94; letter-spacing:-.04em; color:#fff; margin-bottom:1.25rem; }
.hsp-title em { font-style:normal; display:block; font-size:.6em; font-weight:400; color:rgba(255,255,255,.45); margin-top:.5rem; letter-spacing:-.01em; line-height:1.4; }
.hsp-body { font-size:.95rem; color:rgba(255,255,255,.45); line-height:1.65; max-width:440px; }

/* Infographic hero — rings motif */
.hsp-infographic { position:relative; width:100%; aspect-ratio:1/1; max-width:420px; justify-self:end; }
.hsp-ring { position:absolute; border-radius:50%; border:1px solid rgba(16,185,129,.12); }
.hsp-ring--outer { inset:0; border-color:rgba(16,185,129,.06); }
.hsp-ring--mid { inset:15%; border-color:rgba(16,185,129,.1); }
.hsp-ring--core { inset:32%; border-color:rgba(16,185,129,.18); background:rgba(16,185,129,.03); }

/* Portfolio hero emblem (MA / E2M) — not security */
.hsp-hero-ma { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.hsp-hero-ma { opacity: .98; transform: scale(.92); }
.hsp-hero-ma .hs-svg--hero { width:80%; height:80%; overflow:visible; }

/* Primary CTA module under header (STA) */
.hsp-cta-module{
  margin-top: 1.35rem;
  padding: 1.1rem 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(140,255,210,.18);
  background: linear-gradient(180deg, rgba(12,20,34,.80), rgba(12,20,34,.46));
  box-shadow: 0 18px 42px rgba(0,0,0,.38);
}
/* Scan line animation */
.hsp-scan { position:absolute; inset:32%; border-radius:50%; overflow:hidden; }
.hsp-scan::after { content:''; position:absolute; top:50%; left:0; width:100%; height:1px; background:linear-gradient(90deg,transparent,#10b981,transparent); opacity:.3; animation:hspScan 8s linear infinite; }
@keyframes hspScan { 0%{transform:translateY(-50%) rotate(0deg)} 100%{transform:translateY(-50%) rotate(360deg)} }
/* Labels */
.hsp-ring-label { position:absolute; font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.35); white-space:nowrap; }
.hsp-ring-label--48h { top:38%; right:-12px; transform:translateX(100%); color:#10b981; }
.hsp-ring-label--weekly { top:18%; right:5%; }
.hsp-ring-label--monthly { top:2%; right:15%; }
/* Tool tags on rings */
.hsp-tool-tag { position:absolute; font-size:.58rem; font-weight:500; color:rgba(255,255,255,.5); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); padding:3px 10px; border-radius:6px; white-space:nowrap; }
.hsp-tool-tag:nth-child(1) { bottom:38%; right:55%; }
.hsp-tool-tag:nth-child(2) { bottom:28%; right:30%; }
.hsp-tool-tag:nth-child(3) { bottom:18%; right:45%; }
.hsp-tool-tag:nth-child(4) { bottom:10%; right:20%; }
.hsp-tool-tag:nth-child(5) { bottom:3%; right:35%; }

/* Section divider */
.hsp-divider { width:100%; height:1px; background:rgba(255,255,255,.06); margin:3rem 0; position:relative; }
.hsp-divider::before { content:attr(data-label); position:absolute; left:0; top:50%; transform:translateY(-50%); background:linear-gradient(90deg,#0b1120,#070a14); padding-right:1.25rem; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.15em; color:rgba(255,255,255,.3); }

/* Why it exists — 3 icon blocks */
.hsp-why { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-bottom:0; text-align:center; }
.hsp-why-item { display:flex; flex-direction:column; align-items:center; }
.hsp-why-icon { width:64px; height:64px; border-radius:50%; background:rgba(16,185,129,.06); border:1px solid rgba(16,185,129,.1); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.hsp-why-icon svg { width:28px; height:28px; stroke:#10b981; fill:none; stroke-width:1.5; }
.hsp-why-label { font-family:'DM Sans',sans-serif; font-size:1.05rem; font-weight:700; color:#fff; margin-bottom:.4rem; }
.hsp-why-desc { font-size:.82rem; color:rgba(255,255,255,.4); line-height:1.5; max-width:240px; }

/* Access model */
.hsp-access { margin-bottom:0; }
.hsp-access-text { font-size:1.02rem; color:rgba(255,255,255,.70); line-height:1.6; margin:0 0 1rem; max-width:680px; }
.hsp-access-cta { display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; margin:0 0 .6rem; }

.hsp-btn-primary,
.hsp-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: .9rem 1.35rem;
  border-radius: 999px;
  font-family:'DM Sans',sans-serif;
  font-size: .95rem;
  font-weight: 700;
  text-decoration:none;
  transition: all .25s;
}

.hsp-btn-primary{
  color: rgba(10,18,30,.96);
  background: rgba(160,255,205,.92);
  border: 1px solid rgba(160,255,205,.55);
  box-shadow: 0 16px 34px rgba(0,0,0,.40);
}
.hsp-btn-primary:hover{ filter: brightness(1.03); transform: translateY(-1px); }

.hsp-btn-secondary{
  color: rgba(235,245,255,.82);
  background: rgba(10,18,30,.35);
  border: 1px solid rgba(255,255,255,.12);
}
.hsp-btn-secondary:hover{ border-color: rgba(140,255,210,.22); color: rgba(255,255,255,.92); }

.hsp-access-helper { font-size:.92rem; color:rgba(255,255,255,.55); }

/* Why it matters — 3 blocks */
.hsp-matters { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; margin-bottom:0; }
.hsp-matter-icon { width:56px; height:56px; border-radius:50%; background:rgba(16,185,129,.05); border:1px solid rgba(16,185,129,.08); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; }
.hsp-matter-icon svg { width:24px; height:24px; stroke:#10b981; fill:none; stroke-width:1.5; }
.hsp-matter-label { font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:700; color:#fff; margin-bottom:.35rem; }
.hsp-matter-desc { font-size:.8rem; color:rgba(255,255,255,.4); line-height:1.5; max-width:260px; margin:0 auto; }

/* Inside the suite — time horizon rows */
.hsp-inside { margin-bottom:0; }
.hsp-horizon-row { display:grid; grid-template-columns:180px 1fr; gap:1.5rem; align-items:center; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.05); }
.hsp-horizon-row:last-child { border-bottom:none; }
.hsp-horizon-label { display:flex; align-items:center; gap:8px; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:#10b981; }
.hsp-horizon-dot { width:6px; height:6px; border-radius:50%; background:#10b981; flex-shrink:0; }
.hsp-horizon-tools { font-size:.85rem; color:rgba(255,255,255,.5); }

/* Ethics */
.hsp-ethics { max-width:700px; }
.hsp-ethics-text { font-size:.88rem; color:rgba(255,255,255,.4); line-height:1.65; margin-bottom:.5rem; }
.hsp-ethics-micro { font-size:.7rem; color:rgba(255,255,255,.25); font-style:italic; }

/* Responsive */
@media (max-width: 980px){
  .hsp-inner{ padding: 0 1.5rem; }
  .hsp-hero{ grid-template-columns: 1fr; gap: 1.75rem; }
  .hsp-infographic{ justify-self: start; max-width: 360px; }
  .hsp-access-cta{ width: 100%; }
  .hsp-btn-primary, .hsp-btn-secondary{ width: 100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .hsp-scan::after { animation:none; } }


/* CTA module as full-width row under HS hero */
.hsp-cta-wide{
  margin-top: 1.0rem;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.hsp-cta-wide .hsp-cta-module{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: .85rem 1.1rem; /* slimmer */
  border-radius: 16px;
}
.hsp-cta-wide .hsp-access-text{
  margin:0;
  font-size: 1.02rem;
  line-height: 1.5;
  max-width: 70ch;
}
.hsp-cta-wide .hsp-access-helper{
  margin-top: .35rem;
  font-size: .92rem;
}
.hsp-cta-wide .hsp-access-cta{
  margin-left:auto;
  display:flex;
  gap: .65rem;
  align-items:center;
  flex: 0 0 auto;
}
@media (max-width: 980px){
  .hsp-cta-wide .hsp-cta-module{ flex-direction: column; align-items: flex-start; }
  .hsp-cta-wide .hsp-access-cta{ width:100%; }
  .hsp-cta-wide .hsp-btn-primary, .hsp-cta-wide .hsp-btn-secondary{ width:100%; justify-content:center; }
}

/* ================================================
   ANDROID / MOBILE FIXES — v15
   Prevents overflow, fixes vh, improves tap targets
================================================ */

/* Infographic: never exceed viewport width */
.hsp-infographic {
  max-width: min(420px, 100%);
  overflow: hidden;
}

/* Section: no horizontal overflow on any device */
.hsp {
  overflow-x: hidden;
}

/* Rings: contain within parent, never overflow */
.hsp-ring {
  max-width: 100%;
  max-height: 100%;
}

/* Access CTA buttons: ensure minimum tap size on mobile */
@media (max-width: 768px) {
  .hsp-btn-primary,
  .hsp-btn-secondary {
    min-height: 48px;
    font-size: 1rem;
    padding: 1rem 1.5rem;
  }

  .hsp-inner {
    padding: 0 1.25rem;
  }

  .hsp-hero {
    gap: 1.25rem;
    margin-bottom: 2.5rem;
  }

  .hsp-infographic {
    max-width: min(320px, 90vw);
    justify-self: center;
  }

  .hsp-why,
  .hsp-matters {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hsp-why-desc,
  .hsp-matter-desc {
    max-width: 100%;
  }

  .hsp-cta-wide .hsp-cta-module {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .hsp-title {
    font-size: clamp(1.9rem, 7vw, 2.6rem);
  }

  .hsp-infographic {
    max-width: min(280px, 85vw);
  }
}