.hero{
    position:relative;min-height:100svh;
    display:grid;grid-template-columns:1fr auto;
    align-items:center;gap:60px;
    padding:140px clamp(20px,5vw,56px) 80px;
    max-width:1160px;margin:0 auto;overflow:visible;
}

.aurora{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.aurora-blob{
    position:absolute;border-radius:50%;
    filter:blur(80px);opacity:.5;
    animation:float 12s ease-in-out infinite;
}
.a1{width:600px;height:400px;top:-100px;left:-100px;
    background:radial-gradient(circle,#B8CCFF,transparent 70%);
    animation-delay:0s}
.a2{width:500px;height:500px;top:30%;right:-150px;
    background:radial-gradient(circle,#C4D8FF,transparent 70%);
    animation-delay:-4s}
.a3{width:400px;height:400px;bottom:-100px;left:30%;
    background:radial-gradient(circle,#D0E4FF,transparent 70%);
    animation-delay:-8s}

.hero-grain,.rs-grain,.contact-grain,.sp-contact-grain,.sp-process-grain{
    position:absolute;inset:0;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    background-repeat:repeat;background-size:200px;
    mix-blend-mode:multiply;z-index:1;pointer-events:none;
}

.hero-content{
    position:relative;z-index:2;
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
}

.hero-tag{
    display:inline-flex;align-items:center;gap:10px;
    font-size:12px;font-weight:500;color:var(--ink-60);
    letter-spacing:.06em;margin-bottom:28px;
}
.tag-dot{
    width:8px;height:8px;border-radius:50%;background:var(--blue);
    box-shadow:0 0 0 3px rgba(18,70,230,.2);
    animation:pulse 2s ease-in-out infinite;
}

.hero-headline{
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:800;font-size:clamp(50px,7.5vw,96px);
    line-height:.95;letter-spacing:-.04em;
    color:var(--ink);margin-bottom:28px;
}
.h-line{display:block}
.h-line--accent{color:var(--blue);font-style:italic}

.hero-sub{
    font-size:18px;color:var(--ink-60);
    max-width:460px;line-height:1.6;margin-bottom:36px;
}

.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:56px}

.hero-metrics{display:flex;align-items:center;gap:0}
.hm-item{display:flex;flex-direction:column;padding-right:28px}
.hm-num{
    font-family:'Bricolage Grotesque',sans-serif;
    font-weight:800;font-size:32px;letter-spacing:-.04em;color:var(--ink);
    line-height:1;
}
.hm-label{font-size:12px;color:var(--ink-60);margin-top:4px;white-space:nowrap}
.hm-sep{color:var(--ink-25);font-size:28px;padding:0 4px 0 4px;margin-right:24px;line-height:1}

.hero-visual{position:relative;z-index:2;flex-shrink:0}
.hv-frame{
    position:relative;width:clamp(260px,28vw,360px);
    border-radius:var(--r-lg);overflow:visible;
}
.hv-photo{
    width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;
    border-radius:var(--r-lg);
    box-shadow:0 40px 80px rgba(8,9,15,.18);
    background:var(--blue-l);
}
.hv-badge{
    position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
    display:inline-flex;align-items:center;gap:8px;
    background:#fff;border-radius:100px;padding:10px 18px;
    font-size:13px;font-weight:600;color:var(--ink);
    box-shadow:0 8px 24px rgba(8,9,15,.12);white-space:nowrap;
}
.hv-badge-icon{width:26px;height:26px;background:var(--blue);border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.hv-accent-line{
    position:absolute;top:40px;left:-16px;
    width:4px;height:60px;background:var(--blue);border-radius:4px;
}

.hero-scroll{
    position:absolute;bottom:36px;left:0;
    display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-track{width:1.5px;height:48px;background:var(--ink-08);border-radius:4px;overflow:hidden}
.scroll-thumb{width:100%;height:40%;background:var(--blue);border-radius:4px;
    animation:scrollDown 1.8s ease-in-out infinite}

.hero-social-proof{
    display:flex;align-items:center;gap:10px;
    font-size:13px;color:var(--ink-60);
    margin-bottom:20px;font-style:italic;
}
.hsp-stars{color:#F5B800;font-style:normal;font-size:13px;letter-spacing:1px}