/* DoNeatly shared styles */
:root{
  --ink:#111;--ink2:#1c1b19;--paper:#f5f3ee;--paper2:#ebe8e1;--white:#fff;
  --orange:#ff7a1a;--orange-soft:#ffe3cc;--mute:#6f6a62;--line:#dcd8cf;
  --r:28px;--max:1180px;
  --font:"Plus Jakarta Sans","Noto Sans TC",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* bilingual: only the active language is shown */
html[data-lang="zh"] [lang="en"],html[data-lang="en"] [lang="zh-Hant"]{display:none!important}

/* header */
.nav{position:sticky;top:0;z-index:50;background:rgba(245,243,238,.82);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.03em;text-decoration:none}
.logo .mark{display:block;flex:none}
.menu{display:flex;align-items:center;gap:6px}
.menu a{padding:8px 14px;border-radius:999px;text-decoration:none;font-size:15px;font-weight:600}
.menu a:hover{background:var(--paper2)}
.lang{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;margin-left:6px}
.lang button{font:inherit;font-size:13px;font-weight:700;border:0;background:transparent;padding:6px 12px;cursor:pointer;color:var(--ink)}
.lang button.on{background:var(--ink);color:var(--paper)}
@media(max-width:720px){.menu a.hide-s{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none;font-size:16px;border:2px solid var(--ink);transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn.orange{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.btn.outline{background:transparent;color:var(--ink)}
.btn.off{background:var(--paper2);border-color:var(--paper2);color:var(--mute);cursor:default}
.btn.off:hover{transform:none}
.btn small{font-weight:500;font-size:12px;opacity:.8}
.arrow{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--orange);color:var(--ink);font-size:14px}
.btn.orange .arrow{background:var(--ink);color:var(--orange)}
.pill{display:inline-block;padding:5px 14px;border-radius:999px;border:1.5px solid var(--ink);font-size:13px;font-weight:700;letter-spacing:.02em}
.pill.dark{background:var(--ink);color:var(--paper)}
.pill.org{background:var(--orange);border-color:var(--orange)}

/* hero */
.hero{position:relative;padding:72px 0 56px;overflow:hidden}
.ghost{position:absolute;left:-2vw;top:50px;font-size:clamp(150px,30vw,430px);font-weight:800;letter-spacing:-.06em;line-height:.8;color:var(--orange);white-space:nowrap;user-select:none;pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(40px,7.2vw,96px);line-height:1.04;letter-spacing:-.045em;margin:34px 0 22px;max-width:11.5em;font-weight:800}
html[data-lang="zh"] .hero h1{letter-spacing:-.02em;line-height:1.14;font-size:clamp(38px,6.4vw,84px)}
.hero p.lead{font-size:clamp(18px,2vw,22px);max-width:30em;margin:0 0 32px;font-weight:500}
.hero .row{display:flex;gap:14px;flex-wrap:wrap}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.band{background:var(--ink);color:var(--orange);overflow:hidden;white-space:nowrap;padding:16px 0;font-weight:800;font-size:22px;letter-spacing:-.01em;transform:rotate(-1.2deg);margin:28px -20px 0}
.band div{display:inline-block;animation:slide 28s linear infinite}
.band span{margin:0 22px}
.band span:nth-child(even){color:var(--paper)}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.band div{animation:none}}

/* sections */
section.s{padding:96px 0}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
h2.big{font-size:clamp(32px,5vw,60px);line-height:1.08;letter-spacing:-.04em;margin:0 0 18px;font-weight:800;max-width:14em}
html[data-lang="zh"] h2.big{letter-spacing:-.015em;line-height:1.2}
.sub{color:var(--mute);max-width:36em;font-size:18px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:44px}
.card{border-radius:var(--r);padding:30px;position:relative;overflow:hidden;background:var(--white)}
.card.orange{background:var(--orange)}
.card.dark{background:var(--ink);color:var(--paper)}
.card.gray{background:var(--paper2)}
.card h3{font-size:26px;line-height:1.2;letter-spacing:-.03em;margin:12px 0 8px;font-weight:800}
.card p{margin:0;color:inherit;opacity:.82;font-size:16px}
.span-7{grid-column:span 7}.span-5{grid-column:span 5}.span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
@media(max-width:900px){.bento>*{grid-column:span 12!important}}

/* phone mock */
.phone{width:100%;max-width:260px;border-radius:34px;background:var(--ink);padding:7px;box-shadow:0 24px 50px rgba(0,0,0,.22)}
.phone img{border-radius:28px;width:100%;height:auto}
.crop{height:300px;overflow:hidden;margin-top:22px;display:flex;justify-content:center;align-items:flex-start}
.crop .phone{border-bottom-left-radius:0;border-bottom-right-radius:0;max-width:240px}
.crop .phone img{border-bottom-left-radius:0;border-bottom-right-radius:0}

/* numbered columns */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:48px}
.col .n{font-size:64px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--ink);letter-spacing:-.04em}
.col h3{font-size:22px;margin:14px 0 8px;letter-spacing:-.02em}
.col p{margin:0;color:var(--mute)}
@media(max-width:800px){.cols{grid-template-columns:1fr;gap:28px}}

