/* GoSecureShare — Public Website Styles
   Source of truth: publicweb/assets/css/landing.css
   Referenced by:   publicweb/index.html
*/

:root { --accent:#34d399; --accent-light:#a7f3d0; --accent-glow:rgba(52,211,153,0.18); }
* { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background-color:#020617; color:#f8fafc; overflow-x:hidden; }
.bg-accent { background-color:var(--accent); color:#020617; }
.bg-accent:hover { background-color:#6ee7b7; }
.text-accent { color:var(--accent); }
.border-accent { border-color:var(--accent); }
.glass-panel { background:rgba(15,23,42,0.65); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,0.07); }
.bento-card { transition:all 0.3s ease; }
.bento-card:hover { transform:translateY(-4px); background:rgba(30,41,59,0.85); border-color:rgba(52,211,153,0.28); box-shadow:0 12px 40px -10px rgba(52,211,153,0.12); }
.gradient-text { background:linear-gradient(135deg,#f8fafc 0%,#94a3b8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gradient-text-green { background:linear-gradient(135deg,#34d399 0%,#059669 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.glow-green { box-shadow:0 0 30px var(--accent-glow); }
.tag-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:99px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
.shine-border { position:relative; }
.shine-border::before { content:''; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(135deg,rgba(52,211,153,0.4),transparent 60%,rgba(99,102,241,0.3)); pointer-events:none; z-index:0; }
.shine-border > * { position:relative; z-index:1; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease,transform 0.6s ease; }
.reveal.visible { opacity:1; transform:none; }
.stat-card { background:rgba(15,23,42,0.8); border:1px solid rgba(52,211,153,0.15); }
.logo-banner { height:36px; width:auto; flex-shrink:0; }
.brand-name { font-size:1.3rem; font-weight:900; letter-spacing:-0.02em; white-space:nowrap; }
.brand-name .go-secure { color:#f1f5f9; }
.brand-name .share { color:var(--accent); }
.install-step { counter-increment:step; }
.install-step::before { content:counter(step); display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#020617; font-weight:900; font-size:13px; flex-shrink:0; margin-right:12px; }
.install-steps { counter-reset:step; }
.code-block { background:#0d1117; border:1px solid rgba(52,211,153,0.2); border-radius:12px; padding:14px 18px; font-family:'Courier New',monospace; font-size:13px; color:#34d399; white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word; overflow-x:auto; box-sizing:border-box; width:100%; max-width:100%; }
@media(max-width:480px) { .code-block { font-size:11.5px; padding:12px 14px; } }

/* ── HERO PARTICLES CANVAS ── */
#particleCanvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }

/* ── HERO MINI FLOW (kept compact inside hero) ── */
#heroFlow { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; width:100%; }
@media (min-width: 640px) { #heroFlow { flex-direction:row; } }
.flow-node { opacity:0; transform:translateY(16px); transition:opacity 0.5s ease, transform 0.5s ease; }
.flow-node.visible { opacity:1; transform:none; }
.flow-node:nth-child(1) { transition-delay:0.1s; }
.flow-node:nth-child(2) { transition-delay:0.35s; }
.flow-node:nth-child(3) { transition-delay:0.6s; }
.flow-node:nth-child(4) { transition-delay:0.85s; }
.flow-node:nth-child(5) { transition-delay:1.1s; }
.flow-box { background:rgba(15,23,42,0.8); border:1px solid rgba(52,211,153,0.25); border-radius:16px; padding:16px 20px; text-align:center; width:100%; max-width:320px; }
@media (min-width: 640px) { .flow-box { width:auto; min-width:130px; max-width:none; } }
.flow-arrow { display:flex; align-items:center; justify-content:center; }
.flow-arrow .arrow-mobile { display:block; width:16px; height:36px; margin:4px 0; }
.flow-arrow .arrow-desktop { display:none; width:36px; height:16px; margin:0 6px; }
@media (min-width: 640px) { .flow-arrow .arrow-mobile { display:none; } .flow-arrow .arrow-desktop { display:block; } }
.flow-arrow path { stroke:#34d399; stroke-width:2; fill:none; stroke-dasharray:48; stroke-dashoffset:48; }
.flow-node.visible .flow-arrow path { stroke-dashoffset:0; transition:stroke-dashoffset 0.5s ease; }
.flow-destroy { animation:popExplode 0.6s ease 1.4s both; }
@keyframes popExplode { 0%{transform:scale(1);} 60%{transform:scale(1.2);} 80%{transform:scale(0.9);} 100%{transform:scale(1);} }

/* ── STAT RINGS ──
   Circumference of r=24 circle = 2π×24 ≈ 150.796
   Using 150.8 so fill=1 (TOTP, AES-256, Zero-cloud) draws an exact full circle.
   JS uses this same value: offset = 150.8 * (1 - fill)
*/
.stat-ring { position:relative; width:56px; height:56px; margin:0 auto 8px; }
.stat-ring svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.stat-ring circle.track { stroke:rgba(52,211,153,0.1); fill:none; stroke-width:3; }
.stat-ring circle.prog { stroke:#34d399; fill:none; stroke-width:3; stroke-linecap:round; stroke-dasharray:150.8; stroke-dashoffset:150.8; transition:stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1); }
.stat-ring .stat-icon { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }

/* ── ROADMAP SVG LINE ── */
#roadmapLine { position:absolute; left:19px; top:0; height:100%; width:2px; pointer-events:none; }
#roadmapLinePath { stroke:url(#roadmapGrad); stroke-width:2; fill:none; stroke-dasharray:1000; stroke-dashoffset:1000; transition:stroke-dashoffset 2s ease; }
.roadmap-dot-anim { transform:scale(0); transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.roadmap-dot-anim.pop { transform:scale(1); }
.check-path { stroke-dasharray:30; stroke-dashoffset:30; transition:stroke-dashoffset 0.5s ease 0.2s; }
.check-path.drawn { stroke-dashoffset:0; }

/* ── GOVERNANCE TICKS ── */
.gov-check { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0; }
.gov-check svg .chk { stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset 0.4s ease; }
.gov-check.ticked svg .chk { stroke-dashoffset:0; }

/* ── INSTALL CONNECTOR ── */
.install-connector { position:relative; }
.install-connector::before { content:''; position:absolute; left:13px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,rgba(52,211,153,0.4),rgba(52,211,153,0.05)); transform:scaleY(0); transform-origin:top; transition:transform 0.8s ease; }
.install-connector.drawn::before { transform:scaleY(1); }
.install-step-card { opacity:0; transform:translateX(-20px); transition:opacity 0.5s ease, transform 0.5s ease; }
.install-step-card.slide-in { opacity:1; transform:none; }

/* ── PRICING SHIMMER ── */
.pricing-shimmer { position:relative; overflow:hidden; }
.pricing-shimmer::after { content:''; position:absolute; top:-50%; left:-75%; width:50%; height:200%; background:linear-gradient(105deg,transparent 40%,rgba(52,211,153,0.12) 50%,transparent 60%); animation:shimmerSweep 3s ease-in-out infinite; pointer-events:none; }
@keyframes shimmerSweep { 0%{left:-75%;} 100%{left:125%;} }

/* ── WHY GSS ICON ANIMATIONS ── */
.icon-shield { animation:shieldPulse 3s ease-in-out infinite; }
@keyframes shieldPulse { 0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(52,211,153,0));} 50%{transform:scale(1.08);filter:drop-shadow(0 0 8px rgba(52,211,153,0.5));} }
.icon-verify { animation:verifyBounce 2.5s ease-in-out infinite; }
@keyframes verifyBounce { 0%,100%{transform:rotate(0deg);} 25%{transform:rotate(-8deg);} 75%{transform:rotate(8deg);} }
.icon-rocket { animation:rocketLift 2s ease-in-out infinite; }
@keyframes rocketLift { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }

/* ── PROBLEM BANNER ANIMATIONS ── */
.prob-icon-shake { animation:iconShake 4s ease-in-out infinite; }
@keyframes iconShake { 0%,90%,100%{transform:translateX(0);} 92%{transform:translateX(-3px);} 94%{transform:translateX(3px);} 96%{transform:translateX(-2px);} 98%{transform:translateX(2px);} }
.prob-border-pulse { animation:borderGlow 2s ease-in-out infinite; }
@keyframes borderGlow { 0%,100%{border-color:rgba(239,68,68,0.3);box-shadow:none;} 50%{border-color:rgba(239,68,68,0.7);box-shadow:0 0 12px rgba(239,68,68,0.15);} }

/* ── ROADMAP CHECK ICON ── */
.rm-check-icon { transform:scale(0); transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.rm-check-icon.popped { transform:scale(1); }
.inprogress-spin { animation:spinBorder 6s linear infinite; }
@keyframes spinBorder { to { transform:rotate(360deg); } }

/* ── GEO HIDDEN BLOCK ── */
.geo-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }


/* ════════════════════════════════════════════
   HOW IT WORKS — Full Section
   Mobile-first, animated workflow
════════════════════════════════════════════ */

/* Section wrapper */
#how-it-works { position:relative; overflow:hidden; }

/* Subtle grid background */
#how-it-works::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(52,211,153,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,211,153,0.03) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
  z-index:0;
}

/* ── Step cards layout ── */
.hiw-steps {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  position:relative;
  z-index:1;
}

@media(min-width:768px) {
  .hiw-steps {
    flex-direction:row;
    align-items:flex-start;
    gap:0;
  }
}

/* ── Individual step ── */
.hiw-step {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
  padding:0 8px 40px;
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.55s ease, transform 0.55s ease;
}
.hiw-step.hiw-visible { opacity:1; transform:none; }
.hiw-step:nth-child(1) { transition-delay:0.05s; }
.hiw-step:nth-child(2) { transition-delay:0.22s; }
.hiw-step:nth-child(3) { transition-delay:0.39s; }
.hiw-step:nth-child(4) { transition-delay:0.56s; }
.hiw-step:nth-child(5) { transition-delay:0.73s; }

/* ── Step number badge ── */
.hiw-num {
  width:28px; height:28px;
  border-radius:50%;
  background:rgba(52,211,153,0.12);
  border:1px solid rgba(52,211,153,0.35);
  color:var(--accent);
  font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  position:relative; z-index:2;
  flex-shrink:0;
}

/* ── Icon ring ── */
.hiw-icon-wrap {
  width:72px; height:72px;
  border-radius:50%;
  background:rgba(15,23,42,0.9);
  border:1.5px solid rgba(52,211,153,0.22);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  position:relative;
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
  flex-shrink:0;
}
.hiw-step:hover .hiw-icon-wrap {
  border-color:rgba(52,211,153,0.55);
  box-shadow:0 0 20px rgba(52,211,153,0.15);
}

/* Subtle pulse ring on icon */
.hiw-icon-wrap::after {
  content:'';
  position:absolute; inset:-6px;
  border-radius:50%;
  border:1px solid rgba(52,211,153,0.15);
  animation:hiwPulseRing 3s ease-in-out infinite;
  pointer-events:none;
}
.hiw-step:nth-child(2) .hiw-icon-wrap::after { animation-delay:0.5s; }
.hiw-step:nth-child(3) .hiw-icon-wrap::after { animation-delay:1s; }
@keyframes hiwPulseRing {
  0%,100%{ transform:scale(1); opacity:0.5; }
  50%{ transform:scale(1.08); opacity:1; }
}

/* ── Text ── */
.hiw-title {
  font-size:15px; font-weight:700; color:#f1f5f9;
  margin-bottom:8px;
  line-height:1.3;
}
.hiw-desc {
  font-size:12.5px; color:#64748b;
  line-height:1.6;
  max-width:180px;
}

/* ── Tech tag (e.g. "AES-256-GCM") ── */
.hiw-tag {
  display:inline-flex; align-items:center; gap:5px;
  margin-top:10px;
  padding:3px 9px;
  border-radius:99px;
  background:rgba(52,211,153,0.08);
  border:1px solid rgba(52,211,153,0.2);
  font-size:10px; font-weight:700;
  color:var(--accent);
  letter-spacing:0.06em;
  text-transform:uppercase;
}

/* ════════════════════════════════════════════
   CONNECTOR between steps
════════════════════════════════════════════ */

/* Mobile: vertical dashed line below icon */
.hiw-step:not(:last-child)::after {
  content:'';
  position:absolute;
  /* sits between bottom of icon-wrap and next step */
  left:50%;
  transform:translateX(-50%);
  width:2px;
  /* position: below icon-wrap (72px icon + 20px margin + 28px num + 16px margin = ~136px from top) */
  top:136px;
  height:calc(100% - 136px + 24px);
  background:linear-gradient(to bottom, rgba(52,211,153,0.4), rgba(52,211,153,0.04));
  clip-path: inset(0);
  z-index:0;
}

/* Desktop: horizontal dashed connector REPLACES vertical */
@media(min-width:768px) {
  .hiw-step:not(:last-child)::after {
    /* reset vertical */
    top:50px;
    left:calc(50% + 44px);
    transform:none;
    width:calc(100% - 88px);
    height:2px;
    background:linear-gradient(to right, rgba(52,211,153,0.45), rgba(52,211,153,0.05));
  }
}

/* ── Animated SVG arrow overlaid on connector (desktop only) ── */
.hiw-connector-svg {
  display:none;
}
@media(min-width:768px) {
  .hiw-connector-svg {
    display:block;
    position:absolute;
    top:44px;
    right:-16px;
    width:32px; height:14px;
    z-index:3;
    overflow:visible;
  }
  .hiw-connector-svg path {
    stroke:#34d399;
    stroke-width:2;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:40;
    stroke-dashoffset:40;
    transition:stroke-dashoffset 0.5s ease;
  }
  .hiw-step.hiw-visible .hiw-connector-svg path { stroke-dashoffset:0; }
}

/* ── Packet / data particle animation along connector (desktop) ── */
@media(min-width:768px) {
  .hiw-step:not(:last-child) {
    overflow:visible;
  }
  .hiw-packet {
    display:block;
    position:absolute;
    top:47px;
    left:calc(50% + 44px);
    width:7px; height:7px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 8px rgba(52,211,153,0.8);
    animation:packetTravel 2.4s cubic-bezier(0.4,0,0.6,1) infinite;
    opacity:0;
    z-index:4;
  }
  .hiw-step:nth-child(1) .hiw-packet { animation-delay:0.0s; }
  .hiw-step:nth-child(2) .hiw-packet { animation-delay:0.8s; }
  .hiw-step:nth-child(3) .hiw-packet { animation-delay:1.6s; }
  /* width of travel = 100% - 88px of step width, approximated in anim */
  @keyframes packetTravel {
    0%   { transform:translateX(0);   opacity:0; }
    5%   { opacity:1; }
    90%  { opacity:1; }
    100% { transform:translateX(calc(100vw / 3 - 100px)); opacity:0; }
  }
}
@media(max-width:767px) {
  .hiw-packet { display:none; }
}

/* Mobile packet: vertical */
@media(max-width:767px) {
  .hiw-step:not(:last-child) .hiw-packet-v {
    display:block;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:136px;
    width:6px; height:6px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 7px rgba(52,211,153,0.8);
    animation:packetTravelV 2s ease-in-out infinite;
    z-index:4;
  }
  @keyframes packetTravelV {
    0%   { transform:translateX(-50%) translateY(0);  opacity:0; }
    10%  { opacity:1; }
    85%  { opacity:1; }
    100% { transform:translateX(-50%) translateY(64px); opacity:0; }
  }
  .hiw-step:nth-child(1) .hiw-packet-v { animation-delay:0s; }
  .hiw-step:nth-child(2) .hiw-packet-v { animation-delay:0.7s; }
}
@media(min-width:768px) {
  .hiw-packet-v { display:none !important; }
}

/* ── Self-destruct step special effect ── */
.hiw-step-destruct .hiw-icon-wrap {
  border-color:rgba(239,68,68,0.35);
  background:rgba(30,10,10,0.85);
}
.hiw-step-destruct .hiw-icon-wrap::after {
  border-color:rgba(239,68,68,0.2);
  animation:hiwDestructRing 2s ease-in-out infinite;
}
@keyframes hiwDestructRing {
  0%,100%{ transform:scale(1); opacity:0.4; }
  50%{ transform:scale(1.12); opacity:0.9; }
}
.hiw-step-destruct .hiw-icon-wrap .material-symbols-outlined {
  animation:hiwDestructFlicker 3s ease-in-out infinite;
}
@keyframes hiwDestructFlicker {
  0%,94%,100%{ opacity:1; }
  95%{ opacity:0.3; }
  97%{ opacity:1; }
  99%{ opacity:0.5; }
}
.hiw-step-destruct .hiw-tag {
  background:rgba(239,68,68,0.08);
  border-color:rgba(239,68,68,0.3);
  color:#f87171;
}
.hiw-step-destruct .hiw-title { color:#fca5a5; }

/* Lock step encrypt style */
.hiw-step-encrypt .hiw-icon-wrap {
  border-color:rgba(99,102,241,0.4);
  background:rgba(10,10,30,0.9);
}
.hiw-step-encrypt .hiw-icon-wrap::after {
  border-color:rgba(99,102,241,0.2);
}
.hiw-step-encrypt .hiw-tag {
  background:rgba(99,102,241,0.08);
  border-color:rgba(99,102,241,0.3);
  color:#a5b4fc;
}
.hiw-step-encrypt .hiw-title { color:#c7d2fe; }

/* Share link step */
.hiw-step-share .hiw-tag {
  background:rgba(14,165,233,0.08);
  border-color:rgba(14,165,233,0.3);
  color:#7dd3fc;
}