@charset "UTF-8";
/* ============================================================
   VUCHI Corporate Landing Page – Full CSS
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --white:#ffffff;
  --off-white:#f8f8f8;
  --light:#f2f2f2;
  --light2:#eaeaea;
  --light3:#e0e0e0;
  --gray-border:#d5d5d5;
  --gray-light:#aaa;
  --gray:#777;
  --gray-dark:#555;
  --dark:#222;
  --dark2:#1a1a1a;
  --black:#0b0b0b;
  --accent:#FF4D00;
  --accent-light:#FF6A2A;
  --accent-dark:#D94400;
  --accent2:#FF8C00;
  --accent-glow:rgba(255,77,0,0.08);
  --accent-dim:rgba(255,77,0,0.04);
  --gradient-accent:linear-gradient(135deg,#FF4D00,#FF8C00);
  --font-en:'Outfit','Inter',sans-serif;
  --font-ja:'Noto Sans JP',sans-serif;
  --ease:cubic-bezier(0.4,0,0.2,1);
  --ease-out:cubic-bezier(0,0.7,0.3,1);
}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-ja);background:var(--white);color:var(--dark);line-height:1.8;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit;transition:all .3s var(--ease)}
ul{list-style:none}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:var(--white)}
.container{max-width:1200px;margin:0 auto;padding:0 clamp(10px,2vw,24px)}
.section-num{font-family:var(--font-en);font-size:clamp(.55rem,.45rem + .2vw,.7rem);font-weight:600;letter-spacing:clamp(2px,.15rem + .15vw,4px);color:var(--accent);text-transform:uppercase;display:flex;align-items:center;gap:clamp(8px,.5rem + .2vw,12px);margin-bottom:clamp(12px,.8rem + .4vw,20px)}
.section-num::before{content:'';width:clamp(24px,1.5rem + 1vw,40px);height:1px;background:var(--accent)}
.section-title-en{font-family:var(--font-en);font-size:clamp(2rem,1.5rem + 4vw,5rem);font-weight:900;line-height:.95;letter-spacing:-2px;color:var(--dark);margin-bottom:clamp(8px,.5rem + .2vw,12px);text-transform:uppercase}
.section-title-ja{font-size:clamp(.75rem,.65rem + .2vw,.95rem);font-weight:500;color:var(--gray);letter-spacing:clamp(1px,.08rem + .1vw,2px);margin-bottom:clamp(16px,1rem + 1vw,32px)}
.section-header{text-align:center;margin-bottom:clamp(24px,1.5rem + 2vw,48px)}

/* ── HEADER ── */
.header{position:fixed;top:0;left:0;width:100%;z-index:1000;transition:all .4s var(--ease)}
.header-inner{display:flex;justify-content:space-between;align-items:center;width:100%;padding:clamp(14px,.8rem + .5vw,22px) clamp(16px,1rem + 1.5vw,40px);transition:all .4s var(--ease)}
.header.scrolled .header-inner{padding:clamp(10px,.6rem + .3vw,14px) clamp(16px,1rem + 1.5vw,40px);background:rgba(255,255,255,.92);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-bottom:1px solid rgba(0,0,0,.06);box-shadow:0 1px 20px rgba(0,0,0,.04)}
.logo{font-family:var(--font-en);font-size:clamp(1.2rem,1rem + .4vw,1.5rem);font-weight:900;color:var(--dark);letter-spacing:-.5px;display:flex;align-items:center;gap:2px}
.logo .dot{display:inline-block;width:clamp(6px,.35rem + .15vw,8px);height:clamp(6px,.35rem + .15vw,8px);background:var(--accent);border-radius:50%;margin-left:1px}
.nav-links{display:flex;align-items:center;gap:clamp(20px,1.2rem + .8vw,32px)}
.nav-links a{font-size:clamp(.75rem,.65rem + .15vw,.85rem);font-weight:500;color:var(--gray);position:relative;padding:4px 0;letter-spacing:.3px;font-family:var(--font-ja)}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1.5px;background:var(--accent);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--dark)}
.nav-links a:hover::after{width:100%}
.nav-cta{background:var(--accent)!important;color:var(--white)!important;padding:clamp(8px,.5rem + .15vw,10px) clamp(16px,1rem + .5vw,24px)!important;border-radius:0!important;font-weight:700!important;font-size:clamp(.7rem,.6rem + .12vw,.8rem)!important;letter-spacing:1px!important;transition:all .3s var(--ease)!important}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:var(--accent-light)!important;transform:translateY(-1px);box-shadow:0 4px 20px rgba(255,77,0,.3)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1001;padding:8px}
.hamburger span{display:block;width:24px;height:2px;background:var(--dark);transition:all .3s var(--ease)}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mobile-nav{display:none;position:fixed;top:0;right:-100%;width:100%;height:100vh;background:var(--white);z-index:999;transition:right .4s var(--ease);flex-direction:column;justify-content:center;align-items:center;gap:28px}
.mobile-nav.active{right:0}
.mobile-nav a{font-size:1.3rem;color:var(--dark);font-weight:700;letter-spacing:2px;font-family:var(--font-en);text-transform:uppercase}

