/* ============================================
   NS Techno — Japanese Tech Futurism (Purple)
   Merged: Old Section Structure + New Design System
   ============================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --white:#ffffff;
    --off-white:#f8fafc;
    --gray-50:#f1f5f9;
    --gray-100:#e2e8f0;
    --gray-200:#cbd5e1;
    --gray-400:#94a3b8;
    --gray-600:#475569;
    --gray-800:#1e293b;
    --black:#0f172a;

    --blue-50:#f5f3ff;
    --blue-100:#ede9fe;
    --blue-200:#ddd6fe;
    --blue-400:#a78bfa;
    --blue:#7c3aed;
    --blue-dark:#6d28d9;
    --blue-900:#2e1065;

    --accent:var(--blue);
    --accent-glow:rgba(124,58,237,.35);
    --accent-subtle:rgba(124,58,237,.06);
    --accent-subtle-2:rgba(124,58,237,.12);

    --radius:16px;
    --radius-lg:24px;
    --radius-sm:10px;
    --radius-xs:6px;

    --shadow-sm:0 1px 2px rgba(0,0,0,.04);
    --shadow:0 4px 24px rgba(0,0,0,.05);
    --shadow-lg:0 12px 48px rgba(0,0,0,.08);
    --shadow-glow:0 0 40px var(--accent-glow);
    --shadow-glow-sm:0 0 20px rgba(124,58,237,.2);
    --shadow-hover:0 12px 40px rgba(124,58,237,.12);

    --font:'Noto Sans JP','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    --font-en:'Inter','Noto Sans JP',sans-serif;
    --ease:cubic-bezier(.4,0,.2,1);
    --ease-out:cubic-bezier(0,0,.2,1);
    --ease-spring:cubic-bezier(.34,1.56,.64,1);

    --space-xs:8px;--space-sm:16px;--space-md:24px;--space-lg:40px;
    --space-xl:64px;--space-2xl:100px;--space-3xl:140px;
    --max-w:1140px;
}

html{scroll-behavior:smooth}
body{
    font-family:var(--font);font-size:16px;line-height:1.8;
    color:var(--gray-800);background:var(--white);
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.nav-open{overflow:hidden}

/* ---------- Gradient text ---------- */
.text-gradient{
    background:linear-gradient(135deg,var(--blue) 0%,var(--blue-400) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.text-gradient-light{
    background:linear-gradient(135deg,var(--blue-200) 0%,var(--blue-400) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ---------- Glass cards ---------- */
.glass-card{
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.6);
    box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.5);
}
.glass-card-dark{
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---------- Pills ---------- */
.pill{
    display:inline-block;padding:6px 18px;
    background:var(--accent-subtle-2);color:var(--blue);
    border-radius:40px;font-size:13px;font-weight:500;
    border:1px solid rgba(124,58,237,.12);
}

/* ---------- Utility ---------- */
.u-sp{display:none}
.nw{white-space:nowrap}

/* ============================
   HEADER
   ============================ */
.site-header{
    position:sticky;top:0;z-index:100;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid rgba(0,0,0,.04);
    padding:14px var(--space-md);
    transition:box-shadow .3s var(--ease);
}
.site-header.scrolled{box-shadow:0 1px 20px rgba(0,0,0,.06)}
.site-header__inner{
    max-width:var(--max-w);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
}
.site-header__logo{
    font-family:var(--font-en);font-weight:700;font-size:18px;
    letter-spacing:.01em;color:var(--blue);text-decoration:none;
    display:flex;align-items:center;gap:10px;
}
.site-header__logo-mark{width:40px;height:40px;display:block;flex-shrink:0}
.site-header__nav-list{display:flex;list-style:none;gap:var(--space-lg);align-items:center}
.site-header__nav a{
    font-size:14px;font-weight:500;color:var(--gray-800);
    text-decoration:none;transition:color .2s;position:relative;
}
.site-header__nav a::after{
    content:'';position:absolute;bottom:-4px;left:0;right:0;
    height:2px;background:var(--blue);border-radius:1px;
    transform:scaleX(0);transition:transform .25s var(--ease);
}
.site-header__nav a:hover{color:var(--blue)}
.site-header__nav a:hover::after{transform:scaleX(1)}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:13px 28px;font-family:var(--font);font-size:14px;font-weight:600;
    text-decoration:none;border-radius:var(--radius-sm);
    transition:all .25s var(--ease);cursor:pointer;border:none;
}
.btn svg{width:16px;height:16px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--blue);color:var(--white)}
.btn--primary:hover{background:var(--blue-dark);transform:translateY(-1px)}
.btn--glow{box-shadow:var(--shadow-glow-sm)}
.btn--glow:hover{box-shadow:var(--shadow-glow)}
.btn--outline{
    background:transparent;color:var(--blue);
    border:1.5px solid rgba(124,58,237,.3);
}
.btn--outline:hover{
    background:var(--accent-subtle);border-color:var(--blue);
    transform:translateY(-1px);
}
.btn--ghost{background:transparent;color:var(--blue)}
.btn--ghost:hover{color:var(--blue-dark)}
.btn--nav{
    padding:9px 22px;background:var(--blue);color:var(--white)!important;
    border-radius:var(--radius-sm);
}
.btn--nav::after{display:none!important}
.btn--nav:hover{background:var(--blue-dark);transform:translateY(-1px)}

.mobile-menu-toggle{
    display:none;flex-direction:column;gap:6px;background:none;
    border:none;cursor:pointer;padding:8px;
}
.mobile-menu-toggle span{
    width:22px;height:2px;background:var(--gray-800);
    transition:all .3s var(--ease);border-radius:1px;
}

/* ============================
   HERO
   ============================ */
.hero{
    position:relative;min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:var(--space-3xl) var(--space-md) var(--space-2xl);
    overflow:hidden;isolation:isolate;
}
.hero__bg{
    position:absolute;inset:0;
    background:linear-gradient(170deg,var(--white) 0%,var(--off-white) 40%,rgba(124,58,237,.03) 100%);
}
.hero__particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero__mesh{
    position:absolute;border-radius:50%;
    filter:blur(80px);opacity:.35;pointer-events:none;
}
.hero__mesh--1{
    width:600px;height:600px;top:-15%;right:-10%;
    background:radial-gradient(circle,rgba(124,58,237,.25) 0%,transparent 70%);
    animation:meshFloat 20s ease-in-out infinite;
}
.hero__mesh--2{
    width:400px;height:400px;bottom:5%;left:-5%;
    background:radial-gradient(circle,rgba(167,139,250,.2) 0%,transparent 70%);
    animation:meshFloat 25s ease-in-out infinite reverse;
}
@keyframes meshFloat{
    0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(30px,-20px) scale(1.05)}
    66%{transform:translate(-20px,15px) scale(.95)}
}
.hero__inner{position:relative;z-index:1;max-width:780px;text-align:center}
.hero__eyebrow{
    font-family:var(--font-en);font-size:12px;font-weight:600;
    letter-spacing:.25em;text-transform:uppercase;color:var(--blue);
    margin-bottom:var(--space-md);
}
.hero__title{
    font-size:clamp(28px,4.5vw,52px);font-weight:800;
    line-height:1.3;letter-spacing:-.02em;color:var(--black);
    margin-bottom:var(--space-lg);
}
.hero__lead{
    font-size:16px;line-height:1.9;color:var(--gray-600);
    margin-bottom:var(--space-xl);max-width:600px;margin-left:auto;margin-right:auto;
}
.hero__cta{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap}
.hero__scroll{position:absolute;bottom:var(--space-lg);left:50%;transform:translateX(-50%)}
.hero__scroll span{
    display:block;width:26px;height:42px;border:2px solid var(--gray-200);
    border-radius:13px;position:relative;
}
.hero__scroll span::after{
    content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:4px;height:8px;background:var(--blue);border-radius:2px;
    animation:scrollDown 2s ease-in-out infinite;
}
@keyframes scrollDown{
    0%,100%{opacity:1;transform:translateX(-50%) translateY(0)}
    50%{opacity:.2;transform:translateX(-50%) translateY(10px)}
}

