@import url("https://use.typekit.net/fga5kbq.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Sans+Thai:wght@400;500;700&display=swap");

/* Production-safe subset of the CL design tokens. The full source lives in
   /cl/colors_and_type.css, but the Cloud Run public shell does not expose that
   directory, so the landing keeps the required tokens here. */
:root {
  --cl-blue: rgb(80,144,255);
  --cl-blue-light: rgb(128,187,255);
  --cl-blue-bg: rgb(226,239,255);
  --cl-blue-bg-2: rgb(238,244,255);
  --cl-fg-1: rgb(34,42,54);
  --cl-fg-2: rgb(77,89,119);
  --cl-fg-3: rgb(107,114,128);
  --cl-bg: rgb(255,255,255);
  --cl-bg-tint: rgb(248,249,252);
  --cl-border: rgb(228,228,228);
  --cl-border-soft: rgb(238,238,238);
  --cl-success: rgb(6,199,85);
  --cl-gradient-blue-h: linear-gradient(90deg,rgb(63,123,255) 0%,rgb(80,144,255) 46%,rgb(128,187,255) 100%);
  --cl-shadow-card: 0 0 15px rgba(0,64,193,.05);
  --cl-shadow-card-blue: 0 0 15px rgba(80,144,255,.10);
  --cl-shadow-elev: 0 8px 32px rgba(34,59,83,.12);
  --cl-shadow-soft: 0 4px 16px rgba(34,59,83,.08);
  --cl-inset-highlight: inset 0 -8px 15px rgba(255,255,255,.25);
  --cl-font-sans: "tt-commons-pro","Noto Sans TC","Noto Sans JP","Noto Sans Thai","PingFang TC","Helvetica Neue",system-ui,sans-serif;
  --cl-font-display: var(--cl-font-sans);
  --cl-para-l: 17.6px;
  --cl-para-xl: 20px;
  --cl-lh-body: 1.6;
  --cl-lh-loose: 1.8;
  --cl-w-medium: 500;
  --cl-w-semibold: 600;
  --cl-w-bold: 700;
  --cl-radius-s: 12px;
  --cl-radius-m: 20px;
  --cl-radius-l: 32px;
  --cl-radius-full: 100em;
  --cl-radius-pill: 200px;
  --cl-content-w: 1200px;
  --cl-section-spacing: 128px;
  --cl-global-padding: 96px;
}

html { scroll-behavior: smooth; }
body { background: var(--cl-bg); color: var(--cl-fg-1); font-family: var(--cl-font-sans); }