/* contact block */
.cta{background:var(--ink);color:var(--paper);border-radius:40px;padding:64px 40px;margin:0 0 24px;position:relative;overflow:hidden}
.cta h2{font-size:clamp(34px,5.6vw,72px);line-height:1.05;letter-spacing:-.04em;margin:0 0 22px;font-weight:800}
.cta h2 em{font-style:normal;color:var(--orange)}
.cta .row{display:flex;gap:14px;flex-wrap:wrap}
.cta .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cta .btn.orange{background:var(--orange);border-color:var(--orange)}

/* footer */
footer{padding:36px 0 48px;color:var(--mute);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{margin-right:18px;text-decoration:none;font-weight:600;color:var(--ink)}
footer a:hover{color:var(--orange)}

/* product page */
.phones{display:flex;justify-content:center;align-items:flex-end;position:relative;min-height:420px}
.phones .phone:nth-child(1){transform:rotate(-6deg) translateX(30px);z-index:1}
.phones .phone:nth-child(2){transform:rotate(5deg) translate(-20px,-30px);z-index:2}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}.phones{min-height:360px}}
.appicon{width:76px;height:76px;border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.plan{border-radius:var(--r);padding:30px;background:var(--white);display:flex;flex-direction:column;gap:6px}
.plan.hot{background:var(--orange)}
.plan.dark{background:var(--ink);color:var(--paper)}
.plan h3{margin:0;font-size:24px;letter-spacing:-.03em}
.plan .price{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:8px 0 4px}
.plan ul{margin:10px 0 0;padding-left:20px}
.plan li{margin:4px 0}
@media(max-width:900px){.plans{grid-template-columns:1fr}}

/* legal / long text */
.doc{max-width:760px;margin:0 auto;padding:56px 24px 80px}
.doc h1{font-size:clamp(32px,5vw,52px);letter-spacing:-.03em;line-height:1.1;margin:0 0 20px}
.doc h2{font-size:22px;margin:2.2em 0 .6em;padding-bottom:6px;border-bottom:2px solid var(--orange)}
.doc a{color:var(--orange)}
.doc table{border-collapse:collapse;width:100%}
.doc td,.doc th{border:1px solid var(--line);padding:8px 12px;text-align:left}
.doc details{background:var(--white);border-radius:18px;padding:14px 20px;margin:10px 0}
.doc summary{cursor:pointer;font-weight:700}
.doc .note{background:var(--orange-soft);border-radius:18px;padding:12px 18px;font-size:15px}

/* BizCard card on the home page: phone sits at the bottom-right on desktop, below the text on mobile */
.card-phone{position:absolute;right:28px;bottom:-60px}
@media(max-width:900px){.card-phone{position:relative;right:auto;bottom:auto;margin:26px auto -70px;width:230px}.card[style*="min-height:520px"]{min-height:0!important}}
@media(max-width:700px){.card.span-12.export{grid-template-columns:1fr!important}.card.span-12.export .crop{height:220px!important}}

footer .legal{margin-top:10px;font-size:13px;line-height:1.7;color:var(--mute)}