/* HERO */
.hero { min-height:100vh; display:grid; grid-template-columns:1.2fr 0.8fr; align-items:center; padding:8rem 4rem 5rem; position:relative; overflow:hidden; gap:2rem; }
.hero-bg-glow { position:absolute; right:-10vw; top:50%; transform:translateY(-50%); width:50vw; height:50vw; border-radius:50%; background:radial-gradient(circle at center, rgba(29,158,117,0.1) 0%, transparent 70%); pointer-events:none; z-index: 0; }
.hero-content { position: relative; z-index: 1; }
.hero-eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:0.22em; color:var(--teal); text-transform:uppercase; margin-bottom:2rem; opacity:0; animation:fadeUp 0.8s 0.2s forwards; display: inline-block; padding: 0.3rem 0.8rem; background: var(--teal-pale); border-radius: 20px; }
.hero-title { font-family:var(--serif); font-size:clamp(3rem,5vw,5rem); font-weight:300; line-height:1.1; color:var(--ink); margin-bottom:1.5rem; opacity:0; animation:fadeUp 0.8s 0.35s forwards; }
.hero-title em { font-style:italic; color:var(--teal); }
.hero-sub { font-size:18px; color:var(--gray); max-width:500px; line-height:1.85; margin-bottom:3rem; opacity:0; animation:fadeUp 0.8s 0.5s forwards; }
.hero-cards { display:grid; grid-template-columns:1fr 1fr; gap:1rem; opacity:0; animation:fadeUp 0.8s 0.65s forwards; }
.hero-card { padding:1.5rem; border:1px solid rgba(29,158,117,0.2); border-radius: 8px; text-decoration:none; color:var(--ink); transition:all 0.3s ease; background: var(--white); box-shadow: 0 4px 20px rgba(0,0,0,0.02); }
.hero-card:hover { border-color:var(--teal); background:var(--white); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(29,158,117,0.1); }
.hero-card-tag { font-family:var(--mono); font-size:10px; letter-spacing:0.18em; color:var(--teal); text-transform:uppercase; margin-bottom:0.75rem; display:block; }
.hero-card-title { font-size:15px; font-weight:500; margin-bottom:0.5rem; color: var(--ink); }
.hero-card-desc { font-size:13px; color:var(--gray); line-height:1.5; }
.hero-card-arrow { font-size:18px; color:var(--teal); margin-top:1rem; display:block; transition:transform 0.3s; }
.hero-card:hover .hero-card-arrow { transform:translateX(6px); }

/* HERO VISUAL */
.hero-visual { display:flex; justify-content:center; align-items:center; opacity:0; animation:fadeIn 1.2s 0.4s forwards; position: relative; z-index: 1; min-height: 520px; }
.hero-network { position:absolute; inset:50% auto auto 50%; width:min(980px,70vw); aspect-ratio: 980 / 520; transform:translate(-61%,-50%); pointer-events:none; opacity:1; overflow:visible; }
.hero-network::before { content:''; position:absolute; inset:-8%; border-radius:50%; background:radial-gradient(ellipse at 54% 50%, rgba(93,202,165,0.2), rgba(248,201,121,0.08) 36%, transparent 72%); filter:blur(1px); }
.hero-network-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.network-origin { display:none; }
.hero-logo-wrap { position:relative; z-index:2; width:min(300px,32vw); opacity:1; transform:scale(1); transition:opacity 0.9s ease, transform 0.9s ease; }
.network-intro-active .hero-logo-wrap { opacity:1; transform:scale(1); }
.network-intro-active .hero-logo-wrap.visible { opacity:1; transform:scale(1); }
.hero-logo-wrap img { width:100%; height:auto; animation: float 6s ease-in-out infinite; filter: drop-shadow(0 18px 32px rgba(15,110,86,0.18)); }
.hero-orbit { position:absolute; inset:-15%; border-radius:50%; border:1px dashed rgba(29,158,117,0.3); animation:rotate-slow 30s linear infinite; pointer-events:none; }
.hero-orbit::before { content:''; position:absolute; top:8%; left:50%; width:10px; height:10px; border-radius:50%; background:var(--teal); transform:translateX(-50%); animation:pulse 2s ease-in-out infinite; box-shadow: 0 0 15px var(--teal); }
.hero-orbit::after { content:''; position:absolute; bottom:15%; right:10%; width:6px; height:6px; border-radius:50%; background:var(--teal-light); animation:pulse 3s ease-in-out infinite; box-shadow: 0 0 10px var(--teal-light); }