/* ── HERO ── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;background:var(--white);overflow:hidden;width:100%;padding-top:clamp(80px,5rem + 2vw,100px);padding-bottom:0}
.hero-bg-pattern{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.03;background-image:radial-gradient(circle at 20% 50%,rgba(255,77,0,.5) 0%,transparent 50%),radial-gradient(circle at 80% 30%,rgba(255,140,0,.3) 0%,transparent 50%)}
.hero-grid-lines{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(0,0,0,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.02) 1px,transparent 1px);background-size:80px 80px}
.hero-layout{display:flex;align-items:center;gap:clamp(28px,2rem + 2.5vw,60px);position:relative;z-index:2;width:100%}
.hero-content{flex:1;max-width:600px}
.hero-top-label{font-family:var(--font-en);font-size:clamp(.55rem,.45rem + .18vw,.7rem);font-weight:600;letter-spacing:clamp(3px,.2rem + .25vw,6px);color:var(--accent);text-transform:uppercase;margin-bottom:clamp(20px,1.2rem + 1.2vw,36px);display:flex;align-items:center;gap:clamp(10px,.6rem + .4vw,16px);opacity:0;animation:fadeInUp .8s var(--ease-out) .2s forwards}
.hero-top-label::before{content:'';width:clamp(32px,2rem + 2vw,60px);height:1px;background:var(--accent)}
.hero-title{font-family:var(--font-ja);font-size:clamp(1.5rem,1.0rem + 3.0vw,3.1rem);font-weight:900;line-height:1.2;letter-spacing:-1px;width:100%;margin-bottom:clamp(16px,1rem + 1vw,28px);color:var(--dark);opacity:0;animation:fadeInUp .8s var(--ease-out) .4s forwards}
.hero-title .highlight{color:var(--accent)}
.hero-description{font-size:clamp(.8rem,.7rem + .2vw,.95rem);color:var(--gray);line-height:2;margin-bottom:clamp(24px,1.5rem + 1.5vw,44px);max-width:480px;opacity:0;animation:fadeInUp .8s var(--ease-out) .6s forwards}
.hero-buttons{display:flex;gap:clamp(10px,.6rem + .4vw,16px);flex-wrap:wrap;margin-bottom:clamp(32px,2rem + 3vw,72px);opacity:0;animation:fadeInUp .8s var(--ease-out) .8s forwards}
.btn-primary{display:inline-flex;align-items:center;gap:clamp(6px,.4rem + .2vw,10px);background:var(--accent);color:var(--white);padding:clamp(12px,.75rem + .3vw,16px) clamp(20px,1.2rem + 1.2vw,36px);font-weight:800;font-size:clamp(.8rem,.7rem + .15vw,.9rem);letter-spacing:1px;font-family:var(--font-ja);transition:all .3s var(--ease);border:none;cursor:pointer}
.btn-primary:hover{background:var(--accent-light);transform:translateY(-2px);box-shadow:0 8px 30px rgba(255,77,0,.35)}
.btn-primary svg{transition:transform .3s var(--ease)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--gray-dark);padding:clamp(12px,.75rem + .3vw,16px) clamp(20px,1.2rem + 1.2vw,36px);font-weight:500;font-size:clamp(.8rem,.7rem + .15vw,.9rem);border:1px solid var(--light3);font-family:var(--font-ja);transition:all .3s var(--ease);cursor:pointer}
.btn-secondary:hover{border-color:var(--gray-dark);color:var(--dark);background:var(--off-white)}
/*
.hero-stats{display:flex;gap:clamp(16px,1rem + 2.5vw,52px);padding-top:clamp(20px,1.2rem + 1.8vw,44px);border-top:1px solid var(--light2);opacity:0;animation:fadeInUp .8s var(--ease-out) 1s forwards}
.hero-stat-number{font-family:var(--font-en);font-size:clamp(1.4rem,1rem + 1.5vw,2.5rem);font-weight:800;color:var(--dark);line-height:1;margin-bottom:4px}
.hero-stat-number .unit{font-size:clamp(.6rem,.5rem + .25vw,.9rem);font-weight:400;color:var(--accent);margin-left:2px}
.hero-stat-label{font-size:clamp(.6rem,.52rem + .18vw,.78rem);color:var(--gray-light);letter-spacing:.5px}
*/
/* ── PHONE MOCKUP ── */
.hero-phone-area{flex-shrink:0;opacity:0;animation:fadeInUp .8s var(--ease-out) .6s forwards}
.phone-mockup{position:relative;width:clamp(160px,10rem + 9vw,280px);height:clamp(328px,20rem + 18vw,570px);background:var(--black);border-radius:clamp(20px,1.2rem + 1.2vw,36px);padding:clamp(7px,.4rem + .35vw,12px);box-shadow:0 30px 80px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.08);overflow:hidden}
.phone-mockup::before{content:'';position:absolute;top:clamp(8px,.5rem + .25vw,12px);left:50%;transform:translateX(-50%);width:clamp(42px,2.5rem + 2.5vw,80px);height:clamp(12px,.7rem + .8vw,24px);background:var(--black);border-radius:0 0 clamp(7px,.4rem + .5vw,14px) clamp(7px,.4rem + .5vw,14px);z-index:10}
.phone-screen{width:100%;height:100%;border-radius:clamp(14px,.85rem + .9vw,26px);overflow:hidden;position:relative;background:var(--dark2)}
.phone-reel{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column}
.reel-slide{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .8s var(--ease);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(14px,.85rem + .7vw,24px) clamp(10px,.6rem + .5vw,18px)}
.reel-slide.active{opacity:1}
.reel-slide-1{background:linear-gradient(180deg,rgba(255,77,0,.1) 0%,rgba(255,77,0,.8) 60%,#FF4D00 100%)}
.reel-slide-2{background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(255,140,0,.8) 60%,#FF8C00 100%)}
.reel-slide-3{background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(255,77,0,.6) 60%,#E04400 100%)}
.reel-content{color:var(--white);z-index:2}
.reel-tag{font-family:var(--font-en);font-size:clamp(.45rem,.35rem + .15vw,.6rem);font-weight:700;letter-spacing:2px;text-transform:uppercase;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);padding:clamp(2px,.15rem + .12vw,4px) clamp(6px,.35rem + .25vw,10px);display:inline-block;margin-bottom:clamp(6px,.35rem + .3vw,10px)}
.reel-title{font-size:clamp(.7rem,.55rem + .4vw,1.1rem);font-weight:700;line-height:1.4;margin-bottom:clamp(4px,.25rem + .2vw,8px)}
.reel-desc{font-size:clamp(.5rem,.4rem + .2vw,.72rem);color:rgba(255,255,255,.7);line-height:1.6}
.reel-indicators{position:absolute;top:clamp(30px,1.8rem + 1.2vw,48px);left:0;right:0;display:flex;gap:4px;padding:0 clamp(8px,.5rem + .4vw,14px);z-index:10}
.reel-ind{flex:1;height:2px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden}
.reel-ind .fill{width:0;height:100%;background:var(--white);border-radius:2px}
.reel-ind.active .fill{animation:reelProgress 3s linear forwards}
.reel-ind.done .fill{width:100%;background:var(--white)}
.reel-side-icons{position:absolute;right:clamp(8px,.5rem + .4vw,14px);bottom:clamp(56px,3.5rem + 3.5vw,100px);display:flex;flex-direction:column;gap:clamp(8px,.5rem + .7vw,18px);z-index:10}
.reel-side-icon{width:clamp(20px,1.2rem + .8vw,32px);height:clamp(20px,1.2rem + .8vw,32px);display:flex;align-items:center;justify-content:center}
.reel-side-icon svg{width:clamp(12px,.75rem + .5vw,20px);height:clamp(12px,.75rem + .5vw,20px);stroke:var(--white);fill:none;stroke-width:2;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}

/* ── SCROLL DIVIDER ── */
.scroll-divider{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(12px,1rem + 1vw,28px) 0;background:var(--white);z-index:2}
.scroll-divider span{font-size:clamp(.5rem,.42rem + .15vw,.65rem);color:var(--gray-light);letter-spacing:3px;text-transform:uppercase;font-family:var(--font-en);margin-bottom:8px}
.scroll-divider .scroll-line{width:1px;height:clamp(24px,1.5rem + 1.2vw,40px);background:linear-gradient(to bottom,var(--accent),transparent);animation:scrollLine 2s ease-in-out infinite}

/* ── SERVICES ── */
.services{padding:clamp(40px,2.5rem + 3vw,80px) 0;background:var(--off-white);position:relative}
.services .section-num{justify-content:center}
.services .section-title-en{text-align:center}
.services .section-title-ja{text-align:center}
.services-top{justify-content:center;align-items:flex-end;margin-bottom:clamp(24px,1.5rem + 2vw,48px);gap:clamp(20px,1.2rem + 1.5vw,40px);flex-wrap:wrap}
.services-desc{text-align:center;font-size:clamp(.8rem,.7rem + .18vw,.95rem);color:var(--gray);line-height:2}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.service-card{background:var(--white);position:relative;overflow:hidden;transition:all .5s var(--ease);border:1px solid var(--light2)}
.service-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:var(--gradient-accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:2}
.service-card:hover{background:var(--white);box-shadow:0 12px 40px rgba(0,0,0,.06)}
.service-card:hover::before{transform:scaleX(1)}
.service-card-img{width:100%;height:clamp(150px,10rem + 5vw,220px);overflow:hidden;position:relative}
.service-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.service-card:hover .service-card-img img{transform:scale(1.05)}
.service-card-body{padding:clamp(20px,1.2rem + 1.2vw,36px) clamp(16px,1rem + 1.2vw,32px)}
.service-card-num{font-family:var(--font-en);font-size:clamp(2rem,1.5rem + 2vw,4rem);font-weight:900;color:rgba(0,0,0,.03);line-height:1;margin-bottom:clamp(6px,.4rem + .4vw,12px);transition:color .5s var(--ease)}
.service-card:hover .service-card-num{color:rgba(255,77,0,.06)}
.service-card h3{font-size:clamp(.9rem,.8rem + .25vw,1.15rem);font-weight:700;color:var(--dark);margin-bottom:clamp(8px,.5rem + .4vw,14px);letter-spacing:.5px}
.service-card p{font-size:clamp(.78rem,.68rem + .14vw,.85rem);color:var(--gray);line-height:1.9}
.service-tag{display:inline-block;margin-top:clamp(12px,.75rem + .6vw,20px);padding:clamp(3px,.2rem + .15vw,5px) clamp(8px,.5rem + .4vw,14px);border:1px solid rgba(255,77,0,.15);color:var(--accent);font-size:clamp(.55rem,.48rem + .12vw,.7rem);font-family:var(--font-en);font-weight:600;letter-spacing:1px;text-transform:uppercase}

/* ── PLATFORMS ── */
.platforms{padding:clamp(16px,1rem + 1.5vw,40px) 0;background:var(--white);border-top:1px solid var(--light2);border-bottom:1px solid var(--light2)}
.platforms-inner{display:flex;align-items:center;gap:clamp(16px,1rem + 2.5vw,48px);flex-wrap:wrap}
.platforms-label{font-family:var(--font-en);font-size:clamp(.55rem,.48rem + .12vw,.7rem);font-weight:600;letter-spacing:clamp(2px,.15rem + .15vw,4px);color:var(--gray);text-transform:uppercase;white-space:nowrap}
.platforms-list{display:flex;gap:clamp(6px,.35rem + .4vw,12px);flex-wrap:wrap;flex:1}
.platform-chip{padding:clamp(6px,.4rem + .25vw,10px) clamp(10px,.6rem + .7vw,20px);border:1px solid var(--light3);font-family:var(--font-en);font-size:clamp(.6rem,.52rem + .14vw,.78rem);font-weight:500;color:var(--gray);letter-spacing:.5px;transition:all .3s var(--ease);background:transparent}
.platform-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}

/* ── FLOW ── */
.flow{padding:clamp(40px,2.5rem + 3vw,80px) 0;background:var(--white)}
.flow .section-num{justify-content:center}
.flow .section-title-en{text-align:center}
.flow .section-title-ja{text-align:center}
.flow-list{margin-top:clamp(20px,1.2rem + 1.5vw,40px);max-width:760px;margin-left:auto;margin-right:auto}
.flow-item{display:grid;grid-template-columns:clamp(48px,3rem + 3.5vw,100px) 1fr;gap:clamp(12px,.75rem + 1.5vw,36px);padding:clamp(16px,1rem + 1vw,32px) 0;border-bottom:1px solid var(--light2);align-items:start;transition:all .4s var(--ease);position:relative}
.flow-item:first-child{border-top:1px solid var(--light2)}
.flow-item:hover{padding-left:16px}
.flow-item:hover .flow-item-step{color:var(--accent)}
.flow-item-step{font-family:var(--font-en);font-size:clamp(1.5rem,1rem + 1.5vw,3rem);font-weight:900;line-height:1;color:var(--light3);transition:color .4s var(--ease)}
.flow-item-content h4{font-size:clamp(.88rem,.78rem + .22vw,1.1rem);font-weight:700;color:var(--dark);margin-bottom:clamp(4px,.3rem + .25vw,8px);display:flex;align-items:center;gap:clamp(6px,.35rem + .3vw,10px)}
.flow-item-content h4 .flow-icon{width:clamp(14px,.9rem + .4vw,20px);height:clamp(14px,.9rem + .4vw,20px);flex-shrink:0}
.flow-item-content h4 .flow-icon svg{width:clamp(14px,.9rem + .4vw,20px);height:clamp(14px,.9rem + .4vw,20px);stroke:var(--accent);fill:none;stroke-width:2}
.flow-item-content p{font-size:clamp(.75rem,.66rem + .16vw,.88rem);color:var(--gray);line-height:1.9;max-width:580px}

/* ── COMPANY ── */
.company{padding:clamp(40px,2.5rem + 3vw,80px) 0;background:var(--off-white)}
.company-inner{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,2.5rem + 3.5vw,80px);align-items:start}
.company-text{position:sticky;top:120px}
.company-table{width:100%;border-collapse:collapse}
.company-table tr{border-bottom:1px solid var(--light2)}
.company-table th{padding:clamp(12px,.75rem + .6vw,20px) 0;font-size:clamp(.7rem,.62rem + .14vw,.82rem);font-weight:600;color:var(--gray);text-align:left;width:clamp(100px,6rem + 4vw,160px);vertical-align:top;white-space:nowrap;letter-spacing:.5px}
.company-table td{padding:clamp(12px,.75rem + .6vw,20px) 0;font-size:clamp(.82rem,.74rem + .15vw,.95rem);color:var(--gray-dark);line-height:1.8}

/* ── CONTACT ── */
.contact{padding:clamp(40px,2.5rem + 3vw,80px) 0;background:var(--white)}
.contact-header{text-align:center;margin-bottom:clamp(24px,1.5rem + 2vw,48px)}
.contact-form-wrapper{max-width:720px;margin:0 auto;background:var(--off-white);padding:clamp(20px,1.2rem + 2.5vw,52px) clamp(16px,1rem + 2.2vw,44px);border:1px solid var(--light2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,.75rem + .6vw,20px)}
.form-group{margin-bottom:clamp(16px,1rem + .6vw,24px)}
.form-group label{display:flex;align-items:center;gap:6px;font-size:clamp(.7rem,.62rem + .14vw,.82rem);font-weight:600;color:var(--gray-dark);margin-bottom:8px;letter-spacing:.3px}
.required{font-size:.6rem;background:var(--accent);color:var(--white);padding:1px 7px;font-weight:700;letter-spacing:.5px}
.optional{font-size:.6rem;background:var(--light3);color:var(--gray);padding:1px 7px;font-weight:600}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:clamp(10px,.65rem + .3vw,14px) clamp(12px,.75rem + .25vw,16px);border:1px solid var(--light3);background:var(--white);color:var(--dark);font-size:clamp(.82rem,.74rem + .15vw,.95rem);font-family:var(--font-ja);outline:none;transition:all .3s var(--ease);border-radius:0;-webkit-appearance:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,77,0,.06)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--light3)}
.form-group textarea{height:clamp(100px,6rem + 3vw,140px);resize:vertical}
.form-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:44px;cursor:pointer}
.form-group select option{background:var(--white);color:var(--dark)}
.submit-btn{width:100%;padding:clamp(14px,.85rem + .3vw,18px);background:var(--accent);color:var(--white);border:none;font-size:clamp(.82rem,.74rem + .15vw,.95rem);font-weight:700;font-family:var(--font-ja);cursor:pointer;transition:all .3s var(--ease)}
.submit-btn:hover{background:var(--accent-light);transform:translateY(-1px);box-shadow:0 6px 25px rgba(255,77,0,.3)}
.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.form-note{text-align:center;margin-top:clamp(10px,.6rem + .4vw,16px);font-size:clamp(.68rem,.6rem + .1vw,.78rem);color:var(--gray)}
.form-success{display:none;text-align:center;padding:clamp(32px,2rem + 2.5vw,60px) 20px}
.form-success.active{display:block}
.form-success-icon{width:clamp(48px,3rem + 1.8vw,72px);height:clamp(48px,3rem + 1.8vw,72px);background:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto clamp(14px,.85rem + .7vw,24px)}
.form-success-icon svg{width:clamp(22px,1.4rem + .6vw,32px);height:clamp(22px,1.4rem + .6vw,32px);stroke:var(--white);fill:none;stroke-width:2.5}
.form-success h3{font-size:clamp(1rem,.88rem + .2vw,1.25rem);font-weight:700;color:var(--dark);margin-bottom:clamp(8px,.5rem + .3vw,12px)}
.form-success p{font-size:clamp(.78rem,.7rem + .14vw,.9rem);color:var(--gray);line-height:1.8}