/* ============================
   SECTIONS – BASE
   ============================ */
.section{position:relative;padding:var(--space-3xl) var(--space-md);overflow:hidden}
.section--alt{background:var(--off-white)}
.section--dark{background:var(--black);color:var(--gray-200)}
.section--dark .section__title{color:var(--white)}
.section--dark .section__kicker{color:var(--blue-400)}
.section--dark .section__lead{color:var(--gray-400)}
.section#ai-raas{padding-bottom:var(--space-2xl)}
.section__inner{max-width:var(--max-w);margin:0 auto;position:relative;z-index:1}
.section__head{margin-bottom:var(--space-xl)}
.section__head--center{text-align:center;max-width:880px;margin-left:auto;margin-right:auto}
.section__kicker{
    font-family:var(--font-en);font-size:13px;font-weight:700;
    letter-spacing:.12em;color:var(--blue);margin-bottom:var(--space-sm);
}
.section__title{
    font-size:clamp(26px,3.6vw,42px);font-weight:700;
    line-height:1.35;letter-spacing:-.01em;color:var(--black);
    margin-bottom:var(--space-md);
}
.section__lead{font-size:15px;line-height:1.85;color:var(--gray-600)}
.section__cta{text-align:center;margin-top:var(--space-xl)}

/* Section decorations */
.section--dotgrid::before{
    content:'';position:absolute;inset:0;
    background-image:radial-gradient(circle,var(--gray-200) 1px,transparent 1px);
    background-size:28px 28px;opacity:.5;pointer-events:none;
    mask-image:linear-gradient(180deg,transparent 0%,black 15%,black 85%,transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,black 15%,black 85%,transparent 100%);
}
.section__deco{
    position:absolute;width:500px;height:500px;
    border-radius:50%;filter:blur(100px);opacity:.25;pointer-events:none;
    background:radial-gradient(circle,rgba(124,58,237,.3) 0%,transparent 70%);
    top:10%;left:-10%;
}
.section__deco--right{left:auto;right:-10%;top:auto;bottom:10%}
.section__mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.section__mesh::before,.section__mesh::after{
    content:'';position:absolute;border-radius:50%;filter:blur(100px);opacity:.15;
}
.section__mesh::before{
    width:500px;height:500px;top:-10%;right:-5%;
    background:radial-gradient(circle,rgba(124,58,237,.5) 0%,transparent 70%);
}
.section__mesh::after{
    width:350px;height:350px;bottom:-5%;left:10%;
    background:radial-gradient(circle,rgba(167,139,250,.4) 0%,transparent 70%);
}
.section__mesh--alt::before{right:auto;left:-5%;top:auto;bottom:-10%}
.section__mesh--alt::after{left:auto;right:10%;bottom:auto;top:-5%}

/* ============================
   CHALLENGES STRIP
   ============================ */
