/* TechBotMaster: premium look (loaded after style.css). Dark hero, glass cards, 3D software boxes. */
:root{--ink:#071120;--ink2:#0c1b2e;--em:#19b374;--em2:#0d8f5b;--gold:#f6c76b;--coral:#ff6b5e;--glass:rgba(255,255,255,.07);--ring:rgba(255,255,255,.12)}
html{scroll-padding-top:76px}
body{background:#f4f6fb;font-family:"Segoe UI Variable Display","Segoe UI",Inter,system-ui,-apple-system,Arial,sans-serif;letter-spacing:.005em}
h1,h2,h3{letter-spacing:-.015em}

/* ---------- header over the dark hero ---------- */
header.top{transition:background .25s,border-color .25s,box-shadow .25s}
body.hero-page header.top{background:transparent;border-bottom-color:transparent;backdrop-filter:none;position:fixed;left:0;right:0}
body.hero-page header.top .logo{color:#fff}
body.hero-page header.top nav.main a{color:#b9c8da}body.hero-page header.top nav.main a:hover{color:#fff}
body.hero-page header.top .btn.ghost{color:#fff;border-color:rgba(255,255,255,.28)}
body.hero-page.scrolled header.top{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);box-shadow:0 8px 30px rgba(7,17,32,.08)}
body.hero-page.scrolled header.top .logo{color:var(--navy)}
body.hero-page.scrolled header.top nav.main a{color:var(--muted)}body.hero-page.scrolled header.top nav.main a:hover{color:var(--navy)}
body.hero-page.scrolled header.top .btn.ghost{color:var(--navy);border-color:var(--line)}
.btn{border-radius:12px;box-shadow:0 6px 18px rgba(18,140,90,.25)}.btn.ghost{box-shadow:none}
.btn.glow{background:linear-gradient(135deg,#1fd18a,#0d8f5b);box-shadow:0 10px 34px rgba(25,179,116,.45)}
.btn.glow:hover{filter:brightness(1.07);transform:translateY(-1px)}

/* ---------- hero ---------- */
.hero2{position:relative;overflow:hidden;color:#fff;padding:132px 0 120px;background:
  radial-gradient(900px 520px at 78% 20%,rgba(25,179,116,.30),transparent 62%),
  radial-gradient(700px 520px at 8% 105%,rgba(59,130,246,.22),transparent 60%),
  radial-gradient(520px 380px at 96% 100%,rgba(255,107,94,.16),transparent 60%),
  linear-gradient(180deg,#050c18,#0a1930)}
.hero2:before{content:"";position:absolute;inset:0;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 60% 40%,#000 10%,transparent 70%)}
.hero2:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;background:#f4f6fb;clip-path:ellipse(60% 100% at 50% 100%)}
.hero2 .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr 1fr;gap:30px;align-items:center}
.pillnew{display:inline-flex;gap:8px;align-items:center;padding:7px 14px;border-radius:30px;background:var(--glass);border:1px solid var(--ring);font-size:13.5px;color:#cfe0f2;margin-bottom:22px}
.pillnew b{background:linear-gradient(135deg,#1fd18a,#0d8f5b);color:#04210f;padding:2px 9px;border-radius:20px;font-size:11.5px;letter-spacing:.04em}
.hero2 h1{font-size:56px;line-height:1.04;margin:0 0 20px;font-weight:800}
.hero2 h1 em{font-style:normal;background:linear-gradient(120deg,#5ff0b3,#19b374 45%,#7dd3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero2 p.lead{font-size:19px;line-height:1.55;color:#b4c4d8;max-width:560px;margin:0 0 30px}
.hero2 .cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hero2 .btn.big{padding:16px 30px;font-size:16.5px}
.hero2 .btn.ghost{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)}.hero2 .btn.ghost:hover{background:rgba(255,255,255,.1)}
.ticks{display:flex;gap:22px;flex-wrap:wrap;color:#9db2c8;font-size:14px}.ticks span:before{content:"\2713";color:#4ee0a1;font-weight:800;margin-right:7px}
.stage{position:relative;height:430px;display:flex;align-items:flex-end;justify-content:center}
.stage .floor{position:absolute;left:4%;right:4%;bottom:8px;height:70px;background:radial-gradient(ellipse at center,rgba(25,179,116,.35),transparent 70%);filter:blur(10px)}
.stage .slot{position:absolute;bottom:34px}
.stage .slot.l{left:-9%;transform:scale(.8)}.stage .slot.r{right:-9%;transform:scale(.8)}.stage .slot.c{left:50%;margin-left:-105px;z-index:2;transform:scale(1.04)}

/* ---------- 3D software box ---------- */
.bx{width:210px;height:290px;perspective:1400px;position:relative}
.bx-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(24deg) rotateX(3deg);transition:transform .7s cubic-bezier(.2,.8,.2,1);animation:bob 6s ease-in-out infinite}
.bx:hover .bx-in{transform:rotateY(8deg) rotateX(1deg) translateY(-6px);animation-play-state:paused}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
.slot.l .bx-in{animation-delay:-2s}.slot.r .bx-in{animation-delay:-4s}
.bx .face{position:absolute;backface-visibility:hidden}
.bx .front{inset:0;transform:translateZ(24px);border-radius:4px 10px 10px 4px;overflow:hidden;padding:20px 18px;display:flex;flex-direction:column;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -60px 80px rgba(0,0,0,.28)}
.bx .front:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.28),transparent 34%,transparent 62%,rgba(255,255,255,.10));pointer-events:none}
.bx .side{left:-24px;top:0;width:48px;height:100%;transform:rotateY(-90deg);display:flex;align-items:center;justify-content:center;border-radius:4px 0 0 4px;overflow:hidden}
.bx .side span{display:block;transform:rotate(-90deg);white-space:nowrap;font-weight:800;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.bx .top{left:0;top:-24px;width:100%;height:48px;transform:rotateX(90deg);border-radius:6px 6px 0 0}
.bx .brandline{font-size:10.5px;font-weight:800;letter-spacing:.3em;opacity:.86;display:flex;align-items:center;gap:7px}
.bx .brandline i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff}
.bx .botimg{margin:6px auto 0;width:112px;height:112px;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(0,0,0,.45))}
.bx .pt{font-size:25px;font-weight:800;line-height:1.05;margin:2px 0 8px;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.bx ul{list-style:none;margin:0;padding:0;font-size:11.5px;line-height:1.55;opacity:.95}.bx li:before{content:"\2713 ";font-weight:800}
.bx .ver{margin-top:auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.8;border-top:1px solid rgba(255,255,255,.28);padding-top:7px;display:flex;justify-content:space-between}
.bx.wa .front,.bx.wa .top{background:linear-gradient(160deg,#25d98f,#0d8f5b 62%,#065a37)}.bx.wa .side{background:linear-gradient(180deg,#0b7a4c,#054a2e)}
.bx.gm .front,.bx.gm .top{background:linear-gradient(160deg,#ff8a7d,#e0473a 62%,#9c2a21)}.bx.gm .side{background:linear-gradient(180deg,#c13a2e,#7a1f18)}
.bx.bn .front,.bx.bn .top{background:linear-gradient(160deg,#27425f,#10243b 60%,#07111e)}.bx.bn .side{background:linear-gradient(180deg,#0b1a2c,#050c16)}
.bx.bn .front{box-shadow:inset 0 0 0 1px rgba(246,199,107,.55),inset 0 -60px 80px rgba(0,0,0,.35)}
.bx.bn .pt{background:linear-gradient(120deg,#ffe4a3,#f6c76b);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.bx.bn .side span{color:#f6c76b}
.bx .shadow{position:absolute;left:-6%;right:-18%;bottom:-30px;height:34px;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);filter:blur(7px);transform:translateZ(-30px)}
.bx.sm{width:168px;height:232px}.bx.sm .botimg{width:88px;height:88px}.bx.sm .pt{font-size:20px}.bx.sm ul{font-size:10.5px}

/* ---------- sections ---------- */
section.s{padding:84px 0}
section.s.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.s.dark{background:linear-gradient(180deg,#071120,#0c1f38);color:#e8eef6}
h2.t{font-size:40px;font-weight:800}
p.sub{font-size:18px}
.eyebrow{display:block;text-align:center;font-weight:800;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--em2);margin-bottom:10px}
.dark .eyebrow{color:#5ff0b3}.dark h2.t{color:#fff}.dark p.sub{color:#9db2c8}

/* trust strip */
.strip{background:#fff;border-bottom:1px solid var(--line)}
.strip .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding-top:26px;padding-bottom:26px}
.strip .it{display:flex;gap:11px;align-items:center;font-weight:600;font-size:14px;color:#24364d}
.strip .it i{flex:0 0 38px;height:38px;border-radius:11px;background:var(--brand-l);display:grid;place-items:center;font-style:normal;font-size:18px}

/* products */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.pcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 18px 50px rgba(7,17,32,.07);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-6px);box-shadow:0 28px 70px rgba(7,17,32,.14)}
.pcard .pstage{height:330px;display:grid;place-items:center;background:radial-gradient(260px 220px at 50% 60%,var(--tint),transparent 70%),linear-gradient(180deg,#f7f9fd,#eef2f9)}
.pcard.wa{--tint:rgba(25,179,116,.28)}.pcard.gm{--tint:rgba(255,107,94,.26)}.pcard.bn{--tint:rgba(246,199,107,.34)}
.pcard .pbody{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.pcard h3{margin:0 0 4px;font-size:23px}.pcard .tg{margin:0 0 10px;color:var(--brand-d);font-weight:600}.pcard .ds{margin:0 0 18px;color:var(--muted);font-size:14.5px;flex:1}
.pcard .row{display:flex;gap:10px;flex-wrap:wrap}
.pcard .flag{position:absolute;top:16px;left:16px;z-index:3;background:linear-gradient(135deg,#ffe4a3,#f6c76b);color:#4a3200;font-weight:800;font-size:11.5px;letter-spacing:.06em;padding:5px 12px;border-radius:20px}

/* how it works */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative}
.steps3:before{content:"";position:absolute;left:16%;right:16%;top:31px;height:2px;background:linear-gradient(90deg,transparent,#c9d6e6 15%,#c9d6e6 85%,transparent)}
.stp{text-align:center;position:relative}
.stp .n{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;background:linear-gradient(135deg,#10243b,#0a1830);color:#5ff0b3;display:grid;place-items:center;font-weight:800;font-size:24px;box-shadow:0 0 0 7px #f4f6fb,0 14px 30px rgba(7,17,32,.25)}
.stp h3{margin:0 0 6px;font-size:20px}.stp p{margin:0 auto;color:var(--muted);max-width:290px}

/* features */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fcard{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid var(--ring);border-radius:18px;padding:24px;transition:transform .25s,border-color .25s}
.fcard:hover{transform:translateY(-4px);border-color:rgba(95,240,179,.5)}
.fcard i{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:rgba(25,179,116,.16);font-style:normal;font-size:23px;margin-bottom:14px}
.fcard h3{margin:0 0 6px;font-size:18px;color:#fff}.fcard p{margin:0;color:#9db2c8;font-size:14.5px}
.fcard .tagrow{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap}
.fcard .tagrow span{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.08);color:#cfe0f2}

/* two ways to send */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.way{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 14px 40px rgba(7,17,32,.06);position:relative}
.way.rec{border:2px solid var(--em);box-shadow:0 22px 60px rgba(25,179,116,.18)}
.way .rt{position:absolute;top:-13px;left:26px;background:linear-gradient(135deg,#1fd18a,#0d8f5b);color:#fff;font-weight:800;font-size:11.5px;letter-spacing:.08em;padding:5px 13px;border-radius:20px}
.way h3{margin:4px 0 6px;font-size:22px}.way p.d{color:var(--muted);margin:0 0 16px}
.way ul{list-style:none;margin:0;padding:0}.way li{padding:7px 0;border-top:1px solid var(--line);font-size:14.5px}.way li:before{content:"\2713";color:var(--brand);font-weight:800;margin-right:10px}.way li.no:before{content:"\2013";color:#a0acbb}

/* pricing */
#pricing.s{background:linear-gradient(180deg,#f4f6fb,#eaf0f8)}
.ptabs button{padding:11px 22px;font-weight:700;box-shadow:0 2px 8px rgba(7,17,32,.05)}
.ptabs button.on{background:linear-gradient(135deg,#10243b,#0a1830);box-shadow:0 10px 24px rgba(7,17,32,.28)}
.plan{border-radius:22px;padding:28px 24px;box-shadow:0 14px 40px rgba(7,17,32,.07);transition:transform .25s,box-shadow .25s}
.plan:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(7,17,32,.14)}
.plan.pop{border:0;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#1fd18a,#0d8f5b 55%,#7dd3fc) border-box;border:2px solid transparent;box-shadow:0 26px 70px rgba(25,179,116,.25)}
.plan .badge{background:linear-gradient(135deg,#1fd18a,#0d8f5b);box-shadow:0 6px 16px rgba(25,179,116,.4)}
.plan .price{font-size:44px;font-weight:800}
.plan .btn{text-align:center}
.dl{border-radius:18px;background:linear-gradient(135deg,#e9fbf3,#e4f1ff);border:1px solid #bfe6d1}

/* faq */
#faq details{border-radius:16px;padding:18px 22px;box-shadow:0 6px 20px rgba(7,17,32,.04);transition:box-shadow .2s}
#faq details[open]{box-shadow:0 14px 36px rgba(7,17,32,.10);border-color:#bfe6d1}
#faq summary{list-style:none;display:flex;justify-content:space-between;gap:14px;font-size:16.5px}
#faq summary::-webkit-details-marker{display:none}
#faq summary:after{content:"+";font-size:22px;color:var(--em2);line-height:1}
#faq details[open] summary:after{content:"\2212"}

/* final call to action */
.cta2{position:relative;overflow:hidden;border-radius:28px;padding:56px 46px;color:#fff;background:radial-gradient(500px 300px at 90% 30%,rgba(25,179,116,.4),transparent 65%),linear-gradient(135deg,#071120,#10294a);display:grid;grid-template-columns:1.3fr .7fr;gap:20px;align-items:center;box-shadow:0 30px 80px rgba(7,17,32,.3)}
.cta2 h2{font-size:36px;margin:0 0 10px;font-weight:800}.cta2 p{margin:0 0 24px;color:#b4c4d8;font-size:17px}
.cta2 img{width:230px;justify-self:center;filter:drop-shadow(0 22px 30px rgba(0,0,0,.5));animation:bob 6s ease-in-out infinite}

/* footer */
footer.foot{background:#050c18;padding:54px 0 30px}
footer.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;align-items:start}
footer.foot .fb{color:#9db2c8;font-size:14px;line-height:1.7}
footer.foot .fb b.n{display:flex;align-items:center;gap:10px;color:#fff;font-size:18px;margin-bottom:10px}
footer.foot .fb b.n img{width:34px;height:34px}
footer.foot h4{color:#fff;margin:0 0 12px;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
footer.foot a{display:block;color:#9db2c8;margin-bottom:8px}footer.foot a:hover{color:#fff}
footer.foot .copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:20px;margin-top:6px;font-size:13px;color:#7388a0}

/* sign-in / sign-up look */
.formbox .card{border-radius:22px;box-shadow:0 26px 70px rgba(7,17,32,.12);border:1px solid var(--line)}
.formbox h1{font-size:28px}
.formbox .botlogo{display:block;width:84px;margin:0 auto 10px;filter:drop-shadow(0 10px 14px rgba(7,17,32,.3))}
input:focus{box-shadow:0 0 0 4px rgba(25,179,116,.15)}

/* reveal on scroll (only when JS is on, so nothing is ever hidden without it) */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.bx-in,.cta2 img{animation:none!important}.bx-in{transition:none}}

/* responsive */
@media(max-width:1000px){
  .hero2{padding:110px 0 90px}.hero2 .wrap{grid-template-columns:1fr}.hero2 h1{font-size:42px}
  .stage{height:390px;margin-top:10px}.pgrid,.fgrid{grid-template-columns:1fr 1fr}.strip .wrap{grid-template-columns:1fr 1fr}
  .steps3{grid-template-columns:1fr}.steps3:before{display:none}.ways{grid-template-columns:1fr}.cta2{grid-template-columns:1fr;padding:38px 28px}.cta2 img{width:160px}
  footer.foot .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .hero2 h1{font-size:34px}.hero2 p.lead{font-size:16.5px}h2.t{font-size:30px}section.s{padding:60px 0}
  .stage .slot.l,.stage .slot.r{display:none}.stage .slot.c{transform:scale(1)}
  .pgrid,.fgrid{grid-template-columns:1fr}.strip .wrap{grid-template-columns:1fr}.pcard .pstage{height:310px}
  footer.foot .wrap{grid-template-columns:1fr}.ticks{gap:12px}
}

@media(max-width:620px){#hdr .btn,#hdr .nav a.btn,.hdr .btn{white-space:nowrap;padding-left:14px;padding-right:14px}}
@media(max-width:480px){#hdr .brand,#hdr .logo{font-size:15px}#hdr .btn{font-size:13px;padding:8px 11px}#hdr .wrap,#hdr .in{gap:8px}}
header.top .wrap{gap:8px}@media(max-width:480px){header.top .logo{font-size:15px;gap:6px}header.top .logo img{width:28px;height:28px}header.top .btn{font-size:13px;padding:8px 11px}header.top .wrap{padding-left:12px;padding-right:12px}}

/* ---- guide and use-case pages (SEO) ---- */
.seo{max-width:820px}.seo h1{font-size:clamp(28px,4.4vw,42px);line-height:1.15;letter-spacing:-.02em;margin:6px 0 12px}
.seo .lead{font-size:19px;color:var(--muted);margin:0 0 26px}.seo h2{margin-top:34px;font-size:24px}.seo p,.seo li{font-size:16.5px}
.seo blockquote{margin:14px 0;padding:14px 18px;background:#f4f8fb;border-left:4px solid var(--brand);border-radius:6px;color:#243447}
.seo code{background:#eef3f7;border-radius:5px;padding:1px 6px;font-size:.92em}
.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:6px}.crumbs a{color:var(--muted)}
.cta-box{margin:38px 0;padding:28px;border-radius:18px;background:linear-gradient(135deg,#071a2b,#0f3a45 60%,#0e5a4a);color:#fff}
.cta-box h2{color:#fff;margin:0 0 6px}.cta-box p{color:#cfe3ea;margin:0 0 16px}.cta-box .btn.ghost{background:transparent;border:1.5px solid #6fb7a1;color:#fff}
.seo details{border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:8px 0;background:#fff}.seo summary{font-weight:600;cursor:pointer}
ul.related{list-style:none;padding:0}ul.related li{padding:10px 0;border-bottom:1px solid var(--line)}ul.related .m{display:block;font-size:14px;color:var(--muted)}
.seo .tablewrap{overflow-x:auto}.seo table{width:100%;border-collapse:collapse;font-size:14.5px}.seo th,.seo td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}.seo th{background:#f2f5f9}
.disclaimer{font-size:13px}
.learn{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.learn a{display:block;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:inherit;transition:.15s}
.learn a:hover{border-color:var(--brand);box-shadow:0 8px 24px rgba(16,36,59,.08);transform:translateY(-2px)}.learn b{display:block;margin-bottom:4px}.learn span{font-size:14px;color:var(--muted)}