:root{--bg:#ffffff;--txt:#0f172a;--muted:#64748b;--primary:#5b36f3;--grad1:#3b82f6;--grad2:#ec4899;--glass:rgba(17,24,39,.04);--accent:#25D366;--border:#e5e7eb}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
html{scroll-behavior:smooth}

.container{max-width:1120px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:12px;border:1px solid transparent;transition:transform .25s ease,background .25s ease;border-color:transparent}
.btn.primary{background:linear-gradient(90deg,var(--grad1),var(--grad2));color:white}
.btn.primary:hover{transform:translateY(-2px);filter:saturate(110%)}
.btn.ghost{border-color:var(--border);background:transparent}
.btn.ghost:hover{background:#f1f5f9}
.btn.small{padding:10px 12px}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;left:var(--x,50%);top:var(--y,50%);transform:translate(-50%,-50%);width:0;height:0;border-radius:50%;background:rgba(99,102,241,.15);transition:width .6s ease,height .6s ease,opacity .7s ease;opacity:0;pointer-events:none}
.btn.pulse::after{width:260px;height:260px;opacity:1}
.gradient-text{background:linear-gradient(90deg,var(--grad1),var(--grad2));-webkit-background-clip:text;background-clip:text;color:transparent}

.site-header{position:fixed;top:0;left:0;right:0;z-index:30;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.brand-name{letter-spacing:.2px}
.nav{display:flex;align-items:center;gap:24px}
.nav a{color:var(--muted)}
.nav a:hover{color:var(--txt)}
.menu-toggle{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:#fff;align-items:center;justify-content:center}
.menu-toggle .lines{width:18px;height:2px;background:#0f172a;position:relative}
.menu-toggle .lines::before,.menu-toggle .lines::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#0f172a;transition:transform .25s ease}
.menu-toggle .lines::before{top:-6px}
.menu-toggle .lines::after{top:6px}
.menu-toggle[aria-expanded="true"] .lines{background:transparent}
.menu-toggle[aria-expanded="true"] .lines::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .lines::after{transform:translateY(-6px) rotate(-45deg)}

.hero{position:relative;min-height:92vh;display:flex;align-items:center;padding-top:96px}
.hero-bg{position:absolute;inset:0;background:radial-gradient(1200px 520px at var(--mx,50%) var(--my,10%),rgba(59,130,246,.12),transparent),radial-gradient(800px 360px at 20% 60%,rgba(236,72,153,.10),transparent);filter:saturate(115%)}
.parallax{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.layer{position:absolute;border-radius:24px;filter:saturate(120%);will-change:transform;transform:translate3d(0,0,0)}
.layer.l1{width:240px;height:240px;left:6%;top:18%;background:radial-gradient(circle at 40% 40%,rgba(59,130,246,.25),transparent),linear-gradient(135deg,rgba(99,102,241,.2),rgba(236,72,153,.18))}
.layer.l2{width:180px;height:180px;right:8%;top:26%;background:radial-gradient(circle at 60% 60%,rgba(236,72,153,.28),transparent)}
.layer.l3{width:120px;height:120px;left:22%;bottom:18%;background:radial-gradient(circle at 50% 50%,rgba(16,185,129,.28),transparent)}
.layer.l4{width:320px;height:120px;right:14%;bottom:12%;background:linear-gradient(90deg,rgba(59,130,246,.18),rgba(236,72,153,.18));border-radius:40px}
.hero-content{position:relative;z-index:1;text-align:center}
.hero h1{font-size:clamp(32px,7vw,64px);line-height:1.05;margin:0 0 18px}
.lead{color:var(--muted);font-size:clamp(16px,2.2vw,20px);max-width:720px;margin:0 auto 26px}
.cta{display:flex;justify-content:center;gap:14px;margin-top:8px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.stat{background:#fff;border:1px solid var(--border);padding:16px;border-radius:14px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.stat .num{font-size:28px;font-weight:700}
.stat .label{display:block;color:var(--muted)}
.scroll-indicator{position:absolute;bottom:18px;left:50%;translate:-50% 0;color:#94a3b8;animation:bounce 1.8s infinite ease-in-out}
@keyframes bounce{50%{transform:translateY(-6px)}}

.section{padding:90px 0}
.section.alt{background:#f8fafc}
.sub{color:var(--muted);margin-top:-6px}

.grid.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.card{background:#fff;border:1px solid var(--border);padding:22px;border-radius:16px;min-height:160px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.card h3{margin:10px 0 8px;font-size:18px}
.icon{width:46px;height:46px;border-radius:12px;background:linear-gradient(90deg,var(--grad1),var(--grad2));box-shadow:0 8px 24px rgba(99,102,241,.35)}
.i-web{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M3 4h18v16H3zm2 2v12h14V6zm3 2h8v2H8zm0 4h8v2H8z"/></svg>') center/contain}
.i-app{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect fill="white" x="7" y="2" width="10" height="20" rx="3"/><circle fill="white" cx="12" cy="18" r="2"/></svg>') center/contain}
.i-ui{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M4 5h16v4H4zm0 6h10v8H4z"/></svg>') center/contain}
.i-seo{mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M3 12a9 9 0 1018 0 9 9 0 10-18 0zm9-7v14m-7-7h14"/></svg>') center/contain}

.grid.portfolio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.p-card{border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#fff;transition:transform .25s ease;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.p-card:hover{box-shadow:0 16px 40px rgba(15,23,42,.08)}
.p-card.tilt{transition:transform .1s ease}

.grid.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.b-card{border:1px solid var(--border);background:#fff;border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.b-card h3{margin:8px 0 8px;font-size:18px}
.b-card time{color:var(--muted);font-size:14px}
.p-card:hover{transform:translateY(-4px)}
.p-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.p-info{padding:14px}

.about{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;margin-top:28px}
.ticks{display:grid;gap:10px;margin:12px 0 0 0;padding:0;list-style:none}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:"✔";position:absolute;left:0;top:0;color:#10b981}
.about-art{position:relative;min-height:220px}
.orb{position:absolute;border-radius:50%;filter:blur(12px)}
.orb.o1{width:170px;height:170px;background:radial-gradient(circle at 40% 40%,rgba(59,130,246,.8),transparent);left:10%;top:10%;animation:float 6s ease-in-out infinite}
.orb.o2{width:120px;height:120px;background:radial-gradient(circle at 60% 60%,rgba(236,72,153,.8),transparent);right:16%;top:30%;animation:float 8s 1s ease-in-out infinite}
.orb.o3{width:140px;height:140px;background:radial-gradient(circle at 50% 50%,rgba(16,185,129,.7),transparent);left:40%;bottom:10%;animation:float 7s .5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}

.faq details{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;box-shadow:0 6px 16px rgba(15,23,42,.05);transition:box-shadow .25s ease,border-color .25s ease}
.faq details+details{margin-top:12px}
.faq summary{cursor:pointer;position:relative;padding-right:26px}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;translate:0 -50%;width:16px;height:16px;background:var(--muted);mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M6 9l6 6 6-6"/></svg>') center/contain;transition:transform .25s ease,background .25s ease}
.faq details[open] summary::after{transform:rotate(180deg);background:var(--primary)}
.faq-content{overflow:hidden;max-height:0;opacity:.001;transform:translateY(-4px);transition:max-height .38s cubic-bezier(.22,.61,.36,1),opacity .28s ease,transform .38s ease}
.faq details[open] .faq-content{opacity:1;transform:none;max-height:var(--h)}
.faq details:hover{box-shadow:0 10px 24px rgba(15,23,42,.08)}

.contact{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field input,.field textarea{padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#ffffff;color:var(--txt)}
.contact .btn{margin-top:6px}

.site-footer{border-top:1px solid var(--border);background:#ffffff}
.fwrap{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.flinks{display:flex;gap:18px;color:var(--muted)}
.flinks a:hover{color:var(--primary)}

.reveal{opacity:.001;transform:translateY(12px) scale(.98);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

@media (max-width:1024px){.grid.features{grid-template-columns:repeat(2,1fr)}.grid.portfolio{grid-template-columns:repeat(2,1fr)}.grid.blog-grid{grid-template-columns:repeat(2,1fr)}.about{grid-template-columns:1fr}}
@media (max-width:640px){.nav{display:none}.menu-toggle{display:inline-flex}.hero{min-height:86vh}.stats{grid-template-columns:1fr 1fr}.grid.features,.grid.portfolio,.grid.blog-grid{grid-template-columns:1fr}.contact{grid-template-columns:1fr}.site-header .btn.small{display:none}.fwrap{flex-direction:column;gap:12px;text-align:center;padding:24px 0 32px}.flinks{flex-wrap:wrap;justify-content:center;gap:12px}.site-footer small{display:block;margin-top:6px;color:var(--muted)}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wa-float{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);box-shadow:0 10px 24px rgba(18,140,126,.35);display:grid;place-items:center;z-index:80;transition:transform .25s ease,box-shadow .25s ease;animation:breath 3.6s ease-in-out infinite}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(18,140,126,.45)}
.wa-icon{width:26px;height:26px;background:white;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2a9.9 9.9 0 00-8.4 15.3L2 22l4.9-1.5A9.9 9.9 0 1012 2zm5.7 14.2c-.2.6-1.2 1.1-1.7 1.2-.5.1-1 .1-1.7-.1a9.9 9.9 0 01-3.6-2.1 10.4 10.4 0 01-2.5-3.2c-.3-.6-.5-1.2-.5-1.7 0-.6.3-1 .6-1.3l.4-.3c.2-.1.5-.2.7 0 .2.1.5.8.6 1.1.2.4.4.8.3 1.1-.1.4-.7.6-.7.9 0 .3.4.9.8 1.4.5.6 1.1 1.1 1.7 1.4.3.1.6.3.9.2.3-.1.4-.5.7-.8.2-.2.5-.3.8-.2.3.1 1.9.9 2.3 1.1.4.1.7.2.8.4.2.2.2.7.1 1z"/></svg>') center/contain}
@keyframes breath{50%{transform:translateY(-2px) scale(1.02)}}

.drawer{position:fixed;top:0;right:0;width:min(86vw,360px);height:100vh;background:#ffffff;border-left:1px solid var(--border);box-shadow:-20px 0 40px rgba(15,23,42,.08);transform:translateX(100%);transition:transform .4s cubic-bezier(.22,.61,.36,1);z-index:90;display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border)}
.menu-close{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:#fff}
.drawer-nav{display:flex;flex-direction:column;padding:12px}
.drawer-nav a{padding:12px 12px;border-radius:10px;color:#0f172a}
.drawer-nav a:hover{background:#f1f5f9}
.drawer-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.25);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:85}
.drawer-backdrop.show{opacity:1;pointer-events:auto}
.section{position:relative}
.section::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(99,102,241,.15),transparent)}
.grid.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.b-card{border:1px solid var(--border);background:#fff;border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.b-card h3{margin:8px 0 8px;font-size:18px}
.b-card time{color:var(--muted);font-size:14px}