/* =========================================================
   swimane HP - 2026 sports-brand redesign
   palette : #0a0d12 (ink) / #f4f4f0 (offwhite) / #00B996 (signature)
   font    : Anton (display) / Noto Sans JP (JP) / Inter (EN)
   ========================================================= */

:root{
    --c-green: #00B996;
    --c-green-dark: #00a085;
    --c-green-glow: #4ff5cf;
    --c-cyan: #4a94a5;
    --c-navy: #2b4e71;
    --c-ink: #0a0d12;
    --c-ink-2: #16202b;
    --c-bg: #f4f4f0;
    --c-bg-2: #ebece6;
    --c-text: #0a0d12;
    --c-muted: #5b6b7b;
    --c-line: #d8dcd6;
    --c-line-strong: #0a0d12;
    --c-danger: #a55b4a;

    --shadow-hard: 0 14px 32px rgba(10,13,18,.12);
    --shadow-hard-sm: 0 6px 18px rgba(10,13,18,.10);
    --shadow-md: 0 10px 30px rgba(10,13,18,.18);

    --radius: 18px;
    --f-display: "Anton","Inter","Noto Sans JP",sans-serif;
    --f-jp: "Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
    --f-en: "Inter","Noto Sans JP",sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family: var(--f-jp);
    color:var(--c-text);
    background:var(--c-bg);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--c-ink);text-decoration:none;}
a:hover{color:var(--c-green-dark);}

/* =================== NAV =================== */
.hp-nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
    background:transparent;
    border-bottom:1px solid transparent;
}
.hp-nav.is-scrolled{
    background:rgba(244,244,240,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom:1px solid rgba(10,13,18,.08);
}
.hp-nav__inner{
    max-width:1280px;
    margin:0 auto;
    padding:14px 28px;
    display:flex;
    align-items:center;
    gap:24px;
}
.hp-nav__brand{
    display:flex;align-items:center;gap:10px;
    font-family: var(--f-en);
    font-weight:900;font-size:20px;
    color:var(--c-ink);
    letter-spacing:.04em;
    text-transform:uppercase;
}
.hp-nav__brand img{width:32px;height:32px;}
.hp-nav__menu{
    margin-left:auto;
    display:flex;
    gap:28px;
}
.hp-nav__menu a{
    color:var(--c-ink);
    font-weight:800;
    font-size:13px;
    letter-spacing:.04em;
    position:relative;
    transition:color .2s;
}
.hp-nav__menu a::after{
    content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
    background:var(--c-green);
    transform:scaleX(0);transform-origin:left;
    transition:transform .25s ease;
}
.hp-nav__menu a:hover{color:var(--c-green-dark);}
.hp-nav__menu a:hover::after{transform:scaleX(1);}

.hp-nav__cta{
    font-family: var(--f-jp);
    font-weight:900;
    padding:10px 20px;
    border-radius:999px;
    font-size:13px;
    background:var(--c-green);
    color:var(--c-ink);
    border:2px solid var(--c-green);
    letter-spacing:.04em;
    transition: transform .2s, background .2s, color .2s, box-shadow .2s;
    display:inline-flex;align-items:center;gap:8px;
}
.hp-nav__cta:hover{
    background:var(--c-green-glow);color:var(--c-ink);border-color:var(--c-green-glow);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,185,150,.28);
}
.hp-nav__cta .arrow{font-family:var(--f-en);font-weight:900;}