/* ── POPUP ── */
.contact-popup{position:fixed;bottom:clamp(10px,.6rem + 1vw,24px);right:clamp(10px,.6rem + 1vw,24px);z-index:998;background:var(--white);border:1px solid var(--light2);box-shadow:0 8px 40px rgba(0,0,0,.12);padding:clamp(12px,.75rem + .9vw,24px) clamp(12px,.75rem + 1.2vw,28px);max-width:clamp(180px,11rem + 9vw,300px);width:auto;opacity:0;transform:translateY(20px);animation:popupIn .5s var(--ease-out) 2.5s forwards}
.contact-popup.hidden{display:none}
.contact-popup-close{position:absolute;top:clamp(5px,.3rem + .35vw,10px);right:clamp(5px,.3rem + .35vw,10px);width:clamp(20px,1.2rem + .5vw,28px);height:clamp(20px,1.2rem + .5vw,28px);border:none;background:var(--light);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease)}
.contact-popup-close:hover{background:var(--light3)}
.contact-popup-close svg{width:clamp(9px,.55rem + .25vw,14px);height:clamp(9px,.55rem + .25vw,14px);stroke:var(--gray);stroke-width:2}
.contact-popup-badge{font-family:var(--font-en);font-size:clamp(.45rem,.38rem + .12vw,.6rem);font-weight:700;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:clamp(4px,.25rem + .25vw,8px)}
.contact-popup h4{font-size:clamp(.65rem,.52rem + .3vw,.95rem);font-weight:700;color:var(--dark);margin-bottom:clamp(4px,.25rem + .25vw,8px);line-height:1.4}
.contact-popup p{font-size:clamp(.55rem,.45rem + .22vw,.78rem);color:var(--gray);line-height:clamp(1.4,1.4 + .1vw,1.7);margin-bottom:clamp(8px,.5rem + .6vw,16px)}
.contact-popup-btn{display:block;width:100%;text-align:center;padding:clamp(6px,.38rem + .35vw,11px);background:var(--accent);color:var(--white);font-weight:700;font-size:clamp(.6rem,.5rem + .2vw,.82rem);font-family:var(--font-ja);transition:all .3s var(--ease)}
.contact-popup-btn:hover{background:var(--accent-light);transform:translateY(-1px);box-shadow:0 4px 15px rgba(255,77,0,.3)}