.challenges-strip{
    display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-sm);
}
.challenges-strip__item{
    padding:var(--space-lg);background:var(--white);
    border-radius:var(--radius);border-left:4px solid var(--blue);
    box-shadow:var(--shadow);
    transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.challenges-strip__item:hover{
    transform:translateY(-3px) translateX(4px);
    box-shadow:var(--shadow-hover);border-left-color:var(--blue-dark);
}
.challenges-strip__icon{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin-bottom:var(--space-sm);color:var(--blue);
}
.challenges-strip__icon svg{width:24px;height:24px}
.challenges-strip__num{
    font-size:11px;font-weight:700;letter-spacing:.1em;
    color:var(--blue);display:block;margin-bottom:var(--space-xs);
}
.challenges-strip__item h3{font-size:16px;font-weight:600;margin-bottom:4px}
.challenges-strip__item p{font-size:14px;color:var(--gray-600);line-height:1.6}

/* ============================
   AI RaaS COMPARE
   ============================ */
.raas-compare{
    display:flex;align-items:stretch;gap:var(--space-md);margin-bottom:var(--space-lg);
}
.raas-compare__col{
    flex:1;padding:var(--space-lg);border-radius:var(--radius);
    border:1px solid rgba(255,255,255,.08);
}
.raas-compare__col--before{background:rgba(255,255,255,.04)}
.raas-compare__col--after{background:rgba(255,255,255,.08)}
.raas-compare__label{
    display:block;font-size:13px;font-weight:700;
    letter-spacing:.15em;text-transform:uppercase;
    color:var(--gray-400);margin-bottom:var(--space-sm);
}
.raas-compare__col--after .raas-compare__label{color:var(--blue-400)}
.raas-compare__col ul{list-style:none}
.raas-compare__col li{
    font-size:17px;color:var(--gray-400);line-height:1.8;
    padding-left:16px;position:relative;margin-bottom:10px;
}
.raas-compare__col li::before{
    content:'';position:absolute;left:0;top:.65em;
    width:5px;height:5px;border-radius:50%;background:var(--gray-400);
}
.raas-compare__col--after li{color:var(--gray-200)}
.raas-compare__col--after li::before{background:var(--blue-400)}
.raas-compare__arrow{
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;width:48px;min-width:48px;
    color:var(--blue-400);font-size:24px;font-weight:600;
}

.raas-value{
    margin-top:var(--space-md);padding:var(--space-lg);
    display:flex;align-items:flex-start;gap:var(--space-md);
    border-radius:var(--radius);
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
}
.raas-value__icon{
    flex-shrink:0;display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;color:var(--blue-400);
}
.raas-value__icon svg{width:24px;height:24px}
.raas-value__text{flex:1}
.raas-value strong{
    display:block;font-family:var(--font-en);font-size:14px;
    letter-spacing:.15em;color:var(--blue-400);margin-bottom:var(--space-sm);
}
.raas-value p{font-size:18px;font-weight:600;color:var(--gray-200);margin:0;line-height:1.7}

/* ============================
   VIDEO BLOCK
   ============================ */
.video-block{margin-bottom:var(--space-xl)}
.video-block__frame{
    position:relative;aspect-ratio:16/9;
    border-radius:var(--radius-lg);overflow:hidden;
    background:linear-gradient(145deg,#0c1a2e 0%,#0f172a 50%,#0c1a2e 100%);
    border:1px solid rgba(124,58,237,.15);
    box-shadow:0 0 0 1px rgba(0,0,0,.1),0 20px 60px rgba(0,0,0,.15),var(--shadow-glow-sm);
}
.video-block__frame--dark{
    background:linear-gradient(145deg,#070d18 0%,#0f172a 50%,#070d18 100%);
    border-color:rgba(255,255,255,.06);
}
.video-block__frame--compact{aspect-ratio:4/3}
.video-block__video{
    position:absolute;inset:0;z-index:1;
    width:100%;height:100%;object-fit:cover;background:#0b1220;
}
.video-block__grid{
    position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(124,58,237,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(124,58,237,.04) 1px,transparent 1px);
    background-size:40px 40px;animation:gridShift 30s linear infinite;
    z-index:2;pointer-events:none;
}
@keyframes gridShift{0%{background-position:0 0}100%{background-position:40px 40px}}
.video-block__badge{
    position:absolute;left:16px;right:16px;top:16px;
    z-index:3;padding:10px 14px;border-radius:10px;
    background:rgba(5,13,27,.55);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.12);
}
.video-block__badge--compact{left:10px;right:10px;top:10px;padding:8px 10px}
.video-block__label{font-size:15px;font-weight:600;color:rgba(255,255,255,.9);margin-top:var(--space-xs)}
.video-block__sub{font-size:12px;color:rgba(255,255,255,.4);text-align:center;max-width:400px;line-height:1.6}
.video-block__corner{position:absolute;width:20px;height:20px}
.video-block__corner--tl{top:12px;left:12px;border-top:2px solid var(--blue-400);border-left:2px solid var(--blue-400);border-radius:2px 0 0 0}
.video-block__corner--tr{top:12px;right:12px;border-top:2px solid var(--blue-400);border-right:2px solid var(--blue-400);border-radius:0 2px 0 0}
.video-block__corner--bl{bottom:12px;left:12px;border-bottom:2px solid var(--blue-400);border-left:2px solid var(--blue-400);border-radius:0 0 0 2px}
.video-block__corner--br{bottom:12px;right:12px;border-bottom:2px solid var(--blue-400);border-right:2px solid var(--blue-400);border-radius:0 0 2px 0}

/* ============================
   SCENE GRID (inside AI RaaS)
   ============================ */
.scene-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:var(--space-md);
    margin-top:var(--space-lg);
    margin-bottom:var(--space-xl);
}
.scene-card{
    position:relative;padding:var(--space-lg) var(--space-md);
    border-radius:var(--radius);transition:all .35s var(--ease);overflow:hidden;
}
.scene-card::before{
    content:'';position:absolute;bottom:0;left:0;right:0;
    height:3px;background:linear-gradient(90deg,var(--blue),var(--blue-400));
    transform:scaleX(0);transition:transform .35s var(--ease);transform-origin:left;
}
.scene-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg),var(--shadow-glow-sm)}
.scene-card:hover::before{transform:scaleX(1)}
.scene-card__icon{
    display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:var(--radius-sm);
    background:linear-gradient(135deg,var(--blue) 0%,var(--blue-400) 100%);
    color:var(--white);margin-bottom:var(--space-md);box-shadow:var(--shadow-glow-sm);
}
.scene-card__icon svg{width:22px;height:22px}
.scene-card__num{
    position:absolute;top:var(--space-md);right:var(--space-md);
    font-family:var(--font-en);font-size:36px;font-weight:800;
    color:rgba(124,58,237,.06);line-height:1;
}
.scene-card h3{font-size:17px;font-weight:600;color:var(--black);margin-bottom:var(--space-xs)}
.scene-card p{font-size:14px;color:var(--gray-600);line-height:1.7}

.section--dark .scene-card h3{color:var(--white)}
.section--dark .scene-card p{color:var(--gray-400)}
.section--dark .scene-card__num{color:rgba(167,139,250,.08)}

/* ============================
   METRICS BAR
   ============================ */
