/* Omnix Tech Limited landing - r1 "Daylight": white, flat, Telegram-blue, iOS pill buttons, Inter self-hosted. Flat colour only, no inline styles (CSP-safe), no dependencies.
   Desktop (>=960px): sticky header, 3-col grids. Mobile (<960px): iOS tab bar + grouped list + contact bottom sheet. Tokens and contrast: DESIGN.md */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/inter-latin-v5.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/inter-vietnamese-v5.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
/* Metric-matched fallback so text barely moves when Inter arrives */
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.4%;ascent-override:90.2%;descent-override:22.5%;line-gap-override:0%}

:root{
  --bg:#FFFFFF;--bg-alt:#F4F8FC;--tint-soft:#EDF6FC;--tint:#E1F1FB;--tint-2:#CBE5F7;--line:#D5E2EC;
  --tx:#10243A;--mut:#4A5F73;
  --sky:#2AABEE;            /* Telegram blue: decoration only (white on it is 2.6:1, never carries text) */
  --primary:#1573B5;--primary-dark:#0F5E96;--press:#0D5282;
  --live:#17794A;--live-bg:#E3F5EA;
  --pad:20px;--max:1160px;--bar:60px;--tab:60px;--r:20px;--r-lg:28px;
  --font:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:12px;scroll-padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom) + 12px);-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;font-family:var(--font);font-size:1rem;line-height:1.6;color:var(--tx);background:var(--bg);font-feature-settings:"cv11","ss03";
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:anywhere;padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}
:lang(vi) body{line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary)}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
.defs{position:absolute;width:0;height:0;overflow:hidden}
svg{flex:none}
:focus-visible{outline:3px solid var(--primary-dark);outline-offset:2px;border-radius:10px}
.skip{position:absolute;left:8px;top:8px;max-width:calc(100vw - 16px);transform:translateY(calc(-100% - 24px));background:var(--primary-dark);color:var(--bg);padding:12px 16px;border-radius:999px;z-index:100;font-weight:600}
.skip:focus{transform:none}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative}
html.sheet-open{overflow:hidden}

/* Type scale (mobile): H1 34 / H2 28 / H3 18 w600 / body 16 / small 16 */
h1{font-size:2.125rem;line-height:1.15;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
:lang(vi) h1{line-height:1.2}
h2{font-size:1.75rem;line-height:1.2;letter-spacing:-.015em;font-weight:700;text-wrap:balance}
h3{font-size:1.125rem;line-height:1.3;font-weight:600}

/* Header: mobile = logo + EN/VI only (navigation is the tab bar) */
.topbar{background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:30}
.bar{display:flex;align-items:center;gap:12px;min-height:var(--bar)}
.brand{display:flex;align-items:center;min-height:44px;margin-right:auto;border-radius:10px}
.brand img{height:28px;width:auto}
.top-actions{display:flex;align-items:center;gap:12px}
.lang{display:inline-flex;padding:2px;border-radius:999px;background:var(--tint)}
.lang a{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 6px;border-radius:999px;font-weight:600;font-size:1rem;
  text-decoration:none;color:var(--primary-dark)}
.lang a[aria-current="true"]{background:var(--bg);color:var(--tx);font-weight:700;box-shadow:0 1px 2px rgba(16,36,58,.14)}
.lang a:focus-visible{outline-offset:1px;border-radius:999px}
.nav,.btn.top-cta{display:none}

/* Buttons: pill (iOS). primary 52 / secondary 48 / plain 44. Hover only where hover exists. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-weight:600;font-size:1rem;line-height:1.25;text-align:center;text-decoration:none;
  transition:transform .15s ease,background-color .2s,color .2s}
.btn svg{width:20px;height:20px}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary);color:var(--bg);min-height:52px}
.btn-secondary{background:var(--tint);color:var(--primary-dark)}
.btn-plain{background:transparent;color:var(--primary-dark);min-height:44px;padding:8px 14px}
.btn-primary:active{background:var(--press)}
.btn-secondary:active{background:var(--tint-2)}
.btn-plain:active{background:var(--tint)}
.btn-sm{min-height:44px;padding:8px 22px}
.btn-lg{min-height:52px;padding:13px 28px}
.btn-xl{min-height:56px}
@media (hover:hover){
  .btn-primary:hover{background:var(--primary-dark)}
  .btn-secondary:hover{background:var(--tint-2)}
  .btn-plain:hover{background:var(--tint)}
}

/* Hero (mobile: one plain column, no decorative cards) */
.hero{padding:28px 0 12px}
.hero-grid{display:grid;gap:0}
.hero h1 span{color:var(--primary)}
.hero .sub{margin-top:16px;color:var(--mut);font-size:1.0625rem;max-width:32em}
.hero-cta{display:flex;margin-top:24px}
.hero-cta .btn{width:100%}
.chips{display:flex;flex-direction:column;gap:2px;margin-top:20px}
.chip{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:500;line-height:1.4;color:var(--tx)}
.chip svg{width:20px;height:20px;color:var(--primary)}
.stage,.svc-pts{display:none}
.il-bg{fill:var(--tint-soft)}
.il-card{fill:var(--bg);stroke:var(--line);stroke-width:1.5}
.il-line{fill:var(--tint-2)}
.il-in{fill:var(--tint)}
.il-out{fill:var(--primary)}
.il-sky{fill:var(--sky)}
.il-white{fill:var(--bg)}
.il-ok{fill:var(--live-bg);stroke:var(--bg);stroke-width:4}
.il-tick{fill:none;stroke:var(--live);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}

/* Icon tile */
.ico{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--primary-dark);background:var(--tint)}
.ico svg{width:24px;height:24px}