/* CL floating-pill chrome */
.top {
  position: sticky; top: 20px; z-index: 100;
  width: min(1180px, calc(100% - 48px)); height: 68px;
  margin: 20px auto 0; padding: 0 18px 0 30px;
  background: rgba(255,255,255,.94); border: 0;
  border-radius: var(--cl-radius-full); box-shadow: var(--cl-shadow-card);
  backdrop-filter: blur(18px);
}
.brand { color: var(--cl-fg-1); letter-spacing: -.02em; }
.brand svg { color: var(--cl-blue); }
.brand small { color: var(--cl-fg-3); letter-spacing: .12em; }
.nav-links { gap: 2px; }
.nav-links a { padding: 10px 12px; border-radius: var(--cl-radius-pill); color: var(--cl-fg-3); font-size: 15px; font-weight: var(--cl-w-medium); }
.nav-links a:hover { color: var(--cl-blue); background: transparent; }
.btn { min-height: 44px; padding: 0 22px; border-radius: var(--cl-radius-pill); font-family: var(--cl-font-sans); font-weight: var(--cl-w-medium); }
.btn-primary { color:#fff; border:1px solid rgba(255,255,255,.9); background:var(--cl-gradient-blue-h); box-shadow:var(--cl-inset-highlight); }
.btn-primary::after { content:"→"; display:grid; place-items:center; width:27px; height:27px; margin-left:9px; border-radius:50%; color:var(--cl-blue); background:#fff; transition:transform .25s ease; }
.btn-primary:hover { filter:brightness(.98); transform:none; }
.btn-primary:hover::after { transform:translateX(3px); }
.btn-ghost { color:var(--cl-fg-1); border:1px solid var(--cl-border-soft); background:#fff; }
.btn-ghost:hover { border-color:var(--cl-blue-light); background:#fff; color:var(--cl-blue); }

/* CL hero: centered message, soft blobs, product mock below */
.hero {
  width:100%; min-height:auto; margin:-88px 0 0; padding:180px 64px 100px;
  position:relative; overflow:hidden; border:0; border-radius:0;
  background:
    radial-gradient(680px 400px at -5% 90%,rgba(80,144,255,.30),transparent 70%),
    radial-gradient(680px 400px at 105% 88%,rgba(164,156,255,.28),transparent 70%),
    radial-gradient(620px 360px at 50% 105%,rgba(128,187,255,.20),transparent 72%),#fff;
  color:var(--cl-fg-1);
}
.hero::before { display:none; }
.hero-grid { max-width:var(--cl-content-w); margin:0 auto; display:grid; grid-template-columns:1fr; gap:56px; position:relative; z-index:1; text-align:center; }
.hero-grid > div:first-child { display:flex; flex-direction:column; align-items:center; }
.hero .eyebrow,.sect-eyebrow {
  display:inline-flex; align-items:center; gap:10px; padding:8px 17px 8px 14px;
  border:0; border-radius:var(--cl-radius-full); color:var(--cl-blue); background:#fff;
  box-shadow:0 2px 8px rgba(80,144,255,.10),0 1px 2px rgba(80,144,255,.06);
  font-size:15px; font-weight:var(--cl-w-semibold); letter-spacing:.01em; text-transform:none;
}
.hero .eyebrow .pulse { width:7px; height:7px; background:var(--cl-blue); box-shadow:none; }
.hero h1 { max-width:920px; margin:28px auto 20px; color:var(--cl-fg-1); font-family:var(--cl-font-sans); font-size:clamp(50px,5.2vw,72px); font-weight:var(--cl-w-bold); line-height:1.16; letter-spacing:-.025em; text-wrap:balance; }
.hero h1 em { color:transparent; font-style:normal; background:var(--cl-gradient-blue-h); -webkit-background-clip:text; background-clip:text; }
.hero .lead { max-width:690px; margin:0 auto; color:var(--cl-fg-2); font-size:var(--cl-para-xl); line-height:var(--cl-lh-loose); }
.hero-ctas { justify-content:center; margin-top:28px; }
.hero .btn-primary,.hero .btn-primary:hover { color:#fff; background:var(--cl-gradient-blue-h); }
.hero .btn-ghost { color:var(--cl-fg-1); border-color:var(--cl-border-soft); }
.hero .trust-line { justify-content:center; color:var(--cl-fg-3); }
.hero .trust-line svg { color:var(--cl-success); }
.hero .canvas {
  width:min(960px,100%); min-height:500px; margin:0 auto; padding:64px 52px !important;
  transform:none; border:0; border-radius:var(--cl-radius-l);
  background:linear-gradient(135deg,#dce8fb 0%,#e2ddf8 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 30px 60px rgba(40,55,100,.10),0 6px 14px rgba(40,55,100,.06);
}
.hero .canvas::before { content:"ISSUE 024"; position:absolute; top:24px; left:28px; z-index:3; color:var(--cl-blue); font-size:12px; font-weight:var(--cl-w-bold); letter-spacing:.14em; }
.hero .ecard { max-width:640px; margin:auto; border:1px solid var(--cl-border-soft); border-radius:var(--cl-radius-m); box-shadow:var(--cl-shadow-elev); }
.hero .eband { background:var(--cl-gradient-blue-h); }
.hero .chip3 { border:0; border-radius:var(--cl-radius-s); box-shadow:var(--cl-shadow-soft); }

/* Generated product concepts: information-dense, but labelled so they are not
   mistaken for literal production screenshots. */
.product-visual {
  position:relative; margin:0; overflow:hidden;
  border:1px solid rgba(80,144,255,.16); border-radius:var(--cl-radius-l);
  background:#edf5ff; box-shadow:0 28px 70px rgba(40,72,120,.14),0 4px 14px rgba(40,72,120,.08);
}
.product-visual img { display:block; width:100%; height:auto; }
.product-visual figcaption {
  position:absolute; right:16px; bottom:14px; z-index:2;
  padding:7px 11px; border:1px solid rgba(255,255,255,.72); border-radius:var(--cl-radius-full);
  color:var(--cl-fg-2); background:rgba(255,255,255,.88); backdrop-filter:blur(10px);
  font-size:11px; font-weight:var(--cl-w-semibold); letter-spacing:.04em;
}
.product-visual--hero { width:min(1120px,100%); margin:0 auto; }
.product-visual--wide { max-width:1080px; margin:40px auto 0; }
.product-visual--feature { width:100%; }
.dev-grid { grid-template-columns:minmax(280px,.72fr) minmax(520px,1.38fr); gap:52px; align-items:center; }
.product-visual--developer { border-color:rgba(155,194,255,.24); box-shadow:0 28px 70px rgba(3,10,25,.34); }
.devzone .product-visual figcaption { color:#d8e6fa; background:rgba(11,23,48,.78); border-color:rgba(216,230,250,.24); }
/* Trust and metrics */
.credibility { padding:112px 24px; background:var(--cl-blue-bg); border:0; }
.cred-wrap { max-width:var(--cl-content-w); gap:64px; }
.cred-copy h2,.sect-head h2,.txt h2,.final h2 { font-family:var(--cl-font-sans); font-weight:var(--cl-w-bold); letter-spacing:-.015em; }
.cred-copy h2 { margin-top:22px; font-size:clamp(40px,4vw,56px); line-height:1.2; }
.cred-copy p { color:var(--cl-fg-2); font-size:var(--cl-para-l); line-height:var(--cl-lh-body); }
.cred-copy a,.cred-card a { color:var(--cl-blue); }
.cred-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.cred-card {
  min-height:210px; padding:30px; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
  background:#fff; border:0; border-radius:var(--cl-radius-l); box-shadow:var(--cl-shadow-card);
}
.cred-mark {
  width:auto; min-width:48px; height:32px; padding:0 11px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(80,144,255,.20); border-radius:var(--cl-radius-full);
  color:#2f6fe8; background:var(--cl-blue-bg-2);
  font-size:12px; font-weight:var(--cl-w-bold); line-height:1;
  margin-bottom:20px; letter-spacing:.06em; white-space:nowrap;
}
.cred-card b { display:block; margin-bottom:8px; color:var(--cl-fg-1); font-size:18px; line-height:1.35; }
.cred-card span { display:block; color:var(--cl-fg-3); font-size:15px; line-height:1.65; }
.proof { padding:64px 24px; background:#fff; border:0; }
.proof-row { max-width:var(--cl-content-w); gap:18px; }
.proof-row > div { min-height:150px; padding:28px 24px; border:0; border-radius:var(--cl-radius-m); background:var(--cl-bg-tint); box-shadow:var(--cl-shadow-card); }
.proof .num { color:var(--cl-blue); font-family:var(--cl-font-display); font-size:32px; font-weight:var(--cl-w-bold); }
.proof .lbl { color:var(--cl-fg-3); }

/* CL section rhythm and cards */
.sect { padding:var(--cl-section-spacing) var(--cl-global-padding); }
.sect.alt { background:var(--cl-bg-tint); border:0; }
.sect-head { max-width:800px; margin:0 auto 64px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.sect-head h2 { max-width:780px; margin-top:22px; font-size:clamp(36px,4vw,52px); line-height:1.25; color:var(--cl-fg-1); }
.sect-head p { max-width:660px; margin-left:auto; color:var(--cl-fg-2); font-size:var(--cl-para-l); line-height:1.7; }
.problem-grid { max-width:var(--cl-content-w); gap:20px; }
.problem-card,.problem-card:nth-child(2),.problem-card:nth-child(3) { min-height:270px; padding:40px; transform:none; border:1px solid var(--cl-border); border-radius:var(--cl-radius-l); background:#fff; box-shadow:var(--cl-shadow-card); }
.problem-card .n { width:38px; height:38px; border-radius:50%; color:#fff; background:var(--cl-gradient-blue-h); }
.problem-card h3 { margin-top:42px; color:var(--cl-fg-1); font-family:var(--cl-font-sans); font-size:26px; }
.problem-card p { color:var(--cl-fg-2); font-size:16px; line-height:1.7; }
.duo { max-width:var(--cl-content-w); gap:72px; }
.txt h2 { font-size:clamp(36px,4vw,52px); line-height:1.22; }
.txt p { color:var(--cl-fg-2); font-size:var(--cl-para-l); line-height:1.75; }
.canvas { border:0; border-radius:var(--cl-radius-l); box-shadow:var(--cl-shadow-card-blue); }
.c-blue { background:linear-gradient(145deg,#eef4ff,#dfeaff); }
.c-mint { background:linear-gradient(145deg,#f2f7ff,#e2efff); }
.c-sun { background:linear-gradient(145deg,#f8f9fc,#eaf1fe); }
.ecard,.tc,.pcard,.calc,.upsell,details { border-color:var(--cl-border); border-radius:var(--cl-radius-m); }
.seg3 span.on { background:var(--cl-blue); }

/* Pricing, enterprise and FAQ */
.price-line { color:var(--cl-fg-1); font-family:var(--cl-font-sans); font-weight:var(--cl-w-bold); letter-spacing:-.015em; }
.price-cards { max-width:var(--cl-content-w); gap:20px; align-items:stretch; }
.pcard { min-height:430px; padding:34px; background:#fff; border:1px solid var(--cl-border); border-radius:var(--cl-radius-l); box-shadow:var(--cl-shadow-card); }
.pcard.hl { transform:translateY(-10px); background:#fff; border:2px solid var(--cl-blue); box-shadow:var(--cl-shadow-card-blue); }
.ptag { color:#fff; background:var(--cl-gradient-blue-h); }
.pcard h3 { font-size:22px; }
.pcard .pp { min-height:48px; display:flex; align-items:baseline; flex-wrap:wrap; gap:3px; font-size:34px; }
.pcard .psub { min-height:42px; margin-bottom:22px; }
.pcard ul { min-height:118px; gap:13px; }
.pcard .btn { width:100%; }
.calc { color:var(--cl-fg-1); background:#fff; border:1px solid rgba(80,144,255,.18); border-radius:var(--cl-radius-l); box-shadow:0 24px 64px rgba(40,72,120,.10); padding:34px; }
.calc h3,.calc label,.calc .val,.calc .n { color:var(--cl-fg-1); }
.calc .csub,.calc .note { color:var(--cl-fg-2); }
.calc-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:26px; }
.calc-head .csub { margin-bottom:0; }
.calc-badge { flex-shrink:0; padding:8px 13px; border-radius:var(--cl-radius-full); color:var(--cl-blue); background:var(--cl-blue-bg-2); font-size:12px; font-weight:var(--cl-w-semibold); }
.calc-grid { grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:36px; align-items:stretch; }
.calc-controls { padding:10px 0; }
.calc-controls label { display:flex; justify-content:space-between; align-items:baseline; margin:0 0 8px; }
.calc-controls label + input + label { margin-top:30px; }
.calc input[type=range] { height:6px; }
.calc-result { display:flex; flex-direction:column; align-items:flex-start; min-height:240px; padding:26px; border-radius:24px; background:var(--cl-blue-bg-2); }
.result-label { color:var(--cl-blue); font-size:12px; font-weight:var(--cl-w-bold); text-transform:uppercase; letter-spacing:.08em; }
.calc-result > strong { margin-top:8px; color:var(--cl-fg-1); font-size:18px; }
.result-price { display:flex; align-items:baseline; gap:6px; margin:8px 0 16px; }
.result-price span { color:var(--cl-blue); font-family:var(--cl-font-display); font-size:44px; font-weight:var(--cl-w-bold); letter-spacing:-.03em; }
.result-price small { color:var(--cl-fg-3); font-size:13px; font-weight:var(--cl-w-semibold); }
.result-meta { width:100%; display:flex; flex-direction:column; gap:5px; margin-bottom:22px; color:var(--cl-fg-2); font-size:13px; }
.result-meta b { color:var(--cl-fg-1); }
.calc-result .btn { width:100%; margin-top:auto; justify-content:center; }
.calc > .note { margin:20px 0 0; }
.upsell { background:linear-gradient(135deg,#1f49a3 0%,#5090ff 58%,#80bbff 100%); border-radius:var(--cl-radius-l); box-shadow:var(--cl-shadow-elev); }
.devzone {
  background:
    radial-gradient(720px 420px at 100% 0%,rgba(80,144,255,.20),transparent 68%),
    linear-gradient(145deg,#0b1730 0%,#10264d 56%,#173865 100%);
  border:0;
}
.devzone .sect-head { text-align:center; }
.devzone .sect-eyebrow {
  color:#b8d2ff; background:rgba(255,255,255,.08);
  border:1px solid rgba(184,210,255,.20); box-shadow:none;
}
.devzone h2 { color:#fff; }
.devzone .dv .ic {
  color:#9bc2ff; background:rgba(128,187,255,.10);
  border-color:rgba(155,194,255,.26);
}
.devzone .dv b { color:#fff; }
.devzone .dv span { color:#c5d3e8; }
.devzone .dv a { color:#e3edff !important; text-underline-offset:3px; }
.devzone .code-card { border-color:rgba(155,194,255,.20); box-shadow:0 28px 70px rgba(3,10,25,.34); }
.devzone .btn-primary,.devzone .btn-primary:hover {
  color:#245fc7; background:#fff; border-color:rgba(255,255,255,.85);
  box-shadow:0 12px 30px rgba(3,10,25,.24);
}
.devzone .btn-primary::after { color:#fff; background:var(--cl-blue); }
.faq { max-width:900px; }
.faq details { margin-bottom:12px; background:#fff; border:1px solid var(--cl-border); border-radius:var(--cl-radius-m); box-shadow:var(--cl-shadow-card); }
.faq summary { padding:24px 28px; font-size:17px; color:var(--cl-fg-1); }
.faq-body { padding:0 28px 24px; color:var(--cl-fg-2); }
.final { width:min(var(--cl-content-w),calc(100% - 48px)); margin:40px auto 72px; padding:104px 28px; border:0; border-radius:var(--cl-radius-l); background:radial-gradient(500px 240px at 0% 100%,rgba(80,144,255,.28),transparent 70%),radial-gradient(500px 240px at 100% 100%,rgba(164,156,255,.24),transparent 70%),var(--cl-blue-bg-2); color:var(--cl-fg-1); }
.final h2 { color:var(--cl-fg-1); font-size:clamp(42px,5vw,64px); line-height:1.18; }
.final p { color:var(--cl-fg-2); }
.final .eyebrow { color:var(--cl-blue); }
.final .btn-primary { color:#fff; background:var(--cl-gradient-blue-h); }
footer { color:var(--cl-fg-3); background:#fff; border-top:1px solid var(--cl-border-soft); }

@media (max-width:900px) {
  .top { width:calc(100% - 28px); top:12px; margin-top:12px; }
  .nav-links { display:none; }
  .hero { margin-top:-92px; padding:170px 24px 80px; }
  .hero h1 { font-size:clamp(44px,10vw,62px); }
  .hero .canvas { min-height:460px; padding:56px 28px !important; }
  .cred-wrap,.duo,.dev-grid { grid-template-columns:1fr; }
  .dev-grid { gap:48px; }
  .cred-grid { grid-template-columns:1fr 1fr; }
  .proof-row { grid-template-columns:1fr 1fr; }
  .problem-grid { grid-template-columns:1fr; }
  .sect { padding:96px 28px; }
  .price-cards { grid-template-columns:1fr; }
  .pcard { min-height:auto; }
  .pcard.hl { transform:none; }
  .pcard .psub,.pcard ul { min-height:auto; }
  .calc-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .brand small,.nav-login { display:none; }
  .top { height:60px; padding:0 10px 0 16px; }
  .nav-cta { gap:2px; }
  .nav-cta .btn { min-height:38px; padding-inline:12px; font-size:12px; }
  .nav-cta .btn-primary::after { display:none; }
  .hero { padding:150px 20px 68px; }
  .hero h1 { font-size:43px; line-height:1.18; }
  .hero .lead { font-size:17px; }
  .hero-ctas { width:100%; }
  .hero-ctas .btn { width:100%; justify-content:center; }
  .hero .canvas { min-height:400px; padding:52px 16px 30px !important; }
  .product-visual { border-radius:20px; }
  .product-visual--hero { aspect-ratio:4 / 3; }
  .product-visual--hero img { width:112%; max-width:none; height:100%; object-fit:cover; object-position:center; transform:translateX(-5.4%); }
  .product-visual figcaption { right:10px; bottom:9px; padding:5px 8px; font-size:10px; }
  .hero .chip3 { display:none; }
  .credibility { padding:84px 20px; }
  .cred-grid { grid-template-columns:1fr; }
  .cred-card { min-height:auto; padding:24px; border-radius:24px; }
  .cred-mark { margin-bottom:16px; }
  .proof-row { grid-template-columns:1fr; }
  .proof-row > div { min-height:auto; }
  .sect { padding:84px 20px; }
  .sect-head h2,.txt h2 { font-size:38px; }
  .problem-card { min-height:auto; padding:32px; }
  .calc { padding:24px 20px; }
  .calc-head { flex-direction:column; gap:12px; }
  .calc-result { min-height:220px; padding:22px; }
  .result-price span { font-size:38px; }
  .final { width:calc(100% - 28px); padding:76px 18px; }
}