.metrics-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-sm)}
.metrics-bar__item{
    text-align:center;padding:var(--space-md) var(--space-sm);
    border-radius:var(--radius);position:relative;overflow:hidden;
}
.metrics-bar__item::before{
    content:'';position:absolute;top:0;left:0;right:0;
    height:2px;background:linear-gradient(90deg,var(--blue),var(--blue-400));
}
.metrics-bar__item strong{
    display:block;font-family:var(--font-en);font-size:24px;font-weight:800;
    background:linear-gradient(135deg,var(--blue),var(--blue-400));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;margin-bottom:4px;
}
.metrics-bar__item span{font-size:12px;color:var(--gray-600);font-weight:500}
.section--dark .metrics-bar__item span{color:var(--gray-400)}

/* ============================
   CORE SERVICES – PILLARS
   ============================ */
.services-pillars{
    position:relative;display:grid;
    grid-template-columns:repeat(4,1fr);gap:var(--space-md);
    padding:var(--space-xl) 0;
}
.services-pillars__line{
    position:absolute;top:50%;left:10%;right:10%;
    height:2px;
    background:linear-gradient(90deg,var(--blue) 0%,rgba(124,58,237,.3) 50%,var(--blue) 100%);
    transform:translateY(-50%);z-index:0;border-radius:2px;
}
.services-pillars__item{
    position:relative;z-index:1;text-align:center;
    padding:var(--space-lg) var(--space-md);
    background:var(--white);border-radius:var(--radius);
    border:1px solid var(--gray-200);
    box-shadow:0 2px 12px rgba(0,0,0,.04);
    transition:all .35s var(--ease);
}
.services-pillars__item:hover{
    transform:translateY(-8px) scale(1.02);
    border-color:var(--blue);
    box-shadow:0 16px 40px rgba(124,58,237,.15);
}
.services-pillars__node{
    display:block;width:14px;height:14px;margin:0 auto var(--space-sm);
    background:var(--blue);border-radius:50%;
    box-shadow:0 0 0 4px var(--white),0 0 0 6px var(--blue);
    transition:transform .3s;
}
.services-pillars__item:hover .services-pillars__node{
    transform:scale(1.3);
    box-shadow:0 0 0 4px var(--white),0 0 0 8px rgba(124,58,237,.3);
}
.services-pillars__num{
    font-size:11px;font-weight:700;letter-spacing:.1em;
    color:var(--blue);display:block;margin-bottom:var(--space-xs);
}
.services-pillars__item h3{font-size:16px;font-weight:600;margin-bottom:4px}
.services-pillars__item p{font-size:13px;color:var(--gray-600)}

/* ---------- Solution AI Supporter block ---------- */
.solution-ai-block{
    margin-top:var(--space-xl);
    display:grid;grid-template-columns:minmax(220px,300px) 1fr;
    gap:var(--space-xl);align-items:center;
    padding:var(--space-xl);
    background:linear-gradient(135deg,var(--white) 0%,var(--accent-subtle) 100%);
    border:1px solid rgba(124,58,237,.12);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
}
.solution-ai-block__visual{
    display:flex;justify-content:center;align-items:center;
}
.solution-ai-block__visual img{
    max-width:100%;height:auto;
    border-radius:24px;
    box-shadow:0 16px 48px rgba(124,58,237,.18);
}

/* ---------- AI Supporter phone mockup (HTML/CSS recreation) ---------- */
.ai-phone{
    position:relative;
    width:100%;max-width:280px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:36px;
    box-shadow:0 16px 48px rgba(124,58,237,.18),0 2px 4px rgba(0,0,0,.04);
    overflow:hidden;
    font-family:var(--font-jp,'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif);
    color:#1f2937;
}
.ai-phone::before{
    content:'';position:absolute;inset:0;
    border-radius:36px;pointer-events:none;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);
}
.ai-phone__notch{
    position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:78px;height:18px;background:#0f172a;border-radius:12px;z-index:2;
}
.ai-phone__statusbar{
    display:flex;justify-content:space-between;align-items:center;
    padding:10px 22px 4px;font-size:11px;font-weight:600;color:#0f172a;
    height:30px;
}
.ai-phone__time{font-family:'SF Pro Display',-apple-system,sans-serif;}
.ai-phone__icons{display:inline-flex;gap:5px;align-items:center;color:#0f172a;}
.ai-phone__header{
    display:flex;align-items:center;gap:10px;
    padding:8px 14px 10px;
    border-bottom:1px solid rgba(0,0,0,.05);
    background:#fff;
}
.ai-phone__back{
    background:none;border:0;padding:0;cursor:default;
    color:#374151;display:inline-flex;
}
.ai-phone__title{
    flex:1;text-align:center;font-size:14px;font-weight:600;color:#0f172a;
    margin-right:18px;
}
.ai-phone__body{
    padding:12px 14px 14px;background:#fff;
}
.ai-phone__desc{
    font-size:10.5px;line-height:1.65;color:#374151;
    margin:2px 0 12px;
}
.ai-phone__visual{
    margin:0 0 14px;
    border-radius:6px;overflow:hidden;
    background:#fff;
}
.ai-phone__visual img{
    display:block;width:100%;height:auto;
}
.ai-phone__section-label{
    font-size:11px;font-weight:600;color:#1f2937;
    margin:4px 0 10px;text-align:center;
}
.ai-phone__uploads{
    display:flex;justify-content:center;gap:28px;
    margin-bottom:14px;
}
.ai-phone__upload{
    display:flex;flex-direction:column;align-items:center;gap:5px;
}
.ai-phone__upload-icon{
    width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
}
.ai-phone__upload-label{
    font-size:9.5px;line-height:1.4;color:#4b5563;text-align:center;
}
.ai-phone__info{
    background:#eef2ff;border:1px solid #e0e7ff;
    border-radius:10px;
    padding:8px 12px;
    font-size:9.5px;line-height:1.55;color:#4338ca;
    margin:6px 0 0;text-align:center;
}
.ai-phone__inputbar{
    display:flex;align-items:center;gap:8px;
    padding:8px 12px 12px;
    background:#fff;
    border-top:1px solid rgba(0,0,0,.05);
}
.ai-phone__input{
    flex:1;background:#f3f4f6;border-radius:14px;
    padding:7px 12px;font-size:10px;color:#9ca3af;
}
.ai-phone__input-action,.ai-phone__input-send{
    width:24px;height:24px;display:inline-flex;
    align-items:center;justify-content:center;
    color:#7c3aed;
}
.ai-phone__input-send{
    background:#7c3aed;color:#fff;border-radius:50%;
}
.solution-ai-block__kicker{
    font-family:var(--font-en);font-size:12px;font-weight:600;
    letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
    margin-bottom:var(--space-sm);
}
.solution-ai-block__title{
    font-size:clamp(22px,2.4vw,30px);font-weight:700;
    line-height:1.4;letter-spacing:-.01em;color:var(--black);
    margin-bottom:var(--space-lg);
}
.solution-ai-block__features{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);
}
.solution-ai-block__feat{
    padding:var(--space-md);
    background:rgba(255,255,255,.6);
    border:1px solid rgba(124,58,237,.08);
    border-radius:var(--radius);
}
.solution-ai-block__feat h4{
    font-size:15px;font-weight:700;color:var(--blue);
    margin-bottom:var(--space-xs);
}
.solution-ai-block__feat ul{list-style:none;padding:0;margin:0}
.solution-ai-block__feat li{
    font-size:13px;line-height:1.7;color:var(--gray-800);
    padding-left:14px;position:relative;margin-bottom:6px;
}
.solution-ai-block__feat li:last-child{margin-bottom:0}
.solution-ai-block__feat li::before{
    content:'';position:absolute;left:0;top:.7em;
    width:5px;height:5px;border-radius:50%;background:var(--blue-400);
}
.solution-ai-block__feat--value{
    background:linear-gradient(135deg,rgba(124,58,237,.06),rgba(124,58,237,.02));
    border-color:rgba(124,58,237,.18);
}
.solution-ai-block__feat--value h4{color:var(--blue-dark)}