/* TICKER */
.ticker { background:var(--ink); padding:1rem 0; overflow:hidden; white-space:nowrap; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
.ticker-inner { display:inline-block; animation:ticker 35s linear infinite; font-family:var(--mono); font-size:11px; letter-spacing:0.15em; color:rgba(255,255,255,0.5); text-transform: uppercase; }
.ticker-inner span { color:var(--teal-light); margin:0 1.5rem; }

/* ABOUT */
.about { padding:8rem 4rem; max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center; }
.about-body { color:var(--ink-mid); font-size:16px; line-height:1.9; margin-bottom:1.2rem; }
.about-visual { position:relative; }
.about-visual svg { width:100%; max-width:400px; display:block; margin:0 auto; filter: drop-shadow(0 10px 20px rgba(29,158,117,0.1)); }
.about-visual g[fill] circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: node-vibrate 2.8s ease-in-out infinite !important;
}
.about-visual g[fill] circle:nth-child(2n) { animation-name: node-vibrate-alt !important; animation-duration: 3.2s !important; }
.about-visual g[fill] circle:nth-child(3n) { animation-delay: -0.8s !important; }
.about-visual g[fill] circle:nth-child(4n) { animation-delay: -1.4s !important; }
.about-visual g[fill] circle:nth-child(5n) { animation-duration: 2.4s !important; }
.about-visual g[stroke] path {
  animation: line-breathe 4.5s ease-in-out infinite;
}
.about-visual g[stroke] path:nth-child(2n) { animation-delay: -1.2s; }
.about-visual g[stroke] path:nth-child(3n) { animation-delay: -2.1s; }

@keyframes node-vibrate {
  0%, 100% { opacity:0.72; transform:translate(0, 0) scale(1); }
  25% { opacity:1; transform:translate(1.5px, -1px) scale(1.12); }
  50% { opacity:0.82; transform:translate(-1px, 1.5px) scale(0.96); }
  75% { opacity:0.95; transform:translate(1px, 1px) scale(1.06); }
}
@keyframes node-vibrate-alt {
  0%, 100% { opacity:0.62; transform:translate(0, 0) scale(1); }
  30% { opacity:0.95; transform:translate(-1.3px, -1.2px) scale(1.1); }
  60% { opacity:0.78; transform:translate(1.2px, 1.4px) scale(0.98); }
  82% { opacity:1; transform:translate(-0.8px, 1px) scale(1.08); }
}
@keyframes line-breathe {
  0%, 100% { opacity:0.42; }
  50% { opacity:0.82; }
}

/* FEATURES */
.features { padding: 8rem 4rem; background: var(--white); }
.features-inner { max-width: 1200px; margin: 0 auto; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 4rem; }
.feature-card { padding: 2.5rem 2rem; background: var(--gray-light); border-radius: 12px; transition: all 0.3s; border: 1px solid transparent; }
.feature-card:hover { background: var(--white); border-color: var(--teal-light); box-shadow: 0 15px 35px rgba(29,158,117,0.08); transform: translateY(-5px); }
.feature-icon { width: 50px; height: 50px; background: var(--teal-pale); color: var(--teal); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; box-shadow: inset 0 0 0 1px rgba(29,158,117,0.08); transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; }
.feature-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feature-icon svg circle,
.feature-icon svg rect { fill: none; }
.feature-icon svg circle { stroke: currentColor; }
.feature-card:hover .feature-icon { background: rgba(29,158,117,0.1); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(29,158,117,0.12), inset 0 0 0 1px rgba(29,158,117,0.16); }
.feature-card:hover .feature-icon svg { animation: feature-icon-breathe 1.8s ease-in-out infinite; }
@keyframes feature-icon-breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.06); opacity: 1; }
}
.feature-title { font-family: var(--sans); font-size: 18px; font-weight: 500; margin-bottom: 1rem; color: var(--ink); }
.feature-desc { font-size: 14px; color: var(--gray); line-height: 1.7; }