.hp-nav__toggle{
    display:none;
    width:40px;height:40px;
    border:none;background:transparent;
    flex-direction:column;justify-content:center;gap:5px;
    cursor:pointer;padding:0;
    margin-left:auto;
}
.hp-nav__toggle span{
    display:block;width:22px;height:2px;background:var(--c-ink);
    margin:0 auto;transition:all .3s;
}
.hp-nav__toggle.is-open span{background:#fff;}
.hp-nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hp-nav__toggle.is-open span:nth-child(2){opacity:0;}
.hp-nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* =================== BUTTONS =================== */
.hp-btn-primary{
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 28px;
    background:var(--c-green);
    color:var(--c-ink);
    border:2px solid var(--c-green);
    border-radius:999px;
    font-weight:900;font-size:15px;
    letter-spacing:.06em;
    transition: transform .2s, box-shadow .2s, background .2s, color .2s;
    box-shadow: 0 8px 22px rgba(0,185,150,.28);
}
.hp-btn-primary .arrow{font-family:var(--f-display);font-size:20px;line-height:1;transition:transform .2s;}
.hp-btn-primary:hover{
    color:var(--c-ink);
    background:var(--c-green-glow);border-color:var(--c-green-glow);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(79,245,207,.40);
}
.hp-btn-primary:hover .arrow{transform: translateX(4px);}
.hp-btn-primary--white{
    background:#fff;border-color:#fff;color:var(--c-ink);
    box-shadow: 0 12px 30px rgba(0,185,150,.32);
}
.hp-btn-primary--white:hover{
    background:var(--c-green);border-color:var(--c-green);color:var(--c-ink);
    box-shadow: 0 14px 32px rgba(255,255,255,.32);
}

.hp-btn-ghost{
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 28px;
    background:transparent;
    color:#fff;
    border:2px solid rgba(255,255,255,.7);
    border-radius:999px;
    font-weight:800;font-size:15px;
    letter-spacing:.06em;
    transition: background .2s, color .2s, border-color .2s;
}
.hp-btn-ghost:hover{background:#fff;color:var(--c-ink);border-color:#fff;}

/* =================== HERO =================== */
.hp-hero{
    position:relative;
    min-height:100vh;
    color:var(--c-ink);
    overflow:hidden;
    padding:140px 28px 200px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#ffffff;
}
.hp-hero__bg{
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 18% 20%, rgba(0,185,150,.16), transparent 60%),
        radial-gradient(ellipse 60% 60% at 82% 78%, rgba(74,148,165,.08), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #fafbfa 60%, #ffffff 100%);
    z-index:0;
}
.hp-hero__bg::after{
    content:"";position:absolute;inset:0;
    background-image:
        repeating-linear-gradient(0deg, rgba(10,13,18,.018) 0 1px, transparent 1px 5px);
    pointer-events:none;
    z-index:1;
}

/* scoreboard 2026 */
.hp-hero__bignum{
    position:absolute;
    right:-2vw;bottom:80px;
    font-family: var(--f-display);
    font-size: 28vw;
    line-height:.85;
    color:var(--c-ink);
    opacity:.025;
    letter-spacing:-.02em;
    z-index:1;
    pointer-events:none;
    user-select:none;
}

/* marquee */
.hp-hero__marquee{
    position:absolute;
    left:0;right:0;top:62%;
    transform: translateY(-50%);
    overflow:hidden;
    z-index:1;
    pointer-events:none;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.hp-hero__marquee-track{
    display:inline-flex;
    align-items:center;gap:36px;
    white-space:nowrap;
    font-family: var(--f-display);
    font-size: clamp(60px, 12vw, 160px);
    line-height:.9;
    letter-spacing:-.01em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(10,13,18,.10);
    animation: hp-marquee 28s linear infinite;
    will-change: transform;
}
.hp-hero__marquee-track .dot{
    color: rgba(0,185,150,.5);
    -webkit-text-stroke: 0;
    font-size: .4em;
    line-height:1;
    transform: translateY(-.2em);
}
@keyframes hp-marquee{
    0%  {transform: translateX(0);}
    100%{transform: translateX(-50%);}
}

.hp-hero__inner{
    position:relative;z-index:3;
    max-width:1100px;
    margin:0 auto;
    text-align:left;
    padding:0;
    width:100%;
}

.hp-tag{
    display:inline-flex;align-items:center;
    font-family: var(--f-en);
    letter-spacing:.18em;
    font-size:11px;
    color:var(--c-ink);
    margin-bottom:28px;
    font-weight:800;
    padding:8px 14px;
    background: rgba(10,13,18,.04);
    border:1px solid rgba(10,13,18,.12);
    border-left:3px solid var(--c-green);
    border-radius:999px;
    text-transform:uppercase;
}

.hp-hero__title{
    font-family: var(--f-jp);
    font-size:clamp(40px, 10vw, 112px);
    line-height:1.05;
    font-weight:900;
    letter-spacing:-.02em;
    margin:0 0 32px;
    text-shadow: 0 2px 24px rgba(255,255,255,.9), 0 0 60px rgba(255,255,255,.7);
}
.hp-hero__title .line{display:block;}
.hp-hero__title .accent{
    color: var(--c-green);
    position:relative;
    display:inline-block;
}
.hp-hero__title .accent::after{
    content:"";
    display:block;
    width:120px;height:8px;background:var(--c-green);
    margin-top:12px;
}
.hp-hero__lead{
    font-size:clamp(15px, 1.6vw, 18px);
    color:var(--c-ink);
    margin:0 0 36px;
    max-width:680px;
    font-weight:600;
    line-height:1.85;
}
.hp-hero__lead strong{color:var(--c-ink);font-weight:900;}
.hp-hero__lead-strong{
    display:inline-block;margin-top:6px;
    font-weight:900;
    color:var(--c-ink);
    background: var(--c-green);
    padding:2px 10px;
    box-shadow: 0 4px 12px rgba(0,185,150,.18);
}
.hp-hero__ctas{
    display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start;
    margin-bottom:24px;
}
.hp-hero__note{
    font-family: var(--f-en);
    font-size:11px;
    letter-spacing:.18em;
    color:var(--c-ink);
    margin:0;
    font-weight:800;
    opacity:.75;
}

.hp-hero .hp-btn-ghost{
    color:var(--c-ink);
    border-color:rgba(10,13,18,.4);
}
.hp-hero .hp-btn-ghost:hover{
    background:var(--c-ink);
    color:#fff;
    border-color:var(--c-ink);
}

/* =================== STATS =================== */
.hp-stats{
    background: var(--c-ink);
    color:#fff;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    margin: 0;
    padding: 0;
    position:relative;
    z-index:2;
}
.hp-stats__inner{
    max-width:1280px;
    margin:0 auto;
    padding:36px 28px;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:0;
    text-align:left;
}
.hp-stat{
    padding:8px 28px;
    display:flex;flex-direction:column;
    gap:8px;
}
.hp-stat + .hp-stat{border-left:1px solid rgba(255,255,255,.12);}
.hp-stat__num{
    font-family: var(--f-display);
    font-size: clamp(40px, 6vw, 88px);
    font-weight:400;
    color:#fff;
    line-height:.9;
    letter-spacing:-.01em;
    display:flex;align-items:baseline;gap:4px;
}
.hp-stat__num .plus{color:var(--c-green);font-size:.7em;line-height:1;}
.hp-stat__label{
    font-family: var(--f-en);
    font-size:11px;
    letter-spacing:.18em;
    color:rgba(255,255,255,.55);
    font-weight:800;
    text-transform:uppercase;
}

/* =================== SECTION COMMON =================== */
.hp-section{
    padding: 130px 28px 100px;
    opacity:0;transform:translateY(30px);
    transition: opacity .8s ease, transform .8s ease;
    position:relative;
}
.hp-section.is-visible{opacity:1;transform:translateY(0);}
.hp-section .container{max-width:1200px;margin:0 auto;}

.hp-section__title{
    text-align:left;
    margin-bottom:64px;
    max-width:920px;
}
.hp-eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family: var(--f-en);
    letter-spacing:.18em;font-size:12px;font-weight:800;
    color:var(--c-ink);
    margin-bottom:20px;
    padding-bottom:8px;
    border-bottom:2px solid var(--c-ink);
    text-transform:uppercase;
}
.hp-eyebrow b{
    font-family: var(--f-display);
    font-weight:400;
    font-size:22px;
    color:var(--c-green);
    letter-spacing:0;
    line-height:1;
}
.hp-section__title h2{
    font-family: var(--f-jp);
    font-size: clamp(30px, 5vw, 60px);
    font-weight:900;
    color:var(--c-ink);
    line-height:1.18;margin:0 0 18px;
    letter-spacing:-.02em;
}
.hp-section__lead{
    color:var(--c-muted);font-size:15px;margin:0;
    max-width:680px;
}

/* =================== ABOUT =================== */
.hp-about{
    background:#fff;
    border-top:1px solid var(--c-line);
    border-bottom:1px solid var(--c-line);
}
.hp-about__grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:80px;
    align-items:center;
}
.hp-about__visual{
    position:relative;
    padding:0 20px 24px 0;
}
.hp-about__visual img{
    border:4px solid var(--c-ink);
    border-radius:24px;
    box-shadow: var(--shadow-hard);
    transition: transform .4s ease, box-shadow .4s ease;
    background:#fff;
}
.hp-about__visual:hover img{
    transform: translateY(-4px);
    box-shadow: 0 22px 40px rgba(10,13,18,.18);
}
.hp-about__badge{
    position:absolute;
    right:0;bottom:0;
    background: var(--c-green);
    color:var(--c-ink);
    border:3px solid var(--c-ink);
    border-radius:999px;
    padding:14px 22px;
    line-height:1.3;
    font-weight:900;
    box-shadow: var(--shadow-hard-sm);
    z-index:2;
}
.hp-about__badge strong{display:block;font-size:14px;letter-spacing:.04em;}
.hp-about__badge span{font-size:11px;}

.hp-about__copy h3{
    font-family: var(--f-jp);
    font-size: clamp(24px, 3vw, 36px);
    color:var(--c-ink);
    font-weight:900;
    line-height:1.35;
    margin:0 0 20px;
    letter-spacing:-.02em;
}
.hp-about__copy p{color:var(--c-text);font-size:15px;margin:0 0 14px;}
.hp-about__copy strong{
    color:var(--c-ink);
    background: linear-gradient(transparent 60%, rgba(0,185,150,.35) 60%);
    padding: 0 2px;
}
.hp-checks{
    list-style:none;padding:0;margin:28px 0;
}
.hp-checks li{
    position:relative;
    padding:12px 0 12px 36px;
    font-size:15px;
    color:var(--c-text);
    border-bottom:1px solid var(--c-line);
}
.hp-checks li:last-child{border-bottom:none;}
.hp-checks li::before{
    content:"";position:absolute;left:0;top:14px;
    width:22px;height:22px;
    background: var(--c-ink);
    border-radius:50%;
}
.hp-checks li::after{
    content:"";position:absolute;left:6px;top:18px;
    width:10px;height:5px;
    border-left:2.5px solid var(--c-green);
    border-bottom:2.5px solid var(--c-green);
    transform: rotate(-45deg);
}
.hp-checks b{color:var(--c-ink);font-weight:900;}

/* =================== FEATURES =================== */
.hp-features{
    background: var(--c-bg);
    border-bottom:1px solid var(--c-line);
}
.hp-features__grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:28px;
}
.hp-feature{
    background:#fff;
    border:2px solid var(--c-ink);
    border-radius:22px;
    padding:36px 32px 32px;
    box-shadow: var(--shadow-hard-sm);
    transition: transform .25s ease, box-shadow .25s ease;
    opacity:0;transform:translateY(24px);
    position:relative;overflow:hidden;
}
.hp-feature.is-visible{opacity:1;transform:translateY(0);}
.hp-feature:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(10,13,18,.16);
}
.hp-feature__num{
    position:absolute;
    top:18px;right:24px;
    font-family: var(--f-display);
    font-size:64px;
    line-height:.9;
    color:var(--c-bg-2);
    letter-spacing:-.02em;
    pointer-events:none;
    z-index:0;
}
.hp-feature__icon{
    width:64px;height:64px;
    border-radius:18px;
    border:2px solid var(--c-ink);
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:22px;
    position:relative;z-index:1;
}
.hp-feature__icon img{width:30px;height:30px;}
.hp-feature h3{
    font-family: var(--f-jp);
    font-size:20px;font-weight:900;color:var(--c-ink);margin:0 0 10px;
    letter-spacing:-.01em;
    position:relative;z-index:1;
}
.hp-feature p{
    color:var(--c-muted);font-size:14px;margin:0 0 22px;
    position:relative;z-index:1;
}
.hp-feature__shot{
    border:2px solid var(--c-ink);
    border-radius:14px;
    overflow:hidden;
    background: var(--c-bg-2);
    position:relative;z-index:1;
}
.hp-feature__shot img{
    width:100%;
    aspect-ratio: 16/10;
    object-fit:cover;
    transition: transform .5s;
}
.hp-feature:hover .hp-feature__shot img{transform: scale(1.04);}