/* ============================
   ROBOTS – AUTO-SCROLLING TILES
   ============================ */
.product-tile-list-wrap{
    overflow:hidden;margin:0 calc(-1 * var(--space-md));
}
.product-tile-list-track{overflow:hidden;width:100%}
.product-tile-list{
    --tile-width:280px;
    --tile-gap:var(--space-md);
    --tile-count:5;
    display:flex;gap:var(--tile-gap);width:max-content;
    list-style:none;padding:var(--space-sm) var(--space-md);margin:0;
    flex-shrink:0;
}
/* Marquee: JS sets --marquee-shift (px) from layout; fallback calc before JS runs */
.product-tile-list--auto{
    --marquee-shift:calc(-1 * var(--tile-count) * (var(--tile-width) + var(--tile-gap)));
    animation:productTileScroll 40s linear infinite;
    will-change:transform;
}
@keyframes productTileScroll{
    0%{transform:translate3d(0,0,0)}
    100%{transform:translate3d(var(--marquee-shift),0,0)}
}
.product-tile{flex:0 0 var(--tile-width);width:var(--tile-width)}
.product-tile__content{
    background:var(--white);border-radius:var(--radius);
    border:1px solid var(--gray-200);
    box-shadow:0 2px 12px rgba(0,0,0,.04);overflow:hidden;
    display:flex;flex-direction:column;height:100%;
    transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.product-tile__content:hover{
    box-shadow:0 8px 24px rgba(124,58,237,.12);transform:translateY(-2px);
}
.product-tile__link{display:block;text-decoration:none}
.product-tile__figure{aspect-ratio:4/3;overflow:hidden;background:var(--gray-100);margin:0}
.product-tile__figure img{width:100%;height:100%;object-fit:contain}
.product-tile__header{padding:var(--space-md) var(--space-md) 0}
.product-tile__title{font-size:15px;font-weight:600;color:var(--black);margin-bottom:4px}
.product-tile__sub{font-size:12px;color:var(--gray-400)}
.product-tile__copy{padding:var(--space-sm) var(--space-md);flex:1}
.product-tile__copy p{font-size:13px;color:var(--gray-600);line-height:1.55;margin:0}
.product-tile__footer{padding:0 var(--space-md) var(--space-md)}
.product-tile__video-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;
    background:var(--accent-subtle-2);color:var(--blue);
    transition:background .2s,color .2s;
}
.product-tile__video-icon:hover{background:var(--blue);color:var(--white)}
.product-tile__video-icon-inner{
    width:0;height:0;border-style:solid;
    border-width:6px 0 6px 10px;
    border-color:transparent transparent transparent currentColor;
    margin-left:3px;
}

/* ============================
   ROBOT GRID + ACTIVE ROTATION
   (Client request: show all robots, rotate highlight)
   ============================ */
.product-tile-list.product-rotation-grid{
    --tile-width:auto;
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:var(--space-md);
    width:100%;
    max-width:var(--max-w);
    padding:0;
    margin:0 auto;
    align-items:stretch;
}

.product-rotation-grid .product-tile{
    width:auto;
    flex:none;
}

.product-rotation-grid .product-tile__content{
    height:100%;
}

.product-rotation-grid .product-tile.is-active .product-tile__content{
    border-color:rgba(124,58,237,.55);
    box-shadow:0 18px 55px rgba(124,58,237,.18), 0 0 0 1px rgba(124,58,237,.25);
    transform:translateY(-6px);
}

@media(max-width:900px){
    .product-tile-list.product-rotation-grid{
        grid-template-columns:repeat(2, 1fr);
        padding:0 var(--space-sm);
        gap:var(--space-sm);
    }
}

@media(max-width:600px){
    .product-tile-list.product-rotation-grid{
        grid-template-columns:1fr;
    }
}

/* ============================
   PLATFORM – 人＋ロボット協働
   ============================ */