/* AUDIENCES */
.audiences { padding:8rem 4rem; background:var(--ink); color: var(--white); position: relative; overflow: hidden; }
.audiences::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 80% 20%, rgba(29,158,117,0.15) 0%, transparent 60%); pointer-events: none; }
.audiences-inner { max-width:1200px; margin:0 auto; position: relative; z-index: 1; }
.audiences-header { text-align:center; margin-bottom:5rem; }
.audiences-header .section-label { background: rgba(29,158,117,0.2); }
.audiences-header p { color:rgba(255,255,255,0.6); font-size:16px; max-width:600px; margin:0 auto; }
.audiences-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.audience-card { background:rgba(255,255,255,0.03); padding:3.5rem 3rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); position:relative; transition: all 0.3s ease; backdrop-filter: blur(10px); }
.audience-card:hover { border-color: var(--teal); background: rgba(29,158,117,0.05); transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.audience-badge { display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:0.2em; color:var(--teal-light); border:1px solid var(--teal-light); padding:0.4rem 1rem; border-radius: 20px; text-transform:uppercase; margin-bottom:1.75rem; }
.audience-title { font-family:var(--serif); font-size:2rem; font-weight:300; line-height:1.25; margin-bottom:1.5rem; }
.audience-body { font-size:15px; color:rgba(255,255,255,0.7); line-height:1.85; margin-bottom:2.5rem; }
.audience-tags { display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:3rem; }
.audience-tag { font-family:var(--mono); font-size:11px; letter-spacing:0.08em; padding:0.4rem 0.8rem; background:rgba(255,255,255,0.05); color:var(--white); border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); }
.btn-primary { display:inline-block; font-family:var(--sans); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; background:var(--teal); color:var(--white); padding:1rem 2.5rem; border-radius: 6px; text-decoration:none; font-weight:500; transition:all 0.3s; border:none; cursor:pointer; box-shadow: 0 4px 15px rgba(29,158,117,0.3); }
.btn-primary:hover { background:var(--teal-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(29,158,117,0.5); }
.btn-outline { display:inline-block; font-family:var(--sans); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; background:transparent; color:var(--white); padding:1rem 2.5rem; border-radius: 6px; text-decoration:none; font-weight:500; border:1px solid var(--white); transition:all 0.3s; }
.btn-outline:hover { background:var(--white); color:var(--ink); transform: translateY(-2px); }

/* HOW IT WORKS */
.how { padding:8rem 4rem; max-width:1200px; margin:0 auto; }
.how-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:5rem; flex-wrap: wrap; gap: 2rem; }
.how-header p { max-width: 400px; }
.how-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; position: relative; }
.how-step { background:var(--white); padding:2.5rem 2rem; border-radius: 12px; border: 1px solid rgba(29,158,117,0.1); position:relative; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.03); z-index: 1; }
.how-step:hover { border-color: var(--teal); box-shadow: 0 15px 30px rgba(29,158,117,0.1); transform: translateY(-5px); }
.how-num { font-family:var(--serif); font-size:4rem; font-weight:300; color:var(--teal-pale); line-height:1; margin-bottom:1.5rem; display:block; transition: color 0.3s; }
.how-step:hover .how-num { color: var(--teal); }
.how-name { font-size:16px; font-weight:500; margin-bottom:1rem; color: var(--ink); }
.how-desc { font-size:14px; color:var(--gray); line-height:1.7; }

/* PLANES */
.pricing { padding: 8rem 4rem; background: var(--gray-light); }
.pricing-inner { max-width: 1200px; margin: 0 auto; }
.pricing-header { text-align: center; margin-bottom: 5rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.price-card { background: var(--white); padding: 3rem 2.5rem; border-radius: 16px; text-align: center; transition: all 0.3s; border: 1px solid rgba(0,0,0,0.05); }
.price-card.featured { border: 2px solid var(--teal); box-shadow: 0 20px 40px rgba(29,158,117,0.15); transform: scale(1.05); }
.price-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.price-card.featured:hover { transform: scale(1.05) translateY(-5px); }
.price-tag { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; color: var(--teal); background: var(--teal-pale); padding: 0.4rem 1rem; border-radius: 20px; text-transform: uppercase; margin-bottom: 1.5rem; }
.price-title { font-family: var(--serif); font-size: 2rem; font-weight: 300; margin-bottom: 1rem; color: var(--ink); }
.price-desc { font-size: 14px; color: var(--gray); margin-bottom: 2rem; line-height: 1.6; }
.price-features { list-style: none; text-align: left; margin-bottom: 3rem; }
.price-features li { font-size: 14px; color: var(--ink-mid); padding: 0.8rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; gap: 0.8rem; }
.price-features li::before { content: '✓'; color: var(--teal); font-weight: bold; }

/* VALUES */
.values { padding:8rem 4rem; background: var(--white); }
.values-inner { max-width:1200px; margin:0 auto; }
.values-header { text-align:center; margin-bottom:5rem; }
.values-sub { color:var(--gray); font-size:16px; max-width:600px; margin:0 auto; line-height: 1.8; }
.values-list { display:grid; grid-template-columns:repeat(4,1fr); gap:3rem; }
.value-item { text-align:center; padding: 2rem; border-radius: 12px; transition: all 0.3s; }
.value-item:hover { background: var(--gray-light); }
.value-dot { width:60px; height:60px; border-radius:50%; background: var(--teal-pale); display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; color:var(--teal); font-family:var(--mono); font-size:14px; font-weight: bold; }
.value-name { font-size:18px; font-weight:500; margin-bottom:1rem; color: var(--ink); }
.value-desc { font-size:14px; color:var(--gray); line-height:1.7; }

/* MANIFESTO */
.manifesto { background:var(--ink); color:var(--white); padding:10rem 4rem; text-align:center; position:relative; overflow:hidden; }
.manifesto::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(29,158,117,0.15) 0%, transparent 60%); pointer-events:none; }
.manifesto-quote { font-family:var(--serif); font-size:clamp(2rem,4vw,3.5rem); font-weight:300; line-height:1.4; max-width:900px; margin:0 auto 3rem; font-style:italic; color:rgba(255,255,255,0.95); position:relative; z-index: 1; }
.manifesto-sub { font-family:var(--mono); font-size:12px; letter-spacing:0.25em; color:var(--teal-light); text-transform:uppercase; position:relative; z-index: 1; }