/* =================== HOW =================== */
.hp-how{background:#fff;border-bottom:1px solid var(--c-line);}
.hp-how__grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:24px;
    position:relative;
}
.hp-how__grid::before{
    content:"";position:absolute;left:0;right:0;top:80px;
    height:2px;background: var(--c-ink);
    z-index:0;
}
.hp-how__step{
    background:#fff;
    border:2px solid var(--c-ink);
    border-radius:22px;
    padding:32px 28px;
    text-align:left;
    position:relative;z-index:1;
    transition: transform .25s ease, box-shadow .25s ease;
    opacity:0;transform:translateY(24px);
    box-shadow: var(--shadow-hard-sm);
}
.hp-how__step.is-visible{opacity:1;transform:translateY(0);}
.hp-how__step:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(0,185,150,.28);
}
.hp-how__num{
    font-family: var(--f-display);
    font-size: clamp(60px, 9vw, 120px);
    font-weight:400;color:var(--c-ink);
    letter-spacing:-.02em;
    line-height:.9;
    margin: 0 0 6px;
}
.hp-how__step:hover .hp-how__num{color:var(--c-green);}
.hp-how__icon{
    width:56px;height:56px;
    border-radius:18px;
    border:2px solid var(--c-ink);
    background: var(--c-green);
    display:inline-flex;align-items:center;justify-content:center;
    margin: 0 0 18px;
}
.hp-how__icon img{width:30px;height:30px;}
.hp-how__step h3{
    font-family: var(--f-jp);
    font-size:18px;font-weight:900;color:var(--c-ink);margin:0 0 10px;
    letter-spacing:-.01em;
}
.hp-how__step p{color:var(--c-muted);font-size:14px;margin:0;}