.collab-block{margin-top:var(--space-xl)}
.collab-block:first-of-type{margin-top:0}
.collab-block__head{
    display:flex;align-items:center;gap:var(--space-sm);
    margin-bottom:var(--space-lg);
}
.collab-block__badge{
    flex-shrink:0;display:inline-flex;align-items:center;
    padding:6px 16px;border-radius:40px;
    font-size:13px;font-weight:700;letter-spacing:.04em;
}
.collab-block__badge--problem{
    background:rgba(244,63,94,.1);color:#e11d48;
}
.collab-block__badge--merit{
    background:var(--accent-subtle-2);color:var(--blue);
}
.collab-block__title{
    font-size:clamp(18px,2.2vw,24px);font-weight:700;
    color:var(--black);line-height:1.4;
}
.collab-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:var(--space-md);align-items:stretch;
}
.collab-card{
    position:relative;overflow:hidden;
    background:var(--white);border:1px solid var(--gray-100);
    border-radius:var(--radius);padding:var(--space-lg);
    display:flex;flex-direction:column;
    transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.collab-card:hover{
    transform:translateY(-4px);box-shadow:var(--shadow-lg);
}
.collab-card--problem{border-top:3px solid #f43f5e}
.collab-card--problem:hover{border-color:rgba(244,63,94,.3)}
.collab-card--merit{border-top:3px solid var(--blue)}
.collab-card--merit:hover{border-color:rgba(124,58,237,.3)}
.collab-card__num{
    position:absolute;top:var(--space-sm);right:var(--space-md);
    font-family:var(--font-en);font-size:40px;font-weight:800;
    line-height:1;color:var(--gray-50);
}
.collab-card__stat{
    position:absolute;top:var(--space-sm);right:var(--space-md);
    font-family:var(--font-en);font-size:30px;font-weight:800;
    line-height:1;color:rgba(124,58,237,.16);
}
.collab-card__stat small{font-size:.5em;font-weight:700}
.collab-card__icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:var(--radius-sm);
    margin-bottom:var(--space-md);position:relative;z-index:1;
}
.collab-card__icon svg{width:26px;height:26px}
.collab-card--problem .collab-card__icon{
    background:rgba(244,63,94,.1);color:#e11d48;
}
.collab-card--merit .collab-card__icon{
    background:var(--accent-subtle);color:var(--blue);
}
.collab-card__title{
    font-size:16px;font-weight:700;color:var(--black);
    line-height:1.5;margin-bottom:var(--space-sm);
}
.collab-card__desc{
    font-size:13.5px;color:var(--gray-600);line-height:1.75;margin:0;
}
.collab-card__desc strong{color:var(--blue);font-weight:700}
.collab-card--problem .collab-card__desc strong{color:#e11d48}

/* problem → merit transition divider */
.collab-flow{
    display:flex;align-items:center;gap:var(--space-md);
    margin:var(--space-xl) auto;max-width:560px;
}
.collab-flow__line{
    flex:1;height:2px;
    background:linear-gradient(90deg,transparent,var(--blue),transparent);
}
.collab-flow__label{
    flex-shrink:0;font-size:14px;font-weight:700;
    color:var(--blue);letter-spacing:.04em;
    padding:8px 20px;border-radius:40px;
    background:var(--accent-subtle);border:1px solid rgba(124,58,237,.15);
}

/* ============================
   MINIPROGRAM FEATURES
   ============================ */
.miniprogram-features{
    display:grid;grid-template-columns:1fr 1fr;
    gap:var(--space-xl);margin-bottom:var(--space-xl);
    align-items:stretch;
}
.miniprogram-features__col{
    display:grid;grid-template-rows:auto 1fr 1fr;
    gap:var(--space-sm);
}
.miniprogram-features__col h3{
    font-size:15px;font-weight:600;color:var(--blue);
    margin-bottom:var(--space-md);padding-bottom:var(--space-sm);
    border-bottom:2px solid rgba(124,58,237,.15);
}
.miniprogram-features__item{
    display:flex;gap:var(--space-sm);align-items:flex-start;
    padding:var(--space-md);border-radius:var(--radius-sm);
    margin-bottom:0;transition:all .25s var(--ease);
    width:100%;box-sizing:border-box;
}
.miniprogram-features__item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--shadow-glow-sm)}
.miniprogram-features__icon{
    flex-shrink:0;width:40px;height:40px;
    display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-xs);
    background:linear-gradient(135deg,var(--blue) 0%,var(--blue-400) 100%);
    color:var(--white);box-shadow:var(--shadow-glow-sm);
}
.miniprogram-features__icon svg{width:18px;height:18px}
.miniprogram-features__item strong{display:block;font-size:14px;font-weight:600;color:var(--black);margin-bottom:4px}
.miniprogram-features__item p{font-size:13px;color:var(--gray-600);line-height:1.65;margin:0}

.miniprogram-footer{
    display:flex;align-items:center;gap:var(--space-xl);
    padding:var(--space-lg);border-radius:var(--radius);
    background:var(--accent-subtle);border:1px solid rgba(124,58,237,.08);
}
.miniprogram-qr{display:flex;align-items:center;gap:var(--space-md)}
.miniprogram-qr__box{
    width:72px;height:72px;border-radius:var(--radius-sm);
    border:2px dashed var(--gray-200);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.miniprogram-qr__placeholder{font-size:11px;font-weight:700;color:var(--gray-400)}
.miniprogram-qr__text p{font-size:12px;color:var(--gray-600)}
.miniprogram-highlights{display:flex;gap:var(--space-xs);flex-wrap:wrap;margin-left:auto}

/* ============================
   APP VALUES (Smart Clean がつなぐ3つの価値)
   ============================ */
.app-values{
    margin-bottom:var(--space-2xl);
}
.app-values__title{
    font-size:clamp(22px,2.6vw,32px);font-weight:700;
    text-align:center;color:var(--white);
    margin-bottom:var(--space-xl);line-height:1.4;
}
.app-values__grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);
    max-width:var(--max-w);margin:0 auto;
}
.app-values__card{
    padding:var(--space-lg);
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.app-values__card:hover{
    transform:translateY(-3px);
    border-color:rgba(124,58,237,.4);
    background:rgba(124,58,237,.06);
}
.app-values__icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;color:var(--blue-400);
    background:rgba(124,58,237,.12);border-radius:var(--radius-sm);
    margin-bottom:var(--space-sm);
}
.app-values__icon svg{width:26px;height:26px}
.app-values__name{
    font-size:16px;font-weight:700;color:var(--white);
    margin-bottom:8px;line-height:1.4;
}
.app-values__desc{
    font-size:14px;color:var(--gray-200);line-height:1.7;
}