/* LIVE badge: the only state colour */
.live{display:inline-flex;align-items:center;gap:6px;padding:0 10px 0 8px;border-radius:999px;font-size:1rem;font-weight:600;line-height:1.5;color:var(--live);background:var(--live-bg)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--live)}

/* Sections */
section{padding:40px 0}
.sec-head{margin-bottom:20px}
.sec-head .lead{margin-top:8px;color:var(--mut);font-size:1.0625rem}

/* Products - mobile: iOS grouped list (one 20px frame, rows >= 72px) */
.prods{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);overflow:hidden}
.prod{display:grid;grid-template-columns:44px minmax(0,1fr) 20px;align-items:center;gap:0 14px;min-height:72px;padding:14px 14px 14px 16px;color:var(--tx);text-decoration:none;
  transition:background-color .2s}
.prod+.prod{border-top:1px solid var(--line)}
.prod:active{background:var(--tint-soft)}
.prod-title{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px}
.prod p{color:var(--mut);margin-top:2px}
.prod-go{display:flex;align-items:center;color:var(--mut)}
.prod-go .host,.prod-go .arr{display:none}
.prod-go .chev{width:20px;height:20px}

/* Services - mobile: one card */
.svc{border-radius:var(--r-lg);background:var(--tint-soft);padding:24px 20px}
.svc-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.svc-copy .ico{background:var(--bg)}
.svc-copy p{color:var(--mut);max-width:30em}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-block;padding:2px 14px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-weight:600;color:var(--primary-dark)}
.svc-cta{display:flex;flex-direction:column;gap:6px;align-self:stretch;margin-top:8px}
.svc-cta .btn-primary{width:100%}
.svc-cta .btn-plain{align-self:center}

/* Coming soon - mobile: quiet vertical list; desktop: 3-col band */
.soon-band{background:var(--bg-alt)}
.soon-list{display:flex;flex-direction:column}
.soon{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 14px;align-items:center;padding:14px 0}
.soon+.soon{border-top:1px solid var(--line)}
.soon .ico{background:var(--tint-soft);color:var(--mut);grid-row:span 2}
.soon h3{color:var(--tx)}
.soon p{color:var(--mut)}
.soon .badge{grid-column:2;justify-self:start;margin-top:4px}
.badge{display:inline-block;padding:0 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:1rem;font-weight:600;line-height:1.5;color:var(--mut)}
.soon-cta{margin-top:20px;display:flex}
.soon-cta .btn{width:100%}