/* =================== VOICE =================== */
.hp-voice{
    background: var(--c-bg);
    border-bottom:1px solid var(--c-line);
}
.hp-voice__grid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:24px;
}
.hp-voice__card{
    background:#fff;
    margin:0;
    border:2px solid var(--c-ink);
    border-radius:22px;
    padding:32px 28px 24px;
    box-shadow: var(--shadow-hard-sm);
    position:relative;
    opacity:0;transform:translateY(24px);
    transition: transform .25s ease, box-shadow .25s ease, opacity .6s ease;
    display:flex;
    flex-direction:column;
    height:100%;
}
.hp-voice__card.is-visible{opacity:1;transform:translateY(0);}
.hp-voice__card:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(0,185,150,.24);
}
.hp-voice__card::before{
    content:"\201C";
    position:absolute;top:-6px;left:14px;
    font-family: var(--f-display);
    font-size:120px;line-height:1;color:var(--c-green);opacity:.85;
}
.hp-voice__card blockquote{
    margin:24px 0 24px;font-size:15px;color:var(--c-text);font-weight:500;line-height:1.8;
    position:relative;
    flex:1 1 auto;
}
.hp-voice__card figcaption{
    display:flex;align-items:center;gap:12px;
    border-top:2px solid var(--c-ink);
    padding-top:14px;
    margin-top:auto;
}
.hp-voice__avatar{
    width:42px;height:42px;
    border-radius:50%;
    border:2px solid var(--c-ink);
    color:#fff;font-weight:900;
    font-family: var(--f-display);
    font-size:22px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    letter-spacing:0;
}
.hp-voice__card figcaption strong{display:block;color:var(--c-ink);font-size:14px;}
.hp-voice__card figcaption small{color:var(--c-muted);font-size:11px;letter-spacing:.06em;font-family:var(--f-en);text-transform:uppercase;}