/* ── FOOTER ── */
.footer{background:var(--dark2);padding:clamp(28px,1.8rem + 1.5vw,48px) 0 clamp(16px,1rem + .6vw,24px);border-top:1px solid rgba(255,255,255,.04)}
.footer-inner{display:flex;justify-content:space-between;align-items:start;margin-bottom:clamp(20px,1.2rem + 1vw,36px);gap:clamp(24px,1.5rem + 1.2vw,40px);flex-wrap:wrap}
.footer-logo{font-family:var(--font-en);font-size:clamp(1.1rem,.9rem + .25vw,1.3rem);font-weight:900;color:var(--white);margin-bottom:12px;display:flex;align-items:center;gap:2px}
.footer-logo .dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-left:1px}
.footer-desc{font-size:clamp(.7rem,.62rem + .12vw,.82rem);color:rgba(255,255,255,.4);max-width:280px;line-height:1.8}
.footer-links{display:flex;gap:clamp(24px,1.5rem + 1.8vw,48px)}
.footer-links-col h4{font-size:clamp(.6rem,.52rem + .1vw,.7rem);font-weight:700;color:rgba(255,255,255,.3);margin-bottom:clamp(8px,.5rem + .4vw,14px);letter-spacing:2px;text-transform:uppercase;font-family:var(--font-en)}
.footer-links-col a{display:block;font-size:clamp(.72rem,.64rem + .12vw,.85rem);color:rgba(255,255,255,.4);padding:3px 0;transition:color .3s}
.footer-links-col a:hover{color:var(--accent)}
.footer-bottom{padding-top:clamp(12px,.75rem + .5vw,20px);border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-copyright{font-size:clamp(.65rem,.58rem + .1vw,.75rem);color:rgba(255,255,255,.2);font-family:var(--font-en);letter-spacing:.5px}
.footer-bottom-links{display:flex;gap:clamp(12px,.75rem + .5vw,20px)}
.footer-bottom-links a{font-size:clamp(.65rem,.58rem + .1vw,.75rem);color:rgba(255,255,255,.2)}
.footer-bottom-links a:hover{color:rgba(255,255,255,.5)}

/* ── ANIMATIONS ── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes reelProgress{from{width:0}to{width:100%}}
@keyframes popupIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(40px);transition:all .8s var(--ease)}
.reveal.active{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE 1024px ── */
@media(max-width:1024px){
  .container{padding:0 clamp(10px,1.5vw,16px)}
  .services{padding:clamp(32px,2rem + 2vw,56px) 0}
  .platforms{padding:clamp(12px,.75rem + 1vw,28px) 0}
  .flow{padding:clamp(32px,2rem + 2vw,56px) 0}
  .company{padding:clamp(32px,2rem + 2vw,56px) 0}
  .contact{padding:clamp(32px,2rem + 2vw,56px) 0}
  .scroll-divider{padding:clamp(8px,.5rem + .8vw,20px) 0}
  .services-grid{grid-template-columns:1fr}
  .company-inner{grid-template-columns:1fr;gap:clamp(20px,1.2rem + 1vw,36px);max-width:640px;margin:0 auto}
  .company-text{position:static;text-align:center}
  .company-table{margin:0 auto}
  .hero{padding-top:80px;min-height:auto;padding-bottom:32px}
  .hero-layout{flex-direction:row;text-align:left;gap:clamp(24px,1.5rem + 1.5vw,40px)}
  .hero-content{max-width:auto;justify-content:center;text-align:center;order:1}
  .hero-phone-area{order:2}
  .hero-top-label{justify-content:center;text-align:center}
  .hero-description{justify-content:center;text-align:center}
  .hero-buttons{justify-content:center}
/*  .hero-stats{justify-content:center}*/
  .section-num{justify-content:center}
  .section-title-en{text-align:center}
  .section-title-ja{text-align:center}
  .services-top{justify-content:center;text-align:center}
  .services-desc{justify-content:center;text-align:center}
  .platforms-inner{flex-direction:column;align-items:center}
  .platforms-list{justify-content:center}
  .flow-list{max-width:640px;padding:0 clamp(16px,1rem + 1.5vw,32px)}
}

/* ── RESPONSIVE 768px ── */
@media(max-width:768px){
  .container{padding:0 clamp(8px,1.2vw,12px)}
  .nav-links{display:none}
  .hamburger{display:flex}
  .mobile-nav{display:flex}
  .services{padding:clamp(28px,1.8rem + 1.5vw,48px) 0}
  .platforms{padding:clamp(10px,.6rem + .8vw,20px) 0}
  .flow{padding:clamp(28px,1.8rem + 1.5vw,48px) 0}
  .company{padding:clamp(28px,1.8rem + 1.5vw,48px) 0}
  .contact{padding:clamp(28px,1.8rem + 1.5vw,48px) 0}
  .scroll-divider{padding:clamp(6px,.4rem + .6vw,16px) 0}
  .hero{padding-top:80px;min-height:auto;padding-bottom:32px}
  .hero-layout{flex-direction:column;text-align:center;gap:24px}
  .hero-content{max-width:100%;order:1}
  .hero-phone-area{order:2}
  .hero-top-label{justify-content:center}
  .hero-description{margin-left:auto;margin-right:auto}
  .hero-buttons{flex-direction:column;justify-content:center}
  .btn-primary,.btn-secondary{justify-content:center;width:100%}
  .hero-stats{justify-content:center;flex-wrap:wrap}
  .section-num{justify-content:center}
  .section-title-en{text-align:center}
  .section-title-ja{text-align:center}
  .company-text{text-align:center;position:static}
  .company-inner{grid-template-columns:1fr;max-width:100%}
  .company-table{margin:0 auto}
  .company-table th{display:block;padding-bottom:2px;width:100%;text-align:center}
  .company-table td{display:block;padding-top:0;text-align:center}
  .company-table tr{display:block;padding:10px 0}
  .platforms-inner{flex-direction:column;align-items:center}
  .platforms-list{justify-content:center}
  .services-grid{grid-template-columns:1fr}
  .flow-list{max-width:100%;padding:0 clamp(12px,.75rem + 1.5vw,24px)}
  .form-row{grid-template-columns:1fr}
  .footer-inner{flex-direction:column}
  .footer-links{flex-direction:column;gap:20px}
  .footer-bottom{flex-direction:column;text-align:center}
}