/* ============================
   APP SHOWCASE
   ============================ */
.app-showcase{
    display:flex;align-items:center;justify-content:center;
    gap:var(--space-2xl);margin-bottom:var(--space-xl);
}
.app-showcase__device{position:relative}
.app-showcase__screen{
    width:200px;height:380px;border-radius:var(--radius-lg);
    border:2px solid rgba(124,58,237,.25);
    background:linear-gradient(180deg,rgba(124,58,237,.05) 0%,rgba(15,23,42,.95) 100%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:var(--space-md);position:relative;overflow:hidden;
    box-shadow:0 0 60px rgba(124,58,237,.15),inset 0 0 40px rgba(124,58,237,.05);
}
.app-showcase__glow{
    position:absolute;top:-50%;left:-50%;width:200%;height:200%;
    background:conic-gradient(from 0deg,transparent,rgba(124,58,237,.15),transparent,rgba(124,58,237,.15),transparent);
    animation:deviceGlow 6s linear infinite;
}
@keyframes deviceGlow{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.app-showcase__icon-pulse{
    width:60px;height:60px;border-radius:var(--radius);
    background:linear-gradient(135deg,var(--blue),var(--blue-400));
    position:relative;z-index:1;animation:iconFloat 3s ease-in-out infinite;
}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.app-showcase__badge{
    position:relative;z-index:1;display:inline-block;padding:4px 16px;
    background:rgba(124,58,237,.2);color:var(--blue-400);
    border:1px solid rgba(124,58,237,.3);
    border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.1em;
}
.app-showcase__features{display:flex;flex-direction:column;gap:var(--space-md)}
.app-showcase__feat{
    display:flex;align-items:center;gap:var(--space-sm);
    padding:var(--space-sm) var(--space-md);
    border-radius:var(--radius-sm);
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
    color:var(--gray-400);transition:all .25s;
}
.app-showcase__feat:hover{
    background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.2);
    color:var(--blue-400);transform:translateX(4px);
}
.app-showcase__feat svg{width:20px;height:20px;flex-shrink:0;color:var(--blue-400)}
.app-showcase__feat span{font-size:14px;font-weight:500}

.app-coming{
    text-align:center;font-family:var(--font-en);
    font-size:28px;font-weight:800;letter-spacing:.2em;
    background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(167,139,250,.4));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;margin-bottom:var(--space-xl);
}
.app-subscribe{text-align:center}
.app-subscribe>p{font-size:14px;color:var(--gray-400);margin-bottom:var(--space-sm)}
.app-subscribe__form{
    display:flex;gap:var(--space-sm);justify-content:center;max-width:400px;margin:0 auto;
}
.app-subscribe__form input{
    flex:1;padding:12px 16px;font-family:var(--font);font-size:14px;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
    border-radius:var(--radius-sm);color:var(--white);
}
.app-subscribe__form input::placeholder{color:var(--gray-400)}
.app-subscribe__form input:focus{
    outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(124,58,237,.15);
}

/* ============================
   BUSINESS TIMELINE
   ============================ */
.business-timeline{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:0;margin-bottom:var(--space-xl);position:relative;
}
.business-timeline::before{
    content:'';position:absolute;top:24px;left:12%;right:12%;
    height:2px;
    background:linear-gradient(90deg,var(--blue) 0%,rgba(124,58,237,.4) 50%,var(--blue) 100%);
    z-index:0;
}
.business-timeline__item{
    position:relative;z-index:1;padding:var(--space-xl);
    margin:0 var(--space-sm);
    background:var(--white);border-radius:var(--radius);
    border:1px solid var(--gray-200);box-shadow:var(--shadow);
    transition:all .3s var(--ease);
}
.business-timeline__item::before{
    content:'';position:absolute;top:-8px;left:50%;transform:translateX(-50%);
    width:16px;height:16px;background:var(--blue);
    border-radius:50%;box-shadow:0 0 0 4px var(--white);
}
.business-timeline__item:hover{
    transform:translateY(-6px);box-shadow:var(--shadow-hover);border-color:var(--blue);
}
.business-timeline__icon{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin-bottom:var(--space-sm);color:var(--blue);
}
.business-timeline__icon svg{width:24px;height:24px}
.business-timeline__num{
    font-size:12px;font-weight:700;letter-spacing:.1em;
    color:var(--blue);display:block;margin-bottom:var(--space-sm);
}
.business-timeline__item h3{font-size:17px;margin-bottom:8px}
.business-timeline__item p{font-size:14px;color:var(--gray-600)}

/* ============================
   CONTACT
   ============================ */