/* =================== CTA =================== */
.hp-cta{
    position:relative;
    padding: 130px 28px;
    background: var(--c-ink);
    color:#fff;
    overflow:hidden;
    text-align:center;
}
.hp-cta::before{
    content:"";
    position:absolute;inset:0;
    background:
        radial-gradient(ellipse 60% 60% at 30% 30%, rgba(0,185,150,.22), transparent 60%),
        radial-gradient(ellipse 50% 50% at 78% 75%, rgba(74,148,165,.18), transparent 60%);
    z-index:0;
}
.hp-cta::after{
    content:"GO";
    position:absolute;
    left:50%;top:50%;transform:translate(-50%,-50%);
    font-family: var(--f-display);
    font-size: clamp(220px, 40vw, 520px);
    color: rgba(255,255,255,.04);
    -webkit-text-stroke: 1px rgba(255,255,255,.08);
    letter-spacing:-.04em;
    line-height:.9;
    z-index:0;
    pointer-events:none;
    user-select:none;
}
.hp-cta__inner{
    max-width:880px;margin:0 auto;
    position:relative;z-index:1;
}
.hp-cta h2{
    font-family: var(--f-jp);
    font-size: clamp(32px, 5.6vw, 72px);
    font-weight:900;line-height:1.18;margin:0 0 24px;
    letter-spacing:-.02em;
}
.hp-cta h2 .accent{
    color: var(--c-green);
    display:inline-block;
    position:relative;
}
.hp-cta h2 .accent::after{
    content:"";
    display:block;
    width:140px;height:6px;background:var(--c-green);
    margin: 14px auto 0;
}
.hp-cta p{font-size:16px;margin:0 0 36px;color:rgba(255,255,255,.85);}
.hp-cta__btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

