/* ---------- ABeeZee (self-hosted, latin) ---------- */
@font-face{font-family:'ABeeZee';font-style:normal;font-weight:400;font-display:swap;
  src:url('/layout/fonts/abeezee-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'ABeeZee';font-style:normal;font-weight:400;font-display:swap;
  src:url('/layout/fonts/abeezee-400-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'ABeeZee';font-style:italic;font-weight:400;font-display:swap;
  src:url('/layout/fonts/abeezee-400i.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'ABeeZee';font-style:italic;font-weight:400;font-display:swap;
  src:url('/layout/fonts/abeezee-400i-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* Melon VPN site — palette lifted from the app itself:
   deep teal-black ground, lime accent, large radii, frosted cards. */
:root{
  --ground:#07150D;
  --card:rgba(23,40,30,.72);
  --line:rgba(146,255,170,.17);
  --line-strong:rgba(146,255,170,.30);
  --fg:#F1FFF4;
  --fg-2:#C7DACD;
  --mut:#8FA79A;
  --lime:#5CF06D;
  --lime-bright:#86FF96;
  --lime-deep:#38C24A;
  --melon:#F14D4D;
  --radius:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;padding:0 18px;overflow-x:hidden;color:var(--fg);
  font:16px/1.72 "ABeeZee",-apple-system,BlinkMacSystemFont,"PingFang SC",
       "Noto Sans CJK SC","Noto Sans Thai","Noto Sans Arabic",sans-serif;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(92,240,109,.13) 0%, transparent 62%),
    radial-gradient(700px 420px at 88% 4%, rgba(20,120,90,.18) 0%, transparent 60%),
    linear-gradient(180deg,#07150D 0%,#081a10 42%,#07150D 100%);
  min-height:100vh;
}
.wrap{max-width:760px;margin:0 auto}
a{color:#8BE89A;text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:rgba(92,240,109,.28)}

/* header — floating pill, not a full-bleed bar */
header.site{
  position:sticky;top:0;z-index:30;padding:10px 0 6px;background:transparent;
  border:0;margin-bottom:0;
}
header.site::before{
  content:"";position:absolute;inset:0 0 -20px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,21,13,.94) 34%,rgba(7,21,13,.6) 68%,transparent);
}
header.site .wrap{
  display:flex;align-items:center;gap:8px;height:54px;padding:0 7px 0 10px;
  border-radius:999px;background:rgba(13,31,21,.93);
  border:1px solid var(--line);
  box-shadow:0 10px 34px -22px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.045) inset;
}
header.site .logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  letter-spacing:-.01em;color:var(--fg);padding:10px 6px;margin:-10px -6px;border-radius:12px}
header.site .logo:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
header.site .logo img{width:24px;height:24px;border-radius:7px;display:block}
header.site nav{margin-left:auto;display:flex;gap:2px;font-size:13.5px;white-space:nowrap}
header.site nav a{padding:11px 12px;border-radius:999px;color:var(--fg-2);
  transition:color .15s ease,background .15s ease}
header.site nav a:hover{color:var(--fg);background:rgba(255,255,255,.06);text-decoration:none}
header.site nav a.active{color:var(--lime);background:rgba(92,240,109,.13);
  box-shadow:0 0 0 1px rgba(92,240,109,.22) inset;font-weight:600}
header.site nav a:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
header.site.scrolled .wrap{height:48px;box-shadow:0 16px 44px -22px rgba(0,0,0,1),
  0 1px 0 rgba(255,255,255,.05) inset}
header.site .wrap{transition:height .18s ease,box-shadow .18s ease}

/* type */
h1{scroll-margin-top:78px;position:relative;z-index:2;text-shadow:0 2px 18px rgba(4,16,9,.55);font-size:33px;line-height:1.16;letter-spacing:-.03em;margin:30px 0 12px;
   font-weight:600;text-wrap:balance;color:var(--fg)}
h2{scroll-margin-top:78px;font-size:20px;line-height:1.32;margin:38px 0 12px;letter-spacing:-.015em;
   font-weight:600;text-wrap:balance;color:var(--fg)}
h3{font-size:16.5px;margin:24px 0 7px;font-weight:600;color:var(--fg)}
p{margin:11px 0;color:var(--fg-2)}
ul,ol{margin:11px 0;padding-left:20px;color:var(--fg-2)}
li{margin:6px 0}
li::marker{color:var(--lime-deep)}
strong{font-weight:600;color:var(--fg)}
small{color:var(--mut)}

/* hero */
.hero{padding:26px 0 4px}
.hero h1{margin-top:0}
.lede{font-size:17.5px;line-height:1.62;color:var(--fg-2);margin:10px 0 0;text-wrap:pretty}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:20px 0 6px;padding:0;
  list-style:none}
@media(min-width:520px){.facts{grid-template-columns:repeat(4,1fr)}}
.facts li{margin:0;padding:9px 10px;border-radius:12px;font-size:12.5px;color:var(--mut);
  background:rgba(255,255,255,.03);border:1px solid var(--line);text-align:center;
  line-height:1.35}
.facts li b{color:var(--fg);font-weight:600;letter-spacing:.005em;white-space:nowrap}
.facts li b{font-variant-numeric:tabular-nums}

/* cards */
.grid{display:grid;gap:12px;margin:18px 0}
@media(min-width:620px){.grid.two{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 14px 34px -22px rgba(0,0,0,.9)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}

/* buttons */
.dl{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:14px;padding:15px 16px;font-weight:600;font-size:14.5px;flex:1 1 170px;
  white-space:nowrap;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.05);color:var(--fg);
  transition:transform .12s ease, background .15s ease}
.btn:hover{text-decoration:none;background:rgba(255,255,255,.09)}
.btn:active{transform:scale(.985)}
.btn.primary{background:linear-gradient(180deg,var(--lime-bright),var(--lime-deep));
  border-color:transparent;color:#06210F;
  box-shadow:0 10px 26px -12px rgba(92,240,109,.75)}
.btn.primary:hover{background:linear-gradient(180deg,#98ffa6,#42d456)}
/* Google Play: melon red, so the two stores read as a pair rather than one primary
   and one leftover. Kept after .primary on purpose so Android's primary stays red. */
.btn[data-os="android"],.btn.primary[data-os="android"]{
  background:linear-gradient(180deg,#F5827B,#E05E57);
  border-color:transparent;color:#2E0806;
  box-shadow:0 10px 26px -14px rgba(224,94,87,.8)}
.btn[data-os="android"]:hover,.btn.primary[data-os="android"]:hover{
  background:linear-gradient(180deg,#FF968E,#E96B63)}

/* QR: desktop only */
.dl-hint{font-size:13px;color:var(--mut);margin:2px 0 0}

.qr{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0 4px}
.qr figure{margin:0;text-align:center}
.qr img{width:128px;height:128px;display:block;border-radius:14px;background:#fff;
  padding:9px;image-rendering:pixelated}
.qr figcaption{font-size:12px;color:var(--mut);margin-top:7px}

.dl-title{font-size:17px;margin:30px 0 4px;font-weight:700;letter-spacing:-.01em}
/* tables */
.tw{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:320px}
th,td{border-bottom:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top;
  color:var(--fg-2)}
th{background:rgba(92,240,109,.06);font-weight:600;color:var(--fg);white-space:nowrap}
td:first-child{min-width:92px}
tr:last-child td{border-bottom:0}

/* callouts */
.note{border-radius:14px;background:rgba(92,240,109,.07);border:1px solid var(--line-strong);
  padding:14px 17px;margin:18px 0;font-size:15px;color:var(--fg-2)}
.note strong{color:var(--fg)}
.note.warn{background:rgba(241,77,77,.09);border-color:rgba(241,77,77,.34)}

/* faq */
details{border-bottom:1px solid var(--line);padding:15px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;font-size:15.5px;color:var(--fg);list-style:none;
  display:flex;gap:10px;align-items:flex-start;padding:9px 0;margin:-9px 0}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";color:var(--lime);font-weight:700;flex:0 0 auto;width:14px}
details[open] summary::before{content:"–"}
details p{margin:9px 0 0 24px;color:var(--fg-2)}

/* footer */
footer.site{margin-top:52px;border-top:1px solid var(--line);padding:20px 0 46px;
  font-size:13px;color:var(--mut)}
footer.site a{color:var(--mut)}
footer.site a:hover{color:var(--lime)}
footer.site .row{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}

.meta{font-size:13px;color:var(--mut);margin:6px 0 20px}
.tag{display:inline-block;background:rgba(92,240,109,.1);border:1px solid var(--line-strong);
  border-radius:7px;padding:2px 9px;font-size:11.5px;color:var(--lime);margin-right:8px;
  font-weight:650;letter-spacing:.02em}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:420px){
  /* narrow screens: the two side glows collapse into bright edges — use one centred */
  body{padding:0 15px}
  h1{font-size:27px}
  .qr img{width:118px;height:118px}
}

/* phones cannot scan their own screen: hide QR, keep store buttons */
@media(max-width:780px){
  .qr.qr-desktop{display:none}
  .dl-hint{display:none}
}

/* small screens: keep only the three primary destinations */
@media(max-width:470px){
  header.site nav a:nth-child(2),
  header.site nav a:nth-child(5){display:none}
  header.site{padding:5px 0 3px}
  header.site .wrap{height:50px;padding:0 5px 0 9px;margin:0 -11px;border-radius:16px}
  header.site nav a{padding:11px 9px;font-size:13px}
  header.site .logo{font-size:14.5px}
  header.site .logo img{width:22px;height:22px}
  .dl .btn{font-size:13.5px;padding:14px 10px}
}

/* desktop: use the horizontal space instead of a narrow single column */
@media(min-width:840px){
  .wrap{max-width:920px}
  .dl-row{display:flex;gap:44px;align-items:center;justify-content:space-between;
          margin:22px 0 10px}
  .dl-col{flex:1 1 0;min-width:0}
  .dl{margin:0;flex-wrap:nowrap}
  .dl .btn{flex:1 1 auto}
  .qr{margin:0;flex:0 0 auto;gap:16px}
  .grid.two{grid-template-columns:1fr 1fr}
}

/* watermelon accent: brand fruit, green outside, red inside */
.hero{position:relative;overflow:visible}
.melon-art{
  position:absolute;right:-8px;top:-14px;width:178px;height:auto;
  opacity:.28;pointer-events:none;user-select:none;z-index:0;
}
.hero > *:not(.melon-art){position:relative;z-index:1}

/* thin green→red rule under the hero, the only place red is structural */
.hero::after{
  content:"";display:block;height:2px;margin:24px 0 0;border-radius:2px;
  background:linear-gradient(90deg,var(--lime) 0%,#B7E86A 55%,#F14D4D 100%);
  opacity:.38;
}
/* small red dot on the section tag, and on facts numbers */
.tag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--lime);opacity:.75;margin-right:7px;vertical-align:1px}
.facts li b{color:var(--fg)}
.facts li:last-child b{color:var(--fg)}

@media(max-width:700px){
  .melon-art{width:122px;right:-8px;top:-12px;opacity:.26}
  .hero{padding-top:34px}
}

/* ---------- motion ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .16s ease both}
::view-transition-new(root){animation:vtIn .24s ease both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}

@media(prefers-reduced-motion:no-preference){
  body{animation:pageIn .3s ease-out both}
  @keyframes pageIn{from{opacity:0}to{opacity:1}}

  @media(min-width:781px){.melon-art{animation:melonFloat 11s ease-in-out infinite;will-change:transform}}
  @keyframes melonFloat{
    0%,100%{transform:translateY(0) rotate(-1.5deg)}
    50%{transform:translateY(-9px) rotate(1.5deg)}
  }

  .btn{transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
  .btn:hover{transform:translateY(-2px)}
  .btn.pressed{transform:translateY(0) scale(.97)}

  .js-reveal .card:not(.in),.js-reveal .tw:not(.in),.js-reveal .note:not(.in),
  .js-reveal .qr figure:not(.in){
    opacity:0;transform:translateY(14px);
    transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);
  }
}

/* legal pages: keep the original wording, just make it readable here */
.legal{font-size:15.5px}
.legal h2{font-size:17px;margin:30px 0 8px;color:var(--fg);letter-spacing:-.01em}
.legal ul{margin:10px 0;padding-left:20px}
.legal li{margin:7px 0;color:var(--fg-2)}
.legal li::marker{color:var(--lime-deep)}
.legal strong{color:var(--fg)}
.legal p{color:var(--fg-2)}

/* list / card links: make the whole heading row tappable */
.card h2 a, .card h3 a, .card h2, .card h3{display:inline-block}
.card h2 a, .card h3 a{padding:9px 0}
.card a:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}

/* phones and large phones: one centred glow, so no bright bands down the edges */
@media(max-width:520px){
  body{background:
    radial-gradient(360px 260px at 50% -6%, rgba(92,240,109,.10) 0%, transparent 68%),
    linear-gradient(180deg,#07150D 0%,#081a10 45%,#07150D 100%);
    background-attachment:scroll}
}

/* footer language switcher */
.lang{display:inline-block}
.lang select{
  appearance:none;-webkit-appearance:none;
  font:inherit;font-size:12.5px;color:var(--fg-2);cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:999px;padding:11px 30px 11px 13px;line-height:1.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238FA79A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  transition:border-color .15s ease,background-color .15s ease}
.lang select:hover{border-color:var(--line-strong);color:var(--fg)}
.lang select:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.lang option{background:#0d2117;color:var(--fg)}
.lang option:disabled{color:#6b8375}

/* language pages: three price cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.grid3 .card{padding:16px 14px;text-align:center;margin:0}
@media(max-width:470px){.grid3{grid-template-columns:1fr;gap:8px}
  .grid3 .card{display:flex;justify-content:space-between;align-items:baseline;padding:13px 16px}}
/* RTL (Arabic) */
html[dir="rtl"] .facts li,html[dir="rtl"] .grid3 .card{text-align:right}
html[dir="rtl"] header.site nav{margin-left:0;margin-right:auto}
html[dir="rtl"] .lang select{background-position:left 12px center;padding:11px 13px 11px 30px}

/* ---------------------------------------------------------------- 动效
   只用 transform / opacity：这两样走合成层，不触发重绘。
   box-shadow 和 filter 动画一律不用——那是每帧重画的代价。 */

/* 主按钮呼吸：伪元素做，不动阴影 */
.btn.primary{position:relative;isolation:isolate}
.btn.primary::after{
  content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(92,240,109,.55),transparent 76%);
  opacity:.25;animation:btnBreath 3.4s ease-in-out infinite;
  will-change:opacity;transform:translateZ(0)}
@keyframes btnBreath{0%,100%{opacity:.22}50%{opacity:.62}}
/* 安卓的红色按钮配红色呼吸 */
.btn[data-os="android"].primary::after,
.btn.primary[data-os="android"]::after{
  background:radial-gradient(closest-side,rgba(245,130,123,.65),transparent 78%)}

/* 按钮悬停：抬一点 + 一道光扫过 */
.btn{position:relative;overflow:hidden}
.btn:hover{transform:translateY(-1px)}
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.26) 50%,transparent 68%);
  opacity:0;transform:translateX(-70%);
  transition:opacity .25s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.btn:hover::before{opacity:1;transform:translateX(70%)}

/* 西瓜图标：悬停转一下 */
header.site .logo img{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
header.site .logo:hover img{transform:rotate(-10deg) scale(1.08)}

/* 卡片：悬停微抬 */
.card{transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s ease}
.card:hover{transform:translateY(-3px);border-color:var(--line-strong)}

/* 事实小卡：悬停浮一下 */
.facts li{transition:transform .22s ease,background .22s ease}
.facts li:hover{transform:translateY(-2px);background:rgba(92,240,109,.07)}

/* 正文链接：下划线从左滑到右 */
main a:not(.btn):not(.logo){background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .22s ease}
main a:not(.btn):not(.logo):hover{background-size:100% 1px;text-decoration:none}

/* 毛玻璃只在桌面开：手机上软件渲染扛不住每帧模糊 */
@media(min-width:781px){
  header.site .wrap{background:rgba(15,34,23,.72);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    backdrop-filter:blur(14px) saturate(1.3)}
}

/* 尊重系统的减弱动画设置 */
@media(prefers-reduced-motion:reduce){
  .btn.primary::after,.melon-art{animation:none}
  .btn::before{display:none}
  .card:hover,.facts li:hover,.btn:hover{transform:none}
}

/* 按钮图标（Apple / Play） */
.btn svg{width:17px;height:17px;flex:0 0 auto;display:block}

/* App Store 按钮：浅底，不再是一根孤零零的描边，跟右侧实心按钮配重 */
.btn[data-os="ios"]{background:rgba(255,255,255,.94);border-color:transparent;color:#0B2116}
.btn[data-os="ios"]:hover{background:#fff}

/* 事实小卡：内容居中，长短不一也整齐 */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:15px 0;gap:0;margin:22px 0 8px}
.facts li{text-align:center;padding:0;background:none;border:0;font-size:12px;
  letter-spacing:.01em}
.facts li b{display:block;font-size:19px;line-height:1.25;color:var(--lime);
  margin-bottom:3px;letter-spacing:-.01em}
.facts li:last-child b{color:var(--fg)}
.facts li:hover{transform:none;background:none}

/* 价格：年付一档给一点分量，不喧哗 */
.grid3 .card:last-child{border-color:rgba(92,240,109,.42);background:rgba(92,240,109,.055)}

/* 年付：给一个数字角标，说明它为什么值得选 */
.grid3 .card:last-child{position:relative}
.grid3 .card:last-child::after{
  content:"−58%";position:absolute;top:-9px;right:12px;
  background:var(--lime);color:#06210F;font-size:11px;font-weight:600;
  letter-spacing:.02em;padding:2px 8px;border-radius:999px}

/* 长包名之类不能把页面撑破 */
code{overflow-wrap:anywhere;word-break:break-word}