/* Contact section = the same block is the desktop frame, the no-JS section and the mobile bottom sheet */
.contact-sec{padding:40px 0 48px}
.contact{display:grid;gap:18px;border-radius:var(--r-lg);padding:26px 20px;background:var(--tint-soft)}
.contact-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.contact-copy p{color:var(--tx);max-width:32em}
.contact-copy .phone{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;margin-top:8px;color:var(--mut)}
.contact-copy .phone a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;color:var(--primary-dark);font-weight:600;text-underline-offset:3px}
.contact-btns{display:grid;gap:10px;align-content:center}
.contact .btn-secondary{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.contact .btn-secondary:active{background:var(--tint-2)}
@media (hover:hover){.contact .btn-secondary:hover{background:var(--tint-2)}}
.sheet-close,.sheet-grab{display:none}
.sheet-close{background:var(--tint);color:var(--primary-dark);border:0}
.scrim{position:fixed;inset:0;z-index:60;background:rgba(16,36,58,.45);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}

/* Footer */
footer{padding:36px 0 28px;color:var(--mut);background:var(--bg);border-top:1px solid var(--line)}
.f-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px}
.f-brand{display:flex;flex-direction:column;gap:2px}
.f-brand strong{color:var(--tx);font-weight:600}
.f-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0;color:var(--primary-dark);font-weight:600;text-underline-offset:3px}
.f-notes{display:grid;gap:10px;margin-top:18px;padding-top:20px;border-top:1px solid var(--line);max-width:60em}
.f-notes strong{color:var(--tx);font-weight:600}
.f-copy{margin-top:18px}

/* Tab bar (mobile): iOS style, fixed, safe-area aware. Labels are 14px (approved exception) in px so they stay inside 4 equal tabs at large text sizes */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:var(--bg);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:var(--tab);padding:5px 2px 4px;
  color:var(--mut);font-size:14px;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.tab .ti{display:flex;align-items:center;justify-content:center;height:28px;padding:0 16px;border-radius:999px;transition:background-color .2s,transform .15s}
.tab svg{width:24px;height:24px}
.tab:active .ti{transform:scale(.97)}
.tab[aria-current="true"],.tab[aria-expanded="true"]{color:var(--primary-dark)}
.tab[aria-current="true"] .ti,.tab[aria-expanded="true"] .ti{background:var(--tint)}
.tab:focus-visible{outline-offset:-3px;border-radius:14px}

/* Mobile + JS: #contact becomes a bottom sheet (<= 85dvh). Without JS it stays a normal section at the end of the page. */
@media (max-width:59.99em){
  .js .contact-sec{position:fixed;left:0;right:0;bottom:0;z-index:70;max-height:85vh;max-height:85dvh;overflow-y:auto;overscroll-behavior:contain;padding:0;
    background:var(--bg);border-radius:var(--r-lg) var(--r-lg) 0 0;border-top:1px solid var(--line);
    transform:translateY(100%);visibility:hidden;transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility 0s .28s}
  .js.sheet-open .contact-sec{transform:none;visibility:visible;transition-delay:0s}
  .js.sheet-open .scrim{opacity:1;visibility:visible;transition-delay:0s}
  .js .contact-sec .wrap{padding:0 20px calc(20px + env(safe-area-inset-bottom))}
  .js .sheet-grab{display:block;width:40px;height:5px;margin:8px auto 0;border-radius:999px;background:var(--tint-2)}
  .js .contact{padding:0;background:transparent;border-radius:0;gap:6px}
  .js .contact-head{position:sticky;top:0;z-index:1;background:var(--bg);padding:6px 0}
  .js .sheet-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--tint);color:var(--primary-dark);cursor:pointer}
  .js .sheet-close svg{width:22px;height:22px}
  .js .sheet-close:active{background:var(--tint-2)}
  .js .contact .btn-secondary{background:var(--tint);box-shadow:none}
  .js .contact-btns{margin-top:10px}
}

/* >= 600: roomier phone/tablet */
@media (min-width:37.5em){
  :root{--pad:28px}
  .hero{padding:40px 0 16px}
  .chips{flex-direction:row;flex-wrap:wrap;gap:6px 24px}
  .hero-cta .btn{width:auto}
  .svc-cta{flex-direction:row;align-items:center;align-self:flex-start}
  .svc-cta .btn-primary{width:auto}
  .soon-cta .btn{width:auto}
  .svc{padding:32px 30px}
  .contact{padding:30px 28px}
}
@media (max-width:22.4em){
  :root{--pad:14px}
  .brand img{height:24px}
  .prod{padding-left:12px;gap:0 12px}
}

