:root{ --bg:#1c1b23;--bg-soft:#23222c;--text-muted:#666473;--text-main:#ffffff;--accent:#7c5cff;--accent-2:#ff8a3d;--line:#2e2c38;}
*{  box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg);color:var(--text-muted);overflow-x:hidden;scroll-behavior:smooth;}
img{  max-width:100%; display:block; }
a{  text-decoration:none; color:inherit; }
/* ===== HEADER ===== */
header{ width:100%;display:flex;justify-content:center;align-items:center;padding:22px 24px;position:relative;z-index:10;}
header .logo-wrap{ width:100%;max-width:120px;}
header .logo-wrap img{  width:100%; }
/* ===== BANNER ===== */
.banner{ display:flex;align-items:center;justify-content:space-between;gap:40px;max-width:1200px;margin:0 auto;padding:70px 24px 90px;position:relative;}
.banner::before{ content:"";position:absolute;top:-10%;right:5%;width:480px;height:480px;background:radial-gradient(circle, rgba(124,92,255,0.18), transparent 70%);filter:blur(10px);z-index:0;pointer-events:none;}
.banner-text{ flex:1 1 420px;z-index:2;min-width:280px;}
.eyebrow{ display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:13px;font-weight:600;letter-spacing:.3px;background:rgba(124,92,255,0.1);border:1px solid rgba(124,92,255,0.35);border-radius:30px;padding:6px 16px;margin-bottom:22px;}
.eyebrow::before{ content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);}
.banner-text h1{ color:var(--text-main);font-size:clamp(28px,4vw,46px);line-height:1.35;font-weight:800;margin-bottom:22px;}
.banner-text h1 span{ background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.banner-text p{ font-size:16px;line-height:2;color:var(--text-muted);margin-bottom:34px;max-width:480px;}
.cta-btn{ display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--accent),#9b7bff);color:#fff;font-weight:700;font-size:16px;padding:16px 34px;border-radius:14px;box-shadow:0 10px 30px -8px rgba(124,92,255,0.6);transition:transform .25s ease, box-shadow .25s ease;}
.cta-btn:hover{ transform:translateY(-3px);box-shadow:0 16px 34px -8px rgba(124,92,255,0.75);}
.cta-btn svg{  transition:transform .25s ease; }
.cta-btn:hover svg{  transform:translateX(-4px); }
/* ===== BANNER VISUAL ===== */
.banner-visual{ flex:1 1 460px;position:relative;min-width:280px;height:480px;z-index:1;}
.visual-card{ position:absolute;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);}
.card-main{ width:70%;right:0;top:5%;z-index:2;animation: floatA 6s ease-in-out infinite;}
.card-product{ width:38%;left:0;top:50%;z-index:3;background:var(--bg-soft);animation: floatB 7s ease-in-out infinite;}
.badge-ai{ position:absolute;top:10%;left:4%;background:#2d2c39;backdrop-filter:blur(6px);color:var(--text-main);font-size:12px;font-weight:700;padding:9px 16px;border-radius:30px;display:flex;align-items:center;gap:6px;z-index:4;animation: floatC 5s ease-in-out infinite;}
.badge-ai::before{ content:"✦";color:var(--accent-2);}
@keyframes floatA{
    0%,100%{  transform:translateY(0); }
    50%{  transform:translateY(-14px); }
}
@keyframes floatB{
    0%,100%{  transform:translateY(0); }
    50%{  transform:translateY(12px); }
}
@keyframes floatC{
    0%,100%{  transform:translateY(0); }
    50%{  transform:translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
    .card-main, .card-product, .badge-ai { animation: none; }
}
/* ===== HOW IT WORKS (extra section, supports the brief) ===== */
.steps{ max-width:1200px;margin:0 auto;padding:20px 24px 100px;}
.steps-head{ text-align:center;margin-bottom:50px;}
.steps-head h2{ color:var(--text-main);font-size:clamp(22px,3vw,32px);margin-bottom:12px;}
.steps-head p{ color:var(--text-muted);font-size:15px;}
.steps-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.step-card{ position:relative;background:radial-gradient(140% 140% at 0% 0%, rgba(124,92,255,0.16), transparent 55%),radial-gradient(140% 140% at 100% 100%, rgba(255,138,61,0.12), transparent 55%),var(--bg-soft);border-radius:20px;padding:34px 28px 30px;overflow:hidden;transition:transform .3s ease, box-shadow .3s ease;}
.step-num{ font-weight:200;font-size:40pt;line-height:1;letter-spacing:0;margin-bottom:6px;display:block;
background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;
color:transparent;opacity:0.9;font-family:Arial !important; }
.step-card h3{ color:var(--text-main);font-size:18px;margin-bottom:10px;position:relative;z-index:1;}
.step-card p{ font-size:14px;line-height:1.9;color:var(--text-muted);position:relative;z-index:1;}
@media (max-width:860px){
    .steps-grid{  grid-template-columns:1fr; }
}
/* ===== FOOTER ===== */
footer{ background:var(--bg-soft);padding:60px 24px 30px;}
.footer-inner{ max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;}
.footer-about{ flex:1 1 140px;}
.footer-about h4{ color:var(--text-main);font-size:18px;margin-bottom:10px;}
.footer-about p{ font-size:14px;line-height:2;color:var(--text-muted);max-width:460px;}
.footer-contact{ display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-right:auto;}
.contact-info{ display:flex;flex-direction:column;gap:14px;}
.contact-info a{ display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:14px;transition:color .2s ease;}
.contact-info a:hover{  color:var(--text-main); }
.contact-info svg{  flex-shrink:0; color:var(--accent); }
.logo-box{ width:140px;height:150px;border-radius:16px;background:rgba(255,255,255,0.04);flex-shrink:0;text-align:center;padding:15px; }
.logo-box > a { margin:0px auto;display:block;width:110px;height:120px; }
.footer-bottom{ max-width:1200px;margin:50px auto 0;padding-top:20px;text-align:center;font-size:13px;color:var(--text-muted);}
@media (max-width:760px){
    .banner{  flex-direction:column; padding-top:40px; }
    .banner-text{  text-align:center; }
    .banner-text p{  margin-left:auto; margin-right:auto; }
    .banner-visual{  width:100%; height:380px; }
    .footer-inner{  flex-direction:column; gap:30px; }
    .footer-contact{  margin-right:0; }
}
@media (max-width:420px){
    .banner-visual{  height:300px; }
    .card-main{  width:70%; }
    .card-product{  width:46%; }
}
/* Focus visibility */
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent);outline-offset:3px; }