/* Tools N Go product page: teal and cream palette on top of xo.css */
body.tng{
  --bg:#0c0b0a; --bg2:#141210; --ink:#f6f1e8; --mute:#a8a196;
  --a:#1ec8b8; --b:#e4c9a0; --c:#4ecf96;
  --grad:linear-gradient(120deg,var(--a),var(--b) 60%,var(--c));
  --glass:rgba(246,241,232,.05); --line:rgba(246,241,232,.12);
}
.tng ::selection{background:var(--a);color:#04201d}
.tng .eyebrow{color:var(--a)}
.tng .eyebrow::before{background:var(--a)}
.tng .lead{color:#d9d2c5}
.tng .btn-warm,.tng .btn-glow{color:#06231f;background:linear-gradient(120deg,#1ec8b8,#4ee0cf);background-size:200% 100%;box-shadow:0 8px 30px rgba(30,200,184,.4)}
.tng .btn-warm:hover{box-shadow:0 10px 44px rgba(30,200,184,.6)}
.tng .btn-ghost:hover{border-color:var(--a);background:rgba(30,200,184,.08)}
.tng #nav a.active{background:rgba(30,200,184,.16)}
.tng #header.scrolled{background:rgba(12,11,10,.78)}
.tng #progress{box-shadow:0 0 12px var(--a)}
.tng .cursor-dot{background:var(--a)}
.tng .cursor.big{background:rgba(30,200,184,.18);border-color:var(--a)}
.tng .foot-word{background:linear-gradient(180deg,rgba(30,200,184,.22),transparent 80%);-webkit-background-clip:text;background-clip:text}
.tng .stat b{background:var(--grad);-webkit-background-clip:text;background-clip:text}
.tng .stat:hover{border-color:var(--a)}

/* hero */
.tng-hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:150px 0 100px;background:radial-gradient(ellipse at 72% 22%,rgba(30,200,184,.2),transparent 55%),radial-gradient(ellipse at 8% 92%,rgba(228,201,160,.12),transparent 50%)}
.tng-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:54px;align-items:center;z-index:3}
.tng-wordmark{display:flex;margin:0 0 22px;opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease) .3s,transform 1s var(--ease) .3s}
.ready .tng-wordmark{opacity:1;transform:none}
.tng-title{font-size:clamp(2.2rem,5vw,4.1rem);line-height:1.06;letter-spacing:-.03em;margin-bottom:22px}
.tng-title .line:nth-child(2) .split{transition-delay:.15s}
.tng-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.tng-url{font-size:.85rem;color:var(--mute);letter-spacing:.02em}

.tng-visual{position:relative;max-width:620px;justify-self:center;opacity:0;transform:translateY(60px) rotate(-1.5deg);transition:opacity 1s var(--ease) .5s,transform 1.2s var(--ease) .5s}
.ready .tng-visual{opacity:1;transform:none}

