:root { --ink:#0d0f18; --night:#10121b; --paper:#f4f1eb; --paper-deep:#e9e2d9; --coral:#f05038; --coral-dark:#ca3926; --violet:#403a67; --lime:#c7ff4f; --muted:#72737d; --line:rgba(13,15,24,.14); --radius:18px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,"Noto Sans SC","Noto Sans Thai",sans-serif; line-height:1.55; } a { color:inherit; } .skip-link { position:absolute; left:12px; top:-45px; background:white; padding:8px 12px; z-index:20; } .skip-link:focus { top:12px; }
.site-header { height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 clamp(20px,5vw,76px); border-bottom:1px solid rgba(255,255,255,.12); position:sticky; top:0; z-index:10; background:rgba(13,15,24,.92); color:#fff; backdrop-filter:blur(16px); } .brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-size:1.1rem; font-weight:800; letter-spacing:.08em; } .brand img { width:31px; height:31px; } .nav { display:flex; gap:25px; } .nav a,.footer-links a { font-size:.78rem; text-decoration:none; color:rgba(255,255,255,.74); } .nav a:hover,.footer-links a:hover { color:var(--lime); } .header-actions { display:flex; align-items:center; gap:12px; } .language-picker select { appearance:none; padding:7px 9px; border:1px solid rgba(255,255,255,.32); border-radius:8px; background:transparent; color:#fff; font:500 .75rem "DM Mono",monospace; cursor:pointer; } .language-picker option { color:var(--ink); }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border:0; border-radius:5px; background:var(--coral); color:#fff; font:700 .82rem Manrope,sans-serif; letter-spacing:.01em; text-decoration:none; cursor:pointer; transition:transform .22s,background .22s,box-shadow .22s; } .button:hover { background:var(--coral-dark); transform:translateY(-2px); box-shadow:0 9px 18px rgba(240,80,56,.25); } .button-small { min-height:36px; padding:0 13px; font-size:.7rem; } .text-link { color:var(--ink); font-weight:700; font-size:.87rem; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:4px; } .text-link:hover { color:var(--coral); }
.section { padding:clamp(76px,10vw,142px) clamp(20px,9vw,136px); } .hero { position:relative; min-height:calc(100vh - 82px); display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:clamp(35px,6vw,88px); overflow:hidden; color:white; background:radial-gradient(circle at 83% 15%,rgba(77,70,132,.58),transparent 31%),radial-gradient(circle at 18% 87%,rgba(240,80,56,.22),transparent 29%),var(--night); } .hero::before { content:""; position:absolute; inset:0; opacity:.26; pointer-events:none; background:repeating-linear-gradient(112deg,transparent 0 24px,rgba(255,255,255,.02) 25px 26px); } .hero-copy,.hero-art { position:relative; z-index:1; } .eyebrow { margin:0 0 18px; font:500 .7rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.12em; color:var(--coral); } h1,h2,p { margin-top:0; } h1 { max-width:750px; font-size:clamp(3.3rem,5.75vw,6.35rem); line-height:.96; letter-spacing:-.078em; margin-bottom:29px; } h2 { font-size:clamp(2.2rem,3.55vw,4rem); line-height:1.03; letter-spacing:-.065em; margin-bottom:20px; } .hero-lede,.section-heading>p,.contact-heading>p { max-width:570px; font-size:1rem; color:#b9bac5; } .hero-actions { display:flex; align-items:center; gap:28px; margin-top:37px; } .hero .text-link { color:#fff; } .hero .text-link:hover { color:var(--lime); }
.hero-art { width:min(100%,495px); justify-self:end; margin:28px 0; padding:10px; background:linear-gradient(140deg,rgba(255,255,255,.19),rgba(255,255,255,.015)); box-shadow:17px 22px 0 rgba(240,80,56,.88),0 28px 50px rgba(0,0,0,.35); transform:rotate(2.5deg); } .hero-art::before { content:""; position:absolute; z-index:1; inset:24px -20px auto auto; width:42%; height:2px; background:var(--lime); box-shadow:0 10px 0 rgba(199,255,79,.4); } .hero-art img { display:block; width:100%; aspect-ratio:2/3; object-fit:cover; filter:saturate(.9) contrast(1.06); } .hero-art figcaption { display:flex; justify-content:space-between; gap:16px; padding:11px 4px 0; color:#f5f1eb; font:400 .65rem "DM Mono",monospace; } .hero-art figcaption span:first-child { color:var(--lime); }
.intro-band { padding:28px clamp(20px,9vw,136px); background:var(--coral); color:#fff; font-size:clamp(1.02rem,1.5vw,1.35rem); font-weight:600; letter-spacing:-.027em; }.intro-band p { max-width:930px; margin:0; }
.section-heading { max-width:720px; margin-bottom:55px; }.section-heading>p { color:#5b5c65; }.cards { display:grid; gap:14px; }.three-up { grid-template-columns:repeat(3,1fr); }.card { position:relative; min-height:320px; padding:29px; border-radius:2px; overflow:hidden; background:#dfd8d0; border-top:3px solid var(--ink); display:flex; flex-direction:column; transition:transform .25s,background .25s; }.card:hover { background:#e9e1d9; transform:translateY(-6px); }.card:nth-child(2) { background:#d8d2ef; }.card:nth-child(3) { background:#cfe5c9; }.card::after { content:""; position:absolute; width:170px; height:170px; right:-62px; bottom:-73px; border:1px solid rgba(13,15,24,.26); border-radius:50%; box-shadow:0 0 0 19px rgba(13,15,24,.05),0 0 0 39px rgba(13,15,24,.035); }.card .card-number { color:var(--coral); font:500 .7rem "DM Mono",monospace; }.card h3 { position:relative; z-index:1; margin:67px 0 10px; font-size:1.42rem; letter-spacing:-.045em; }.card p { position:relative; z-index:1; color:#494b52; margin:0; font-size:.9rem; }
.dark-section { position:relative; overflow:hidden; background:var(--night); color:white; }.dark-section::after { content:""; position:absolute; left:0; right:0; bottom:-5px; height:55%; opacity:.3; background:radial-gradient(ellipse at 15% 100%,rgba(105,84,166,.55),transparent 37%),radial-gradient(ellipse at 85% 105%,rgba(240,80,56,.35),transparent 32%); pointer-events:none; }.dark-section .section-heading,.journey { position:relative; z-index:1; }.dark-section .section-heading>p:not(.eyebrow) { color:#b7b8c1; }.journey { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:0; margin:0; list-style:none; }.journey li { min-height:245px; padding:22px; border:1px solid rgba(255,255,255,.16); border-radius:2px; background:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.015)); transition:background .2s,transform .2s; }.journey li:hover { background:rgba(255,255,255,.12); transform:translateY(-5px); }.journey .step { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:var(--lime); color:var(--ink); font:500 .66rem "DM Mono",monospace; }.journey h3 { font-size:1.23rem; margin:50px 0 10px; letter-spacing:-.035em; }.journey p { color:#c2c3cb; margin:0; font-size:.85rem; }
.partner-section { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }.partner-section::before { content:"TAKE / 01"; position:absolute; top:30px; right:8vw; color:rgba(13,15,24,.08); font:700 clamp(3rem,10vw,9rem) "DM Mono",monospace; letter-spacing:-.1em; pointer-events:none; }.partner-copy,.partner-list { position:relative; z-index:1; }.partner-copy p:not(.eyebrow) { max-width:480px; color:#575861; }.partner-list { border-top:1px solid var(--line); }.partner { display:flex; align-items:center; gap:18px; min-height:105px; border-bottom:1px solid var(--line); }.partner-index { color:var(--coral); font:500 .7rem "DM Mono",monospace; }.partner h3 { font-size:1.1rem; margin:0; letter-spacing:-.035em; }.partner p { color:var(--muted); margin:2px 0 0; font-size:.82rem; }
.about { background:var(--paper-deep); }.about-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:90px; }.about-text { font-size:1.1rem; max-width:630px; }.about-text p:last-child { color:#5c6067; }.company-details { margin:0; }.company-details div { padding:15px 0; border-top:1px solid var(--line); }.company-details dt { color:var(--muted); font-size:.74rem; margin-bottom:4px; }.company-details dd { margin:0; font-weight:700; font-size:.9rem; }
.contact-section { position:relative; display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; background:#dce4bd; overflow:hidden; }.contact-section::before { content:""; position:absolute; width:48vw; height:48vw; min-width:520px; min-height:520px; border-radius:50%; left:-25vw; bottom:-34vw; background:radial-gradient(circle,rgba(240,80,56,.65),rgba(240,80,56,0) 66%); }.contact-heading,.partnership-form { position:relative; z-index:1; }.contact-heading>p { color:#4c504d; }.email-link { color:var(--ink); font-size:1.15rem; font-weight:800; text-decoration-thickness:2px; text-underline-offset:5px; }.partnership-form { padding:25px; background:rgba(255,255,255,.42); border:1px solid rgba(13,15,24,.18); box-shadow:10px 11px 0 rgba(13,15,24,.14); display:grid; grid-template-columns:1fr 1fr; gap:17px; }.field { display:flex; flex-direction:column; gap:6px; }.field-wide { grid-column:1/-1; }.field label,.consent { font-size:.75rem; font-weight:700; }.field input,.field select,.field textarea { width:100%; padding:12px 13px; border:1px solid rgba(13,15,24,.28); border-radius:4px; background:rgba(255,255,255,.7); font:400 .88rem Manrope,sans-serif; color:var(--ink); }.field textarea { resize:vertical; }.field input:focus,.field select:focus,.field textarea:focus { outline:2px solid var(--coral); outline-offset:1px; }.consent label { display:flex; align-items:flex-start; gap:9px; font-weight:500; }.consent input { margin-top:3px; accent-color:var(--coral); }.form-status { grid-column:1/-1; min-height:1.4em; font-size:.83rem; font-weight:700; margin:0; }.honeypot { position:absolute; left:-9999px; opacity:0; pointer-events:none; }.turnstile-slot { grid-column:1/-1; min-height:0; }
.site-footer { padding:36px clamp(20px,5vw,76px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; background:var(--night); color:white; }.site-footer .brand img { width:26px; height:26px; }.footer-links { display:flex; gap:20px; }.site-footer p { justify-self:end; margin:0; color:#9ba1ab; font:400 .7rem "DM Mono",monospace; }.cookie-banner { position:fixed; z-index:12; right:18px; bottom:18px; width:min(405px,calc(100vw - 36px)); padding:16px; border:1px solid rgba(255,255,255,.15); border-radius:8px; background:var(--night); color:white; box-shadow:0 12px 35px rgba(0,0,0,.3); }.cookie-banner p { font-size:.78rem; color:#d5d8dd; margin:0 0 13px; }.cookie-banner div { display:flex; align-items:center; justify-content:space-between; gap:16px; }.cookie-banner a { color:white; font-size:.75rem; }.cookie-banner .button { background:var(--lime); color:var(--ink); }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.reveal { animation:rise .65s both; }.reveal:nth-child(2) { animation-delay:.1s; } @keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.legal-page { max-width:920px; padding-top:72px; padding-bottom:110px; }.legal-back { display:inline-block; margin-bottom:60px; }.legal-page h1 { font-size:clamp(3rem,5vw,5.4rem); margin-bottom:12px; }.legal-updated { color:var(--muted); font:400 .78rem "DM Mono",monospace; }.legal-intro { max-width:690px; margin:44px 0 58px; font-size:1.12rem; }.legal-content { max-width:760px; }.legal-content section { padding:0 0 29px; margin-bottom:29px; border-bottom:1px solid var(--line); }.legal-content h2 { font-size:1.35rem; letter-spacing:-.04em; margin-bottom:10px; }.legal-content p { color:#50555d; font-size:.94rem; margin:0; }
@media (max-width:1100px) { .hero { grid-template-columns:1fr; padding-top:72px; }.hero-copy { max-width:760px; }.hero-art { justify-self:center; width:min(88%,500px); margin-top:8px; }.partner-section,.about-grid,.contact-section { grid-template-columns:1fr; gap:45px; }.contact-heading { max-width:620px; }.partner-section::before { right:4vw; }.site-footer { grid-template-columns:1fr; }.footer-links,.site-footer p { justify-self:start; } }
@media (max-width:850px) { .nav { display:none; }.three-up,.journey { grid-template-columns:1fr 1fr; }.journey li { min-height:205px; }.journey h3 { margin-top:38px; } }
@media (max-width:540px) { .site-header { height:68px; padding:0 16px; }.brand { font-size:.95rem; }.brand img { width:27px; height:27px; }.header-actions .button-small { display:none; }.header-actions { gap:0; }.section { padding:68px 20px; }.hero { min-height:auto; }.hero h1 { font-size:clamp(3rem,14vw,4.35rem); letter-spacing:-.09em; }.hero-art { width:calc(100% - 20px); box-shadow:10px 14px 0 var(--coral); }.hero-art figcaption { font-size:.56rem; }.hero-actions { gap:19px; flex-wrap:wrap; }.three-up,.journey,.partnership-form { grid-template-columns:1fr; }.journey li { min-height:180px; }.partner-section::before { top:42px; right:14px; }.field-wide { grid-column:auto; }.partnership-form { padding:17px; box-shadow:6px 7px 0 rgba(13,15,24,.14); }.contact-section { padding-left:20px; padding-right:20px; }.site-footer { padding:28px 20px; }.footer-links { flex-wrap:wrap; }.cookie-banner div { flex-wrap:wrap; }.cookie-banner .button-small { display:inline-flex; }.legal-page { padding-top:55px; } }
html[lang="zh-CN"] .hero h1 { white-space:nowrap; }
@media (max-width:540px) { html[lang="zh-CN"] .hero h1 { font-size:clamp(2.15rem,12vw,4.35rem); } }