/* TobSar site: shared system. Tokens, fonts and type come from the hero film
   (motion-reel-kit/videos/tobsar-hero-120s/docs/style_guide.md). Page-only styles stay in each page. */
@font-face{font-family:Display;src:url(fonts/MiSansLatin-Heavy.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:UI;src:url(fonts/MiSansLatin-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:UI;src:url(fonts/MiSansLatin-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:UI;src:url(fonts/MiSansLatin-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Khmer;src:url(fonts/MiSansKhmer-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Khmer;src:url(fonts/MiSansKhmer-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Khmer;src:url(fonts/MiSansKhmer-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Khmer;src:url(fonts/MiSansKhmer-Heavy.woff2) format("woff2");font-weight:900;font-display:swap}
:root{--night:#060b1a;--navy:#0b1428;--blue:#2563eb;--blue-hi:#4f8dff;--sky:#7fb2ff;--ice:#dce8ff;--canvas:#f4f7fb;
  --ink:#0f172a;--ink-2:#64748b;--line:#e2e8f0;--green:#16a34a;
  --d:"Display","Khmer",Arial,sans-serif;--u:"UI","Khmer",Arial,sans-serif}
*{box-sizing:border-box;margin:0}
html{background:var(--night);scroll-behavior:smooth}
body{font-family:var(--u);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:10px}
.wrap{position:relative;max-width:1240px;margin:0 auto;padding:0 40px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:#fff;color:var(--ink);padding:10px 14px;border-radius:10px}

/* ---------- worlds: one fixed light field (site.js); sections only declare data-world */
#field{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;display:block}
.nogl .w0{background:radial-gradient(70% 60% at 50% 110%,#1a3fae,transparent 60%),var(--night)}
.nogl .w1{background:var(--canvas)}.nogl .w2{background:linear-gradient(180deg,#0d2a9e,#1c55e6)}
.w0,.w2{color:#fff}.w1{color:var(--ink)}

/* ---------- type: the film's rules (heavy, tight, sentence case, accent on the key word) */
.eyebrow{font:500 clamp(16px,1.4vw,21px)/1.3 var(--u);letter-spacing:-.01em}
.w0 .eyebrow{color:#a9bddf}.w2 .eyebrow{color:#e6efff}.w1 .eyebrow{color:var(--ink-2)}
.kicker{display:inline-flex;align-items:center;gap:8px;font:700 13px var(--u);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.w0 .kicker,.w2 .kicker{color:var(--sky)}
.giant{font:900 clamp(46px,7vw,112px)/.95 var(--d);letter-spacing:-.045em}
.big{font:900 clamp(34px,4.3vw,64px)/.98 var(--d);letter-spacing:-.04em}
.mid{font:900 clamp(26px,2.6vw,38px)/1.05 var(--d);letter-spacing:-.03em}
html[lang=km] .giant,html[lang=km] .big,html[lang=km] .mid{letter-spacing:0;line-height:1.35}
html[lang=km] .giant{font-size:clamp(34px,4.8vw,76px)}html[lang=km] .big{font-size:clamp(28px,3.2vw,48px)}html[lang=km] .mid{font-size:clamp(22px,2.1vw,30px)}
.g{background:linear-gradient(100deg,#4f8dff 0%,#9cc3ff 55%,#dce8ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.w1 .g{background-image:linear-gradient(100deg,#1d4ed8 0%,#2563eb 45%,#60a5fa 100%)}
.w2 .g{background-image:linear-gradient(100deg,#cfe0ff 0%,#fff 60%)}
.body{font:400 clamp(16px,1.3vw,19px)/1.6 var(--u);max-width:36em}
.w0 .body{color:#c5d3ee}.w2 .body{color:#e6efff}.w1 .body{color:#475569}
html[lang=km] .body{line-height:1.9}
.small{font-size:14px;color:var(--ink-2)}.w0 .small,.w2 .small{color:#a9bddf}

/* text rises through a mask; .in (section seen) or .on (pinned step active) releases it */
.ln{display:block;overflow:hidden;padding:.04em 0 .16em .06em;margin:-.04em 0 -.12em -.06em}
.ln>span{display:inline-block;transform:translateY(140%);transition:transform .8s cubic-bezier(.2,.9,.25,1) var(--t,0s)}
.in .ln>span,.on .ln>span{transform:none}
.past .ln>span{transform:translateY(-140%);transition-delay:0s}
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s ease var(--t,0s),transform .9s cubic-bezier(.2,1.1,.3,1) var(--t,0s)}
.in .rv{opacity:1;transform:none}
html.shot{scroll-behavior:auto!important}
.shot *,.shot *::before,.shot *::after{transition:none!important;animation-duration:0s!important;animation-delay:0s!important}
@media (prefers-reduced-motion:reduce){.ln>span,.rv{transition:none}.in .ln>span{transform:none}.in .rv{opacity:1;transform:none}}

/* ---------- nav (built by site.js) */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .35s,box-shadow .35s}
.nav.solid{background:#0a1430b3;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
/* over light sections the bar turns to frosted white glass with dark text (site.js picks the section under it) */
.nav.light.solid{background:#ffffffc7;box-shadow:0 1px 0 #0f172a12,0 10px 30px -18px #0a1f5c40}
.nav.light .brand{color:var(--ink)}.nav.light .links{color:#475569}.nav.light .links a:hover,.nav.light .links a[aria-current]{color:var(--ink)}
.nav.light .lang,.nav.light .burger{border-color:#0f172a1f;background:#ffffffb3;color:var(--ink)}
.nav.light .login{color:#475569}.nav.light .login:hover{color:var(--ink)}
.nav .brand,.nav .links,.nav .lang,.nav .login,.nav .burger{transition:color .35s,background .35s,border-color .35s}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font:900 24px var(--d);letter-spacing:-.04em;color:#fff}.brand img{width:34px;height:34px}
.links{display:flex;gap:30px;font:500 16px var(--u);color:#c5d3ee}.links a:hover,.links a[aria-current]{color:#fff}
.links a[aria-current]{box-shadow:inset 0 -2px 0 var(--blue-hi)}
.nr{display:flex;gap:10px;align-items:center}
.lang{height:42px;padding:0 16px;border-radius:40px;border:1.5px solid #ffffff33;background:#0b142899;color:#fff;font:500 15px var(--u);cursor:pointer}
.login{font:500 15px var(--u);color:#c5d3ee;padding:0 6px}.login:hover{color:#fff}
.burger{display:none;width:42px;height:42px;border-radius:12px;border:1.5px solid #ffffff33;background:#0b142899;color:#fff;cursor:pointer}
.drawer{display:none}
@media (max-width:980px){
  .links,.login{display:none}.burger{display:grid;place-items:center}
  .drawer{position:fixed;inset:76px 0 auto;display:block;background:#060b1af2;backdrop-filter:blur(14px);padding:12px 20px 24px;transform:translateY(-120%);transition:transform .35s;z-index:29}
  .drawer.open{transform:none}.drawer a{display:block;padding:14px 4px;border-bottom:1px solid #ffffff1a;font:500 18px var(--u);color:#fff}
}

/* ---------- buttons */
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 28px;border-radius:60px;font:700 17px var(--u);transition:transform .2s,background .2s;border:0;cursor:pointer}
.btn.sm{height:42px;padding:0 20px;font-size:15px}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 14px 34px -10px #2563ebcc}.btn.primary:hover{transform:translateY(-2px);background:#3b74f0}
.btn.ghost{border:1.5px solid #ffffff40;color:#fff;background:#ffffff0d}.btn.ghost:hover{background:#ffffff1f}
.w1 .btn.ghost{border-color:#c9d6ea;color:var(--ink);background:#fff}.w1 .btn.ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn.white{background:#fff;color:var(--blue)}.btn.white:hover{transform:translateY(-2px)}
.arrow::after{content:"→";margin-left:2px;transition:transform .2s}.arrow:hover::after{transform:translateX(3px)}

/* ---------- app UI parts (rebuilt as in the film) */
.card{background:#fff;border-radius:24px;box-shadow:0 1px 3px #0f172a0d,0 30px 70px -18px #0a1f5c55;color:var(--ink)}
.chb{display:inline-grid;place-items:center;border-radius:50%;background:#fff;overflow:hidden;flex:none;box-shadow:0 3px 8px #0f172a22}
.chb img{width:72%;height:72%;object-fit:contain}.chb.full img{width:100%;height:100%}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:30px;padding:4px 12px;font:700 13px/1.4 var(--u);white-space:nowrap}
.chip.ai{background:#e8f2ff;color:var(--blue)}.chip.ok{background:#e8f5e9;color:var(--green)}.chip.wait{background:#fff3df;color:#b66b00}.chip.solid{background:var(--green);color:#fff}
.chip.plan{background:#10275f;color:#cfe0ff;border:1px solid #4f8dff66}.w1 .chip.plan{background:#e8f2ff;color:#1d4ed8;border-color:#bfdfff}
.av{display:inline-block;flex:none;width:42px;height:42px;border-radius:50%;overflow:hidden;line-height:0}.av svg{width:100%;height:100%}
.fb{display:flex;align-items:center;gap:10px;white-space:nowrap;background:#fff;border-radius:22px;padding:10px 16px 10px 10px;font:400 16px var(--u);color:var(--ink);box-shadow:0 18px 44px #00000055}
.fb .chb{width:30px;height:30px}
.art{display:block;border-radius:16px}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.94)}}
@keyframes drop{from{opacity:0;transform:translateY(-18px)}}

/* ---------- shared page blocks */
.sec{padding:120px 0}
.phero{padding:170px 0 110px}
.phero .giant{margin-top:16px}.phero .body{margin-top:24px}.phero .ctas{margin-top:34px}
.head{display:flex;align-items:end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:46px}
.head .big{margin-top:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tile{position:relative;border-radius:26px;padding:28px;background:#fff;border:1.5px solid #e6ecf5;box-shadow:0 20px 50px -30px #0a1f5c44;transition:transform .3s,box-shadow .3s;color:var(--ink)}
a.tile:hover{transform:translateY(-4px);box-shadow:0 30px 60px -26px #0a1f5c66}
.w0 .tile.glass,.w2 .tile.glass{background:#0b1e6b55;border-color:#ffffff22;color:#fff;backdrop-filter:blur(6px)}
.tile h3{font:700 21px/1.25 var(--u);margin-top:14px}.tile p{margin-top:8px;font-size:15px;line-height:1.6;color:#475569}
.tile.glass p{color:#c5d3ee}
.ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#e8f2ff;color:var(--blue)}
.ico svg{width:26px;height:26px}
.glass .ico{background:#ffffff1a;color:#cfe0ff}
.faq{max-width:860px}
.faq details{border-top:1.5px solid #dfe6f0;padding:22px 0}.faq details:last-child{border-bottom:1.5px solid #dfe6f0}
.w0 .faq details,.w2 .faq details{border-color:#ffffff22}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;font:700 19px/1.35 var(--u)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 28px/1 var(--u);color:var(--blue);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;font-size:16px;line-height:1.7;color:#475569;max-width:46em}
.w0 .faq details p,.w2 .faq details p{color:#c5d3ee}
.note{font-size:13px;color:var(--ink-2)}.w0 .note,.w2 .note{color:#8ea3c8}
.badge-draft{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:#fff3df;color:#9a5b00;font:700 12px var(--u);letter-spacing:.02em}
.band{padding:140px 0 120px}
.band .giant{font-size:clamp(42px,6vw,96px)}html[lang=km] .band .giant{font-size:clamp(32px,4.4vw,70px)}
.band .ctas{margin-top:42px}

/* ---------- partner logo wall: real files, uniform white tiles, monochrome until hover */
.logos{display:flex;flex-wrap:wrap;gap:12px}
.logo-tile{display:block;flex:none;width:150px;height:72px;padding:14px 18px;border-radius:16px;background:#fff;border:1.5px solid #e6ecf5;overflow:hidden}
.logo-tile img{display:block;width:100%;height:100%;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.logo-tile:hover img{filter:none;opacity:1}
@media (max-width:560px){.logo-tile{width:calc(50% - 6px)}}

/* ---------- footer (built by site.js) */
/* ---------- founding offer strip (site.js renders every [data-founding]; the count is live from the plans API) */
.fo{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:12px 14px 12px 12px;border-radius:22px;
  background:linear-gradient(100deg,#ffffff14,#ffffff08);border:1.5px solid #ffffff2b;color:#dce8ff;font:500 15px var(--u)}
.w1 .fo{background:#fff;border-color:#e2e8f0;color:#475569;box-shadow:0 20px 40px -30px #0a1f5c55}
.fo b{color:#fff;font-weight:700}.w1 .fo b{color:var(--ink)}
.fo-chip{padding:7px 12px;border-radius:14px;background:linear-gradient(100deg,#f59e0b,#f97316);color:#fff;font:800 13px var(--u);letter-spacing:.02em;white-space:nowrap}
.fo-txt{flex:1 1 260px}
.fo-count{display:flex;align-items:center;gap:10px;white-space:nowrap}
.fo-meter{position:relative;width:120px;height:8px;border-radius:5px;background:#ffffff24;overflow:hidden}.w1 .fo-meter{background:#e8eef8}
.fo-meter i{position:absolute;inset:0 auto 0 0;border-radius:5px;background:linear-gradient(90deg,#f97316,#fbbf24);animation:foFill 1.4s cubic-bezier(.2,.8,.2,1) .3s both}
@keyframes foFill{from{width:0}}
.fo-live{display:inline-flex;align-items:center;gap:6px;margin-left:2px;font:700 11px var(--u);letter-spacing:.08em;text-transform:uppercase;color:#4ade80}
.fo-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 #22c55e88;animation:foPulse 1.8s infinite}
@keyframes foPulse{70%{box-shadow:0 0 0 8px #22c55e00}100%{box-shadow:0 0 0 0 #22c55e00}}
@media (prefers-reduced-motion:reduce){.fo-live::before,.fo-meter i{animation:none}}
@media (max-width:560px){.fo-count{flex-wrap:wrap;white-space:normal}.fo-meter{width:100%}}

/* light footer: the page closes on the blue call to action, then settles on a calm canvas instead of a black slab */
.foot{background:linear-gradient(180deg,#eef3fb,#f7f9fd);color:#475569;font:400 15px var(--u);position:relative;border-top:1px solid #e2e8f0}
.foot .brand{color:var(--ink)}
.foot .top{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:30px;padding:80px 40px 50px}
.foot h4{font:700 13px var(--u);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.foot ul{list-style:none;padding:0;display:grid;gap:11px}.foot a:hover{color:var(--blue)}
.foot .about p{margin-top:16px;max-width:22em;line-height:1.6;font-size:14px}
.foot .chans{display:flex;gap:8px;margin-top:20px}.foot .chans .chb{width:30px;height:30px}
.foot .bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 40px;border-top:1px solid #e2e8f0;font-size:13px;color:#64748b}

@media (max-width:980px){
  .sec{padding:90px 0}.phero{padding:130px 0 80px}
  .grid3,.grid2{grid-template-columns:1fr}
  .foot .top{grid-template-columns:1fr 1fr;padding:60px 20px 40px}.foot .about{grid-column:1/3}
}
@media (max-width:560px){.wrap{padding:0 20px}.nr .btn{display:none}.foot .bottom{padding:20px}}
/* The first section is on screen at load, so it reveals with CSS at first paint instead of waiting for the
   scripts to boot and add .in (that wait was ~95% of the mobile LCP). Same motion, same timing tokens. */
@keyframes rvIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes lnIn{from{transform:translateY(140%)}to{transform:none}}
#main>.rvs:first-child .rv{animation:rvIn .6s ease var(--t,0s) both}
#main>.rvs:first-child .ln>span{animation:lnIn .8s cubic-bezier(.2,.9,.25,1) var(--t,0s) both}
@media (prefers-reduced-motion:reduce){#main>.rvs:first-child .rv,#main>.rvs:first-child .ln>span{animation:none;opacity:1;transform:none}}