/* ============================================================
STAR ROUTE — site.css ✦ COSMIC EDITION ✦
宇宙 × イリディセント(オーロラ) × ゴールド / handcrafted, glassmorphism
============================================================ */
:root{
--space:#04130e; --space-2:#062019; --space-3:#08291f; --space-4:#0c3a2b;
--emerald:#06231d;
--panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.07);
--stroke:rgba(255,255,255,.1); --stroke-2:rgba(255,255,255,.16);
--stroke-gold:rgba(236,198,128,.3);
--text:#e9edf6; --muted:#a7b2c6; --dim:#7f8aa0;
--ink:#101826;
--gold:#ecc680; --gold-soft:#f8e7bf; --gold2:#d8a857; --gold-deep:#caa05a; --gold-glow:rgba(236,198,128,.5);
--iri-1:#5fe6ff; --iri-2:#7aa8ff; --iri-3:#b083ff; --iri-4:#ff77dd; --iri-5:#ffd98a;
--iris:linear-gradient(100deg,#5fe6ff 0%,#7aa8ff 26%,#b083ff 50%,#ff77dd 74%,#ffd98a 100%);
--paper:#fbf7ef; --paper-text:#26332f; --paper-muted:#5f6c66; --paper-line:rgba(6,52,45,.13);
--maxw:1160px; --r:22px; --r-sm:14px;
--sans:"Noto Sans JP",system-ui,-apple-system,sans-serif;
--serif:"Noto Serif JP",serif; --en:"Montserrat",sans-serif;
--shadow:0 30px 70px -30px rgba(0,0,0,.7);
--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{font-family:var(--sans);color:var(--text);line-height:1.9;font-weight:400;letter-spacing:.02em;overflow-x:hidden;-webkit-font-smoothing:antialiased;
background:var(--space);
background-image:
radial-gradient(60vw 50vw at 12% 6%,rgba(54,214,158,.16),transparent 60%),
radial-gradient(55vw 45vw at 88% 22%,rgba(120,255,214,.10),transparent 60%),
radial-gradient(58vw 50vw at 84% 88%,rgba(176,131,255,.10),transparent 60%),
radial-gradient(60vw 55vw at 20% 82%,rgba(236,198,128,.08),transparent 62%),
radial-gradient(70vw 60vw at 50% 50%,rgba(7,45,36,.5),transparent 70%),
linear-gradient(180deg,#04130e 0%,#062019 50%,#04120d 100%);
background-attachment:fixed}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#2a1e06}
.en{font-family:var(--en);letter-spacing:.14em}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px}
section{position:relative;z-index:1}
.sec{padding:clamp(72px,9.5vw,130px) 0}
.center{text-align:center}
/* fixed starfield canvas behind everything */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none}
/* film grain */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* ---------- kicker / headings ---------- */
.kicker{font-family:var(--en);font-weight:700;font-size:.72rem;letter-spacing:.34em;display:flex;align-items:center;gap:13px;justify-content:center;text-transform:uppercase;
background:var(--iris);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 8s linear infinite}
.kicker.left{justify-content:flex-start}
.kicker .ln{width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));display:inline-block}
.kicker.left .ln:first-child{display:none}
.h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.65rem,4.7vw,2.7rem);line-height:1.42;letter-spacing:.035em;color:#fff;text-align:center;margin:16px 0 0}
.h2 .gold{color:var(--gold)}
.h2 .iri{background:var(--iris);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 8s linear infinite}
.h2.under::after{content:"";display:block;width:58px;height:3px;margin:20px auto 0;border-radius:3px;background:var(--iris);box-shadow:0 0 18px 1px rgba(176,131,255,.5)}
.lead{text-align:center;color:var(--muted);max-width:660px;margin:20px auto 0;font-size:1.02rem}
@keyframes foil{to{background-position:200% center}}
/* gold-foil text */
.foil{background:linear-gradient(100deg,#caa05a,#f8e7bf 30%,#fff6df 42%,#ecc680 60%,#caa05a 100%);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foilg 7s linear infinite;filter:drop-shadow(0 1px 12px rgba(236,198,128,.3))}
@keyframes foilg{to{background-position:280% 0}}
/* route dash divider */
.routedash{display:flex;align-items:center;justify-content:center;gap:14px;margin:24px auto 0;max-width:230px}
.routedash::before,.routedash::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.routedash::after{background:linear-gradient(90deg,var(--gold),transparent)}
.routedash i{width:8px;height:8px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 14px 2px var(--gold-glow)}
/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-weight:700;border-radius:999px;padding:1.1em 2.15em;font-size:1rem;transition:.35s var(--ease);line-height:1.2;cursor:pointer;border:none;text-align:center;overflow:hidden;isolation:isolate}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn-gold{background:linear-gradient(135deg,#f6e2b8,#ecc680 42%,#d8a857);color:#33240a;box-shadow:0 16px 36px -14px var(--gold-glow),0 0 26px -12px var(--gold-glow)}
.btn-gold::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-130%);transition:transform .7s var(--ease)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 26px 50px -14px var(--gold-glow)}
.btn-gold:hover::after{transform:translateX(130%)}
.btn-line{background:#06c755;color:#fff;box-shadow:0 16px 34px -14px rgba(6,199,85,.6)}
.btn-line:hover{transform:translateY(-3px);box-shadow:0 24px 46px -14px rgba(6,199,85,.75)}
.btn-line svg{width:18px;height:18px;fill:#fff}
.btn-ghost{background:rgba(255,255,255,.05);color:#fff;border:1.5px solid var(--stroke-2);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-soft);background:rgba(236,198,128,.08)}
.btn-iri{background:var(--iris);background-size:180% auto;color:#0b1020;box-shadow:0 16px 38px -14px rgba(176,131,255,.6);animation:foil 6s linear infinite}
.btn-iri:hover{transform:translateY(-3px)}
.btn-lg{padding:1.24em 2.8em;font-size:1.05rem}
.btn-block{width:100%}
/* ---------- glass panel ---------- */
.glass{position:relative;background:var(--panel);border:1px solid var(--stroke);border-radius:var(--r);backdrop-filter:blur(14px) saturate(1.1);box-shadow:var(--shadow)}
.glass-gold{border-color:var(--stroke-gold)}
.glow-edge{position:relative}
.glow-edge::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(236,198,128,.7),transparent 38%,transparent 62%,rgba(176,131,255,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;transition:.4s var(--ease)}
.nav{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand .mark{width:46px;height:46px;background:#fff;border-radius:13px;padding:5px;object-fit:contain;box-shadow:0 8px 20px -8px rgba(0,0,0,.6),0 0 22px -8px var(--gold-glow);transition:.35s}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm b{font-family:var(--en);font-weight:800;font-size:1.06rem;letter-spacing:.18em;color:#fff}
.brand .wm span{font-size:.57rem;letter-spacing:.34em;color:var(--gold-soft);margin-top:4px;font-family:var(--en);font-weight:600}
.menu{display:flex;align-items:center;gap:32px}
.menu a.nl{color:rgba(255,255,255,.9);font-size:.86rem;font-weight:500;letter-spacing:.05em;position:relative;padding:7px 0}
.menu a.nl::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--iris);transition:.35s var(--ease)}
.menu a.nl:hover::after{width:100%}
.nav-cta{padding:.74em 1.5em;font-size:.84rem}
header.scrolled{background:rgba(6,32,24,.82);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 10px 34px -18px rgba(0,0,0,.8);border-bottom:1px solid var(--stroke)}
header.scrolled .nav{height:66px}
header.scrolled .brand .mark{width:40px;height:40px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:120}
.burger span{width:26px;height:2px;background:#fff;transition:.3s;border-radius:2px}
/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden}
.hero .planet{position:absolute;left:50%;bottom:-58vw;transform:translateX(-50%);width:150vw;height:150vw;max-width:1700px;max-height:1700px;border-radius:50%;z-index:1;
background:radial-gradient(circle at 50% 0%,rgba(72,224,176,.55),rgba(72,224,176,0) 22%),radial-gradient(circle at 50% 8%,rgba(9,38,30,.92),#05140f 40%);
box-shadow:inset 0 8px 60px rgba(72,224,176,.4),0 -10px 120px -20px rgba(72,224,176,.45)}
.hero .planet::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 6px 30px 2px rgba(170,255,225,.55);
-webkit-mask:radial-gradient(circle at 50% 0%,#000 0 21%,transparent 22%);mask:radial-gradient(circle at 50% 0%,#000 0 21%,transparent 22%)}
.hero .nebula{position:absolute;inset:0;z-index:1;pointer-events:none;
background:radial-gradient(40vw 36vw at 16% 28%,rgba(54,214,158,.26),transparent 60%),radial-gradient(42vw 36vw at 86% 18%,rgba(95,230,255,.16),transparent 60%),radial-gradient(40vw 34vw at 70% 86%,rgba(176,131,255,.16),transparent 60%);filter:blur(8px)}
.beams{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.beams::before,.beams::after{content:"";position:absolute;top:-26%;left:50%;width:46vw;height:150%;transform-origin:top center;filter:blur(16px)}
.beams::before{background:linear-gradient(to bottom,rgba(176,131,255,.22),transparent 70%);transform:translateX(-55%) rotate(-15deg);animation:beam1 12s ease-in-out infinite alternate}
.beams::after{width:34vw;background:linear-gradient(to bottom,rgba(95,230,255,.18),transparent 70%);transform:translateX(-45%) rotate(13deg);animation:beam2 14s ease-in-out infinite alternate}
@keyframes beam1{from{transform:translateX(-62%) rotate(-20deg);opacity:.5}to{transform:translateX(-44%) rotate(-8deg);opacity:1}}
@keyframes beam2{from{transform:translateX(-42%) rotate(20deg);opacity:.4}to{transform:translateX(-60%) rotate(6deg);opacity:.9}}
.comet{position:absolute;top:14%;left:-12%;width:46%;height:2px;background:linear-gradient(90deg,transparent,rgba(248,231,191,.95));z-index:2;transform:rotate(16deg);border-radius:2px;animation:comet 9s linear infinite;opacity:0}
.comet::after{content:"";position:absolute;right:0;top:-3px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 18px 5px rgba(255,255,255,.85)}
@keyframes comet{0%{opacity:0;transform:translate(0,0) rotate(16deg)}6%{opacity:1}40%{opacity:1}55%{opacity:0;transform:translate(130%,40%) rotate(16deg)}100%{opacity:0}}
.hero .wrap{position:relative;z-index:5;padding-top:104px;padding-bottom:80px}
.hero-tag{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--stroke-gold);color:var(--gold-soft);font-size:.74rem;letter-spacing:.16em;padding:.58em 1.25em;border-radius:999px;font-family:var(--en);font-weight:600;backdrop-filter:blur(5px);background:rgba(255,255,255,.05);box-shadow:0 0 30px -8px var(--gold-glow)}
.hero-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px 2px var(--gold-glow);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.hero h1{font-family:var(--serif);color:#fff;font-weight:700;font-size:clamp(2.3rem,6.8vw,4.4rem);line-height:1.32;letter-spacing:.02em;margin:26px 0 0;text-shadow:0 6px 40px rgba(0,0,0,.5)}
.hero h1 .accent{background:var(--iris);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 7s linear infinite;filter:drop-shadow(0 2px 24px rgba(176,131,255,.45))}
.hero h1 .sm{display:block;font-size:.38em;letter-spacing:.26em;font-family:var(--en);font-weight:600;margin-bottom:22px;color:var(--gold-soft)}
.hero p.sub{color:rgba(233,237,246,.9);font-size:clamp(1rem,2.4vw,1.18rem);margin:30px 0 0;max-width:620px;line-height:2}
.hero p.sub b{color:var(--gold-soft);font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:15px;margin-top:40px}
.hero-trust{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:44px;padding-top:32px;border-top:1px solid var(--stroke)}
.hero-trust .t{color:rgba(255,255,255,.9);font-size:.82rem;display:flex;align-items:center;gap:11px;line-height:1.4}
.hero-trust .t b{color:var(--gold-soft);font-family:var(--en);font-weight:800;font-size:1.7rem;line-height:1}
.hero-trust .ico{color:var(--gold);font-size:1.2rem}
.scroll-ind{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:5;color:rgba(255,255,255,.6);font-size:.6rem;letter-spacing:.32em;font-family:var(--en);display:flex;flex-direction:column;align-items:center;gap:9px}
.scroll-ind::after{content:"";width:1px;height:46px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:sd 1.9s ease-in-out infinite}
@keyframes sd{0%,100%{opacity:.25;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}
/* ---------- live view counter ---------- */
.viewcount{display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding:.7em 1.2em;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--stroke);backdrop-filter:blur(6px);font-size:.82rem;color:var(--muted)}
.viewcount .live{display:inline-flex;align-items:center;gap:7px;font-family:var(--en);font-weight:600;letter-spacing:.1em;font-size:.7rem;color:#7be0a8}
.viewcount .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px 2px rgba(74,222,128,.7);animation:pulse 1.8s ease-in-out infinite}
.viewcount .odo{display:inline-flex;gap:2px}
.viewcount .odo .dg{display:inline-block;min-width:.66em;padding:.12em .16em;border-radius:6px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));font-family:var(--en);font-weight:800;color:var(--gold-soft);font-size:1.05rem;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.viewcount .lbl{color:var(--muted)}
/* ---------- marquee ---------- */
.marquee{background:rgba(255,255,255,.03);color:rgba(255,255,255,.55);padding:18px 0;overflow:hidden;white-space:nowrap;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.marquee .track{display:inline-flex;gap:46px;animation:mq 30s linear infinite;font-family:var(--en);letter-spacing:.22em;font-size:.82rem;font-weight:600}
.marquee .track span{display:inline-flex;align-items:center;gap:46px}
.marquee .track i{font-style:normal;background:var(--iris);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes mq{to{transform:translateX(-50%)}}
/* ---------- pain ---------- */
.pain{text-align:center}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
.pain-card{padding:38px 30px;text-align:left;transition:.4s var(--ease)}
.pain-card:hover{transform:translateY(-6px)}
.pain-card .q{font-family:var(--en);font-weight:800;font-size:1.2rem;letter-spacing:.06em;background:var(--iris);-webkit-background-clip:text;background-clip:text;color:transparent}
.pain-card p{color:rgba(233,237,246,.92);font-size:1.02rem;margin-top:12px;line-height:1.8;font-weight:500}
.pain-bridge{margin-top:54px;font-family:var(--serif);font-size:clamp(1.2rem,3.1vw,1.7rem);color:var(--gold-soft);font-weight:700;line-height:1.7}
/* ---------- reasons ---------- */
.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:54px}
.reason{padding:40px 32px;transition:.4s var(--ease)}
.reason:hover{transform:translateY(-7px)}
.reason .no{font-family:var(--en);font-weight:800;font-size:.76rem;letter-spacing:.22em;background:var(--iris);-webkit-background-clip:text;background-clip:text;color:transparent}
.reason .ic{width:60px;height:60px;border-radius:17px;background:linear-gradient(135deg,rgba(176,131,255,.25),rgba(95,230,255,.18));border:1px solid var(--stroke-2);display:flex;align-items:center;justify-content:center;margin:18px 0 20px;color:var(--gold-soft);box-shadow:0 0 30px -10px rgba(176,131,255,.5)}
.reason h3{font-family:var(--serif);color:#fff;font-size:1.28rem;font-weight:700;line-height:1.5}
.reason p{color:var(--muted);font-size:.96rem;margin-top:13px}
/* ---------- service ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:54px}
.svc{overflow:hidden;display:flex;flex-direction:column;transition:.4s var(--ease)}
.svc:hover{transform:translateY(-8px)}
.svc-top{padding:32px 32px 26px;position:relative;overflow:hidden;border-bottom:1px solid var(--stroke)}
.svc-top::before{content:"";position:absolute;inset:0;background:linear-gradient(140deg,rgba(176,131,255,.22),rgba(95,230,255,.12) 60%,transparent);opacity:.9}
.svc-top::after{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(236,198,128,.3),transparent 70%)}
.svc-top>*{position:relative;z-index:2}
.svc-top .en-no{font-family:var(--en);font-weight:800;font-size:.74rem;letter-spacing:.2em;color:var(--gold-soft)}
.svc-top h3{font-family:var(--serif);font-size:1.44rem;font-weight:700;margin-top:10px;line-height:1.42;color:#fff}
.svc-top .sub{font-size:.78rem;color:rgba(233,237,246,.7);margin-top:7px;font-family:var(--en);letter-spacing:.08em}
.svc-body{padding:28px 32px 32px;flex:1;display:flex;flex-direction:column}
.svc-body p{color:var(--muted);font-size:.95rem;flex:1}
.svc-body ul{list-style:none;margin:18px 0 0;display:flex;flex-direction:column;gap:10px}
.svc-body li{font-size:.92rem;color:var(--text);display:flex;align-items:flex-start;gap:10px;font-weight:500}
.svc-body li::before{content:"";flex:none;width:19px;height:19px;margin-top:3px;border-radius:50%;background:rgba(236,198,128,.2) url("data:image/svg+xml;utf8,") center/12px no-repeat;border:1px solid var(--stroke-gold)}
.svc-badge{display:inline-flex;align-items:center;gap:6px;background:var(--iris);color:#0b1020;font-size:.72rem;font-weight:700;padding:.42em .95em;border-radius:999px;margin-top:16px;letter-spacing:.03em}
.svc-link{margin-top:22px;font-weight:700;color:var(--gold-soft);display:inline-flex;align-items:center;gap:8px;font-size:.92rem;align-self:flex-start}
.svc-link .ar{transition:transform .35s var(--ease)}
.svc:hover .svc-link .ar{transform:translateX(6px)}
/* ---------- video ---------- */
.videowrap{max-width:940px;margin:50px auto 0;padding:14px}
.video-frame{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--stroke-gold);box-shadow:0 40px 90px -36px rgba(0,0,0,.8),0 0 50px -18px rgba(176,131,255,.4)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-cap{text-align:center;color:var(--muted);font-size:.86rem;margin-top:18px}
/* ---------- stats ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat{padding:14px 8px;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:-12px;top:18%;height:64%;width:1px;background:var(--stroke)}
.stat .n{font-family:var(--en);font-weight:800;font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;background:linear-gradient(135deg,var(--gold-soft),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .n small{font-size:.42em;margin-left:3px;font-weight:700}
.stat .l{color:var(--muted);font-size:.86rem;margin-top:14px;line-height:1.5}
/* ---------- voice ---------- */
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:54px}
.vcard{padding:36px 32px;position:relative;transition:.4s var(--ease)}
.vcard:hover{transform:translateY(-6px)}
.vcard .quote{font-family:var(--serif);font-size:2.8rem;background:var(--iris);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;height:26px}
.vcard .stars5{color:var(--gold);font-size:.85rem;letter-spacing:.15em;margin-top:8px}
.vcard p{color:var(--text);font-size:.96rem;margin-top:14px}
.vcard .who{display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:22px;border-top:1px solid var(--stroke)}
.vcard .av{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,rgba(176,131,255,.4),rgba(95,230,255,.3));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:1.25rem;flex:none;border:1px solid var(--stroke-2)}
.vcard .who b{display:block;color:#fff;font-size:.98rem}
.vcard .who span{font-size:.78rem;color:var(--muted)}
/* ---------- message ---------- */
.msg-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:54px;align-items:center}
.msg-portrait{position:relative}
.msg-portrait .frame{border-radius:var(--r);overflow:hidden;border:1px solid var(--stroke-gold);position:relative;box-shadow:0 40px 90px -34px rgba(0,0,0,.8),0 0 50px -18px rgba(176,131,255,.35);aspect-ratio:4/5}
.msg-portrait .frame img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.msg-portrait .frame .mk{position:absolute;top:18px;left:18px;width:54px;height:54px;object-fit:contain;background:#fff;border-radius:13px;padding:7px;box-shadow:0 8px 20px -10px rgba(0,0,0,.6);z-index:3}
.msg-portrait .frame .nm{position:absolute;left:0;right:0;bottom:0;padding:26px 22px 22px;text-align:center;background:linear-gradient(transparent,rgba(4,6,15,.92));z-index:3}
.msg-portrait .frame .nm b{font-family:var(--serif);font-size:1.45rem;display:block;color:#fff}
.msg-portrait .frame .nm span{font-size:.72rem;letter-spacing:.22em;color:var(--gold-soft);font-family:var(--en)}
.msg-body h2{font-family:var(--serif);font-size:clamp(1.55rem,3.7vw,2.3rem);font-weight:700;line-height:1.5;margin:16px 0 0;color:#fff}
.msg-body h2 em{font-style:normal;background:var(--iris);-webkit-background-clip:text;background-clip:text;color:transparent}
.msg-body .mtext{color:var(--muted);margin-top:26px;font-size:1rem;line-height:2.05}
.msg-body .mtext p+p{margin-top:17px}
.msg-sign{margin-top:26px;font-family:var(--serif);font-size:1.1rem;color:#fff}
.msg-sign small{display:block;font-size:.72rem;color:var(--gold-soft);letter-spacing:.16em;font-family:var(--en);margin-bottom:5px}
/* ---------- flow ---------- */
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:54px}
.fstep{padding:32px 24px;position:relative;text-align:center;transition:.4s var(--ease)}
.fstep:hover{transform:translateY(-5px)}
.fstep .num{width:50px;height:50px;border-radius:50%;background:var(--iris);color:#0b1020;font-family:var(--en);font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:1.15rem;box-shadow:0 10px 26px -10px rgba(176,131,255,.6)}
.fstep h4{font-family:var(--serif);color:#fff;font-size:1.12rem;font-weight:700}
.fstep p{color:var(--muted);font-size:.87rem;margin-top:11px}
.fstep .arr{position:absolute;right:-14px;top:52px;color:var(--gold);z-index:2;font-size:1.1rem}
/* ---------- faq ---------- */
.faq-list{max-width:800px;margin:50px auto 0;display:flex;flex-direction:column;gap:15px}
.qa{overflow:hidden;transition:.3s}
.qa summary{list-style:none;cursor:pointer;padding:23px 28px;display:flex;align-items:center;gap:16px;font-weight:700;color:#fff;font-size:1rem}
.qa summary::-webkit-details-marker{display:none}
.qa summary .qq{font-family:var(--en);font-weight:800;flex:none;background:var(--iris);-webkit-background-clip:text;background-clip:text;color:transparent}
.qa summary .pm{margin-left:auto;flex:none;width:24px;height:24px;position:relative}
.qa summary .pm::before,.qa summary .pm::after{content:"";position:absolute;background:var(--gold);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)}
.qa summary .pm::before{width:14px;height:2px}.qa summary .pm::after{width:2px;height:14px;transition:.3s}
.qa[open] summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.qa .ans{padding:0 28px 25px;color:var(--muted);font-size:.95rem}
/* ---------- CTA ---------- */
.cta{text-align:center;overflow:hidden}
.cta .beams{opacity:.8}
.cta h2{font-family:var(--serif);font-size:clamp(1.7rem,4.7vw,2.8rem);font-weight:700;line-height:1.48;color:#fff}
.cta h2 .g{background:var(--iris);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 7s linear infinite}
.cta p{color:var(--muted);margin-top:20px;max-width:560px;margin-left:auto;margin-right:auto}
.cta-btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:38px}
.cta-note{margin-top:22px;font-size:.8rem;color:var(--dim)}
/* ---------- contact form ---------- */
.form-card{max-width:740px;margin:50px auto 0;padding:clamp(30px,5vw,52px)}
.field{margin-bottom:24px}
.field label{display:block;font-weight:700;color:#fff;font-size:.9rem;margin-bottom:10px}
.field label .req{color:#ff8f9d;font-size:.78rem;margin-left:6px}
.field input,.field textarea,.field select{width:100%;border:1.5px solid var(--stroke-2);border-radius:12px;padding:.95em 1.05em;font-family:inherit;font-size:1rem;color:#fff;background:rgba(255,255,255,.04);transition:.25s}
.field input::placeholder,.field textarea::placeholder{color:var(--dim)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.07);box-shadow:0 0 0 4px rgba(236,198,128,.15)}
.field select option{background:#08291f;color:#fff}
.field textarea{min-height:140px;resize:vertical}
.radio-row{display:flex;flex-direction:column;gap:11px}
.radio-row label{display:flex;align-items:center;gap:11px;font-weight:400;color:var(--text);cursor:pointer;margin:0;font-size:.95rem}
.radio-row input{width:auto;accent-color:var(--gold)}
.form-submit{text-align:center;margin-top:10px}
.privacy-note{font-size:.8rem;color:var(--muted);text-align:center;margin-top:18px}
.privacy-note a{color:var(--gold-soft);text-decoration:underline}
/* ---------- page hero (subpages) ---------- */
.page-hero{position:relative;padding:170px 0 76px;overflow:hidden;text-align:center}
.page-hero .nebula{position:absolute;inset:0;z-index:0;background:radial-gradient(40vw 30vw at 20% 10%,rgba(176,131,255,.22),transparent 60%),radial-gradient(40vw 30vw at 84% 30%,rgba(95,230,255,.16),transparent 60%);filter:blur(10px)}
.page-hero .wrap{position:relative;z-index:3}
.page-hero .crumbs{font-size:.76rem;color:var(--dim);font-family:var(--en);letter-spacing:.08em;display:flex;gap:8px;justify-content:center;margin-bottom:18px}
.page-hero .crumbs a:hover{color:var(--gold-soft)}
.page-hero .en-ttl{font-family:var(--en);font-weight:700;letter-spacing:.28em;font-size:.78rem;text-transform:uppercase;background:var(--iris);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 8s linear infinite}
.page-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.95rem,5.4vw,3rem);line-height:1.4;margin-top:14px;letter-spacing:.04em;color:#fff}
.page-hero p.ph-sub{color:var(--muted);margin-top:18px;max-width:640px;margin-left:auto;margin-right:auto}
/* ---------- article ---------- */
.article .wrap{max-width:780px}
.paper-card{background:rgba(251,247,239,.97);color:var(--paper-text);border-radius:var(--r);padding:clamp(28px,5vw,56px);box-shadow:var(--shadow)}
.art-meta{display:flex;gap:14px;align-items:center;font-size:.82rem;color:var(--paper-muted);margin-bottom:16px}
.art-cat{background:linear-gradient(135deg,#3a2d6b,#1b2b5a);color:#fff;font-size:.72rem;font-weight:700;padding:.3em .9em;border-radius:999px;font-family:var(--en);letter-spacing:.08em}
.art-title{font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.1rem);font-weight:700;line-height:1.5;color:#15233a;letter-spacing:.02em}
.art-body{margin-top:30px;font-size:1.02rem;line-height:2.05;color:var(--paper-text)}
.art-body h2{font-family:var(--serif);font-size:1.4rem;color:#15233a;margin:46px 0 18px;padding-left:16px;border-left:4px solid;border-image:var(--iris) 1;line-height:1.5;text-align:left}
.art-body h3{font-family:var(--serif);font-size:1.16rem;color:#2a3a55;margin:32px 0 12px}
.art-body p{margin:16px 0}
.art-body ul,.art-body ol{margin:16px 0 16px 1.4em;display:flex;flex-direction:column;gap:8px}
.art-body strong{color:#15233a;font-weight:700}
.art-body a{color:#6a3fb0;text-decoration:underline}
.art-body blockquote{margin:24px 0;padding:18px 24px;background:#f1ecf8;border-radius:12px;border-left:4px solid #a878ff;color:#4a4660}
.art-note{margin-top:40px;padding:22px;background:#f1ecf8;border-radius:var(--r-sm);font-size:.86rem;color:#4a4660}
.art-back{margin-top:44px;text-align:center}
/* news list */
.news-list{max-width:860px;margin:50px auto 0;display:flex;flex-direction:column}
.news-item{display:flex;gap:24px;align-items:flex-start;padding:26px 6px;border-bottom:1px solid var(--stroke);transition:.3s}
.news-item:hover{background:rgba(255,255,255,.03);padding-left:16px}
.news-item .nd{font-family:var(--en);font-size:.82rem;color:var(--gold-soft);font-weight:600;flex:none;width:96px;padding-top:3px}
.news-item .nt{flex:1}
.news-item .nt .ncat{display:inline-block;background:rgba(176,131,255,.18);color:#c9b6ff;font-size:.68rem;font-weight:700;padding:.2em .7em;border-radius:999px;margin-bottom:8px}
.news-item .nt h3{font-family:var(--sans);font-weight:700;color:#fff;font-size:1.02rem;line-height:1.6;transition:.3s}
.news-item:hover h3{color:var(--gold-soft)}
/* def-table / prose */
.def-table{max-width:840px;margin:44px auto 0}
.paper-card .def-table{margin-top:10px}
.def-table .row{display:grid;grid-template-columns:240px 1fr;gap:20px;padding:22px 8px;border-bottom:1px solid var(--stroke)}
.def-table .row:first-child{border-top:1px solid var(--stroke)}
.def-table .row dt{font-weight:700;color:var(--gold-soft);font-size:.94rem}
.def-table .row dd{color:var(--text);font-size:.96rem}
/* on a light paper card → dark text */
.paper-card .def-table .row{border-color:var(--paper-line)}
.paper-card .def-table .row dt{color:#15233a}
.paper-card .def-table .row dd{color:var(--paper-text)}
.prose{max-width:840px;margin:0 auto}
.prose h2{font-family:var(--serif);font-size:1.3rem;color:#15233a;margin:36px 0 14px;text-align:left}
.prose p{margin:14px 0;color:var(--paper-text)}
.prose ol,.prose ul{margin:14px 0 14px 1.4em;display:flex;flex-direction:column;gap:8px}
/* ---------- footer ---------- */
footer{padding:72px 0 130px;position:relative;overflow:hidden;border-top:1px solid var(--stroke)}
footer .routeline{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.6}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding-bottom:44px;border-bottom:1px solid var(--stroke)}
.foot-brand .brand{margin-bottom:20px}
.foot-brand p{font-size:.86rem;color:var(--muted);max-width:330px}
.foot-line{display:flex;gap:12px;margin-top:22px}
.foot-line a{width:42px;height:42px;border-radius:11px;border:1px solid var(--stroke-2);display:flex;align-items:center;justify-content:center;transition:.3s;color:var(--muted)}
.foot-line a:hover{background:var(--gold);border-color:var(--gold);color:#2a1e06}
.foot-line a svg{width:18px;height:18px;fill:currentColor}
.foot-info{font-size:.82rem;line-height:1.9}
.foot-info dt{color:var(--gold-soft);font-size:.7rem;letter-spacing:.1em;margin-top:12px;font-family:var(--en)}
.foot-info dd{color:var(--text)}
.foot-col h4{font-family:var(--en);font-size:.72rem;letter-spacing:.18em;color:var(--gold-soft);margin-bottom:18px;font-weight:700}
.foot-col a{display:block;font-size:.88rem;color:var(--muted);padding:7px 0;transition:.25s}
.foot-col a:hover{color:var(--gold-soft);transform:translateX(3px)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:30px;font-size:.78rem;color:var(--dim)}
/* ---------- mobile sticky cta ---------- */
.mcta{position:fixed;bottom:0;left:0;right:0;z-index:55;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(6,32,24,.92);backdrop-filter:blur(14px);box-shadow:0 -8px 30px -14px rgba(0,0,0,.7);border-top:1px solid var(--stroke-gold)}
.mcta a{flex:1;padding:1em;font-size:.92rem;border-radius:12px}
/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.1s}.js .reveal.d2{transition-delay:.2s}.js .reveal.d3{transition-delay:.3s}.js .reveal.d4{transition-delay:.4s}
.no-js .reveal{opacity:1;transform:none}
/* ---------- responsive ---------- */
@media(max-width:920px){
.menu{position:fixed;inset:0;background:rgba(6,32,24,.98);flex-direction:column;justify-content:center;gap:28px;transform:translateX(100%);transition:.45s var(--ease);backdrop-filter:blur(10px)}
.menu.open{transform:none}
.menu a.nl{font-size:1.15rem}
.menu .nav-cta{margin-top:12px}
.burger{display:flex}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.pain-grid,.reason-grid,.svc-grid,.voice-grid,.flow-steps{grid-template-columns:1fr}
.stats-grid{grid-template-columns:repeat(2,1fr);gap:34px 20px}
.stat:nth-child(2)::after{display:none}
.msg-grid{grid-template-columns:1fr;gap:38px}
.msg-portrait{max-width:330px;margin:0 auto}
.fstep .arr{display:none}
.foot-top{grid-template-columns:1fr;gap:32px}
.def-table .row{grid-template-columns:1fr;gap:4px}
.mcta{display:flex}
footer{padding-bottom:94px}
}
@media(max-width:520px){
.wrap{padding:0 18px}
.hero-cta .btn,.cta-btns .btn{width:100%}
.news-item{flex-direction:column;gap:6px}.news-item .nd{width:auto}
.viewcount{flex-wrap:wrap;gap:8px}
}
@media print{.js .reveal{opacity:1!important;transform:none!important}.mcta,.scroll-ind,.marquee,header,#sky,.beams,.comet{display:none!important}body::after{display:none}body{background:#08291f}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}.js .reveal{opacity:1;transform:none}}
/* ============================================================
✦✦ PREMIUM LAYER v2 — wow & conversion ✦✦
============================================================ */
/* ---- intro star-burst loader ---- */
#srLoader{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;
background:radial-gradient(120% 120% at 50% 40%,#0a3a2c,#04130e 70%);transition:opacity .8s var(--ease),visibility .8s}
#srLoader.done{opacity:0;visibility:hidden}
#srLoader .lmark{width:78px;height:78px;border-radius:20px;background:#fff;padding:10px;box-shadow:0 0 60px -6px var(--gold-glow);animation:lpop 1.1s var(--ease) both}
#srLoader .lmark img{width:100%;height:100%;object-fit:contain}
#srLoader .lwm{font-family:var(--en);font-weight:800;letter-spacing:.34em;font-size:.82rem;color:var(--gold-soft);opacity:0;animation:lfade .8s .5s var(--ease) forwards}
#srLoader .lbar{width:120px;height:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
#srLoader .lbar i{display:block;height:100%;width:40%;background:var(--iris);animation:lslide 1.1s var(--ease) infinite}
@keyframes lpop{0%{transform:scale(.5) rotate(-12deg);opacity:0}60%{transform:scale(1.08) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes lfade{to{opacity:1}}
@keyframes lslide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
/* ---- scroll progress comet bar ---- */
#srProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:90;background:var(--iris);box-shadow:0 0 14px 1px rgba(176,131,255,.6);transition:width .12s linear}
#srProgress::after{content:"";position:absolute;right:-3px;top:-2px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(255,255,255,.7)}
/* ---- cursor spotlight (desktop) ---- */
#srGlow{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:1;transform:translate(-50%,-50%);opacity:0;transition:opacity .5s;
background:radial-gradient(circle,rgba(95,230,255,.10),rgba(176,131,255,.06) 35%,transparent 60%);mix-blend-mode:screen}
@media(hover:hover) and (pointer:fine){body:hover #srGlow{opacity:1}}
/* ---- headline word rotator ---- */
.rotate{display:inline-grid;vertical-align:bottom}
.rotate>span{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease);
background:var(--iris);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 7s linear infinite}
.rotate>span.on{opacity:1;transform:none}
/* ---- reassurance chips ---- */
.assure{display:flex;flex-wrap:wrap;gap:10px 14px;justify-content:center;margin-top:24px}
.assure span{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--text);background:rgba(255,255,255,.05);border:1px solid var(--stroke);padding:.5em 1em;border-radius:999px}
.assure span::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;background:rgba(124,224,168,.2) url("data:image/svg+xml;utf8,") center/11px no-repeat}
/* ---- comparison table ---- */
.cmp{max-width:940px;margin:54px auto 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--stroke)}
.cmp-row{display:grid;grid-template-columns:1.5fr 1fr 1.25fr}
.cmp-row>div{padding:20px 22px;border-bottom:1px solid var(--stroke);display:flex;align-items:center;gap:10px;font-size:.95rem}
.cmp-row:last-child>div{border-bottom:none}
.cmp-row .c-item{color:var(--text);font-weight:700;background:rgba(255,255,255,.02)}
.cmp-row .c-other{color:var(--muted);justify-content:center;text-align:center}
.cmp-row .c-us{justify-content:center;text-align:center;color:#fff;font-weight:600;position:relative;background:linear-gradient(180deg,rgba(236,198,128,.12),rgba(176,131,255,.06))}
.cmp-head .c-item{background:transparent}
.cmp-head>div{font-family:var(--en);font-weight:800;letter-spacing:.08em;font-size:.82rem;padding:18px 22px}
.cmp-head .c-other{color:var(--dim)}
.cmp-head .c-us{color:var(--gold-soft);font-size:1rem;font-family:var(--sans)}
.cmp .mk-o{color:var(--dim);font-size:1.2rem}
.cmp .mk-x{color:#ff8f9d;font-size:1.2rem}
.cmp .mk-c{color:var(--gold);font-size:1.3rem}
.cmp-row .c-us::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--iris)}
/* ---- floating desktop CTA ---- */
.fab{position:fixed;right:26px;bottom:26px;z-index:54;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(20px);transition:.5s var(--ease);pointer-events:none}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab a{display:flex;align-items:center;gap:9px;padding:.85em 1.4em;border-radius:999px;font-weight:700;font-size:.9rem;box-shadow:0 16px 36px -12px rgba(0,0,0,.6)}
.fab .f-line{background:#06c755;color:#fff}
.fab .f-cv{background:linear-gradient(135deg,#f6e2b8,#ecc680 50%,#d8a857);color:#33240a}
.fab a svg{width:18px;height:18px}
@media(max-width:920px){.fab{display:none}}
/* ---- guarantee seal ---- */
.seal{position:absolute;top:-26px;right:-10px;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;text-align:center;
background:radial-gradient(circle,#ecc680,#b6823c);color:#3a2a06;font-family:var(--en);font-weight:800;font-size:.62rem;line-height:1.2;letter-spacing:.04em;
box-shadow:0 12px 30px -10px var(--gold-glow);transform:rotate(8deg);border:2px solid #fff6df}
.seal b{font-size:.95rem;display:block}
@media(max-width:520px){.seal{width:78px;height:78px;top:-18px;right:0}}
/* ============================================================
✦ RESPONSIVE REFINEMENT — tablet & phone
============================================================ */
/* ---- TABLET (portrait ~601–920px): 2-column grids ---- */
@media(min-width:601px) and (max-width:920px){
.pain-grid,.reason-grid,.svc-grid,.voice-grid,.flow-steps{grid-template-columns:repeat(2,1fr)!important}
.reason-grid>*:last-child:nth-child(odd),
.voice-grid>*:last-child:nth-child(odd),
.svc-grid>*:last-child:nth-child(odd){grid-column:1 / -1}
.stats-grid{grid-template-columns:repeat(4,1fr)}
.stat:nth-child(2)::after{display:block}
.msg-grid{gap:30px}
}
/* tablet landscape (921–1024): keep desktop nav but tighten gaps */
@media(min-width:921px) and (max-width:1024px){
.menu{gap:22px}
.menu a.nl{font-size:.82rem}
.nav-cta{padding:.66em 1.2em;font-size:.8rem}
.wrap{padding:0 28px}
}
/* ---- comparison table on phones ---- */
@media(max-width:600px){
.cmp-row{grid-template-columns:1fr 1fr;grid-template-areas:"item item" "other us"}
.cmp-row>div{padding:13px 14px;font-size:.82rem;flex-direction:column;gap:5px;text-align:center;justify-content:center}
.cmp-row .c-item{grid-area:item;border-bottom:none;background:rgba(255,255,255,.04);font-size:.9rem;flex-direction:row;justify-content:flex-start;text-align:left;padding:14px 16px}
.cmp-row .c-other{grid-area:other}
.cmp-row .c-us{grid-area:us}
.cmp-head{grid-template-columns:1fr 1fr;grid-template-areas:"other us"}
.cmp-head .c-item{display:none}
.cmp-head>div{font-size:.74rem;padding:14px}
.cmp .mk-o,.cmp .mk-x,.cmp .mk-c{font-size:1.1rem}
}
/* ---- phone fine-tuning ---- */
@media(max-width:520px){
.sec{padding:60px 0}
.hero .wrap{padding-top:92px}
.hero h1{font-size:clamp(2rem,8.5vw,2.7rem)}
.hero-tag{font-size:.68rem}
.viewcount{font-size:.74rem;padding:.6em 1em}
.viewcount .odo .dg{font-size:.95rem}
.h2{font-size:clamp(1.45rem,6vw,1.9rem)}
.page-hero{padding:140px 0 56px}
.reason,.vcard,.pain-card,.fstep,.svc-body,.svc-top{padding-left:24px;padding-right:24px}
.msg-portrait{max-width:280px}
.form-card{padding:26px 20px}
.assure span{font-size:.76rem;padding:.45em .85em}
.foot-line{justify-content:flex-start}
.marquee .track{font-size:.74rem;gap:34px}
.marquee .track span{gap:34px}
}
/* very small phones */
@media(max-width:360px){
.hero h1{font-size:1.85rem}
.btn{padding:1em 1.5em;font-size:.95rem}
.btn-lg{padding:1.1em 1.7em;font-size:1rem}
}
/* landscape phone: shrink 100svh hero so content reachable */
@media(max-height:520px) and (orientation:landscape){
.hero{min-height:auto;padding:120px 0 60px}
.scroll-ind{display:none}
}
/* ============================================================
✦ ARTISTS roster + 顔出しの声
============================================================ */
.artist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:54px}
.acard{position:relative;border-radius:var(--r);overflow:hidden;transition:.45s var(--ease);border:1px solid var(--stroke);background:#08291f}
.acard:hover{transform:translateY(-8px);box-shadow:0 36px 80px -30px rgba(0,0,0,.7),0 0 0 1px var(--stroke-gold)}
.acard .ph{position:relative;aspect-ratio:3/4;overflow:hidden}
.acard .ph img{width:100%;height:100%;object-fit:cover;transition:.7s var(--ease)}
.acard:hover .ph img{transform:scale(1.07)}
.acard .ph::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 30%,rgba(4,19,14,.4) 58%,rgba(4,19,14,.97) 100%)}
.acard .ph::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(140deg,rgba(95,230,255,.12),transparent 45%,rgba(176,131,255,.14));mix-blend-mode:overlay;opacity:.8}
.acard .genre{position:absolute;top:13px;left:13px;z-index:3;display:flex;gap:6px;flex-wrap:wrap}
.acard .genre span{font-size:.64rem;font-weight:700;letter-spacing:.04em;padding:.3em .7em;border-radius:999px;background:rgba(4,19,14,.5);border:1px solid var(--stroke-gold);color:var(--gold-soft);backdrop-filter:blur(4px)}
.acard .info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px}
.acard .info .nm{font-family:var(--serif);font-size:1.32rem;font-weight:700;color:#fff;line-height:1.25}
.acard .info .hd{font-family:var(--en);font-size:.7rem;letter-spacing:.12em;color:var(--gold-soft);margin-top:3px;font-weight:600}
.acard .stat{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:.74rem;font-weight:700;color:#fff;background:linear-gradient(135deg,rgba(236,198,128,.22),rgba(176,131,255,.16));border:1px solid var(--stroke-gold);padding:.4em .75em;border-radius:999px}
.acard .stat .ico{color:var(--gold-soft)}
.acard .stat b{color:var(--gold-soft);font-family:var(--en)}
.acard .socials{display:flex;gap:9px;margin-top:14px}
.acard .socials a{width:32px;height:32px;border-radius:9px;border:1px solid var(--stroke-2);display:flex;align-items:center;justify-content:center;color:#fff;transition:.3s;background:rgba(255,255,255,.07)}
.acard .socials a:hover{background:var(--gold);color:#2a1e06;border-color:var(--gold);transform:translateY(-2px)}
.acard .socials svg{width:15px;height:15px;fill:currentColor}
.artist-note{text-align:center;margin-top:30px;font-size:.8rem;color:var(--dim)}
/* voice with face */
.vcard .av.face{padding:0;overflow:hidden;border:2px solid var(--stroke-gold)}
.vcard .av.face img{width:100%;height:100%;object-fit:cover}
.vres{display:inline-flex;align-items:center;gap:7px;margin-top:2px;font-size:.76rem;font-weight:700;color:#fff;background:linear-gradient(135deg,rgba(236,198,128,.2),rgba(176,131,255,.14));border:1px solid var(--stroke-gold);padding:.32em .8em;border-radius:999px}
.vres b{color:var(--gold-soft);font-family:var(--en)}
@media(max-width:920px){.artist-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.artist-grid{grid-template-columns:repeat(2,1fr);gap:14px}.acard .info{padding:14px}.acard .info .nm{font-size:1.1rem}.acard .socials a{width:28px;height:28px}}