/* browser frame holding real screenshots */
.bframe{position:relative;border-radius:18px;overflow:hidden;background:#0c0b0a;border:1px solid rgba(246,241,232,.16);box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 90px rgba(30,200,184,.18);transition:transform .25s linear}
.bbar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#1a1815;border-bottom:1px solid var(--line)}
.bbar i{width:10px;height:10px;border-radius:50%;background:#e25c6a}
.bbar i:nth-child(2){background:#e4c9a0}
.bbar i:nth-child(3){background:#4ecf96}
.bbar span{flex:1;margin-left:10px;padding:4px 14px;border-radius:100px;background:rgba(246,241,232,.06);font-size:.74rem;color:var(--mute);max-width:320px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bframe>img{display:block;width:100%;height:auto}

.pop{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:16px;background:rgba(24,22,19,.96);border:1px solid rgba(246,241,232,.18);box-shadow:0 18px 40px rgba(0,0,0,.5);transition:transform .25s linear}
.pop b{font-family:"Space Grotesk";font-size:1rem}
.pop small{color:var(--mute);font-size:.78rem}
.pop .ok{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(78,207,150,.18);color:var(--c);font-size:.9rem}
.tpop1{left:-26px;bottom:14%;animation:popin .7s cubic-bezier(.34,1.56,.64,1) 1.5s both}
.tpop2{right:-18px;top:-22px;flex-direction:column;align-items:flex-start;gap:0;animation:popin .7s cubic-bezier(.34,1.56,.64,1) 1.8s both}
.tpop2 b{color:var(--a);font-size:1.5rem;line-height:1.1}
.tpop3{right:6%;bottom:-26px;animation:popin .7s cubic-bezier(.34,1.56,.64,1) 2.1s both}
@keyframes popin{from{opacity:0;scale:.4}}

.tng-marquee{background:linear-gradient(90deg,#1ec8b8,#4ee0cf);border:0}
.tng-marquee .marquee-track span{color:#06231f;-webkit-text-stroke:0}
.tng-marquee .marquee-track span:nth-child(4n+1){color:#fff}
.tng-marquee .marquee-track i{color:#06231f}

/* why cards */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;perspective:1200px}
.why-card{position:relative;padding:40px 32px 36px;border-radius:26px;background:linear-gradient(160deg,rgba(30,200,184,.1),rgba(255,255,255,.02));border:1px solid var(--line);overflow:hidden;--mx:50%;--my:50%}
.why-card.reveal.in{transition:transform .15s linear,opacity .9s,filter .9s}
.why-card:hover .card-glow{opacity:1}
.tng .card-glow{background:radial-gradient(380px circle at var(--mx) var(--my),rgba(30,200,184,.26),transparent 55%)}
.why-emoji{font-size:2.6rem;width:80px;height:80px;display:grid;place-items:center;border-radius:24px;background:rgba(30,200,184,.12);border:1px solid rgba(30,200,184,.28);margin-bottom:24px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.why-card:hover .why-emoji{transform:rotate(-10deg) scale(1.12)}
.why-step{position:absolute;top:26px;right:30px;font-family:"Space Grotesk";font-weight:700;font-size:3rem;color:transparent;-webkit-text-stroke:1.5px rgba(228,201,160,.25);line-height:1}
.why-card h3{font-size:1.4rem;margin-bottom:10px}
.why-card p{color:var(--mute)}

/* categories */
.cats-wrap{background:radial-gradient(ellipse at center,rgba(30,200,184,.07),transparent 70%)}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat{position:relative;padding:28px 24px 26px;border-radius:22px;background:var(--glass);border:1px solid var(--line);overflow:hidden;transition:.4s var(--ease);--mx:50%;--my:50%}
.cat:hover{transform:translateY(-8px);border-color:var(--a);box-shadow:0 20px 40px rgba(30,200,184,.14)}
.cat:hover .card-glow{opacity:1}
.cat-ico{font-size:2.2rem;display:inline-block;margin-bottom:12px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.cat:hover .cat-ico{transform:scale(1.2) rotate(-8deg)}
.cat h3{font-size:1.15rem;display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cat h3 em{font-style:normal;font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:20px;background:rgba(30,200,184,.15);color:var(--a);letter-spacing:.03em}
.cat ul{list-style:none;display:grid;gap:5px}
.cat li{color:var(--mute);font-size:.88rem;display:flex;gap:8px}
.cat li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--a);margin-top:.65em;opacity:.7}

/* showcase rows */
.show{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;align-items:center;margin-bottom:110px}
.show:last-child{margin-bottom:0}
.show.flip{grid-template-columns:1.25fr 1fr}
.show.flip .show-copy{order:2}
.show-copy h3{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15;margin-bottom:16px;letter-spacing:-.02em}
.show-copy p{color:var(--mute);margin-bottom:22px}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags span{padding:7px 15px;border-radius:100px;border:1px solid rgba(30,200,184,.3);background:rgba(30,200,184,.08);font-size:.85rem;color:#bff3ec}
.show-shot{position:relative;translate:0 var(--py,0)}

/* stats band */
.tng-stats{padding:40px 0}
.tng-stats .stats{margin-top:0}

/* faq */
.faq{max-width:820px;margin:0 auto;display:grid;gap:14px}
.faq details{border:1px solid var(--line);border-radius:20px;background:var(--glass);padding:0 26px;transition:.3s}
.faq details[open]{border-color:rgba(30,200,184,.45);background:rgba(30,200,184,.05)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font-family:"Space Grotesk";font-weight:600;font-size:1.08rem;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--a);font-size:1.3rem;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--mute);padding:0 0 24px}

/* cta */
.cta-card{position:relative;max-width:900px;margin:0 auto;padding:70px 40px;border-radius:36px;text-align:center;overflow:hidden;background:linear-gradient(145deg,rgba(30,200,184,.15),rgba(228,201,160,.07));border:1px solid rgba(30,200,184,.32)}
.cta-glow{position:absolute;width:500px;height:500px;left:50%;top:-250px;margin-left:-250px;border-radius:50%;background:radial-gradient(circle,rgba(30,200,184,.35),transparent 65%);animation:pulse 5s infinite}
.cta-logo{display:flex;justify-content:center;margin:0 auto 18px;position:relative;animation:float 5s ease-in-out infinite}
.cta-card .h2,.cta-card p{position:relative}
.cta-card p{max-width:560px;margin:0 auto 34px}
.cta-actions{justify-content:center;position:relative}

@media(max-width:1000px){
  .tng-grid{grid-template-columns:1fr}
  .tng-visual{max-width:640px;margin:30px auto 0;width:100%}
  .why{grid-template-columns:1fr 1fr}
  .cats{grid-template-columns:1fr 1fr}
  .show,.show.flip{grid-template-columns:1fr;gap:30px;margin-bottom:80px}
  .show.flip .show-copy{order:0}
}
@media(max-width:620px){
  .why,.cats{grid-template-columns:1fr}
  .tpop1{left:0}.tpop2{right:0}
  .cta-card{padding:50px 22px}
}