:root{--bg:#0d0f12;--bg2:#15181d;--card:#1b1f26;--line:#2a2f38;--text:#e6e8eb;--muted:#9aa3ad;--accent:#00a1e0;--accent2:#0b5cab}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--accent);text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
/* Nav */
header{position:sticky;top:0;z-index:10;background:rgba(13,15,18,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-weight:800;color:var(--text);font-size:1.15rem}.logo span{color:var(--accent)}
.links{display:flex;gap:26px;list-style:none}
.links a{color:var(--muted);font-weight:500}.links a:hover{color:var(--text)}
.menu-btn{display:none;background:none;border:0;color:var(--text);font-size:1.6rem;cursor:pointer}
/* Buttons */
.btn{display:inline-block;padding:12px 24px;border-radius:8px;font-weight:600;transition:.2s;border:1px solid transparent;cursor:pointer;font-size:1rem}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent2)}
.btn-ghost{border-color:var(--line);color:var(--text)}.btn-ghost:hover{border-color:var(--accent)}
/* Hero */
.hero{padding:110px 0 90px;background:radial-gradient(circle at 80% 0%,rgba(0,161,224,.18),transparent 55%)}
.tag{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:.85rem;margin-bottom:20px}
h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.15;margin-bottom:20px}
h1 span{color:var(--accent)}
.hero p{color:var(--muted);font-size:1.15rem;max-width:640px;margin-bottom:32px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:64px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center}
.stat b{display:block;font-size:2rem;color:var(--accent)}.stat small{color:var(--muted)}
/* Sections */
section{padding:80px 0}
.alt{background:var(--bg2)}
h2{font-size:clamp(1.7rem,3.5vw,2.3rem);margin-bottom:10px}
.sub{color:var(--muted);margin-bottom:40px;max-width:640px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px;transition:.2s}
.card:hover{border-color:var(--accent);transform:translateY(-3px)}
.card .ico{font-size:1.8rem;margin-bottom:12px;min-height:56px;display:flex;align-items:center}
.logo-img{height:56px;width:auto;max-width:140px;object-fit:contain;background:#fff;border-radius:10px;padding:6px}
.card h3{margin-bottom:8px;font-size:1.1rem}.card p{color:var(--muted);font-size:.95rem}
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badge{background:var(--card);border:1px solid var(--line);padding:10px 16px;border-radius:8px;font-size:.92rem}
.badge::before{content:"☁ ";color:var(--accent)}
.certs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.cert{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;transition:.2s}
.cert:hover{border-color:var(--accent);transform:translateY(-3px)}
.cert img{width:100px;height:100px;object-fit:contain}
.cert-fallback{width:100px;height:100px;display:grid;place-items:center;font-size:2.6rem;color:var(--accent);border:2px solid var(--line);border-radius:50%}
.cert span{font-size:.9rem;font-weight:600;line-height:1.3}
.cert small{color:var(--muted);font-size:.8rem;margin-top:-6px}
/* Videos */
.video{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;color:var(--text);display:block;transition:.2s}
.video:hover{border-color:var(--accent);transform:translateY(-3px)}
.thumb{position:relative;aspect-ratio:16/9;background:#000}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;font-size:2.4rem;color:#fff;background:rgba(0,0,0,.25);opacity:0;transition:.2s}
.video:hover .thumb::after{opacity:1}
.video div.meta{padding:16px}.meta h3{font-size:1rem;margin-bottom:6px}.meta small{color:var(--muted)}
/* Contact */
.contact-wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:start}
form{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:30px;display:grid;gap:16px}
label{font-size:.9rem;color:var(--muted)}
input,select,textarea{width:100%;margin-top:6px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{min-height:140px;resize:vertical}
.info p{color:var(--muted);margin-bottom:14px}
footer{border-top:1px solid var(--line);padding:30px 0;text-align:center;color:var(--muted);font-size:.9rem}
/* Mobile */
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.contact-wrap{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
 .grid{grid-template-columns:1fr}
 .menu-btn{display:block}
 .links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:var(--bg2);border-bottom:1px solid var(--line)}
 .links.open{display:flex}.links li a{display:block;padding:16px 20px}
 .hero{padding:70px 0 60px}section{padding:60px 0}
}
/* Certifications emphasis */
#certs{background:linear-gradient(180deg,var(--bg2),#0f1a24);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cert-strip{display:flex;flex-wrap:wrap;gap:16px;margin:-10px 0 36px}
.cert-strip div{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:14px 22px;min-width:150px}
.cert-strip b{display:block;font-size:1.6rem;color:var(--accent)}.cert-strip small{color:var(--muted)}
.certs{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.cert{padding:26px 16px}
.cert img,.cert-fallback{width:120px;height:120px}
.cert:hover{box-shadow:0 8px 24px rgba(0,161,224,.15)}
/* ===== Lively theme ===== */
:root{--bg:#0a0c14;--bg2:#10142a;--card:rgba(255,255,255,.04);--line:rgba(255,255,255,.09);--accent:#00b4ff;--accent2:#7b5cff;--pink:#ff4fd8;--grad:linear-gradient(135deg,#00b4ff 0%,#7b5cff 55%,#ff4fd8 100%)}
body{background:var(--bg)}
body::before,body::after{content:"";position:fixed;z-index:-1;width:520px;height:520px;border-radius:50%;filter:blur(120px);opacity:.35;animation:float 18s ease-in-out infinite alternate}
body::before{background:#00b4ff;top:-160px;left:-120px}
body::after{background:#7b5cff;bottom:-200px;right:-140px;animation-delay:-9s}
@keyframes float{to{transform:translate(120px,80px) scale(1.15)}}
header{background:rgba(10,12,20,.7)}
.logo span,h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 span{background-size:200% auto;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}
.btn-primary{background:var(--grad);background-size:200% auto;box-shadow:0 6px 24px rgba(123,92,255,.35)}
.btn-primary:hover{background-position:right center;background:var(--grad);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,180,255,.45)}
.btn-ghost:hover{border-color:var(--accent2);background:rgba(123,92,255,.1)}
.hero{background:radial-gradient(circle at 75% 10%,rgba(123,92,255,.25),transparent 50%),radial-gradient(circle at 10% 90%,rgba(0,180,255,.15),transparent 45%)}
.tag{background:rgba(123,92,255,.12);border-color:rgba(123,92,255,.4);color:#cfc4ff}
.alt{background:rgba(16,20,42,.6)}
.card,.cert,.video,.stat,.cert-strip div,form{backdrop-filter:blur(10px);transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover,.cert:hover,.video:hover,.stat:hover{border-color:transparent;box-shadow:0 0 0 1px var(--accent2),0 12px 36px rgba(123,92,255,.3);transform:translateY(-5px)}
.stat b,.cert-strip b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cert-strip div{border-left:3px solid var(--pink)}
#certs{background:linear-gradient(180deg,rgba(16,20,42,.6),rgba(40,20,70,.45))}
h2{background:linear-gradient(90deg,#fff,#cfd8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.links a{position:relative}
.links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--grad);transition:.25s}
.links a:hover::after{width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(123,92,255,.25)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.show{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
@media(max-width:640px){.links{background:rgba(16,20,42,.97)}body::before,body::after{width:300px;height:300px}}
/* Services: featured + sub-services */
.featured{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature{padding:30px 24px;display:flex;flex-direction:column;align-items:flex-start;border-top:3px solid transparent;border-image:var(--grad) 1;border-image-slice:1 0 0 0}
.feature .logo-img{height:72px;max-width:160px;margin-bottom:18px}
.feature h3{font-size:1.25rem}
.sub-head{margin:50px 0 18px;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.subservices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.subsvc{padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:10px;background:var(--card);transition:.25s}
.subsvc:hover{border-left-color:var(--pink);transform:translateY(-3px)}
.subsvc h4{font-size:1rem;margin-bottom:6px}.subsvc p{color:var(--muted);font-size:.88rem}
@media(max-width:900px){.featured{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.featured{grid-template-columns:1fr}}
/* Brand logo */
.logo{display:flex;align-items:center;gap:12px}
.sf-logo{height:34px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,161,224,.45));animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
.brand-name{display:inline-flex;font-size:1.25rem;font-weight:800;letter-spacing:.02em}
.brand-name .ch{display:inline-block;opacity:0;transform:translateY(12px);
 background:linear-gradient(90deg,#fff 0%,#fff 35%,#00b4ff 45%,#7b5cff 50%,#ff4fd8 55%,#fff 65%,#fff 100%);
 background-size:1200% 100%;background-position:calc(var(--i) * -8.3%) 0;
 -webkit-background-clip:text;background-clip:text;color:transparent;
 animation:drop .5s cubic-bezier(.2,.9,.3,1.3) forwards,shimmer 5s linear 1.5s infinite;
 animation-delay:calc(var(--i)*60ms),calc(1.2s + var(--i)*60ms)}
@keyframes drop{to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.logo:hover .ch{animation:drop .5s forwards,wave .6s ease calc(var(--i)*40ms),shimmer 5s linear infinite}
@keyframes wave{50%{transform:translateY(-5px)}}
@media(max-width:380px){.brand-name{font-size:1.05rem}.sf-logo{height:28px}}
@media(prefers-reduced-motion:reduce){.brand-name .ch{opacity:1;transform:none;color:#fff;background:none}}
/* Hero stats – shiny */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.stats{gap:20px}
.stat{position:relative;overflow:hidden;padding:30px 18px;border-radius:16px;border:2px solid transparent;
 background:linear-gradient(160deg,rgba(30,34,60,.95),rgba(14,16,30,.95)) padding-box,
 conic-gradient(from var(--ang),#00b4ff,#7b5cff,#ff4fd8,#ffffff,#00b4ff) border-box;
 animation:spin 6s linear infinite;box-shadow:0 10px 40px rgba(123,92,255,.25),inset 0 1px 0 rgba(255,255,255,.15)}
@keyframes spin{to{--ang:360deg}}
.stat::before{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-20deg);animation:sheen 4.5s ease-in-out infinite}
.stat:nth-child(2)::before{animation-delay:.4s}.stat:nth-child(3)::before{animation-delay:.8s}.stat:nth-child(4)::before{animation-delay:1.2s}
@keyframes sheen{0%,60%{left:-75%}100%{left:130%}}
.stat b{font-size:2.6rem;line-height:1.1;filter:drop-shadow(0 0 12px rgba(0,180,255,.45));font-variant-numeric:tabular-nums}
.stat small{display:block;margin-top:6px;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:#c9cfe8}
.stat:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 16px 50px rgba(0,180,255,.4),inset 0 1px 0 rgba(255,255,255,.2)}
@media(max-width:640px){.stat b{font-size:2.1rem}.stat{padding:22px 12px}}
/* Contact socials */
.where{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line);border-radius:99px;color:#cfd4e6!important;font-size:.9rem}
.where::before{content:"";width:8px;height:8px;border-radius:50%;background:#2ee59d;box-shadow:0 0 8px #2ee59d}
.socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.social{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;font-weight:600;color:#fff;border:1px solid var(--line);background:var(--card);transition:transform .25s,box-shadow .25s,background .25s}
.social svg{width:22px;height:22px}
.social.li svg{color:#0a66c2;background:#fff;border-radius:3px}
.social.yt svg{color:#ff0000}
.social.li:hover{background:#0a66c2;border-color:#0a66c2;box-shadow:0 8px 24px rgba(10,102,194,.45);transform:translateY(-3px)}
.social.yt:hover{background:#ff0000;border-color:#ff0000;box-shadow:0 8px 24px rgba(255,0,0,.35);transform:translateY(-3px)}
.social.yt:hover svg{color:#fff}
/* Certs: 3 per row, larger */
.certs{grid-template-columns:repeat(3,1fr);gap:24px;max-width:980px;margin:0 auto}
.cert{padding:36px 20px;gap:16px}
.cert img,.cert-fallback{width:170px;height:170px}
.cert span{font-size:1.1rem}
.cert small{font-size:.9rem}
@media(max-width:900px){.cert img,.cert-fallback{width:130px;height:130px}}
@media(max-width:640px){.certs{grid-template-columns:repeat(2,1fr);gap:14px}.cert{padding:22px 12px}.cert img,.cert-fallback{width:100px;height:100px}.cert span{font-size:.95rem}}
/* Hero Salesforce logo */
.hero .container{position:relative}
.hero-logo{position:absolute;right:20px;top:10px;width:260px;height:auto;filter:drop-shadow(0 0 40px rgba(0,180,255,.55));animation:bob 5s ease-in-out infinite}
@media(max-width:900px){.hero-logo{position:static;display:block;width:140px;margin:0 0 28px}}
@media(min-width:901px){.hero h1{max-width:calc(100% - 300px)}}
.legal{max-width:860px;margin:14px auto 0;font-size:.75rem;line-height:1.6;color:#7d8597}
.contact-title{white-space:nowrap;font-size:clamp(2.2rem,4.5vw,3.4rem)}
.made-by{margin-top:10px;font-size:.85rem;color:#b9a8ff}
/* Agentblazer badge – centred under certs */
.agentblazer-wrap{display:flex;flex-direction:column;align-items:center;margin-top:50px}
.agentblazer{width:240px;height:auto;filter:drop-shadow(0 0 32px rgba(123,92,255,.6));animation:bob 5s ease-in-out infinite}
.agentblazer-wrap span{margin-top:10px;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:#b9a8ff}
.agentblazer-wrap:not(:has(img)){display:none}
@media(max-width:640px){.agentblazer{width:170px}.agentblazer-wrap{margin-top:36px}}
.tag-link{transition:.25s}.tag-link:hover{border-color:var(--accent);color:#fff;box-shadow:0 0 14px rgba(0,180,255,.35)}
/* Thank-you page */
.thanks{text-align:center;min-height:70vh;display:flex;align-items:center}
.thanks p{margin:0 auto 18px}
.thanks .redirect{color:var(--muted);font-size:.95rem;margin-bottom:32px}
.thanks .redirect b{color:#fff}
.tick{width:96px;height:96px;margin:0 auto 26px;filter:drop-shadow(0 0 24px rgba(46,229,157,.5))}
.tick svg{width:100%;height:100%;fill:none;stroke:#2ee59d;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tick circle{stroke-dasharray:151;stroke-dashoffset:151;animation:drawc .7s ease forwards}
.tick path{stroke-dasharray:40;stroke-dashoffset:40;animation:drawc .4s .6s ease forwards}
@keyframes drawc{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.tick circle,.tick path{stroke-dashoffset:0}}
.thanks h1{white-space:nowrap;font-size:clamp(2.2rem,8vw,3.6rem);max-width:none!important}
.form-error{color:#ff7a90;font-size:.9rem}#send-btn:disabled{opacity:.7;cursor:wait}
/* Testimonials */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.quote{position:relative;margin:0;padding:32px 30px 26px;border-radius:16px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;gap:24px;transition:transform .25s,box-shadow .25s,border-color .25s}
.quote:hover{transform:translateY(-5px);border-color:transparent;box-shadow:0 0 0 1px var(--accent2),0 12px 36px rgba(123,92,255,.3)}
.qmark{position:absolute;top:6px;right:22px;font-size:5.5rem;line-height:1;font-family:Georgia,serif;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.6}
.quote blockquote{color:#d7dcec;font-size:1rem;line-height:1.7;font-style:italic;position:relative}
.quote figcaption{display:flex;align-items:center;gap:14px}
.avatar{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--grad)}
.quote figcaption b{display:block}.quote figcaption small{display:block;color:var(--muted);font-size:.85rem}
.quote figcaption em{display:block;font-style:normal;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#b9a8ff;margin-top:2px}
@media(max-width:800px){.quotes{grid-template-columns:1fr}}
.qmark{font-size:4.2rem;top:8px;right:22px}
/* Hero with photo */
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:50px;align-items:center}
@media(min-width:901px){.hero h1{max-width:none}}
.hero-visual{position:relative;display:flex;justify-content:center}
.photo-ring{position:relative;width:min(360px,100%);aspect-ratio:1;border-radius:50%;padding:6px;
 background:conic-gradient(from var(--ang),#00b4ff,#7b5cff,#ff4fd8,#00b4ff);animation:spin 8s linear infinite;
 box-shadow:0 0 60px rgba(123,92,255,.45)}
.hero-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 18%;display:block;border:5px solid var(--bg);background:#2a2d36}
.hero-visual .hero-logo{position:absolute;top:-18px;left:0;right:auto;width:130px;z-index:2;margin:0}
@media(max-width:900px){
 .hero-grid{grid-template-columns:1fr;gap:36px}
 .hero-visual{order:-1}
 .photo-ring{width:220px}
 .hero-visual .hero-logo{position:absolute;width:90px;top:-10px;left:calc(50% - 160px)}
}
@media(max-width:640px){.photo-ring{width:180px}.hero-visual .hero-logo{width:72px;left:calc(50% - 130px)}}
/* Zoom photo */
.photo-clip{display:block;width:100%;height:100%;border-radius:50%;overflow:hidden;border:5px solid var(--bg);background:#2a2d36}
.photo-clip .hero-photo{border:0;border-radius:0;transform:scale(1.25);transform-origin:50% 30%}
/* Photo: gentler zoom, face centred */
.photo-clip{background:#a9a9a9}
.photo-clip .hero-photo{transform:translate(7%,15%) scale(1.1);transform-origin:50% 50%;object-position:50% 50%}
.photo-clip .hero-photo{transform:translate(7%,7%) scale(1.1)}
.photo-clip .hero-photo{transform:translate(6.5%,6.5%) scale(1.15)}
@media(max-width:900px){
 .hero-grid{position:relative}
 .hero-visual{display:block;position:absolute;top:0;right:0;order:0;width:auto;z-index:2}
 .hero-visual .hero-logo{display:block;position:absolute;width:30px;top:-8px;bottom:auto;left:-14px;right:auto;margin:0;z-index:3;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
 .photo-ring{width:56px!important;height:56px!important;padding:2px;aspect-ratio:1/1;flex:none}
 .photo-clip{border-width:2px}
 .hero-photo{width:100%;height:100%;aspect-ratio:1/1}
 .hero .tag{max-width:calc(100% - 80px)}
}