:root {
  --accent:       #4f6cc4;
  --accent-light: #eef1fb;
  --accent-dark:  #3a54a8;
  --surface:      #f8f9ff;
  --text:         #1a1d2e;
  --muted:        #6b7280;
  --border:       #e5e8f5;
  --white:        #ffffff;
  --radius:       14px;
  --shadow-sm:    0 2px 12px rgba(79,108,196,.10);
  --shadow-md:    0 8px 32px rgba(79,108,196,.14);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--text); background: var(--white); overflow-x: hidden; }

/* TYPOGRAPHY */
.display-hero  { font-size: clamp(1.6rem,2.8vw,2.6rem); font-weight:800; line-height:1.2; letter-spacing:-.03em; }
.section-eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.section-title { font-size:clamp(1.7rem,3.5vw,2.6rem); font-weight:800; line-height:1.15; letter-spacing:-.025em; }

/* NAVBAR */
.navbar-gogahub { background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:.9rem 0; position:sticky; top:0; z-index:1000; }
.nav-link-custom { font-size:.875rem; font-weight:500; color:var(--muted)!important; padding:.4rem .85rem!important; transition:color .2s; text-decoration:none; }
.nav-link-custom:hover { color:var(--text)!important; }

/* LANG SWITCHER */
.lang-switcher { display:flex; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:2px; gap:2px; }
.lang-btn { background:transparent; border:none; border-radius:6px; padding:.3rem .45rem; cursor:pointer; transition:background .2s, opacity .2s; display:flex; align-items:center; opacity:.65; }
.lang-btn.active { background:var(--accent); opacity:1; }
.lang-btn .fi { width:20px; height:15px; background-size:cover; flex-shrink:0; border-radius:3px; }

