/* ================= GodSparx design system ================= */
:root{
  --blue:#2563EB; --blue-2:#3B82F6; --blue-soft:#DBEAFE;
  --ink:#0B1220; --ink-2:#111A2E;
  --white:#FFFFFF; --gray:#64748B; --gray-2:#94A3B8; --line:#E2E8F0;
  --radius:18px;
  --shadow:0 10px 40px rgba(11,18,32,.10);
  --glow:0 0 40px rgba(59,130,246,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Space Grotesk',Inter,sans-serif;line-height:1.15;letter-spacing:-.02em}
a{color:var(--blue);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1140px;margin:0 auto;padding:0 22px}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.85);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px;max-width:1140px;margin:0 auto;padding:0 22px}
.logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:23px;color:#fff;display:flex;align-items:center;gap:8px}
.logo b{color:var(--blue-2)}
.logo .bolt{color:var(--blue-2);filter:drop-shadow(0 0 8px rgba(59,130,246,.8));font-size:20px}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:#CBD5E1;font-size:15px;font-weight:500;transition:color .2s}
.nav-links a:hover{color:#fff}
.btn{display:inline-block;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff !important;padding:11px 22px;border-radius:12px;font-weight:600;font-size:15px;border:0;cursor:pointer;transition:transform .15s, box-shadow .2s;box-shadow:0 4px 18px rgba(37,99,235,.35)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--glow)}
.btn.big{padding:15px 32px;font-size:17px;border-radius:14px}
.btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.3);box-shadow:none}
.btn.ghost:hover{border-color:var(--blue-2)}
.hamb{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer}
@media(max-width:760px){
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--ink);flex-direction:column;padding:20px;gap:18px;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav-links.open{display:flex}
  .hamb{display:block}
}

