@charset "UTF-8";

:root{
  --ink:#0a132d;
  --ink-soft:#3c4657;
  --paper:#ffffff;
  --mist:#f3f7fb;
  --signal:#3b8de0;
  --signal-deep:#2568b8;
  --signal-dim:#e9f2fc;
  --line:#e3e9ee;
  --line-dark:#22335a;
  --mono:'IBM Plex Mono',monospace;
  --sans:'Pretendard Variable',Pretendard,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--signal);color:#fff}

/* ---------- layout ---------- */
.wrap{max-width:1480px;margin:0 auto;padding:0 32px}
section{padding:124px 0}
@media(max-width:768px){section{padding:72px 0}}

.eyebrow{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--signal-deep);text-transform:uppercase;margin-bottom:24px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--signal)}
.dark .eyebrow{color:var(--signal)}
h2.sec-title{font-size:clamp(32px,4.2vw,52px);font-weight:800;line-height:1.38;letter-spacing:-.02em;margin-bottom:30px;word-break:keep-all}
p.sec-lead{font-size:clamp(17px,1.7vw,21px);line-height:1.85;color:var(--ink-soft);max-width:700px;word-break:keep-all}
.dark p.sec-lead{color:#9aa7bd}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center p.sec-lead{margin:0 auto}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:14px 20px 0;background:transparent}
.nav-inner{max-width:1180px;margin:0 auto;padding:0 12px 0 28px;height:64px;display:flex;align-items:center;gap:26px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:999px;box-shadow:0 10px 32px -20px rgba(10,19,45,.28);transition:box-shadow .25s}
nav.scrolled .nav-inner{box-shadow:0 14px 38px -16px rgba(10,19,45,.35)}
.logo{display:flex;align-items:flex-end;gap:9px;cursor:pointer}
.logo img{height:30px;width:auto}
.logo small{font-family:var(--mono);font-size:10px;color:#8b95a5;font-weight:500;letter-spacing:.08em;padding-bottom:2px}
.menu{display:flex;gap:6px;margin-left:auto}
.menu a{padding:9px 16px;font-size:15.5px;font-weight:600;color:var(--ink-soft);border-radius:999px;transition:.18s}
.menu a:hover{color:var(--ink);background:var(--mist)}
.menu a.active{color:var(--signal-deep)}
.nav-cta{margin-left:6px;background:var(--ink);color:#fff !important;padding:11px 24px;border-radius:999px;font-size:14.5px;font-weight:700;transition:.18s}
.nav-cta:hover{background:var(--signal-deep) !important}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;transition:.2s}
@media(max-width:1024px){
  .menu{position:fixed;top:90px;left:16px;right:16px;background:#fff;flex-direction:column;padding:14px 18px 20px;border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 60px -24px rgba(10,19,45,.35);display:none;margin-left:0}
  .menu.open{display:flex}
  .menu a{padding:13px 8px;font-size:16px;border-bottom:1px solid var(--mist)}
  .nav-cta{margin:12px 0 0;text-align:center}
  .burger{display:block}
}

/* ---------- pages ---------- */
.page{padding-top:96px}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s);will-change:opacity,transform}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}


