/* =================== Globals & Locks =================== */
:root{
  --header-h: 0px;

  /* Brand tokens */
  --strv-text: #e7e9ee;
  --strv-muted: #bfc6d1;
  --strv-cyan: #22d3ee;
  --strv-purple: #818cf8;
  --strv-panel: rgba(10,12,22,.36);
  --strv-stroke: rgba(255,255,255,.08);
  --strv-shadow: 0 12px 48px rgba(0,0,0,.45);
  --strv-font: var(--e-global-typography-primary-font-family, "Protest Strike"), sans-serif;

  /* Globe layout knobs (desktop defaults) */
  --globe-center-x: 72vw;          /* where the sphere’s center sits horizontally */
  --globe-size-vw: 80vw;           /* overscan base vs width  */
  --globe-size-vh: 120vh;          /* overscan base vs height */
}

html.globe-lock,
body.globe-lock{
  height:100%;
  overflow:hidden !important;
  overscroll-behavior:none;
}

/* a11y helper */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,1px,1px);
  white-space:nowrap;border:0;
}

/* =================== Hero Section =================== */

.strivios-hero-globe{
  position:relative;
  width:100%;
  height:calc(100vh - var(--header-h));
  min-height:520px;
  overflow:hidden;                 /* contain the DOM, not the canvas */

  background:
    radial-gradient(1200px 700px at 85% 45%, rgba(34,211,238,.10), transparent 50%),
    radial-gradient(1100px 600px at 75% 60%, rgba(129,140,248,.10), transparent 60%),
    linear-gradient(180deg, #2a137f 0%, #1e0f5c 60%, #140a3b 100%);
  color:var(--strv-text);
  font-family:var(--strv-font);
}

/* WP admin bar adjustments */
body.admin-bar .strivios-hero-globe{ height:calc(100vh - var(--header-h) - 32px); }
@media (max-width:782px){
  body.admin-bar .strivios-hero-globe{ height:calc(100vh - var(--header-h) - 46px); }
}

/* =================== Grid Overlay =================== */
/* Visual content on top, but lets events pass through to the globe */
.hero-grid{
  position:relative;
  z-index:3;
  pointer-events:none;

  display:grid;
  grid-template-rows:auto 1fr;       /* mobile: stack */
  gap:clamp(16px, 2.5vw, 28px);
  height:100%;
  width:min(1400px, 94vw);
  margin:0 auto;
  padding:clamp(12px, 2.4vw, 24px) 0;
}

@media (min-width:992px){
  .hero-grid{
    grid-template-rows:unset;
    grid-template-columns:1fr 1fr;   /* left text / right empty column */
    gap:clamp(20px, 3vw, 40px);
    align-items:center;
  }
}

/* Left column stays interactive */
.hero-col.left,
.hero-col.left *{ pointer-events:auto; }

.hero-col.left{
  display:grid;
  align-content:center;
  justify-items:start;
  padding-inline:clamp(4px, 1vw, 10px);
  position: relative; /* needed for mobile overlay pseudo-element */
}

/* Right column is purely decorative (no events); height only influences layout on small screens */
.hero-col.right{
  pointer-events:none;
  min-height:52vh;
  background:transparent !important;
}

/* =================== Headline =================== */

.hero-headline{
  margin: 0;
  max-width: 18ch;
  font-weight: 800;
  line-height: 1.08;
  color: #F7F9FF !important;
  letter-spacing: 0;
  text-transform: none; /* important for readability */
  font-size: clamp(28px, 4.2vw, 56px) !important;
}

.hero-sub{
  margin-top: 14px;
  max-width: 46ch;
  font-size: clamp(15px, 1.35vw, 20px) !important;
  line-height: 1.55;
  opacity: .85;
  font-family: "Do Hyeon", Sans-Serif;
}

.hero-actions{
  margin-top: 22px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.hero-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  background: rgba(110,183,228,.18);
  font-family: "Do Hyeon", Sans-Serif;
  border: 1px solid rgba(110,183,228,.35);
  color: #fff;
  font-size: 20px;
}

.hero-link{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-family: "Do Hyeon", Sans-Serif;
  border-bottom: 1px solid rgba(255,255,255,.25);
  font-size: 20px;
}

@media (max-width: 767px){
  .hero-headline{ max-width: 100%; font-size: 28px; }
  .hero-sub{ max-width: 100%; }
}

/* =================== Globe (absolute, full-bleed) =================== */
/* IMPORTANT: #striviosGlobe lives inside .hero-col.right in the DOM,
   but we position it relative to the SECTION so it’s not boxed by the column. */
#striviosGlobe{
  position:absolute;                 /* pull out of the grid flow */
  z-index:1;                         /* behind text */
  top:50%;
  left:var(--globe-center-x);
  transform:translate(-50%, -50%);
  width:max(var(--globe-size-vh), var(--globe-size-vw));  /* overscan so sphere never hits edges */
  height:max(var(--globe-size-vh), var(--globe-size-vw));
  pointer-events:auto;
  background:transparent !important;
  overscroll-behavior:auto;
}