/* =================== FOOTER =================== */
.hp-footer{
    background: var(--c-ink);
    color:rgba(255,255,255,.78);
    padding:72px 28px 28px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.hp-footer .container{max-width:1280px;margin:0 auto;}
.hp-footer__top{
    display:grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap:40px;
    padding-bottom:40px;
    border-bottom:1px solid rgba(255,255,255,.12);
}
.hp-footer__brand img{width:48px;margin-bottom:16px;}
.hp-footer__brand p{font-size:13px;color:rgba(255,255,255,.6);margin:0;line-height:1.7;}
.hp-footer__nav h4{
    font-family: var(--f-en);
    font-size:12px;font-weight:800;letter-spacing:.22em;
    color:#fff;margin:0 0 18px;
    text-transform:uppercase;
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.16);
}
.hp-footer__nav ul{list-style:none;padding:0;margin:0;}
.hp-footer__nav li{margin-bottom:10px;}
.hp-footer__nav a{
    color:rgba(255,255,255,.65);font-size:14px;
    transition: color .2s;
}
.hp-footer__nav a:hover{color:var(--c-green);}
.hp-footer__sns{display:flex;flex-direction:column;gap:10px;}
.hp-footer__sns a{
    display:inline-flex;align-items:center;gap:10px;
    padding:10px 14px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;
    transition: border-color .2s, background .2s, color .2s;
    font-size:13px;
    color:rgba(255,255,255,.85);
}
.hp-footer__sns a:hover{
    border-color:var(--c-green);
    color:var(--c-green-glow);
    background:rgba(0,185,150,.08);
}
.hp-footer__sns img{
    width:22px;height:22px;
    background:#fff;border-radius:4px;padding:2px;
}
.hp-footer__bottom{
    text-align:left;padding-top:24px;
    color:rgba(255,255,255,.4);font-size:11px;
    font-family: var(--f-en);
    letter-spacing:.12em;
    text-transform:uppercase;
}

/* =================== TO TOP =================== */
.hp-totop{
    position:fixed;right:24px;bottom:24px;z-index:80;
    width:48px;height:48px;
    border-radius:50%;
    border:2px solid var(--c-ink);
    background:var(--c-green);color:var(--c-ink);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;font-weight:900;
    box-shadow: var(--shadow-hard-sm);
    transition: transform .2s, box-shadow .2s;
}
.hp-totop:hover{
    color:var(--c-ink);
    transform:translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,185,150,.32);
}