/* DESKTOP >= 960 */
@media (min-width:60em){
  :root{--bar:72px;--pad:32px}
  html{scroll-padding-top:calc(var(--bar) + 16px);scroll-padding-bottom:0}
  body{font-size:1.0625rem;padding-bottom:0}
  h1{font-size:3.25rem}
  h2{font-size:2.25rem}
  h3{font-size:1.25rem}
  .tabbar{display:none}
  .topbar{position:sticky;top:0}
  .bar{gap:24px}
  .brand img{height:32px}
  .nav{display:flex;gap:4px;margin:0 auto 0 12px}
  .nav a{display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;color:var(--tx);font-weight:500;text-decoration:none;transition:background-color .2s,color .2s}
  .nav a[aria-current="true"]{background:var(--tint);color:var(--primary-dark);font-weight:600}
  @media (hover:hover){.nav a:hover{background:var(--tint-soft)}}
  .btn.top-cta{display:inline-flex}
  .brand{margin-right:0}

  .hero{padding:56px 0 8px}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
  .hero .sub{font-size:1.25rem;margin-top:20px}
  .hero-cta{margin-top:32px}
  .chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:32px}
  .chip{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 14px 14px 16px;border-radius:var(--r);background:var(--tint-soft);border:1px solid var(--line)}
  .stage{display:block}
  .stage svg{width:100%;height:auto;display:block}

  section{padding:52px 0}
  #products{padding-top:48px}
  .sec-head{margin-bottom:40px}
  .sec-head .lead{font-size:1.1875rem}
  .ico{width:48px;height:48px}

  /* Products: 3 equal cards, equal height, whole card is the link */
  .prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border:0;border-radius:0;overflow:visible;background:none}
  .prod{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;align-items:start;gap:0;padding:28px;min-height:0;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
    transition:transform .2s ease,border-color .2s,box-shadow .2s}
  .prod+.prod{border-top:1px solid var(--line)}
  .prod-main,.prod-title{display:contents}
  .prod .ico{grid-column:1;grid-row:1}
  .prod .live{grid-column:2;grid-row:1;justify-self:end}
  .prod h3{grid-column:1/-1;grid-row:2;margin-top:20px;align-self:start}
  .prod p{grid-column:1/-1;grid-row:3;margin-top:8px;align-self:start}
  .prod-go{grid-column:1/-1;grid-row:4;margin-top:24px;gap:8px;color:var(--primary);font-weight:600}
  .prod-go .host{display:inline}
  .prod-go .arr{display:block;width:20px;height:20px;margin-left:auto;transition:transform .2s}
  .prod-go .chev{display:none}
  .prod{grid-template-rows:auto auto 1fr auto}
  @media (hover:hover){
    .prod:hover{transform:translateY(-3px);border-color:var(--sky);box-shadow:0 14px 28px -18px rgba(16,36,58,.35)}
    .prod:hover .arr{transform:translateX(4px)}
  }
  .prod:active{background:var(--bg);transform:scale(.99)}

  /* Services: 2-col frame */
  .svc{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:56px}
  .svc-copy{gap:16px}
  .svc-copy h3{font-size:1.75rem;line-height:1.2;letter-spacing:-.01em;font-weight:700}
  .svc-copy p{font-size:1.1875rem}
  .svc-cta{margin-top:12px}
  .tags{display:none}
  .svc-pts{display:flex;flex-direction:column;gap:14px;padding:0}
  .svc-pts li{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line);font-weight:600;font-size:1.125rem;line-height:1.35}
  .svc-pts svg{width:28px;height:28px;color:var(--primary)}

  /* Coming soon: 3-col band */
  .soon-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .soon{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
  .soon+.soon{border-top:1px solid var(--line)}
  .soon .ico{grid-row:auto}
  .soon-body{margin-top:18px;flex:1 0 auto}
  .soon p{margin-top:6px}
  .soon .badge{margin-top:20px}
  .soon-cta{margin-top:36px}

  /* Contact: 2-col frame */
  .contact-sec{padding:52px 0 56px}
  .contact{grid-template-columns:1.1fr 1fr;grid-template-areas:"head btns" "copy btns";gap:12px 64px;align-items:center;padding:56px}
  .contact-head{grid-area:head;align-self:end}
  .contact-copy{grid-area:copy;align-self:start}
  .contact-btns{grid-area:btns}

  footer{padding:48px 0 32px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .prod:hover,.btn:active,.tab:active .ti{transform:none!important}
}
@media (forced-colors:active){.btn,.prod,.chip,.tag,.badge{border:1px solid CanvasText}}