/* Canvas must fully fill the mount and remain interactive */
#striviosGlobe canvas{
  width:100% !important;
  height:100% !important;
  display:block;
  background:transparent !important;
  outline:none;
  touch-action: pan-x pan-y;
  overscroll-behavior: auto;
}

/* Elementor overlays/shapes should not block the globe */
.strivios-hero-globe .elementor-background-overlay,
.strivios-hero-globe .elementor-shape,
.strivios-hero-globe::before,
.strivios-hero-globe::after{ pointer-events:none !important; }

/* =================== Mobile tweaks =================== */
@media (max-width:991px){
  :root{
    --globe-center-x: 50vw;          /* center the sphere */
    --globe-size-vw: 110vw;          /* still overscanned */
    --globe-size-vh: 110vh;
  }
}

/* =================== Fallback (noscript) =================== */
.strivios-fallback{ padding:1rem; }
.strivios-fallback .countries{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

/* =================== Animations =================== */
@keyframes heroRise{
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* =================== MOBILE HERO: CLEANER, CENTERED, BETTER CTA HIERARCHY =================== */
@media (max-width: 767px){

  /* Stable mobile viewport height */
  .strivios-hero-globe{
    height: 100svh;
    min-height: 100svh;
  }

  /* Make the grid the centering engine (single row, center) */
  .hero-grid{
    height: 100%;
    width: min(1400px, 92vw);
    margin: 0 auto;
    padding: 0;                 /* remove push-down */
    display: grid;
    grid-template-rows: 1fr;
    align-items: center;        /* vertical centering */
  }

  /* Center whole left column perfectly */
  .hero-col.left{
    padding-top: 0 !important;
    padding-inline: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;    /* vertical inside column */
    align-items: center;        /* horizontal */
    text-align: center;
    gap: 10px;
  }



  /* Typography: tighter, more premium, less chunky */
  .hero-headline{
    font-size: 34px !important;
    line-height: 1.06;
    max-width: 18ch;
    margin: 0 auto;
    text-align: center;
  }

  /* Decorative bar off (looks weird centered) */
  .hero-headline::before{ display:none; }

  .hero-sub{
    font-size: 16px !important;
    line-height: 1.55;
    max-width: 34ch;
    margin: 10px auto 0;
    text-align: center;
    opacity: .88;
  }

  /* Micro-proof line (no HTML changes): inject after sub */
  .hero-sub::after{
    content: "Curated creators. No mass outreach. Clean reporting.";
    display: block;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255,255,255,.78);
  }

  /* CTA hierarchy: primary button obvious, secondary smaller + arrow */
  .hero-actions{
    margin-top: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .hero-cta{
    width: 100%;
    max-width: 310px;
    justify-content: center;
    padding: 14px 18px;
    font-size: 18px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
  }

  .hero-link{
    width: auto;
    text-align: center;
    border-bottom: none;
    font-size: 16px;
    opacity: .8;
    padding: 8px 0;
  }

  .hero-link::after{
    content:" \2192"; /* → */
    opacity: .85;
  }

  /* Globe becomes true background: less dominant, moved down */
  #striviosGlobe{
    top: 70%;
    left: 50%;
    width: 175vw;
    height: 175vw;
    opacity: .48;
    filter: contrast(.95) saturate(.9) brightness(.85);
    pointer-events: none !important; /* stop touch hijack */
  }

  #striviosGlobe canvas{
    pointer-events: none !important;
    touch-action: pan-y;
  }

  /* Optional: hide the DOM “right column” if it creates layout weirdness */
  .hero-col.right{
    display:none !important;
  }
}