:root{--bg:#070b13;--bg2:#0e1522;--text:#eef3fa;--muted:#9eabba;--line:#253247;--accent:#64d3ff;--accent2:#7d8cff;--paper:#f7f9fc;--ink:#111827;--shadow:0 18px 60px rgba(17,24,39,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:78px}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;background:var(--paper);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.wrap{width:min(1160px,calc(100% - 40px));margin:auto}.skip-link{position:fixed;left:10px;top:-100px;z-index:999;background:#fff;color:#000;padding:10px 14px}.skip-link:focus{top:10px}
.site-header{position:sticky;top:0;z-index:60;background:rgba(7,11,19,.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}.nav-wrap{display:flex;align-items:center;justify-content:space-between;min-height:72px}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.13em;font-size:14px}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#07101c;font-size:15px;letter-spacing:0}.nav{display:flex;align-items:center;gap:24px;font-size:13px;color:#c5cfda}.nav a{transition:.2s}.nav a:hover{color:#fff}.nav-cta{border:1px solid rgba(255,255,255,.22);padding:8px 15px;border-radius:999px}.menu-btn{display:none;background:transparent;border:0;color:#fff;font-size:26px;line-height:1;padding:8px}
.hero{position:relative;background:radial-gradient(circle at 80% 20%,rgba(100,211,255,.16),transparent 31%),radial-gradient(circle at 55% 70%,rgba(125,140,255,.15),transparent 32%),linear-gradient(160deg,#080d16,#0b1220 55%,#08101b);color:var(--text);padding:96px 0 46px;overflow:hidden}.hero:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(100,211,255,.35),transparent)}.hero-noise{position:absolute;inset:0;opacity:.15;background-image:radial-gradient(rgba(255,255,255,.5) .6px,transparent .6px);background-size:18px 18px;mask-image:linear-gradient(to bottom,#000,transparent 75%)}.hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:70px}.eyebrow,.section-kicker{font-size:11px;letter-spacing:.22em;font-weight:900;color:var(--accent);margin:0 0 14px}.hero h1{font-size:clamp(48px,7vw,88px);line-height:1.02;letter-spacing:-.055em;margin:0 0 28px}.hero h1 span{background:linear-gradient(90deg,#fff,#aeeaff 45%,#bfc5ff);-webkit-background-clip:text;background-clip:text;color:transparent}.lead{font-size:18px;max-width:650px;color:#bec8d5;margin:0 0 28px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 23px;border-radius:999px;font-weight:800;font-size:14px;transition:.22s;border:0}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#08101b;box-shadow:0 12px 36px rgba(100,211,255,.22)}.btn-outline{border:1px solid #536277;color:#fff}.btn-outline-light{border:1px solid rgba(255,255,255,.35);color:#fff}.hero-points{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:#a9b6c7;font-size:12px}.hero-points span{white-space:nowrap}.note{font-size:11px;color:#758499;margin-top:12px}.card-stage{position:relative;min-height:470px}.glow{position:absolute;border-radius:50%;filter:blur(18px);opacity:.35}.glow-a{width:250px;height:250px;background:#64d3ff;left:80px;top:80px}.glow-b{width:190px;height:190px;background:#7d8cff;right:40px;bottom:40px}.music-card{position:absolute;left:0;top:58px;width:365px;aspect-ratio:1.59/1;border-radius:21px;padding:28px;background:linear-gradient(135deg,#111a29,#233451 54%,#0c1320);box-shadow:0 34px 100px rgba(0,0,0,.52);transform:rotate(-8deg);border:1px solid rgba(255,255,255,.16);overflow:hidden;z-index:2}.music-card:before{content:"";position:absolute;width:250px;height:250px;border-radius:50%;right:-70px;top:-100px;background:radial-gradient(circle,rgba(100,211,255,.3),transparent 65%)}.music-card-top{display:flex;justify-content:space-between;position:relative;z-index:1}.chip-mark{display:inline-flex;border:1px solid #5b6b82;border-radius:9px;padding:5px 10px;font-size:10px;color:#b9c5d3}.wave-icon{font-size:11px;letter-spacing:-2px;color:#7ad9ff;transform:rotate(-20deg)}.music-card-title{margin-top:40px;font-size:33px;line-height:.95;font-weight:950;letter-spacing:.03em}.music-card-sub{font-size:10px;letter-spacing:.24em;color:#8191a5;margin-top:8px}.sound-lines{display:flex;gap:5px;align-items:end;height:34px;margin-top:12px}.sound-lines span{display:block;width:4px;border-radius:10px;background:linear-gradient(var(--accent),var(--accent2))}.sound-lines span:nth-child(1){height:12px}.sound-lines span:nth-child(2){height:27px}.sound-lines span:nth-child(3){height:18px}.sound-lines span:nth-child(4){height:32px}.sound-lines span:nth-child(5){height:21px}.tap-ring{position:absolute;border:1px solid rgba(100,211,255,.24);border-radius:50%;z-index:1}.ring1{width:210px;height:210px;left:205px;top:122px}.ring2{width:290px;height:290px;left:165px;top:80px}.phone{position:absolute;right:8px;bottom:0;width:222px;height:430px;border-radius:36px;background:#111827;border:7px solid #1f2937;box-shadow:0 30px 90px rgba(0,0,0,.6);transform:rotate(6deg);padding:16px;z-index:3}.phone-top{width:70px;height:16px;background:#1f2937;border-radius:20px;position:absolute;top:7px;left:50%;transform:translateX(-50%)}.phone-screen{height:100%;border-radius:24px;background:linear-gradient(#0c1626,#121c2e);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;color:#fff}.phone-label{font-size:9px;letter-spacing:.22em;color:#7f8da0}.album-art{width:90px;height:90px;border-radius:24px;margin:22px 0 18px;display:grid;place-items:center;background:linear-gradient(135deg,#5ad2ff,#837cff);box-shadow:0 12px 30px rgba(100,211,255,.22)}.album-art span{font-size:34px;color:#08101b}.phone-screen strong{font-size:14px}.phone-screen small{font-size:9px;color:#8794a6;margin-top:6px}.player-line{height:3px;width:100%;background:#253146;margin-top:25px;border-radius:10px}.player-line span{display:block;width:62%;height:100%;background:var(--accent);border-radius:10px}.player-controls{display:flex;align-items:center;gap:24px;margin-top:18px;color:#9eb0c5;font-size:10px}.player-controls b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#111;font-size:11px}.trust-row{position:relative;display:flex;align-items:center;gap:24px;margin-top:35px;color:#8796a9;font-size:11px;letter-spacing:.14em}.trust-row p{margin:0;letter-spacing:.02em}.trust-sep{height:1px;flex:1;background:linear-gradient(90deg,#344156,transparent)}
.section{padding:96px 0}.section-head{text-align:center;max-width:820px;margin:0 auto 42px}.section h2{font-size:clamp(34px,4.5vw,54px);line-height:1.15;letter-spacing:-.04em;margin:0 0 20px}.section-intro{max-width:800px;margin:0 auto;color:#667085;font-size:17px}.section-intro.left{text-align:left;margin-left:0}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature{padding:30px;border-radius:20px;background:#fff;border:1px solid #e4e9f0;box-shadow:0 8px 30px rgba(31,41,55,.05);transition:.25s}.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.feature .icon{width:50px;height:50px;border-radius:15px;background:linear-gradient(135deg,#eef8ff,#f1f0ff);color:#248ab6;display:grid;place-items:center;font-size:13px;font-weight:900;margin-bottom:18px}.feature h3{margin:0 0 8px;font-size:18px}.feature p{margin:0;color:#677386;font-size:14px}.how-section{background:#fff}.how-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:24px}.how-card{text-align:center}.how-num{font-size:11px;font-weight:900;letter-spacing:.14em;color:#358fb8}.how-visual{height:150px;margin:14px 0 20px;border:1px solid #e6ebf2;border-radius:24px;background:linear-gradient(145deg,#f9fbfd,#eef4f9);display:grid;place-items:center;position:relative;overflow:hidden}.how-card h3{margin:0 0 6px}.how-card p{margin:0;color:#6e7a8c;font-size:14px}.how-arrow{color:#b4bfcc;font-size:28px}.mini-phone{font-size:72px;transform:rotate(-8deg);color:#1c2a40}.mini-card{position:absolute;padding:14px 18px;border-radius:10px;right:22%;bottom:24%;background:#111827;color:#fff;font-size:9px;line-height:1.1;transform:rotate(10deg)}.browser-icon,.play-icon{display:grid;place-items:center;width:78px;height:78px;border-radius:22px;background:#111827;color:#7ad9ff;font-size:36px;box-shadow:0 14px 34px rgba(17,24,39,.14)}
.section-dark{background:var(--bg);color:#fff}.section-dark .section-kicker{color:var(--accent)}.use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.use-card{padding:31px;border:1px solid #202d40;background:linear-gradient(150deg,#0d1421,#0a111c);border-radius:18px;transition:.25s}.use-card:hover{border-color:#354960;transform:translateY(-3px)}.use-card span{font-size:11px;color:#66d7ff;font-weight:800}.use-card h3{font-size:19px;margin:14px 0 8px}.use-card p{margin:0;color:#9eabba;font-size:14px}.compare-section{background:#edf3f8}.compare-wrap{display:grid;grid-template-columns:1.08fr .96fr .96fr;gap:18px}.compare-card{padding:30px;background:#fff;border:1px solid #dfe6ee;border-radius:22px}.compare-card.featured{background:linear-gradient(160deg,#0e1828,#111e32);color:#fff;border-color:#25374f;box-shadow:0 20px 50px rgba(14,24,40,.16)}.badge{display:inline-flex;font-size:10px;font-weight:900;letter-spacing:.12em;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#08101b}.badge.muted{background:#eef2f6;color:#657285}.compare-card h3{font-size:23px;margin:18px 0}.compare-card ul{margin:0;padding:0;list-style:none}.compare-card li{padding:10px 0;border-top:1px solid #e8edf2;font-size:14px}.compare-card.featured li{border-color:#26364d;color:#bcc7d5}.compare-note{font-size:12px;color:#7b8797;text-align:center;margin:18px 0 0}.security-section{background:#fff}.security-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}.security-grid .section-kicker,.security-grid h2{text-align:left}.security-list{border-top:1px solid #dde3eb}.security-list>div{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid #dde3eb}.security-list b{font-size:12px;color:#248ab6}.security-list span{display:flex;flex-direction:column;color:#647083}.security-list strong{color:#101828;font-size:17px;margin-bottom:2px}.security-chip{display:inline-flex;border:1px solid #c9d7e5;border-radius:999px;padding:8px 13px;color:#4f657e;font-size:10px;letter-spacing:.14em;font-weight:900}.spec-section{background:#eef3f8}.spec-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}.spec-card-visual{position:relative;min-height:320px;display:grid;place-items:center}.spec-card-face{width:min(360px,85%);aspect-ratio:1.59/1;border-radius:22px;background:linear-gradient(135deg,#111a29,#263a59 60%,#101725);box-shadow:0 30px 70px rgba(17,24,39,.22);padding:28px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-5deg)}.spec-card-face div{font-size:10px;border:1px solid #61718a;border-radius:8px;width:max-content;padding:4px 8px}.spec-card-face strong{font-size:27px;letter-spacing:.08em}.spec-card-face small{color:#91a1b7}.ruler{position:absolute;font-size:11px;color:#6a7788;font-weight:700}.ruler-x{bottom:18px;left:50%;transform:translateX(-50%)}.ruler-y{left:6px;top:50%;transform:rotate(-90deg) translateX(-50%);transform-origin:left top}.spec-table-wrap{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 8px 30px rgba(31,41,55,.06)}.spec-table{width:100%;border-collapse:collapse}.spec-table th,.spec-table td{padding:16px 22px;border-bottom:1px solid #edf0f4;text-align:left}.spec-table th{width:32%;font-size:13px;color:#667085;background:#fafbfd}.spec-table td{font-size:14px;font-weight:700;color:#344054}.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.flow-card{padding:28px;border-left:2px solid #4f6078;background:#0d1421;border-radius:0 16px 16px 0}.flow-card span{font-size:11px;color:#66d7ff;font-weight:900}.flow-card h3{margin:12px 0 8px}.flow-card p{margin:0;color:#9eabba;font-size:14px}.demo-section{background:#fff}.demo-box{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:50px;border-radius:26px;background:radial-gradient(circle at 90% 30%,rgba(100,211,255,.18),transparent 28%),linear-gradient(135deg,#ecf8ff,#eef0ff);border:1px solid #dfeafa}.demo-box .section-kicker,.demo-box h2{text-align:left}.demo-box h2{margin-bottom:10px}.demo-box p{margin:0;color:#617083}.faq-section{background:#f7f9fc}.faq-wrap{max-width:920px}.faq-list{border-top:1px solid #dfe5ec}.faq-list details{border-bottom:1px solid #dfe5ec;padding:0}.faq-list summary{cursor:pointer;list-style:none;padding:22px 46px 22px 0;font-weight:800;position:relative}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"＋";position:absolute;right:6px;top:20px;font-size:20px;color:#667085}.faq-list details[open] summary:after{content:"−"}.faq-list p{margin:0;padding:0 46px 22px 0;color:#687486;font-size:14px}.contact-section{background:radial-gradient(circle at 50% 0,rgba(100,211,255,.13),transparent 32%),linear-gradient(135deg,#111b2d,#09111c);color:#fff;text-align:center}.contact-box{max-width:800px}.contact-box h2{font-size:clamp(40px,6vw,66px)}.contact-box>p{color:#a8b4c5}.contact-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}.contact-note{font-size:11px!important;color:#7f8da0!important;margin-top:16px!important}.footer{background:#050910;color:#8490a0;padding:30px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}.footer .brand{color:#fff}.mobile-demo{display:none}.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}.reveal.is-visible{opacity:1;transform:none}.sp-only{display:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn,.feature,.use-card{transition:none}}
@media (max-width:940px){.nav{position:absolute;left:0;right:0;top:72px;display:none;flex-direction:column;align-items:stretch;gap:0;background:rgba(7,11,19,.98);border-top:1px solid rgba(255,255,255,.08);padding:10px 20px 18px}.nav.open{display:flex}.nav a{padding:12px 6px;border-bottom:1px solid rgba(255,255,255,.07)}.nav-cta{text-align:center;margin-top:8px;border-bottom:1px solid rgba(255,255,255,.22)!important}.menu-btn{display:block}.hero{padding-top:72px}.hero-grid{grid-template-columns:1fr;gap:30px}.card-stage{min-height:450px;max-width:590px;width:100%;margin:auto}.feature-grid,.flow-grid{grid-template-columns:repeat(2,1fr)}.use-grid{grid-template-columns:repeat(2,1fr)}.security-grid,.spec-layout{grid-template-columns:1fr;gap:38px}.compare-wrap{grid-template-columns:1fr}.how-grid{grid-template-columns:1fr}.how-arrow{transform:rotate(90deg);text-align:center}.demo-box{flex-direction:column;align-items:flex-start}.section{padding:76px 0}}
@media (max-width:620px){.wrap{width:min(100% - 28px,1160px)}.hero{padding:58px 0 34px}.hero h1{font-size:48px}.lead{font-size:16px}.hero-actions .btn{width:100%}.hero-points{gap:10px 14px}.trust-row{margin-top:20px;display:block}.trust-row .trust-sep{display:none}.trust-row p{margin-top:4px}.card-stage{min-height:350px}.music-card{width:270px;top:44px;padding:21px}.music-card-title{font-size:25px;margin-top:27px}.phone{width:160px;height:315px;border-radius:28px;right:0}.album-art{width:64px;height:64px;border-radius:18px}.tap-ring{display:none}.feature-grid,.use-grid,.flow-grid{grid-template-columns:1fr}.feature,.use-card,.flow-card{padding:24px}.section-head{text-align:left;margin-bottom:30px}.section-intro{text-align:left;font-size:15px}.section h2{font-size:36px}.spec-card-visual{min-height:250px}.spec-table th,.spec-table td{padding:13px 14px}.spec-table th{width:38%}.footer{padding-bottom:90px}.footer-inner{flex-direction:column;align-items:flex-start}.demo-box{padding:32px 24px}.contact-actions .btn{width:100%}.mobile-demo{display:block;position:fixed;z-index:55;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));background:linear-gradient(90deg,var(--accent),var(--accent2));color:#07101c;text-align:center;font-weight:900;font-size:13px;padding:13px 16px;border-radius:999px;box-shadow:0 14px 35px rgba(0,0,0,.3)}.sp-only{display:block}}

/* Actual MUSIC CARD artwork on hero */
.real-cards{min-height:500px;perspective:1200px}.real-card{position:absolute;margin:0;width:330px;z-index:2;filter:drop-shadow(0 26px 34px rgba(0,0,0,.48));transition:transform .3s ease}.real-card img{display:block;width:100%;height:auto;border-radius:15px;border:1px solid rgba(255,255,255,.18)}.real-card figcaption{position:absolute;right:10px;bottom:-25px;font-size:9px;letter-spacing:.18em;color:#8393a7}.card-one{left:-5px;top:35px;transform:rotate(-8deg)}.card-two{right:-5px;top:72px;transform:rotate(8deg);z-index:3}.card-three{left:105px;bottom:5px;width:300px;transform:rotate(-1deg);z-index:4}.real-card:hover{z-index:8}.card-one:hover{transform:rotate(-5deg) translateY(-7px)}.card-two:hover{transform:rotate(5deg) translateY(-7px)}.card-three:hover{transform:rotate(0) translateY(-7px)}
@media(max-width:620px){.real-cards{min-height:390px}.real-card{width:235px}.card-one{left:0;top:30px}.card-two{right:0;top:68px}.card-three{left:50%;bottom:0;width:220px;transform:translateX(-50%) rotate(-1deg)}.card-three:hover{transform:translateX(-50%) rotate(0) translateY(-5px)}}

/* v4: Japanese headline wrapping + in-page demo fix */
.hero h1{font-size:clamp(44px,5.2vw,72px);line-height:1.08;word-break:keep-all;overflow-wrap:normal;}
.hero h1 span{white-space:nowrap;}
#demo{scroll-margin-top:90px;}
@media (max-width:900px){.hero h1{font-size:clamp(40px,7vw,58px);}}
@media (max-width:620px){.hero h1{font-size:clamp(38px,11vw,50px);line-height:1.12;}.hero h1 span{white-space:normal;word-break:keep-all;}}

/* v9: keep both Japanese hero headline lines intact */
.hero h1{font-size:clamp(42px,4.3vw,64px);line-height:1.10;letter-spacing:-.045em;}
.hero h1 .hero-line{display:inline-block;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;}
@media (max-width:1100px){.hero h1{font-size:clamp(40px,5vw,58px);}}
@media (max-width:620px){.hero h1{font-size:clamp(34px,9.5vw,46px);line-height:1.14;}.hero h1 .hero-line{white-space:nowrap;}}