.section--contact{padding-bottom:var(--space-3xl)}
.contact-layout{
    display:grid;grid-template-columns:1fr 1.5fr;
    gap:var(--space-xl);max-width:860px;margin:0 auto;
}
.contact-layout__info{padding:var(--space-lg);border-radius:var(--radius)}
.contact-layout__info h3{font-size:16px;font-weight:600;color:var(--black);margin-bottom:var(--space-xs)}
.contact-layout__info>p{font-size:14px;color:var(--gray-600);margin-bottom:var(--space-lg)}
.contact-layout__details{list-style:none;display:flex;flex-direction:column;gap:var(--space-sm)}
.contact-layout__details li{
    display:flex;align-items:center;gap:var(--space-xs);
    font-size:14px;color:var(--gray-600);
}
.contact-layout__details svg{width:16px;height:16px;color:var(--blue)}
.contact-form-wrap{
    padding:var(--space-lg);background:var(--white);
    border-radius:var(--radius);border:1px solid var(--gray-100);
    box-shadow:var(--shadow);
}
.contact-form .form-row{margin-bottom:var(--space-md)}
.contact-form .form-row--half{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.contact-form label{display:block;font-size:13px;font-weight:500;color:var(--gray-600);margin-bottom:6px}
.contact-form label span{color:var(--blue)}
.contact-form input,.contact-form textarea{
    width:100%;padding:12px 14px;font-family:var(--font);font-size:14px;
    border:1px solid var(--gray-100);border-radius:var(--radius-xs);
    background:var(--off-white);transition:all .2s;
}
.contact-form input:focus,.contact-form textarea:focus{
    outline:none;border-color:var(--blue);background:var(--white);
    box-shadow:0 0 0 3px var(--accent-subtle);
}
.contact-form button{margin-top:var(--space-xs)}

/* ============================
   FOOTER
   ============================ */
.site-footer{
    background:var(--black);color:var(--gray-400);
    padding:var(--space-xl) var(--space-md) var(--space-lg);
}
.site-footer__inner{max-width:var(--max-w);margin:0 auto}
.site-footer__top{
    display:grid;grid-template-columns:1.5fr 2fr 1fr;
    gap:var(--space-xl);padding-bottom:var(--space-lg);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.site-footer__logo{
    font-family:var(--font-en);font-weight:700;font-size:18px;color:var(--white);
    display:flex;align-items:center;gap:10px;margin-bottom:var(--space-sm);
}
.site-footer__logo-mark{
    width:40px;height:40px;display:block;flex-shrink:0;
    background:#fff;border-radius:50%;padding:4px;box-sizing:border-box;
}
.site-footer__brand p{font-size:13px;line-height:1.6}
.site-footer__nav{display:flex;flex-direction:column;gap:var(--space-sm)}
.site-footer__nav a{font-size:13px;color:var(--gray-400);text-decoration:none;transition:color .2s}
.site-footer__nav a:hover{color:var(--white)}
.site-footer__contact-info{display:flex;flex-direction:column;gap:var(--space-xs)}
.site-footer__contact-info p{display:flex;align-items:center;gap:8px;font-size:13px}
.site-footer__contact-info svg{width:14px;height:14px;color:var(--blue-400)}
.site-footer__bottom{padding-top:var(--space-lg);text-align:center;font-size:12px;color:var(--gray-600)}

/* ============================
   SCROLL ANIMATIONS
   ============================ */
.anim-item{
    opacity:0;transform:translateY(30px);
    transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.anim-item.is-visible{opacity:1;transform:translateY(0)}

/* ============================
   NAV OVERLAY
   ============================ */
.nav-overlay{
    position:fixed;inset:0;z-index:200;
    background:rgba(255,255,255,.97);backdrop-filter:blur(24px);
    padding:var(--space-xl);
    display:flex;flex-direction:column;
    opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.nav-overlay.is-open{opacity:1;visibility:visible}
.nav-overlay-close{
    position:absolute;top:var(--space-md);right:var(--space-md);
    width:44px;height:44px;background:none;border:none;cursor:pointer;
}
.nav-overlay-close span{
    display:block;width:24px;height:2px;background:var(--gray-800);
    position:absolute;left:10px;
}
.nav-overlay-close span:first-child{transform:rotate(45deg);top:21px}
.nav-overlay-close span:last-child{transform:rotate(-45deg);top:21px}
.nav-overlay-nav{flex:1;display:flex;align-items:center;justify-content:center}
.nav-overlay-list{list-style:none;text-align:center}
.nav-overlay-list li{margin-bottom:var(--space-md)}
.nav-overlay-list a{font-size:22px;font-weight:600;color:var(--black);text-decoration:none}
.nav-overlay-list a:hover{color:var(--blue)}
.nav-overlay-close-text{text-align:center;font-size:12px;letter-spacing:.2em;color:var(--gray-400);cursor:pointer}

/* ============================
   RESPONSIVE
   ============================ */
@media(max-width:900px){
    .site-header__nav{display:none}
    .mobile-menu-toggle{display:flex}
    .u-sp{display:inline}

    .challenges-strip{grid-template-columns:repeat(2,1fr)}
    .raas-compare{flex-direction:column}
    .raas-compare__arrow{width:100%;height:40px;transform:rotate(90deg)}
    .scene-grid{grid-template-columns:1fr}
    .metrics-bar{grid-template-columns:repeat(2,1fr)}
    .services-pillars{grid-template-columns:repeat(2,1fr)}
    .services-pillars__line{display:none}
    .solution-ai-block{grid-template-columns:1fr;gap:var(--space-lg);padding:var(--space-lg)}
    .solution-ai-block__visual img{max-width:260px}
    .solution-ai-block__visual .ai-phone{max-width:260px}
    .solution-ai-block__features{grid-template-columns:1fr}
    .product-tile-list{--tile-width:260px}
    .collab-grid{grid-template-columns:repeat(2,1fr)}
    .miniprogram-features{grid-template-columns:1fr}
    .business-timeline{grid-template-columns:1fr}
    .business-timeline::before{display:none}
    .app-showcase{flex-direction:column;gap:var(--space-xl)}
    .app-values__grid{grid-template-columns:1fr;gap:var(--space-md)}
    .contact-layout{grid-template-columns:1fr}
    .site-footer__top{grid-template-columns:1fr;gap:var(--space-lg)}
    .miniprogram-footer{flex-direction:column;gap:var(--space-md)}
    .miniprogram-highlights{margin-left:0;justify-content:center}
}

@media(max-width:600px){
    .hero{min-height:85vh;padding-top:var(--space-2xl)}
    .hero__cta{flex-direction:column;width:100%;max-width:300px;margin:0 auto}
    .hero__cta .btn{justify-content:center}
    .challenges-strip{grid-template-columns:1fr}
    .services-pillars{grid-template-columns:1fr}
    .collab-grid{grid-template-columns:1fr}
    .collab-flow{flex-direction:column;gap:var(--space-sm)}
    .collab-flow__line{width:100%;height:2px;max-width:120px}
    .metrics-bar{grid-template-columns:1fr 1fr}
    .contact-form .form-row--half{grid-template-columns:1fr}
    .app-subscribe__form{flex-direction:column}
    .site-footer__inner{text-align:center}
    .miniprogram-highlights{flex-direction:column;align-items:center}
}

@media(prefers-reduced-motion:reduce){
    .anim-item{opacity:1;transform:none;transition:none}
    .hero__mesh,.video-block__grid,.app-showcase__glow{animation:none}
    .product-tile-list--auto{animation:none;transform:none;will-change:auto}
}