/* BUTTONS */
.btn-accent { background:var(--accent); color:#fff; border:none; border-radius:10px; font-weight:600; font-size:.9rem; padding:.65rem 1.5rem; transition:background .2s,transform .15s,box-shadow .2s; box-shadow:0 4px 16px rgba(79,108,196,.3); white-space:nowrap; text-align:center; }
.btn-accent:hover { background:var(--accent-dark); color:#fff; transform:translateY(-1px); box-shadow:0 6px 20px rgba(79,108,196,.4); }
.btn-outline-accent { border:1.5px solid rgba(79,108,196,.4); background:rgba(255,255,255,.75); backdrop-filter:blur(8px); color:var(--text); border-radius:10px; font-weight:600; font-size:.9rem; padding:.65rem 1.5rem; transition:border-color .2s,background .2s,box-shadow .2s; white-space:nowrap; }
.btn-outline-accent:hover { border-color:var(--accent); color:var(--accent); background:rgba(255,255,255,.95); box-shadow:0 4px 16px rgba(79,108,196,.15); }

/* HERO */
.hero-section { background:linear-gradient(135deg, #ddeeff 0%, #e8f2ff 30%, #f0f6ff 55%, #ffffff 100%); padding:1.5rem 0 0; overflow:hidden; position:relative; min-height:600px; }
.hero-bg-anim { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.hero-bubble {
  position: absolute;
  border-radius: 50%;
  animation: bubbleFloat ease-in-out infinite alternate;
}
@keyframes bubbleFloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(var(--tx, 20px), var(--ty, -30px)) scale(var(--ts, 1.08)); }
}
.hero-section > * { position:relative; z-index:1; }
.hero-badge { display:inline-flex; align-items:center; gap:.4rem; background:var(--accent-light); color:var(--accent); font-size:.78rem; font-weight:600; padding:.35rem 1rem; border-radius:100px; margin-bottom:1.4rem; white-space:nowrap; }
.dashboard-mockup { background:var(--white); border-radius:18px; box-shadow:var(--shadow-md),0 0 0 1px var(--border); overflow:hidden; }
.mockup-topbar { background:var(--surface); border-bottom:1px solid var(--border); padding:.6rem 1rem; display:flex; align-items:center; gap:.5rem; }
.mockup-dot { width:10px; height:10px; border-radius:50%; }
.stars { color:#f59e0b; font-size:.85rem; margin-bottom:.9rem; }

/* TRUST STRIP */
.hero-trust-strip {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .85rem 1.1rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow-sm);
}
.trust-item { display: flex; align-items: center; gap: .55rem; flex: 1; }
.trust-icon { width: 34px; height: 34px; min-width: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: .95rem; }
.trust-label { font-size: .78rem; font-weight: 700; color: var(--text); line-height: 1.2; white-space: nowrap; }
.trust-sub { font-size: .65rem; color: var(--muted); line-height: 1.2; white-space: nowrap; }
.trust-divider { width: 1px; height: 32px; background: var(--border); flex-shrink: 0; }
@media (max-width: 500px) {
  .hero-trust-strip { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .trust-divider { display: none; }
  .trust-label, .trust-sub { white-space: normal; }
}

/* TYPED ANIMATION */
#typed-word-wrapper { display: inline; white-space: nowrap; }
#typed-word { color: #8a9ab8; font-weight: 800; }
.typed-cursor { display: inline-block; color: #8a9ab8; font-weight: 300; animation: blink .7s step-end infinite; margin-left: 1px; }
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* HERO MOSAIC CAROUSEL */
.hero-mosaic { display: flex; gap: .5rem; height: 560px; overflow: hidden; position: relative; }
.mosaic-col { flex: 1; overflow: hidden; border-radius: 20px; }
.mosaic-track { display: flex; flex-direction: column; gap: .6rem; will-change: transform; padding: .3rem; }
.mosaic-card { overflow: hidden; position: relative; flex-shrink: 0; border-radius: 14px; }
.mosaic-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mosaic-app { background: #dce3f0; position: relative; overflow: hidden; }
.mosaic-app .app-frame { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 7px 7px 0; box-sizing: border-box; }
.app-browser-bar { background: #f0f2f7; border-radius: 6px 6px 0 0; padding: 5px 8px; display: flex; align-items: center; gap: 4px; flex-shrink: 0; height: 22px; }
.app-browser-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.app-browser-url { flex: 1; background: #fff; border-radius: 3px; height: 11px; margin: 0 4px; display: flex; align-items: center; padding: 0 5px; font-size: 6.5px; color: #888; overflow: hidden; white-space: nowrap; }
.app-browser-screen { flex: 1; overflow: hidden; border-radius: 0; background: #fff; min-height: 0; }
.app-browser-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block !important; transition: transform .6s cubic-bezier(0.25,0.46,0.45,0.94); transform-origin: top left; }
.mosaic-card.mosaic-app:hover .app-browser-screen img { transform: scale(1.6); }
.mosaic-app > img { display: none !important; }
.mosaic-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem .8rem .7rem; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 60%, transparent 100%); border-radius: 0 0 14px 14px; }
.mosaic-tag { color: #fff; font-size: .75rem; font-weight: 700; display: block; margin-bottom: .2rem; }
.mosaic-subtag { color: rgba(255,255,255,.8); font-size: .65rem; font-weight: 400; line-height: 1.3; display: block; }
.mosaic-overlay-app { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem .8rem .7rem; background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 60%, transparent 100%); border-radius: 0 0 14px 14px; }
.mosaic-app-text { font-size: .8rem; font-weight: 800; color: #fff; line-height: 1.25; }
@media (max-width: 768px) { .hero-mosaic { height: 320px; } }

/* LOGOS BAND */
.logos-band { padding:2.5rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--white); }
.logo-item { opacity:.45; font-weight:700; font-size:.95rem; letter-spacing:.04em; color:var(--text); text-transform:uppercase; transition:opacity .2s; }
.logo-item:hover { opacity:.7; }

/* FEATURES */
.features-section { padding:6rem 0; background:var(--white); }
.feat-card-link { display:block; height:100%; }
.feat-card-new { background:var(--white); border:1px solid var(--border); border-radius:20px; overflow:hidden; height:100%; transition:box-shadow .25s,transform .25s; }
.feat-card-new:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.feat-card-clickable { cursor:pointer; }
.feat-card-link:hover .feat-card-clickable { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.feat-card-visual { height:160px; display:flex; align-items:center; justify-content:center; padding:1.2rem; }
.feat-card-body { padding:1.4rem 1.5rem 1.6rem; }
.feat-card-body h5 { font-size:1.05rem; font-weight:700; margin-bottom:.5rem; color:var(--text); }
.feat-card-body p { font-size:.875rem; color:var(--muted); line-height:1.65; margin:0; }

/* TWO-COL */
.twocol-section { padding:5rem 0; }
.feature-visual { background:var(--white); border-radius:18px; border:1px solid var(--border); box-shadow:var(--shadow-md); padding:1.5rem; min-height:320px; display:flex; flex-direction:column; gap:.8rem; }
.check-list li { display:flex; align-items:flex-start; gap:.7rem; font-size:.93rem; color:var(--text); margin-bottom:.75rem; }
.check-list li i { color:var(--accent); font-size:1rem; margin-top:.1rem; flex-shrink:0; }

/* STATS */
.stats-section { background:var(--accent); padding:5rem 0; color:#fff; position:relative; overflow:hidden; }
.stats-section::before { content:''; position:absolute; right:-100px; top:-100px; width:400px; height:400px; background:rgba(255,255,255,.05); border-radius:50%; }
.stat-number { font-size:clamp(2.4rem,5vw,3.5rem); font-weight:800; line-height:1; letter-spacing:-.04em; }
.stat-label { font-size:.9rem; opacity:.75; margin-top:.3rem; }

/* TESTIMONIALS */
.testimonials-section { padding:6rem 0; background:var(--surface); }
.testimonial-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:1.8rem; height:100%; transition:box-shadow .25s; }
.testimonial-card:hover { box-shadow:var(--shadow-md); }
.testimonial-text { font-size:.9rem; color:var(--text); line-height:1.7; margin-bottom:1.2rem; }

/* PRICING */
.pricing-section { padding:6rem 0; background:var(--surface); }
.pricing-card { background:var(--white); border:1px solid var(--border); border-radius:18px; padding:2rem; height:100%; transition:box-shadow .25s,transform .25s; }
.pricing-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.pricing-card.featured { border-color:var(--accent); box-shadow:var(--shadow-md); }
.pricing-badge { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--accent); color:#fff; padding:.25rem .7rem; border-radius:100px; }
.price-amount { font-size:2.6rem; font-weight:800; letter-spacing:-.04em; color:var(--text); line-height:1; }
.price-currency { font-size:1.1rem; font-weight:600; vertical-align:super; margin-right:.1rem; }
.price-period { font-size:.85rem; color:var(--muted); margin-left:.2rem; }
.plan-feature { display:flex; align-items:center; gap:.6rem; font-size:.875rem; color:var(--muted); padding:.4rem 0; border-bottom:1px solid var(--border); }
.plan-feature:last-child { border:none; }
.plan-feature i { color:var(--accent); font-size:.9rem; flex-shrink:0; }

/* FAQ */
.faq-section { padding:6rem 0; background:var(--white); }
.accordion-button-custom { background:var(--white)!important; color:var(--text)!important; font-weight:600; font-size:.95rem; border-radius:var(--radius)!important; box-shadow:none!important; padding:1.1rem 1.4rem; }
.accordion-button-custom:not(.collapsed) { color:var(--accent)!important; background:var(--accent-light)!important; }
.accordion-item-custom { border:1px solid var(--border)!important; border-radius:var(--radius)!important; margin-bottom:.6rem; overflow:hidden; }
.accordion-item-custom+.accordion-item-custom { border-top:1px solid var(--border)!important; }
.accordion-body-custom { font-size:.9rem; color:var(--muted); line-height:1.7; padding:0 1.4rem 1.1rem; }

/* CTA */
.cta-section { padding:6rem 0; background:linear-gradient(135deg,#1a1d2e 0%,#2a3060 100%); color:#fff; text-align:center; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%,rgba(79,108,196,.35) 0%,transparent 65%); }
.cta-section > * { position:relative; z-index:1; }

/* FOOTER */
.footer-main { background:#1a1d2e; color:rgba(255,255,255,.65); padding:4rem 0 2rem; }
.footer-title { color:rgba(255,255,255,.85); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }
.footer-link { display:block; color:rgba(255,255,255,.5); font-size:.875rem; text-decoration:none; margin-bottom:.5rem; transition:color .2s; }
.footer-link:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); margin-top:2.5rem; padding-top:1.5rem; font-size:.8rem; color:rgba(255,255,255,.35); }
.social-icon { width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,.12); display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); font-size:.9rem; text-decoration:none; transition:border-color .2s,color .2s; }
.social-icon:hover { border-color:rgba(255,255,255,.4); color:#fff; }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation:fadeUp .6s ease both; }
.fade-up-d1 { animation-delay:.1s; }
.fade-up-d2 { animation-delay:.2s; }
.fade-up-d3 { animation-delay:.3s; }

/* STAT PILLS */
.stat-pill { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:100px; }
.stat-pill.green { background:#ecfdf5; color:#059669; }
.stat-pill.blue  { background:var(--accent-light); color:var(--accent); }
.stat-pill.yellow{ background:#fefce8; color:#ca8a04; }

@media (max-width:768px) {
  .hero-section { padding:4rem 0 1.5rem; }
  .features-section,.testimonials-section,.faq-section,.cta-section,.pricing-section { padding:4rem 0; }
}