/* ---------- hero ---------- */
.hero{padding:96px 0 80px;position:relative}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(38px,5vw,68px);font-weight:800;line-height:1.34;letter-spacing:-.03em;word-break:keep-all}
.hero h1 em{font-style:normal;color:var(--signal-deep);position:relative}
.hero p{margin:34px 0 44px;font-size:clamp(17px,1.8vw,21px);line-height:1.9;color:var(--ink-soft);word-break:keep-all;max-width:560px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:16px 34px;border-radius:999px;font-size:16.5px;font-weight:700;transition:.2s;cursor:pointer;border:0}
.btn-primary{background:var(--signal);color:#fff}
.btn-primary:hover{background:var(--signal-deep);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.dark .btn-ghost{background:transparent;color:#fff;border-color:var(--line-dark)}
.dark .btn-ghost:hover{border-color:var(--signal)}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero{padding:56px 0 60px}}
.trust-row{display:flex;gap:24px;flex-wrap:wrap;margin-top:38px}
.trust-row span{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink-soft);letter-spacing:.02em}
.trust-row svg{color:var(--signal-deep)}

/* app screenshots (signature) */
.hero-shots{display:flex;gap:34px;justify-content:center;align-items:center}
.shot{border-radius:34px;overflow:hidden;background:#000;box-shadow:0 30px 60px -26px rgba(10,19,45,.45);width:262px;transition:transform .35s ease}

.shot img{width:100%;display:block}
@media(max-width:900px){.hero-shots{gap:18px;margin-top:16px}.shot{width:44%;max-width:210px;border-radius:24px}}

/* ---------- marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;overflow:hidden;background:linear-gradient(90deg,#ecf4fc,#f8fbfe,#ecf4fc)}
.marquee-track{display:flex;gap:60px;width:max-content;animation:scroll 28s linear infinite;font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:.12em;color:var(--ink-soft);white-space:nowrap}
.marquee-track i{font-style:normal;color:var(--signal-deep)}
@keyframes scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- cards & grids ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid2,.grid4{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:38px 32px;transition:.25s}
.card:hover{border-color:var(--signal);transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(11,18,32,.18)}
.card .c-key{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--signal-deep);margin-bottom:18px}
.card h3{font-size:21px;font-weight:800;margin-bottom:14px;word-break:keep-all}
.card p{font-size:16px;line-height:1.8;color:var(--ink-soft);word-break:keep-all}
.dark .card{background:#101b38;border-color:var(--line-dark)}
.dark .card h3{color:#fff}
.dark .card p{color:#9aa7bd}

/* ---------- flow ---------- */
.flow{display:flex;align-items:stretch;gap:0;justify-content:center;flex-wrap:wrap;margin-top:64px}
.flow .f-step{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:22px 26px;text-align:center;min-width:132px}
.flow .f-step b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--signal-deep);margin-bottom:6px}
.flow .f-step span{font-size:16px;font-weight:800}
.flow .f-arrow{display:flex;align-items:center;padding:0 14px;color:#b6c1cd;font-size:20px}
@media(max-width:820px){.flow{flex-direction:column;align-items:center}.flow .f-arrow{transform:rotate(90deg);padding:6px 0}}

/* ---------- section backgrounds & patterns ---------- */
.tinted{background:linear-gradient(180deg,#ecf4fc 0%,#f8fbfe 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.tinted::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(59,141,224,.16) 1.3px,transparent 1.3px);background-size:28px 28px;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 72%);mask-image:linear-gradient(180deg,#000 0%,transparent 72%);pointer-events:none}
.tinted>.wrap{position:relative}
.hero{overflow:hidden}
.hero::before{content:'';position:absolute;top:-140px;right:-160px;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(59,141,224,.16),transparent 65%);pointer-events:none}
.hero .wrap{position:relative}

/* ---------- dark sections ---------- */
.dark{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.dark::before{content:'';position:absolute;inset:0;background:radial-gradient(900px 460px at 82% -12%,rgba(59,141,224,.26),transparent 62%),radial-gradient(720px 420px at 8% 112%,rgba(59,141,224,.14),transparent 60%);pointer-events:none}
.dark>.wrap{position:relative}
.cta-band{position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(760px 380px at 50% 120%,rgba(59,141,224,.3),transparent 65%);pointer-events:none}
.cta-band>.wrap{position:relative}
.cta-band.light{background:linear-gradient(180deg,#ecf4fc,#f8fbfe);color:var(--ink)}
.cta-band.light::before{background:radial-gradient(rgba(59,141,224,.14) 1.3px,transparent 1.3px);background-size:28px 28px;-webkit-mask-image:linear-gradient(0deg,#000,transparent 75%);mask-image:linear-gradient(0deg,#000,transparent 75%)}
.dark h2.sec-title{color:#fff}

/* ---------- statement ---------- */
.statement{font-size:clamp(24px,3.1vw,40px);font-weight:800;line-height:1.6;letter-spacing:-.02em;word-break:keep-all;max-width:1060px;margin:0 auto;text-align:center}
.statement em{font-style:normal;color:var(--signal)}

/* ---------- compare table ---------- */
.cmp{width:100%;border-collapse:collapse;margin-top:48px;font-size:15px}
.cmp th,.cmp td{padding:18px 20px;border-bottom:1px solid var(--line);text-align:left;word-break:keep-all;vertical-align:top}
.cmp thead th{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase;border-bottom:2px solid var(--ink)}
.cmp .col-bp{background:var(--signal-dim);font-weight:600}
.cmp td:first-child{font-weight:700;width:22%}
@media(max-width:720px){.cmp th,.cmp td{padding:13px 10px;font-size:13.5px}}

/* ---------- split rows ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:120px}
.split:last-child{margin-bottom:0}
.split.rev>.split-visual{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:32px;margin-bottom:64px}.split.rev>.split-visual{order:0}}
.split h3{font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.4;letter-spacing:-.02em;margin-bottom:22px;word-break:keep-all}
.split p{font-size:clamp(17px,1.6vw,19.5px);color:var(--ink-soft);line-height:1.9;word-break:keep-all}
.split ul{margin-top:18px}
.split li{padding:12px 0 12px 34px;position:relative;font-size:clamp(16px,1.4vw,18px);color:var(--ink-soft);line-height:1.8;word-break:keep-all}
.split li::before{content:'';position:absolute;left:0;top:16px;width:16px;height:16px;border-radius:50%;background:var(--signal-dim)}
.split li::after{content:'';position:absolute;left:5px;top:20px;width:6px;height:6px;border-radius:50%;background:var(--signal-deep)}
.split-visual{background:var(--mist);border:1px solid var(--line);border-radius:22px;padding:40px;min-height:280px;display:flex;align-items:center;justify-content:center}

/* policy chips */
.policy{display:flex;flex-direction:column;gap:14px;width:100%}
.policy .p-row{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:16px}
.policy .p-tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;padding:5px 10px;border-radius:7px;background:var(--ink);color:#fff;flex-shrink:0}
.policy .p-tag.vip{background:var(--signal-deep)}
.policy .p-row span{font-size:14px;color:var(--ink-soft);word-break:keep-all}

/* ---------- use cases ---------- */
.uc{border:1px solid var(--line);border-radius:26px;padding:42px 38px;background:#fff;transition:.25s}
.uc:hover{border-color:var(--signal);transform:translateY(-4px)}
.uc .uc-ico{width:52px;height:52px;border-radius:14px;background:var(--signal-dim);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.uc h3{font-size:22px;font-weight:800;margin-bottom:8px}
.uc .uc-en{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#8b95a5;margin-bottom:16px}
.uc .uc-items{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.uc .uc-items span{font-size:13px;font-weight:600;background:var(--mist);padding:6px 12px;border-radius:8px}
.uc .uc-prob{font-size:14.5px;line-height:1.75;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:20px;word-break:keep-all}
.uc .uc-prob b{color:var(--signal-deep);font-family:var(--mono);font-size:11px;letter-spacing:.1em;display:block;margin-bottom:6px}

/* ---------- steps (how it works) ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:0;max-width:680px}
.step{display:grid;grid-template-columns:110px 1fr;gap:32px;padding:44px 0;border-bottom:1px solid var(--line);position:relative}
.step:last-child{border-bottom:0}
.step .s-num{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--signal-deep);letter-spacing:.1em;padding-top:4px}
.step h3{font-size:23px;font-weight:800;margin-bottom:12px}
.step p{color:var(--ink-soft);line-height:1.8;word-break:keep-all}
@media(max-width:600px){.step{grid-template-columns:1fr;gap:8px;padding:26px 0}}

/* phone mock */
.phone{width:280px;background:var(--ink);border-radius:38px;padding:14px;box-shadow:0 40px 70px -30px rgba(11,18,32,.5);margin:0 auto}
.phone .p-screen{background:#0d1732;border-radius:26px;padding:26px 20px;min-height:480px;display:flex;flex-direction:column}
.phone .p-top{font-family:var(--mono);font-size:10px;color:#8b95a5;display:flex;justify-content:space-between;margin-bottom:22px}
.phone .p-tk{background:linear-gradient(145deg,#16254a,#101d3c);border:1px solid #22335a;border-radius:18px;padding:20px}
.phone .p-tk .tk-l{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--signal);margin-bottom:8px}
.phone .p-tk .tk-t{font-size:16px;font-weight:800;color:#fff;line-height:1.4;word-break:keep-all}
.phone .p-tk .tk-m{font-family:var(--mono);font-size:10px;color:#8b95a5;margin-top:8px;line-height:1.7}
.phone .p-auth{margin-top:auto;text-align:center;padding:22px 0 6px}
.phone .p-ring{width:76px;height:76px;border-radius:50%;border:2px solid var(--signal);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;position:relative}
.phone .p-ring::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1.5px solid rgba(59,141,224,.3);animation:pulse2 2.2s infinite}
@keyframes pulse2{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.25);opacity:0}}
@media(prefers-reduced-motion:reduce){.phone .p-ring::after{animation:none}}
.phone .p-auth b{color:#fff;font-size:14px;display:block}
.phone .p-auth span{font-family:var(--mono);font-size:10px;color:#8b95a5}

/* ---------- tech ---------- */
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:900px){.tech-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.tech-grid{grid-template-columns:1fr}}
.privacy{margin-top:72px;background:#101b38;border:1px solid var(--line-dark);border-radius:22px;padding:48px 44px;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center}
@media(max-width:720px){.privacy{grid-template-columns:1fr;padding:34px 26px}}
.privacy h3{font-size:22px;font-weight:800;color:#fff;margin-bottom:10px;word-break:keep-all}
.privacy p{color:#9aa7bd;word-break:keep-all}
.privacy .lock{width:64px;height:64px;border-radius:18px;background:rgba(59,141,224,.12);display:flex;align-items:center;justify-content:center}

/* ---------- company ---------- */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
@media(max-width:720px){.mv{grid-template-columns:1fr}}
.mv .mv-card{border:1px solid var(--line);border-radius:20px;padding:40px 36px;background:#fff}
.mv .mv-card b{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--signal-deep);display:block;margin-bottom:16px}
.mv .mv-card h3{font-size:clamp(20px,2.2vw,26px);font-weight:800;line-height:1.45;word-break:keep-all}
.exp{margin-top:24px;border:1px solid var(--line);border-radius:20px;padding:40px 36px;background:var(--mist)}
.exp b{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--signal-deep);display:block;margin-bottom:16px}
.exp p{color:var(--ink-soft);word-break:keep-all;max-width:760px}
.contact-info{margin-top:24px;display:flex;gap:40px;flex-wrap:wrap;font-size:15px;color:var(--ink-soft)}
.contact-info b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink);margin-bottom:4px}

/* ---------- faq ---------- */
.faq-cat{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--signal-deep);text-transform:uppercase;margin:52px 0 14px;display:flex;align-items:center;gap:10px}
.faq-cat::before{content:'';width:22px;height:2px;background:var(--signal)}
.faq-cat:first-of-type{margin-top:0}
details.faq{border:1px solid var(--line);border-radius:18px;background:#fff;margin-bottom:14px;overflow:hidden;transition:.2s}
details.faq[open]{border-color:var(--signal)}
details.faq summary{list-style:none;cursor:pointer;padding:26px 56px 26px 26px;font-size:17px;font-weight:700;position:relative;word-break:keep-all}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:20px;font-weight:400;color:var(--signal-deep);transition:.2s}
details.faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{padding:0 26px 26px;color:var(--ink-soft);font-size:15.5px;line-height:1.85;word-break:keep-all;border-top:1px dashed var(--line);padding-top:18px;margin:0 0}

/* ---------- form ---------- */
.form-wrap{max-width:640px;margin:0 auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:48px}
.form-grid .full{grid-column:1/-1}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
.fld label{display:block;font-size:13.5px;font-weight:700;margin-bottom:8px}
.fld label i{font-style:normal;color:var(--signal-deep)}
.fld input,.fld select,.fld textarea{width:100%;padding:15px 18px;border:1.5px solid var(--line);border-radius:16px;font-family:var(--sans);font-size:15px;background:#fff;transition:.18s;color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(59,141,224,.15)}
.fld textarea{min-height:130px;resize:vertical}
.form-note{margin-top:14px;font-size:13px;color:#8b95a5;text-align:center}
.form-done{display:none;text-align:center;padding:60px 0}
.form-done h3{font-size:24px;font-weight:800;margin:18px 0 8px}
.form-done p{color:var(--ink-soft)}

/* ---------- cta band ---------- */
.cta-band{background:var(--ink);color:#fff;text-align:center}
.cta-band h2{font-size:clamp(26px,3.6vw,42px);font-weight:800;line-height:1.48;letter-spacing:-.02em;word-break:keep-all;margin-bottom:22px}
.cta-band p{color:#9aa7bd;margin-bottom:42px;word-break:keep-all}

/* ---------- footer ---------- */
footer{background:#060d20;color:#8b95a5;padding:56px 0 40px;font-size:14px}
.foot-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid #17244a;margin-bottom:28px}
.foot-logo{font-weight:800;font-size:20px;color:#fff;display:flex;align-items:center;gap:10px}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}


/* ---------- home hero: pastel panel ---------- */
.hero-main{background:linear-gradient(165deg,#dde7fb 0%,#cfdcf8 100%);display:flex;align-items:center;overflow:hidden;position:relative;padding:130px 0}
.hero-main::before{content:'';position:absolute;top:-180px;right:-140px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 62%);pointer-events:none}
.hero-main>.wrap{position:relative;width:100%;grid-template-columns:1.02fr .98fr;gap:40px}
.hero-main .btn-ghost{background:#fff;border-color:transparent}
.hero-main .btn-ghost:hover{border-color:var(--ink)}
.hero-main .trust-row span{color:var(--ink)}
@media(max-width:900px){
  .hero-main{padding:56px 0 60px}
  .hero-main>.wrap{grid-template-columns:1fr}
}
@media(max-width:900px){
  .hero-shots{margin-top:36px}
  .shot{width:min(76%,320px)}
}


/* ---------- home: difference photos ---------- */
.diff-slider{margin:64px auto 0;max-width:1160px;position:relative}
.diff-track{display:flex;gap:48px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;user-select:none}
.diff-track.dragging{cursor:grabbing}
.diff-track img{-webkit-user-drag:none;user-drag:none}
.diff-track::-webkit-scrollbar{display:none}
.diff-slide{flex:0 0 100%;scroll-snap-align:start}
.diff-case{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:26px}
.diff-case b{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--signal-deep)}
.diff-case span{font-size:19px;font-weight:800}
.diff-nav{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:38px}
.diff-btn{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:18px;color:var(--ink);cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center}
.diff-btn:hover{border-color:var(--signal);color:var(--signal-deep)}
.diff-dots{display:flex;gap:9px}
.diff-dots span{width:9px;height:9px;border-radius:50%;background:#ccd7e2;transition:.25s;cursor:pointer}
.diff-dots span.on{background:var(--signal-deep);width:26px;border-radius:999px}
.diff-photos{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.diff-card{position:relative;margin:0;text-align:left;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;transition:.25s}

.diff-card img{width:100%;aspect-ratio:4/3.4;object-fit:cover;display:block}
.diff-tag{position:absolute;top:18px;left:18px;z-index:2;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;padding:8px 16px;border-radius:999px;backdrop-filter:blur(6px)}
.diff-tag.qr{background:rgba(10,19,45,.75);color:#fff}
.diff-tag.bp{background:rgba(59,141,224,.92);color:#fff}
.diff-card figcaption{padding:24px 28px 28px;font-size:15.5px;line-height:1.75;color:var(--ink-soft);word-break:keep-all}
.diff-card figcaption b{display:block;font-size:18px;font-weight:800;color:var(--ink);margin-bottom:8px}
.diff-card:last-child figcaption b{color:var(--signal-deep)}
@media(max-width:760px){.diff-photos{grid-template-columns:1fr;gap:20px;margin-top:44px}.diff-card img{aspect-ratio:4/3}}


/* ---------- case links ---------- */
.diff-go{display:block;color:inherit}
.diff-go:hover .diff-card{border-color:var(--signal)}
.diff-more{text-align:center;margin-top:30px}
.btn-sm{padding:12px 28px;font-size:15px}

/* ---------- case detail page ---------- */
.case-pair{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:8px}
@media(max-width:760px){.case-pair{grid-template-columns:1fr}}
.case-points{margin-top:26px}
.case-points li{padding:12px 0 12px 32px;position:relative;color:var(--ink-soft);word-break:keep-all;line-height:1.8}
.case-points li::before{content:'';position:absolute;left:0;top:20px;width:16px;height:16px;border-radius:50%;background:var(--signal-dim)}
.case-points li::after{content:'';position:absolute;left:5px;top:24px;width:6px;height:6px;border-radius:50%;background:var(--signal-deep)}

.diff-go,.diff-pending{cursor:pointer}


/* ---------- core interactive ---------- */
.core-card{position:relative;text-align:left;font-family:var(--sans);cursor:pointer;appearance:none}
.core-card:hover{border-color:var(--signal)}
.core-card.on{border-color:var(--ink);background:var(--ink)}
.core-card.on h3{color:#fff}
.core-card.on p{color:#aab6cc}
.core-card.on .c-key{color:var(--signal)}
.core-plus{position:absolute;top:22px;right:24px;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--ink-soft);transition:.25s;background:#fff}
.core-card:hover .core-plus{border-color:var(--signal);color:var(--signal-deep)}
.core-card.on .core-plus{background:var(--signal-deep);border-color:var(--signal-deep);color:#fff;transform:rotate(45deg)}
.core-detail{margin-top:26px}
.core-panel{display:none;grid-template-columns:minmax(420px,46%) 1fr;gap:52px;align-items:center;background:#fff;border:1px solid var(--signal);border-radius:28px;padding:44px 48px;animation:corein .45s ease}
.core-panel.on{display:grid}
@keyframes corein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:860px){.core-panel{grid-template-columns:1fr;gap:30px;padding:32px 26px}}
.core-text h3{font-size:clamp(20px,2vw,25px);font-weight:800;margin-bottom:14px;word-break:keep-all}
.core-text p{color:var(--ink-soft);line-height:1.85;word-break:keep-all}
.core-text .case-points{margin-top:14px}
.core-text .case-points li{padding:8px 0 8px 32px}
.core-text .case-points li::before{top:14px}
.core-text .case-points li::after{top:18px}
.core-more{display:inline-block;margin-top:20px;font-weight:700;color:var(--signal-deep);font-size:15.5px}
.core-more:hover{text-decoration:underline}
.core-visual{display:flex;align-items:center;justify-content:center;background:linear-gradient(165deg,#eef4fc,#e2ecf9);border-radius:22px;min-height:250px;padding:34px 26px}
/* bind */
.cv-bind{display:flex;flex-direction:column;align-items:center;gap:14px}
.cv-ticket{background:var(--ink);color:#fff;border-radius:14px;padding:16px 22px;font-size:13.5px;font-weight:700;line-height:1.5;text-align:center;box-shadow:0 14px 28px -14px rgba(10,19,45,.4)}
.cv-ticket i{display:block;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--signal);margin-bottom:6px}
.cv-link{display:flex;flex-direction:column;gap:5px;align-items:center}
.cv-link span{width:2.5px;height:7px;border-radius:2px;background:var(--signal-deep);opacity:.35}
.cv-link span:nth-child(2){opacity:.65}
.cv-link span:nth-child(3){opacity:1}
.cv-device{background:#fff;border:1.5px solid var(--signal);border-radius:14px;padding:14px 24px;display:flex;align-items:center;gap:10px;color:var(--ink)}
.cv-device b{font-size:14px}
.cv-device em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--signal-deep);background:var(--signal-dim);padding:4px 9px;border-radius:999px}
/* transfer */
.cv-transfer{display:flex;align-items:center;gap:22px}
.cv-person{text-align:center}
.cv-person b{display:flex;width:74px;height:74px;border-radius:50%;align-items:center;justify-content:center;font-size:24px;font-weight:800;margin:0 auto}
.cv-person span{display:block;font-family:var(--mono);font-size:11px;margin-top:10px}
.cv-person.off b{background:#fff;border:2px solid var(--line);color:#9aa5b5}
.cv-person.off span{color:#9aa5b5}
.cv-person.on b{background:var(--signal-dim);border:2px solid var(--signal);color:var(--signal-deep)}
.cv-person.on span{color:var(--signal-deep)}
.cv-arrow{font-size:30px;color:var(--signal-deep)}
/* control */
.cv-policy{width:100%;max-width:320px}
.cv-policy .p-row{padding:13px 16px}
.cv-policy .p-row span:last-child{font-size:13px}
/* verify */
.cv-verify{text-align:center;color:var(--ink)}
.cv-ring{width:84px;height:84px;border-radius:50%;border:2.5px solid var(--signal);color:var(--signal-deep);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;position:relative}
.cv-ring::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(59,141,224,.35);animation:pulse2 2.2s infinite}
.cv-verify b{display:block;font-size:17px;font-weight:800}
.cv-verify span{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);letter-spacing:.06em;display:block;margin-top:6px}

.core-visual.has-img{padding:0;background:none;min-height:0;overflow:hidden;border-radius:22px}
.core-visual.has-img img{width:100%;display:block;border-radius:22px}

.core-flow-link{text-align:center;margin-top:44px;color:var(--ink-soft);font-size:16.5px;word-break:keep-all}
.core-flow-link a{font-weight:700;color:var(--signal-deep)}
.core-flow-link a:hover{text-decoration:underline}


/* ---------- use case visual cards (home) ---------- */
.ucv-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:760px){.ucv-grid{grid-template-columns:1fr;gap:20px}}
.ucv{position:relative;display:block;border-radius:28px;overflow:hidden;aspect-ratio:16/10;background:#0d1732}
.ucv img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.ucv::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,13,32,.05) 30%,rgba(6,13,32,.88) 100%);transition:.3s}
.ucv:hover img{transform:scale(1.05)}
.ucv:hover::after{background:linear-gradient(180deg,rgba(6,13,32,.02) 25%,rgba(6,13,32,.92) 100%)}
.ucv-key{position:absolute;top:22px;left:24px;z-index:2;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;color:#fff;background:rgba(10,19,45,.55);backdrop-filter:blur(6px);padding:8px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.22)}
.ucv-body{position:absolute;left:28px;right:28px;bottom:26px;z-index:2}
.ucv-body h3{font-size:clamp(21px,2vw,26px);font-weight:800;color:#fff;margin-bottom:7px}
.ucv-body p{font-size:15px;color:#c3cfe2;font-weight:600}


/* ---------- integration plug-in diagram ---------- */
.integ{display:grid;grid-template-columns:1fr auto 1fr;gap:34px;align-items:center;max-width:940px;margin:60px auto 0;text-align:left}
.integ-label{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--ink-soft);margin-bottom:14px;text-transform:uppercase}
.integ-apps{display:flex;flex-direction:column;gap:12px;justify-self:end;min-width:250px}
.integ-app{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px 22px;font-size:16px;font-weight:700;color:var(--ink)}
.integ-app svg{color:var(--signal-deep);flex-shrink:0}
.integ-link{display:flex;align-items:center;gap:0}
.integ-line{width:34px;height:2px;background-image:linear-gradient(90deg,var(--signal-deep) 55%,transparent 55%);background-size:9px 2px;opacity:.7}
.integ-plug{width:54px;height:54px;border-radius:50%;background:var(--signal-dim);border:1.5px solid var(--signal);color:var(--signal-deep);display:flex;align-items:center;justify-content:center;margin:0 4px;position:relative}
.integ-plug::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:1.5px solid rgba(59,141,224,.3);animation:pulse2 2.4s infinite}
.integ-module{justify-self:start;min-width:270px}
.integ-card{background:var(--ink);border-radius:20px;padding:26px 30px;box-shadow:0 22px 44px -22px rgba(10,19,45,.45)}
.integ-card b{display:block;color:#fff;font-size:19px;font-weight:800;margin-bottom:6px}
.integ-card span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--signal);margin-bottom:12px}
.integ-card em{display:block;font-style:normal;font-size:14px;color:#9aa7bd;border-top:1px dashed #2b3d66;padding-top:12px;word-break:keep-all}
@media(max-width:860px){
  .integ{grid-template-columns:1fr;gap:20px;justify-items:center;text-align:center}
  .integ-apps{justify-self:center;width:100%;max-width:340px}
  .integ-label{margin-bottom:10px}
  .integ-link{transform:rotate(90deg);margin:2px 0}
  .integ-module{justify-self:center;width:100%;max-width:340px}
}


/* ---------- final cta (home) ---------- */
.cta-final{padding:170px 0}
.cta-final h2{font-size:clamp(30px,4.6vw,58px);line-height:1.42;margin-bottom:26px}
.cta-final p{font-size:clamp(16px,1.7vw,20px);line-height:1.9;margin-bottom:48px}
.cta-final::before{background:radial-gradient(880px 460px at 50% 118%,rgba(59,141,224,.42),transparent 62%),radial-gradient(700px 400px at 12% -10%,rgba(59,141,224,.16),transparent 60%)}
.cta-final .btn{padding:18px 40px;font-size:17px}
@media(max-width:768px){.cta-final{padding:110px 0}}


/* ---------- subpage visuals ---------- */
.split-visual.has-img{padding:0;background:none;border:0;overflow:hidden;border-radius:26px;min-height:0}
.split-visual.has-img img{width:100%;display:block;border-radius:26px}

.ucp{border:1px solid var(--line);border-radius:26px;overflow:hidden;background:#fff;transition:.25s}
.ucp:hover{border-color:var(--signal)}
.ucp-img{position:relative;aspect-ratio:16/9;overflow:hidden}
.ucp-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.ucp:hover .ucp-img img{transform:scale(1.05)}
.ucp-img .ucv-key{top:18px;left:20px}
.ucp-body{padding:28px 32px 32px}
.ucp-body h3{font-size:22px;font-weight:800;margin-bottom:16px}

.how-extra{margin:0 auto;max-width:300px}
.how-extra img{width:100%;border-radius:20px;display:block}
.how-extra figcaption{font-size:13.5px;color:var(--ink-soft);text-align:center;margin-top:12px;word-break:keep-all;line-height:1.6}

.tech-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.tech-hero-img img{width:100%;border-radius:28px;display:block;box-shadow:0 30px 60px -30px rgba(10,19,45,.3)}
@media(max-width:860px){.tech-hero{grid-template-columns:1fr;gap:32px}}

section[id]{scroll-margin-top:110px}


/* ---------- patent highlight (technology) ---------- */
.patent{margin-top:72px;border:1.5px solid var(--signal);border-radius:26px;background:linear-gradient(165deg,#eef5fc,#f8fbfe);padding:52px 48px;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;position:relative;overflow:hidden}
.patent::before{content:'';position:absolute;top:-160px;right:-120px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(59,141,224,.14),transparent 65%);pointer-events:none}
.patent>*{position:relative}
.patent-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;color:#fff;background:var(--signal-deep);padding:9px 18px;border-radius:999px;margin-bottom:22px}
.patent-head h3{font-size:clamp(24px,2.8vw,34px);font-weight:800;line-height:1.42;letter-spacing:-.02em;margin-bottom:18px;word-break:keep-all}
.patent-head p{color:var(--ink-soft);line-height:1.9;word-break:keep-all;font-size:clamp(16px,1.5vw,18px)}
.patent-points{display:flex;flex-direction:column;gap:18px}
.patent-point{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 30px}
.patent-point b{display:block;font-size:18px;font-weight:800;margin-bottom:8px;color:var(--signal-deep)}
.patent-point span{color:var(--ink-soft);font-size:15.5px;line-height:1.8;word-break:keep-all;display:block}
@media(max-width:860px){.patent{grid-template-columns:1fr;padding:36px 28px;gap:28px}}


/* ---------- how.html: customer section responsive fix ---------- */
.cust-grid{display:grid;grid-template-columns:1fr auto;gap:72px;align-items:center}
@media(max-width:860px){
  .cust-grid{grid-template-columns:1fr;gap:36px}
  .cust-grid .how-phone{order:2}
  .cust-grid .how-phone .shot{width:min(76%,320px);margin:0 auto}
}