/* ---------- Hero (dark) ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:110px 0 130px;text-align:center}
.hero::before{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 45% at 50% -5%, rgba(37,99,235,.35), transparent),
  radial-gradient(ellipse 40% 35% at 85% 90%, rgba(59,130,246,.18), transparent)}
.hero .container{position:relative;z-index:2}
#sparks{position:absolute;inset:0;z-index:1}
.hero h1{font-size:clamp(38px,6.5vw,68px);font-weight:700;max-width:850px;margin:0 auto 22px}
.hero h1 .grad{background:linear-gradient(90deg,#60A5FA,#3B82F6,#93C5FD);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:clamp(17px,2.2vw,21px);color:#AFC0DB;max-width:640px;margin:0 auto 38px}
.hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.4);color:#93C5FD;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:7px 16px;border-radius:99px;margin-bottom:26px}

/* ---------- Sections ---------- */
section{padding:90px 0}
.sec-dark{background:var(--ink);color:#fff}
.sec-blue{background:linear-gradient(135deg,var(--blue) 0%,#1D4ED8 100%);color:#fff}
.sec-soft{background:#F5F8FF}
.sec-head{text-align:center;max-width:640px;margin:0 auto 54px}
.sec-head h2{font-size:clamp(28px,4vw,42px);margin-bottom:14px}
.sec-head p{color:var(--gray);font-size:17px}
.sec-dark .sec-head p,.sec-blue .sec-head p{color:#AFC0DB}
.eyebrow{color:var(--blue);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:10px}
.sec-dark .eyebrow,.sec-blue .eyebrow{color:#93C5FD}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 28px;box-shadow:var(--shadow);transition:transform .2s;position:relative}
.step:hover{transform:translateY(-6px)}
.step .num{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--blue),var(--blue-2));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:20px;margin-bottom:18px;box-shadow:0 6px 18px rgba(37,99,235,.35)}
.step h3{font-size:20px;margin-bottom:10px}
.step p{color:var(--gray);font-size:15px}

/* ---------- Testimony cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:26px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.tcard:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(11,18,32,.15)}
.tcard .imgwrap{height:200px;overflow:hidden;background:linear-gradient(135deg,#0B1220,#1E3A8A)}
.tcard .imgwrap img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tcard:hover .imgwrap img{transform:scale(1.05)}
.tcard .imgwrap .placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:52px;filter:drop-shadow(0 0 16px rgba(59,130,246,.7))}
.tcard .body{padding:24px;flex:1;display:flex;flex-direction:column}
.tcard h3{font-size:19px;margin-bottom:8px}
.tcard h3 a{color:var(--ink)}
.tcard h3 a:hover{color:var(--blue)}
.tcard .by{font-size:13px;color:var(--gray);margin-bottom:12px}
.tcard .by b{color:var(--ink)}
.tcard .ex{font-size:15px;color:#475569;flex:1}
.tcard .meta{display:flex;gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--gray);align-items:center}
.meta .m{display:flex;align-items:center;gap:6px}
.star-badge{position:absolute;z-index:2;margin:14px;background:rgba(11,18,32,.75);backdrop-filter:blur(6px);color:#FBBF24;font-size:12px;font-weight:700;padding:5px 12px;border-radius:99px}

/* like button */
.likebtn{background:none;border:1.5px solid var(--line);border-radius:99px;padding:8px 18px;font-size:15px;font-weight:600;color:var(--gray);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s;font-family:Inter}
.likebtn:hover{border-color:#F87171;color:#EF4444;transform:scale(1.04)}
.likebtn.liked{background:#FEF2F2;border-color:#F87171;color:#EF4444}
.likebtn .hh{transition:transform .2s}
.likebtn.pop .hh{animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.6)}}

/* ---------- Founders ---------- */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:820px){.founders{grid-template-columns:1fr}}
.founders h2{font-size:clamp(28px,4vw,40px);margin-bottom:18px}
.founders p{color:#AFC0DB;font-size:16.5px;margin-bottom:16px}
.f-visual{position:relative;border-radius:24px;background:linear-gradient(135deg,#1E3A8A,#2563EB);min-height:340px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--glow)}
.f-visual .initials{font-family:'Space Grotesk';font-size:84px;font-weight:700;color:rgba(255,255,255,.9);text-shadow:0 0 40px rgba(255,255,255,.4)}
.f-visual::after{content:'⚡';position:absolute;bottom:18px;right:24px;font-size:40px;filter:drop-shadow(0 0 12px rgba(255,255,255,.8))}

/* ---------- Socials ---------- */
.socials{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.soc{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:18px 30px;color:#fff;font-weight:600;font-size:16px;transition:all .2s}
.soc:hover{background:rgba(255,255,255,.16);transform:translateY(-3px)}
.soc .ic{font-size:24px}

/* ---------- Forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:44px;max-width:720px;margin:0 auto}
.form-card label{display:block;font-weight:600;font-size:14px;margin:20px 0 8px}
.form-card label span{color:var(--gray);font-weight:400}
.form-card input[type=text],.form-card textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 16px;font-size:15.5px;font-family:Inter;transition:border .2s}
.form-card input:focus,.form-card textarea:focus{outline:none;border-color:var(--blue-2);box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.form-card textarea{min-height:220px;resize:vertical}
.drop{border:2px dashed #BFD3F8;border-radius:14px;padding:28px;text-align:center;color:var(--gray);font-size:14.5px;cursor:pointer;transition:all .2s;background:#F8FAFF}
.drop:hover,.drop.drag{border-color:var(--blue-2);background:var(--blue-soft)}
.thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}
.thumbs .th{position:relative;width:90px;height:90px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.thumbs .th img{width:100%;height:100%;object-fit:cover}
.thumbs .th button{position:absolute;top:4px;right:4px;background:rgba(11,18,32,.8);color:#fff;border:0;border-radius:99px;width:22px;height:22px;cursor:pointer;font-size:11px;line-height:1}
.note{background:var(--blue-soft);border-radius:12px;padding:14px 18px;font-size:14px;color:#1E40AF;margin-top:24px}
.success{background:#ECFDF5;border:1px solid #6EE7B7;color:#065F46;border-radius:14px;padding:22px;text-align:center;font-size:16px}
.errbox{background:#FEF2F2;border:1px solid #FCA5A5;color:#991B1B;border-radius:12px;padding:13px 18px;font-size:14px;margin-top:16px}

/* ---------- Testimony detail ---------- */
.t-hero{background:var(--ink);color:#fff;padding:80px 0 60px;text-align:center}
.t-hero h1{font-size:clamp(28px,4.6vw,48px);max-width:840px;margin:0 auto 16px}
.t-hero .by{color:#AFC0DB;font-size:16px}
.t-hero .by a{color:#93C5FD}
.t-body{max-width:760px;margin:0 auto;font-size:18px;color:#334155}
.t-body p{margin-bottom:1.4em}
.t-imgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:36px auto;max-width:760px}
.t-imgs img{border-radius:16px;width:100%;height:260px;object-fit:cover;box-shadow:var(--shadow)}
.engage{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin:40px 0}
.sharebtn{background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:9px 18px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;display:inline-flex;gap:8px;align-items:center;transition:all .2s;font-family:Inter}
.sharebtn:hover{border-color:var(--blue-2);color:var(--blue);transform:translateY(-2px)}
.viewpill{display:inline-flex;gap:7px;align-items:center;color:var(--gray);font-size:14.5px;font-weight:600}
.comments{max-width:760px;margin:0 auto}
.comment{background:#F8FAFC;border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:12px}
.comment .cn{font-weight:700;font-size:14px}
.comment .cb{font-size:15px;color:#475569;margin-top:4px}
.comment .ct{font-size:12px;color:var(--gray-2);margin-top:6px}

/* ---------- Answer/SEO pages ---------- */
.article{max-width:760px;margin:0 auto;font-size:17.5px;color:#334155}
.article h2{font-size:26px;margin:44px 0 14px;color:var(--ink)}
.article p{margin-bottom:1.3em}
.article blockquote{border-left:4px solid var(--blue-2);background:#F5F8FF;padding:18px 24px;border-radius:0 14px 14px 0;margin:26px 0;font-style:italic;color:#1E3A8A}
.article blockquote cite{display:block;margin-top:8px;font-style:normal;font-weight:700;font-size:14px}
.cta-band{background:linear-gradient(135deg,var(--blue),#1D4ED8);border-radius:22px;color:#fff;padding:44px;text-align:center;margin-top:60px}
.cta-band h3{font-size:26px;margin-bottom:10px}
.cta-band p{color:#DBEAFE;margin-bottom:24px}
.rel{margin-top:50px;padding-top:30px;border-top:1px solid var(--line)}
.rel h4{font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--gray);margin-bottom:14px}
.rel a{display:inline-block;background:#F1F5FF;border:1px solid #DBEAFE;color:var(--blue);border-radius:99px;padding:8px 16px;font-size:14px;font-weight:600;margin:0 8px 10px 0}
.rel a:hover{background:var(--blue-soft)}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#94A3B8;padding:70px 0 40px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;max-width:1140px;margin:0 auto;padding:0 22px}
@media(max-width:760px){.foot{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:15px;margin-bottom:16px}
footer a{color:#94A3B8;display:block;margin-bottom:10px;font-size:14.5px}
footer a:hover{color:#fff}
.foot-logo{font-family:'Space Grotesk';font-weight:700;font-size:24px;color:#fff;margin-bottom:12px}
.foot-logo b{color:var(--blue-2)}
.copyright{text-align:center;font-size:13px;color:#475569;margin-top:50px;padding:0 22px}

/* ---------- Animations ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.count{font-variant-numeric:tabular-nums}

/* ---------- Utility ---------- */
.center{text-align:center}
.mt{margin-top:34px}
.spinner{width:34px;height:34px;border:3px solid var(--blue-soft);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}