/* FAQ */
.faq { padding: 8rem 4rem; background: var(--white); }
.faq-inner { max-width: 800px; margin: 0 auto; }
.faq-header { text-align: center; margin-bottom: 4rem; }
.faq-list { display: flex; flex-direction: column; gap: 1rem; }
details { background: var(--gray-light); border-radius: 8px; overflow: hidden; transition: all 0.3s; }
summary { padding: 1.5rem 2rem; font-size: 16px; font-weight: 500; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--ink); }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-size: 20px; color: var(--teal); transition: transform 0.3s; }
details[open] summary::after { transform: rotate(45deg); }
details[open] { background: var(--teal-pale); }
.faq-content { padding: 0 2rem 1.5rem; color: var(--ink-mid); font-size: 15px; line-height: 1.8; }

/* CTA */
.cta-section { background:var(--ink); padding:8rem 4rem; text-align:center; position:relative; overflow:hidden; }
.cta-rings { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; z-index: 0; }
.cta-ring { border-radius:50%; border:1px dashed rgba(29,158,117,0.2); position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); animation: rotate-slow 40s linear infinite; }
.cta-inner { position:relative; z-index:2; }
.cta-title { font-family:var(--serif); font-size:clamp(3rem,5vw,4.5rem); font-weight:300; font-style:italic; color:var(--white); margin-bottom:1.5rem; line-height:1.2; }
.cta-body { color:rgba(255,255,255,0.6); font-size:16px; max-width:500px; margin:0 auto 3rem; line-height:1.8; }
.cta-form { display:flex; max-width:450px; margin:0 auto; border:1px solid rgba(29,158,117,0.5); border-radius: 30px; overflow: hidden; background: rgba(255,255,255,0.05); backdrop-filter: blur(5px); }
.cta-form input { flex:1; background:transparent; border:none; padding:1.2rem 1.5rem; font-family:var(--sans); font-size:14px; color:var(--white); outline:none; }
.cta-form input::placeholder { color:rgba(255,255,255,0.4); }
.cta-form button { background:var(--teal); border:none; padding:1.2rem 2.5rem; cursor:pointer; font-family:var(--sans); font-size:13px; font-weight: 500; letter-spacing:0.1em; color:var(--white); text-transform:uppercase; transition:background 0.3s; }
.cta-form button:hover { background:var(--teal-light); }

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 10rem; }
  .hero-sub { margin: 0 auto 3rem; }
  .hero-bg-glow { right: 50%; transform: translate(50%, -50%); width: 80vw; height: 80vw; }
  .hero-visual { margin-top: 3rem; }
  .hero-network { width:min(760px,96vw); transform:translate(-50%,-50%); }
  .hero-logo-wrap { width:min(280px,58vw); }
  .network-intro-active .hero-logo-wrap { transform:scale(1); }
  .about { grid-template-columns: 1fr; text-align: center; gap: 3rem; }
  .about-visual { order: -1; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .audiences-grid { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .price-card.featured { transform: scale(1); }
  .price-card.featured:hover { transform: translateY(-10px); }
  .values-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  section { padding: 5rem 2rem; }
  .hero { padding: 8rem 2rem 4rem; }
  .hero-visual { min-height: 360px; }
  .hero-title { font-size: 2.5rem; }
  .hero-cards { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; }
  .values-list { grid-template-columns: 1fr; }
  
  .cta-form { flex-direction: column; border-radius: 12px; border: none; background: transparent; }
  .cta-form input { border-radius: 8px; margin-bottom: 1rem; border: 1px solid rgba(255,255,255,0.2); }
  .cta-form button { border-radius: 8px; }
}