/* =================== RESPONSIVE =================== */
@media (max-width: 960px){
    .hp-nav__menu{
        position:fixed;
        top:0;right:-100%;
        width:84%;max-width:340px;height:100vh;
        background:var(--c-ink);
        flex-direction:column;
        padding:96px 28px 28px;
        gap:18px;
        box-shadow: -10px 0 40px rgba(0,0,0,.4);
        transition: right .35s ease;
    }
    .hp-nav__menu.is-open{right:0;}
    .hp-nav__menu a{color:#fff;font-size:16px;}
    .hp-nav__menu a::after{display:none;}
    .hp-nav__cta{display:none;}
    .hp-nav__toggle{display:flex;}

    .hp-hero{padding: 120px 22px 160px;}
    .hp-hero__inner{padding:0;}
    .hp-hero__title .accent::after{width:80px;height:6px;}

    .hp-stats__inner{
        grid-template-columns: repeat(2, 1fr);
        gap:24px 0;
        padding:28px 16px;
    }
    .hp-stat{padding:8px 18px;}
    .hp-stat:nth-child(2n+1){border-left:none;}
    .hp-stat:nth-child(3),
    .hp-stat:nth-child(4){border-top:1px solid rgba(255,255,255,.12);padding-top:24px;}

    .hp-section{padding: 100px 22px 70px;}
    .hp-section__title{margin-bottom:48px;}

    .hp-about__grid{grid-template-columns:1fr;gap:56px;}
    .hp-about__visual{max-width:480px;margin:0 auto;}

    .hp-features__grid{grid-template-columns:1fr;}

    .hp-how__grid{grid-template-columns:1fr;gap:18px;}
    .hp-how__grid::before{display:none;}

    .hp-voice__grid{grid-template-columns:1fr;}

    .hp-cta{padding:90px 22px;}

    .hp-footer__top{grid-template-columns:1fr;gap:30px;}
}

@media (max-width: 540px){
    .hp-hero{padding: 110px 18px 130px;}
    .hp-hero__bignum{display:none;}
    .hp-hero__title{font-size:clamp(32px, 9vw, 44px);letter-spacing:-.03em;}
    .hp-hero__title .accent::after{width:60px;height:5px;margin-top:8px;}
    .hp-hero__lead{font-size:14px;}
    .hp-tag{font-size:10px;letter-spacing:.12em;padding:7px 12px;}
    .hp-hero__note{font-size:10px;letter-spacing:.10em;}
    .hp-hero__ctas{gap:10px;}
    .hp-hero__ctas .btn{width:100%;justify-content:center;}
    .hp-section{padding: 80px 18px 56px;}
    .hp-section__title h2{font-size:clamp(26px, 7vw, 36px);letter-spacing:-.03em;}
    .hp-cta h2{font-size:clamp(28px, 7.5vw, 40px);letter-spacing:-.03em;}
    .hp-feature{padding:32px 22px 24px;}
    .hp-feature__num{font-size:48px;top:14px;right:18px;}
    .hp-cta{padding: 70px 18px;}
    .hp-cta__btns .btn{width:100%;justify-content:center;}
}

/* =================== A11Y - reduced motion =================== */
@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .hp-hero__marquee-track{animation: none; transform: translateX(0);}
    .hp-section{opacity:1;transform:none;}
    .hp-feature, .hp-how__step, .hp-voice__card{opacity:1;transform:none;}
}

/* =================== FAQ =================== */
.hp-faq__list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.hp-faq__item{background:#fff;border:1px solid #e5eef0;border-radius:14px;padding:18px 22px;box-shadow:0 2px 14px rgba(43,78,113,.04);transition:box-shadow .2s ease,border-color .2s ease;}
.hp-faq__item[open]{border-color:#00B996;box-shadow:0 6px 24px rgba(0,185,150,.10);}
.hp-faq__item summary{list-style:none;cursor:pointer;font-weight:700;color:#0f2a44;font-size:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.hp-faq__item summary::-webkit-details-marker{display:none;}
.hp-faq__item summary::after{content:"+";font-size:22px;color:#00B996;font-weight:700;flex:0 0 auto;transition:transform .2s ease;}
.hp-faq__item[open] summary::after{content:"−";}
.hp-faq__item p{margin:14px 0 4px;color:#3a5470;line-height:1.85;font-size:14px;}
@media (max-width:768px){
    .hp-faq__item{padding:16px 18px;}
    .hp-faq__item summary{font-size:15px;}
    .hp-faq__item p{font-size:13.5px;}
}