/* CSE / CSP — "loopika-style" theme, light + dark (auto via prefers-color-scheme, or data-theme on ). One stylesheet, no framework. */ :root{ color-scheme: light; --bg:#FFFFFF; --surface:#FFFFFF; --soft:#F5F6F8; --ink:#0D1117; --navy:#0F172A; --text:#1E293B; --muted:#5E6B80; --faint:#94A3B8; --line:rgba(15,23,42,.08); --line-2:rgba(15,23,42,.13); --indigo:#6434FC; --blue:#2B64FC; --cyan:#06B6D4; --violet:#8B5CF6; --sky:#3CBFFE; --indigo-50:#F0EEFF; --indigo-100:#E4E0FF; --blue-50:#EEF4FF; --emerald:#059669; --emerald-50:#E8FBF3; --grad:linear-gradient(135deg,#6434FC 0%,#2B64FC 35%,#06B6D4 70%,#6434FC 100%); --grad-btn:linear-gradient(135deg,#6434FC 0%,#3CBFFE 100%); --shadow-sm:0 1px 2px rgba(15,23,42,.05); --shadow:0 1px 2px rgba(15,23,42,.04),0 16px 36px -16px rgba(15,23,42,.16); --shadow-lg:0 30px 70px -30px rgba(30,41,110,.30); --r:24px; --r-lg:30px; --ease:cubic-bezier(.22,1,.36,1); --font:"Noto Sans Thai","Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; --container:1200px; --hdr-h:80px; --bg-rgb:255 255 255; --heading:#0F172A; --text-2:#334155; --text-3:#475569; --glass:rgba(255,255,255,.78); --glass-strong:rgba(255,255,255,.92); --glass-line:rgba(255,255,255,.9); --btn-dark-bg:#0F172A; --btn-dark-fg:#fff; --chip-bg:#0F172A; --hover-tint:rgba(15,23,42,.04); --cyan-50:#E6FAFD; --cyan-ink:#0891B2; --line-50:#E9F9EE; --solutions-mid:#FFFFFF; --tint-grad:linear-gradient(135deg,#F4F1FF,#EEF6FF); --sys-bg:radial-gradient(circle at 50% 42%,#FFFFFF 0%,#F2F0FF 45%,#E9F3FF 100%); --contact-bg:linear-gradient(180deg,#FFFFFF,#FBFBFF); --cta-bg:radial-gradient(120% 140% at 100% 0%,#EAF2FF 0%,#F3EEFF 45%,#FFFFFF 80%); } @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark; --bg:#000000; --bg-rgb:0 0 0; --surface:#0E0E10; --soft:#161618; --ink:#EDEDEF; --heading:#F5F5F7; --text:#D4D4D8; --text-2:#D4D4D8; --text-3:#A1A1AA; --muted:#A1A1AA; --faint:#8A8A93; --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.16); --indigo:#9A80FF; --blue:#6B97FF; --cyan:#22D3EE; --indigo-50:rgba(124,92,255,.15); --indigo-100:rgba(124,92,255,.32); --blue-50:rgba(59,130,246,.15); --emerald:#34D399; --emerald-50:rgba(52,211,153,.13); --grad:linear-gradient(135deg,#9A80FF 0%,#5B8CFF 35%,#22D3EE 70%,#9A80FF 100%); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -18px rgba(0,0,0,.65); --shadow-lg:0 30px 70px -30px rgba(0,0,0,.75); --glass:rgba(14,14,16,.74); --glass-strong:rgba(14,14,16,.92); --glass-line:rgba(255,255,255,.1); --btn-dark-bg:#F5F5F7; --btn-dark-fg:#000000; --chip-bg:#1A1A1D; --hover-tint:rgba(255,255,255,.06); --cyan-50:rgba(34,211,238,.13); --cyan-ink:#67E8F9; --line-50:rgba(6,199,85,.15); --solutions-mid:#000000; --tint-grad:linear-gradient(135deg,rgba(124,92,255,.16),rgba(59,130,246,.1)); --sys-bg:radial-gradient(circle at 50% 42%,#1A1533 0%,#111114 48%,#0B0B0D 100%); --contact-bg:linear-gradient(180deg,#111113,#0A0A0B); --cta-bg:radial-gradient(120% 140% at 100% 0%,rgba(59,130,246,.22) 0%,rgba(124,92,255,.16) 45%,#0E0E10 80%);}} :root[data-theme="dark"]{color-scheme:dark; --bg:#000000; --bg-rgb:0 0 0; --surface:#0E0E10; --soft:#161618; --ink:#EDEDEF; --heading:#F5F5F7; --text:#D4D4D8; --text-2:#D4D4D8; --text-3:#A1A1AA; --muted:#A1A1AA; --faint:#8A8A93; --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.16); --indigo:#9A80FF; --blue:#6B97FF; --cyan:#22D3EE; --indigo-50:rgba(124,92,255,.15); --indigo-100:rgba(124,92,255,.32); --blue-50:rgba(59,130,246,.15); --emerald:#34D399; --emerald-50:rgba(52,211,153,.13); --grad:linear-gradient(135deg,#9A80FF 0%,#5B8CFF 35%,#22D3EE 70%,#9A80FF 100%); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -18px rgba(0,0,0,.65); --shadow-lg:0 30px 70px -30px rgba(0,0,0,.75); --glass:rgba(14,14,16,.74); --glass-strong:rgba(14,14,16,.92); --glass-line:rgba(255,255,255,.1); --btn-dark-bg:#F5F5F7; --btn-dark-fg:#000000; --chip-bg:#1A1A1D; --hover-tint:rgba(255,255,255,.06); --cyan-50:rgba(34,211,238,.13); --cyan-ink:#67E8F9; --line-50:rgba(6,199,85,.15); --solutions-mid:#000000; --tint-grad:linear-gradient(135deg,rgba(124,92,255,.16),rgba(59,130,246,.1)); --sys-bg:radial-gradient(circle at 50% 42%,#1A1533 0%,#111114 48%,#0B0B0D 100%); --contact-bg:linear-gradient(180deg,#111113,#0A0A0B); --cta-bg:radial-gradient(120% 140% at 100% 0%,rgba(59,130,246,.22) 0%,rgba(124,92,255,.16) 45%,#0E0E10 80%);} *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 12px);-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer} h1,h2,h3,p,figure,address,ul{margin:0} address{font-style:normal} [hidden]{display:none!important} .cse-site[data-cse-lang="th"] .cse-lang-en,.cse-site[data-cse-lang="en"] .cse-lang-th{display:none!important} .skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:12px;background:var(--navy);color:#fff;font-size:14px;transition:top .2s} .skip-link:focus{top:12px} .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} :focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:8px} .container{width:min(100% - 48px,var(--container));margin-inline:auto} .section{position:relative;padding-block:clamp(84px,10vw,132px)} .section-head{max-width:860px;margin:0 auto 56px;text-align:center} .section-head .lead{margin-inline:auto} /* ---------- type ---------- */ .eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--indigo);font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:18px} .eyebrow::before,.eyebrow::after{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,rgba(100,52,252,.55))} .eyebrow::after{transform:scaleX(-1)} .h-display{font-size:clamp(30px,4.3vw,52px);font-weight:800;line-height:1.28;letter-spacing:-.022em;color:var(--heading);text-wrap:balance} .h-display .line{display:block} .grad{background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gradShift 9s ease-in-out infinite} @keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .lead{max-width:720px;margin-top:20px;color:var(--muted);font-size:clamp(16px,1.35vw,18px);line-height:1.8;text-wrap:pretty} .mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.04em} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 30px;border:0;border-radius:999px;font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-dark{background:var(--btn-dark-bg);color:var(--btn-dark-fg);box-shadow:0 10px 25px -6px rgba(15,23,42,.35)} .btn-dark:hover{box-shadow:0 16px 32px -8px rgba(15,23,42,.42)} .btn-grad{background:var(--grad-btn);color:#fff;box-shadow:0 10px 26px -6px rgba(100,52,252,.40)} .btn-grad:hover{box-shadow:0 16px 34px -8px rgba(100,52,252,.50)} .btn-ghost{background:var(--surface);color:var(--heading);border:1px solid var(--line-2);box-shadow:var(--shadow-sm)} .btn-sm{min-height:40px;padding:9px 18px;font-size:14px} .btn .arrow{transition:transform .25s var(--ease)} .btn:hover .arrow{transform:translateX(3px)} .checks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin-top:22px;color:var(--muted);font-size:14px} .checks li{display:inline-flex;align-items:center;gap:8px;list-style:none} .checks li::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--emerald-50);color:var(--emerald);font-size:11px;font-weight:800} .checks{padding:0} /* ---------- nav ---------- */ /* header: full-width dark bar with the CSE / CSP wordmark lockup (same in light and dark themes) */ .site-nav{position:fixed;inset:0 0 auto;z-index:50;background:linear-gradient(180deg,#16171A,#0B0C0E);border-bottom:1px solid rgba(255,255,255,.07);color:#fff;transition:box-shadow .3s} .has-scrolled .site-nav{box-shadow:0 14px 34px -20px rgba(0,0,0,.6)} .nav-inner{display:flex;align-items:center;gap:28px;width:min(100% - 48px,1280px);min-height:var(--hdr-h);margin-inline:auto} .brand-lockup{display:inline-flex;align-items:center;gap:18px;flex:0 0 auto;color:#fff} .brand-name{font-family:"Helvetica Neue",Helvetica,Arial,var(--font);font-size:38px;font-weight:700;line-height:1;letter-spacing:-.06em} .brand-detail{padding-left:18px;border-left:1px solid rgba(255,255,255,.24);color:#C3C6CB;font-size:10.5px;font-weight:700;letter-spacing:.17em;line-height:1.7;white-space:nowrap} .nav-links{display:flex;align-items:center;gap:4px;margin-inline:auto} .nav-links a{position:relative;padding:9px 14px;border-radius:999px;color:#C9CCD2;font-size:15px;font-weight:500;transition:color .2s,background .2s} .nav-links a:hover{color:#fff;background:rgba(255,255,255,.07)} .nav-links a::after{content:"";position:absolute;left:50%;bottom:3px;width:18px;height:2px;border-radius:2px;background:var(--grad-btn);transform:translateX(-50%) scaleX(0);transition:transform .3s var(--ease)} .nav-links a.is-current{color:#fff;font-weight:600} .nav-links a.is-current::after{transform:translateX(-50%) scaleX(1)} .nav-actions{display:flex;align-items:center;gap:8px;margin-left:auto} .nav-links+.nav-actions{margin-left:0} .icon-btn{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text-2);font-size:13px;font-weight:700;box-shadow:var(--shadow-sm);transition:border-color .2s,transform .2s} .icon-btn:hover{border-color:rgba(100,52,252,.35);transform:translateY(-1px)} .site-nav .icon-btn{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#E6E8EC;box-shadow:none} .site-nav .icon-btn:hover{border-color:rgba(255,255,255,.4);color:#fff} .site-nav .btn-dark{background:#fff;color:#0B0C0E;box-shadow:none} .site-nav .btn-dark:hover{background:#ECEDEF;box-shadow:0 10px 24px -12px rgba(255,255,255,.35)} .menu-toggle{display:none} .theme-menu{position:relative} .theme-toggle svg{width:18px;height:18px} .theme-toggle .ti{display:none} .theme-toggle[data-mode="auto"] .ti-auto,.theme-toggle[data-mode="light"] .ti-light,.theme-toggle[data-mode="dark"] .ti-dark{display:block} .theme-pop{position:absolute;top:calc(100% + 10px);right:-6px;z-index:60;display:grid;gap:2px;min-width:228px;padding:6px;border:1px solid var(--line-2);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-lg)} .theme-pop button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:none;color:var(--text-2);font-size:14px;font-weight:600;line-height:1.3;text-align:left} .theme-pop button:hover{background:var(--hover-tint);color:var(--heading)} .theme-pop button svg{flex:0 0 auto;width:17px;height:17px} .theme-pop button[aria-checked="true"]{color:var(--heading);background:var(--indigo-50)} .theme-pop button[aria-checked="true"]::after{content:"✓";margin-left:auto;color:var(--indigo);font-weight:800} .theme-pop small{display:block;color:var(--faint);font-size:11.5px;font-weight:500} /* dark-only touches: dark chips get a hairline */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip-dark{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 24px -10px rgba(0,0,0,.6)}:root:not([data-theme="light"]) .btn-dark:hover{box-shadow:0 16px 32px -8px rgba(0,0,0,.6)}} :root[data-theme="dark"] .chip-dark{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 24px -10px rgba(0,0,0,.6)}:root[data-theme="dark"] .btn-dark:hover{box-shadow:0 16px 32px -8px rgba(0,0,0,.6)} .menu-lines,.menu-lines::before,.menu-lines::after{display:block;width:16px;height:1.6px;border-radius:2px;background:currentColor} .menu-lines{position:relative} .menu-lines::before,.menu-lines::after{content:"";position:absolute;left:0} .menu-lines::before{top:-5px}.menu-lines::after{top:5px} .mobile-menu{position:fixed;z-index:49;top:calc(var(--hdr-h) + 8px);left:14px;right:14px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:#111316;box-shadow:0 30px 60px -24px rgba(0,0,0,.7)} .mobile-menu a{display:flex;align-items:center;gap:14px;padding:14px 14px;border-radius:16px;color:#F3F4F6;font-size:18px;font-weight:600} .mobile-menu a:hover{background:rgba(255,255,255,.06)} .mobile-menu a small{min-width:26px;color:#A48DFF;font-size:12px;font-weight:700} .mobile-menu .mobile-cta{margin-top:8px;padding:14px;border-radius:18px;background:var(--grad-btn);color:#fff;justify-content:center} .reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:var(--grad-btn)} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;padding:clamp(128px,15vw,172px) 0 clamp(72px,8vw,110px);isolation:isolate} .hero-mesh{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none} .hero::after{content:"";position:absolute;inset:auto 0 0;height:180px;z-index:-1;background:linear-gradient(180deg,rgb(var(--bg-rgb) / 0),var(--bg))} .hero-inner{position:relative;max-width:1000px;margin:0 auto;padding-inline:24px;text-align:center} .hero-inner::before{content:"";position:absolute;z-index:-1;left:50%;top:44%;width:min(1000px,120%);height:88%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgb(var(--bg-rgb) / .94),rgb(var(--bg-rgb) / .72) 55%,rgb(var(--bg-rgb) / 0));pointer-events:none} .hero h1{font-size:clamp(38px,6.3vw,78px);font-weight:800;line-height:1.24;letter-spacing:-.028em;color:var(--heading);text-wrap:balance} .hero h1 .line{display:block} .hero .lead{margin:24px auto 0;max-width:760px;font-size:clamp(16px,1.45vw,19px);color:var(--text-3)} .hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:36px} .hero-ctas .btn{min-height:56px;padding-inline:34px;font-size:16px} .contact-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px} .chip-dark{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:8px 20px 8px 14px;border-radius:14px;background:var(--chip-bg);color:#fff;box-shadow:0 10px 24px -10px rgba(15,23,42,.5);transition:transform .25s var(--ease)} .chip-dark:hover{transform:translateY(-2px)} .chip-dark .ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.12);font-size:11px;font-weight:800;letter-spacing:.02em} .chip-dark span{display:flex;flex-direction:column;line-height:1.15;text-align:left} .chip-dark small{font-size:10.5px;color:rgba(255,255,255,.62)} .chip-dark b{font-size:15px;font-weight:600} .float-card{position:absolute;z-index:1;display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--glass-line);border-radius:18px;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 40px -18px rgba(30,41,110,.30),0 0 0 1px rgba(15,23,42,.04);text-align:left;font-size:13px;line-height:1.35;color:var(--text);animation:floaty 7s ease-in-out infinite} .float-card b{display:block;font-size:13.5px;color:var(--heading)} .float-card small{display:block;color:var(--muted);font-size:12px} .float-card .dot{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--indigo-50);color:var(--indigo);font-size:12px;font-weight:800} .float-card .dot.ok{background:var(--emerald-50);color:var(--emerald)} .float-card .dot.line{background:var(--line-50);color:#06C755} .fc-1{top:18%;left:max(24px,calc(50% - 640px));animation-delay:-1s} .fc-2{top:44%;right:max(24px,calc(50% - 650px));animation-delay:-3s} .fc-3{top:68%;left:max(40px,calc(50% - 600px));animation-delay:-5s} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .hero-replay{position:absolute;z-index:3;top:clamp(98px,11vw,126px);right:max(20px,calc(50% - 640px));display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 14px 6px 10px;border:1px solid var(--glass-line);border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 22px -12px rgba(30,41,110,.35),0 0 0 1px rgba(15,23,42,.05);color:var(--muted);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:color .2s,background .2s,opacity .2s} .hero-replay i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--indigo-50);color:var(--indigo);font-style:normal;font-size:13px} .hero-replay:hover{color:var(--heading);background:var(--surface)} .hero-replay:disabled{opacity:.45;cursor:default} .hero:not(.has-galaxy) .hero-replay{display:none} .hero.has-galaxy .hero-inner::before{background:radial-gradient(closest-side,rgb(var(--bg-rgb) / .66),rgb(var(--bg-rgb) / .42) 55%,rgb(var(--bg-rgb) / 0))} @media (max-width:767px){.hero-replay{display:none}} /* opening: text rises in while the particles gather; cards land once the galaxy has formed */ html:not(.motion-paused) .hero-inner>*{animation:hero-in .9s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(.2s + var(--i,0) * .08s)} html:not(.motion-paused) .hero.intro-replay .hero-inner>*{animation-name:hero-in-2} .hero-inner>:nth-child(2){--i:1}.hero-inner>:nth-child(3){--i:2}.hero-inner>:nth-child(4){--i:3}.hero-inner>:nth-child(5){--i:4}.hero-inner>:nth-child(6){--i:5} html:not(.motion-paused) .float-card{animation:card-in .8s cubic-bezier(.22,1,.36,1) both,floaty 7s ease-in-out infinite} html:not(.motion-paused) .fc-1{animation-delay:3.1s,-1s} html:not(.motion-paused) .fc-2{animation-delay:3.3s,-3s} html:not(.motion-paused) .fc-3{animation-delay:3.5s,-5s} html:not(.motion-paused) .hero-replay{animation:card-in .6s ease both;animation-delay:3.6s} @keyframes hero-in{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}} @keyframes hero-in-2{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}} @keyframes card-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}} .hero-shot{position:relative;max-width:1120px;margin:clamp(56px,7vw,84px) auto 0;padding:12px;border:1px solid var(--glass-line);border-radius:var(--r-lg);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow-lg),0 0 0 1px rgba(15,23,42,.04)} .shot-bar{display:flex;align-items:center;gap:7px;padding:4px 8px 12px} .shot-bar i{width:10px;height:10px;border-radius:50%;background:#E2E8F0} .shot-bar i:nth-child(1){background:#FCA5A5}.shot-bar i:nth-child(2){background:#FCD34D}.shot-bar i:nth-child(3){background:#86EFAC} .shot-bar span{margin-left:10px;padding:4px 14px;border-radius:999px;background:var(--soft);border:1px solid var(--line);color:var(--faint);font-size:12px} .shot-media{position:relative;overflow:hidden;border-radius:20px;aspect-ratio:16/8} .shot-media img{width:100%;height:100%;object-fit:cover} .shot-tag{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;background:var(--glass-strong);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13.5px;font-weight:600;color:var(--heading);box-shadow:var(--shadow)} .shot-tag i{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 4px rgba(5,150,105,.15)} /* ---------- marquee ---------- */ .trust{padding-block:clamp(64px,8vw,96px) clamp(40px,6vw,72px)} .marquee-label{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 16px;color:var(--faint);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase} .marquee{position:relative;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee+.marquee-label{margin-top:34px} .marquee-track{display:flex;flex:0 0 auto;gap:16px;padding:8px 8px 8px 0;animation:marquee 46s linear infinite} .marquee.reverse .marquee-track{animation-direction:reverse;animation-duration:40s} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes marquee{to{transform:translateX(-100%)}} .logo-card{display:flex;align-items:center;gap:14px;min-width:230px;padding:14px 20px 14px 14px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm)} .logo-card .mk{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--blue-50);color:var(--blue);font-size:13px;font-weight:800;letter-spacing:.02em} .logo-card:nth-child(3n+2) .mk{background:var(--indigo-50);color:var(--indigo)} .logo-card:nth-child(3n) .mk{background:var(--cyan-50);color:var(--cyan-ink)} .logo-card b{display:block;color:var(--heading);font-size:15px;font-weight:700;letter-spacing:.01em} .logo-card small{display:block;color:var(--muted);font-size:12.5px} /* ---------- cards / bento ---------- */ .card{position:relative;padding:clamp(24px,3vw,34px);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)} .bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .span-2{grid-column:span 2} .icon-sq{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--indigo-50);color:var(--indigo);border:1px solid var(--indigo-100);font-size:14px;font-weight:800} .icon-sq svg{width:22px;height:22px} .card h3{margin-top:18px;color:var(--heading);font-size:clamp(20px,1.9vw,24px);font-weight:700;line-height:1.4;letter-spacing:-.012em} .card p{margin-top:10px;color:var(--muted);font-size:15.5px;line-height:1.75} .card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px} .pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap} .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .pill-green{background:var(--emerald-50);color:var(--emerald);border:1px solid rgba(5,150,105,.18)} .pill-violet{background:var(--indigo-50);color:var(--indigo);border:1px solid var(--indigo-100)} .pill-blue{background:var(--blue-50);color:var(--blue);border:1px solid rgba(43,100,252,.16)} .stat-card{display:flex;flex-direction:column;justify-content:center;text-align:center} .stat-num{display:block;font-size:clamp(56px,6.4vw,84px);font-weight:800;line-height:1;letter-spacing:-.04em} .stat-card .stat-label{margin-top:12px;color:var(--heading);font-size:16px;font-weight:600} .stat-card small{display:block;margin-top:6px;color:var(--muted);font-size:13px} .stat-steps{justify-content:flex-start} .step-mini{display:grid;gap:8px;margin:22px 0 0;padding:0;list-style:none;text-align:left} .step-mini li{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--soft);color:var(--heading);font-size:14px;font-weight:600;line-height:1.4} .step-mini i{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--indigo-50);color:var(--indigo);font-size:11px;font-style:normal;font-weight:800} .mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px} .mini{padding:16px 16px 15px;border:1px solid var(--line);border-radius:16px;background:var(--soft)} .mini b{display:block;color:var(--heading);font-size:14.5px;font-weight:700} .mini p{margin-top:4px;font-size:13.5px;line-height:1.6} .mini.hl{background:var(--tint-grad);border-color:var(--indigo-100)} .card-media{overflow:hidden;margin:22px calc(-1*clamp(24px,3vw,34px)) calc(-1*clamp(24px,3vw,34px));border-radius:0 0 var(--r) var(--r);aspect-ratio:16/8} .card-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .card:hover .card-media img{transform:scale(1.03)} .split{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;align-items:stretch} .photo-card{position:relative;overflow:hidden;min-height:420px;padding:0;border-radius:var(--r)} .photo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .photo-card .shot-tag{bottom:20px;left:20px} .num-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px;padding:0} .num-list li{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--soft);list-style:none;color:var(--heading);font-size:14.5px;font-weight:600;line-height:1.45} .num-list li b{flex:0 0 auto;font-size:13px;font-weight:800} /* ---------- solutions (tabs) ---------- */ .solutions{background:linear-gradient(180deg,var(--bg),var(--solutions-mid) 40%,var(--bg))} .tab-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1080px;margin:0 auto 26px} .tab-list button{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:7px 20px 7px 7px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text-2);font-size:14.5px;font-weight:600;line-height:1.35;text-align:left;box-shadow:var(--shadow-sm);transition:border-color .25s,box-shadow .25s,transform .25s var(--ease),color .25s} .tab-list button:hover{transform:translateY(-2px);border-color:rgba(100,52,252,.25)} .tab-list button small{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--soft);border:1px solid var(--line);color:var(--faint);font-size:12px;font-weight:800;transition:all .25s} .tab-list button[aria-selected="true"]{color:var(--heading);border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad-btn) border-box;border:1.5px solid transparent;box-shadow:0 14px 30px -16px rgba(100,52,252,.45)} .tab-list button[aria-selected="true"] small{background:var(--grad-btn);border-color:transparent;color:#fff} .tab-panel{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(22px,3vw,40px);align-items:stretch} .tab-panel .kicker{color:var(--indigo);font-size:12.5px;font-weight:700;letter-spacing:.12em} .tab-panel h3{margin-top:12px;font-size:clamp(26px,3vw,38px);font-weight:800;line-height:1.25;letter-spacing:-.02em;color:var(--heading)} .tab-panel .desc{margin-top:14px;color:var(--muted);font-size:16.5px;line-height:1.8} .points{display:grid;gap:10px;margin-top:24px} .points div{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--line);border-radius:14px;background:var(--soft);color:var(--heading);font-size:15px;font-weight:500} .points b{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--emerald-50);color:var(--emerald);font-size:12px} .sys-visual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:320px;overflow:hidden;border-radius:20px;background:var(--sys-bg);border:1px solid var(--indigo-100);text-align:center} .sys-visual::before,.sys-visual::after{content:"";position:absolute;left:50%;top:44%;border-radius:50%;border:1px dashed rgba(100,52,252,.28);transform:translate(-50%,-50%);animation:spin 40s linear infinite} .sys-visual::before{width:240px;height:240px} .sys-visual::after{width:340px;height:340px;border-style:solid;border-color:rgba(43,100,252,.14);animation-duration:70s;animation-direction:reverse} @keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}} .sys-id{position:absolute;top:16px;left:18px;color:var(--faint);font-size:12px} .sys-code{position:absolute;top:16px;right:18px} .sys-visual strong{position:relative;font-size:clamp(46px,5.4vw,74px);font-weight:800;line-height:1;letter-spacing:-.03em} .sys-visual p{position:relative;max-width:240px;margin-top:14px;color:var(--muted);font-size:14px;line-height:1.55} /* ---------- steps + stats ---------- */ .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .step{display:flex;flex-direction:column;gap:10px;padding:26px 26px 24px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s} .step:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .step-top{display:flex;align-items:center;justify-content:space-between} .step-num{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.03em} .step h3{margin-top:6px;color:var(--heading);font-size:19px;font-weight:700;line-height:1.4} .step p{color:var(--muted);font-size:15px;line-height:1.7} .stats-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:26px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);overflow:hidden} .stats-band>div{padding:30px 24px;text-align:center} .stats-band>div+div{border-left:1px solid var(--line)} .stats-band strong{display:block;font-size:clamp(40px,4.4vw,58px);font-weight:800;line-height:1;letter-spacing:-.04em} .stats-band b{display:block;margin-top:12px;color:var(--heading);font-size:15px;font-weight:700} .stats-band small{display:block;margin-top:4px;color:var(--muted);font-size:13px;line-height:1.5} /* ---------- projects ---------- */ .projects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .project{display:flex;flex-direction:column;overflow:hidden;padding:0} .project-media{position:relative;aspect-ratio:4/3;overflow:hidden} .project-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .project:hover .project-media img{transform:scale(1.04)} .project-media .n{position:absolute;top:14px;left:14px;padding:6px 11px;border-radius:10px;background:var(--glass-strong);color:var(--heading);font-size:12px;font-weight:800} .project-body{display:flex;flex:1;flex-direction:column;padding:24px 24px 22px} .project-body .pill{align-self:flex-start} .project-body h3{margin-top:14px;font-size:20px} .project-body p{flex:1} .project-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)} .project-meta small{display:block;color:var(--faint);font-size:12px} .project-meta b{display:block;color:var(--heading);font-size:14px} .project-meta i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--soft);border:1px solid var(--line);font-style:normal;color:var(--indigo)} /* ---------- contact / LINE ---------- */ .contact-card{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(26px,4vw,52px);padding:clamp(26px,4vw,48px);border-radius:var(--r-lg);background:var(--contact-bg);box-shadow:var(--shadow-lg);border:1px solid var(--line)} .contact-card h2{font-size:clamp(28px,3.4vw,42px)} .line-cta{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:30px} .qr-card{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:10px;padding:16px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow);transition:transform .3s var(--ease)} .qr-card:hover{transform:translateY(-3px)} .qr-card img{width:176px;height:176px;image-rendering:pixelated} .qr-card span{color:#0F172A;font-size:12.5px;font-weight:700;letter-spacing:.02em} .line-copy{flex:1 1 260px;min-width:230px} .line-copy .lead{margin-top:0;font-size:15.5px} .channels{display:grid;gap:10px;margin-top:16px} .channel{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--line);border-radius:16px;background:var(--soft);transition:border-color .25s,background .25s,transform .25s var(--ease)} .channel:hover{border-color:rgba(100,52,252,.3);background:var(--surface);transform:translateX(3px)} .channel b{min-width:54px;color:var(--heading);font-size:13.5px;font-weight:800} .channel span{color:var(--text-2);font-size:15px;overflow-wrap:anywhere} .channel.is-line b{color:#06C755} .info-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start} .info-tile{display:flex;flex-direction:column;gap:8px;min-height:132px;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),border-color .25s} a.info-tile:hover{transform:translateY(-2px);border-color:rgba(100,52,252,.3)} .info-tile .ti{color:var(--indigo);font-size:11px;font-weight:800;letter-spacing:.1em} .info-tile small{color:var(--muted);font-size:12.5px} .info-tile b{color:var(--heading);font-size:15.5px;font-weight:700;line-height:1.5;overflow-wrap:anywhere} .info-tile.wide{grid-column:1/-1} /* ---------- footer ---------- */ /* footer: black with the big wordmark + company name (same in light and dark themes) */ .site-footer{margin-top:clamp(40px,6vw,80px);background:#000;border-top:1px solid rgba(255,255,255,.08);color:#fff} .footer-main{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding-block:60px 44px} .footer-wordmark{display:block;font-family:"Helvetica Neue",Helvetica,Arial,var(--font);font-size:clamp(46px,5vw,64px);font-weight:700;line-height:1;letter-spacing:-.06em;color:#fff} .footer-main .footer-company{margin-top:20px;color:#C4C7CC;font-size:17px;font-weight:500} .footer-main p{margin-top:14px;max-width:360px;color:#8D929A;font-size:14.5px;line-height:1.75} .footer-col h4{margin:0 0 14px;color:#fff;font-size:14px;font-weight:700} .footer-col>a,.footer-col>span{display:block;padding:5px 0;color:#A4A9B1;font-size:14.5px;transition:color .2s} .footer-col a:hover{color:#fff} .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-block:18px 26px;border-top:1px solid rgba(255,255,255,.08);color:#80868F;font-size:13px} /* ---------- CSP ---------- */ .pathways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px} .product{display:flex;flex-direction:column;overflow:hidden;padding:0} .product-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--soft)} .product-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .product:hover .product-media img{transform:scale(1.04)} .product-media .code{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:12px;background:var(--glass-strong);color:var(--heading);font-size:12px;font-weight:700;box-shadow:var(--shadow-sm)} .product-media .code i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--grad-btn);color:#fff;font-style:normal;font-size:10.5px;font-weight:800} .product-body{padding:22px 24px 24px} .product-body .kicker{color:var(--indigo);font-size:11.5px;font-weight:700;letter-spacing:.12em} .product-body h3{margin-top:10px;font-size:19.5px} .product-body ul{margin-top:14px;padding:0} .product-body li{position:relative;padding:6px 0 6px 22px;list-style:none;color:var(--text-3);font-size:14.5px;line-height:1.6;border-top:1px dashed var(--line)} .product-body li:first-child{border-top:0} .product-body li::before{content:"";position:absolute;left:4px;top:15px;width:7px;height:7px;border-radius:2px;background:var(--grad-btn)} .enquiry{overflow:hidden;margin-top:28px;padding:0;border-radius:var(--r-lg)} .enquiry-media{aspect-ratio:21/7;overflow:hidden} .enquiry-media img{width:100%;height:100%;object-fit:cover} .enquiry-body{padding:clamp(24px,4vw,44px)} .enquiry-body h3{margin-top:0;font-size:clamp(24px,2.6vw,32px);font-weight:800} .enquiry-body .line-cta{margin-top:26px} .enquiry-body .dl{margin-top:22px} .product-cta{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;background:var(--cta-bg);border-color:var(--indigo-100)} .product-cta h3{font-size:clamp(24px,2.4vw,30px);font-weight:800} /* ---------- reveal ---------- */ .js-ready .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)} .js-ready .reveal.is-visible{opacity:1;transform:none} .motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition-duration:.01ms!important} .js-ready .reveal{opacity:1;transform:none} } /* ---------- responsive ---------- */ @media (max-width:1180px){ .fc-3{display:none} .nav-inner{gap:18px} .nav-links a{padding-inline:10px} } @media (max-width:1100px){ .nav-inner{gap:14px} .nav-links a{padding-inline:8px;font-size:14.5px} } @media (max-width:1023px){ .nav-links,.nav-actions .btn{display:none} .nav-links+.nav-actions{margin-left:auto} .menu-toggle{display:grid} .float-card{display:none} .bento,.projects-grid,.product-grid,.pathways,.steps{grid-template-columns:repeat(2,minmax(0,1fr))} .span-2{grid-column:1/-1} .product-cta{grid-column:auto} .tab-panel,.split,.contact-card{grid-template-columns:1fr} .stats-band{grid-template-columns:repeat(2,minmax(0,1fr))} .stats-band>div:nth-child(3){border-left:0} .stats-band>div:nth-child(n+3){border-top:1px solid var(--line)} .footer-main{grid-template-columns:1fr 1fr} .footer-main>div:first-child{grid-column:1/-1} } @media (max-width:767px){ body{font-size:15.5px} .container{width:min(100% - 32px,var(--container))} :root{--hdr-h:68px} .nav-inner{gap:10px;width:min(100% - 32px,1280px)} .brand-lockup{gap:12px} .brand-name{font-size:30px} .brand-detail{padding-left:12px;font-size:9px;letter-spacing:.14em} .hero{padding-top:118px} .eyebrow{text-align:center;justify-content:center} .eyebrow::before,.eyebrow::after{display:none} .hero-inner{padding-inline:18px} .hero-ctas .btn{width:100%} .chip-dark{flex:1 1 100%;justify-content:flex-start} .shot-media{aspect-ratio:4/3} .bento,.projects-grid,.product-grid,.pathways,.steps,.tab-list,.info-tiles,.mini-grid,.num-list{grid-template-columns:minmax(0,1fr)} .theme-menu{position:static} .theme-pop{position:fixed;top:calc(var(--hdr-h) + 8px);left:14px;right:14px;min-width:0} .section-head{margin-bottom:40px} .tab-list button{flex:1 1 100%;min-height:54px} .sys-visual{min-height:250px} .stats-band{grid-template-columns:1fr 1fr} .stats-band>div{padding:22px 14px} .photo-card{min-height:300px} .qr-card{margin-inline:auto} .enquiry-media{aspect-ratio:16/9} .footer-main{grid-template-columns:1fr} .footer-bottom{flex-direction:column} } @media (max-width:420px){ .nav-actions{gap:6px} .icon-btn{width:36px;height:36px} .brand-lockup{gap:10px} .brand-detail{padding-left:10px;font-size:8.5px;letter-spacing:.12em} } @media (max-width:359px){ .brand-detail{display:none} } @media (max-width:380px){ .nav-inner{gap:8px} .nav-actions{gap:5px} .icon-btn{width:34px;height:34px} .brand-detail{letter-spacing:.1em} .hero h1{font-size:34px} .stats-band{grid-template-columns:1fr} .stats-band>div+div{border-left:0;border-top:1px solid var(--line)} }