/* =====================================================================
   OZARIAM / CELESTIAL V2
   Brand + typography layer. Keep after styles.css.
   Thai display: Kanit / Thai body: IBM Plex Sans Thai / Latin: Space Grotesk.
   All fonts load through a remote CSS reference; no font binaries bundled.
   ===================================================================== */
:root {
  --font:'IBM Plex Sans Thai','Noto Sans Thai',Tahoma,sans-serif;
  --display:'Kanit','IBM Plex Sans Thai','Noto Sans Thai',Tahoma,sans-serif;
  --latin:'Space Grotesk','IBM Plex Sans Thai',sans-serif;
  --bg:#fbfdff;
  --surface:#ffffff;
  --surface-alt:#f4f8fd;
  --surface-soft:#edf5ff;
  --text:#203754;
  --heading:#071b44;
  --muted:#536783;
  --subtle:#70849f;
  --primary:#0666ef;
  --primary-rgb:6,102,239;
  --bright:#83d6ff;
  --silver:#c9d9ee;
  --line:#dfe8f4;
  --line-strong:#b7d4f3;
  --shadow:0 4px 24px #16397206,0 1px 2px #123f7304;
  --hero-shadow:0 0 0 1px #d7ebff,0 4px 10px #589fea22,0 26px 65px #1675d42b;
  --button-shadow:0 4px 12px #1378f543,0 0 0 3px #cbe6ff3d;
  --radius:16px;
  --contact-text:#eaf5ff;
}
:root[data-theme=dark] {
  --bg:#030916;
  --surface:#071222;
  --surface-alt:#061020;
  --surface-soft:#0a203a;
  --text:#d6e4f4;
  --heading:#f0f6ff;
  --muted:#9fb3cc;
  --subtle:#829bb8;
  --primary:#76caff;
  --primary-rgb:118,202,255;
  --bright:#b5e6ff;
  --silver:#b9d4ed;
  --line:#182e48;
  --line-strong:#325b85;
  --shadow:0 4px 24px #00000021,inset 0 1px 0 #eff9ff06;
  --hero-shadow:0 0 0 1px #9edcff33,0 0 9px #288fe369,0 30px 70px #00000070;
  --button-shadow:0 0 14px #2b94ff66,0 6px 22px #0004;
}
body { font-family:var(--font);font-weight:400;font-size:16px;line-height:1.75; }
h1,h2,h3,h4 { font-family:var(--display);font-weight:500;letter-spacing:0; }
.container { width:min(1480px,calc(100% - 112px)); }
.heading-latin { color:var(--heading)!important;font-family:var(--latin);font-weight:700!important;letter-spacing:-.045em; }
.eyebrow { font-size:10px;font-weight:600;letter-spacing:.21em; }
.section-heading h2,h2 { font-size:clamp(26px,2.35vw,34px);font-weight:500;letter-spacing:0; }
.section-heading h2>span:not(.heading-latin) { font-family:var(--display);font-weight:400;font-size:.75em;letter-spacing:0; }
.section-heading .eyebrow { margin-bottom:8px; }
.section-heading>p { font-size:14px;line-height:1.85; }
.button { font-family:var(--display);font-weight:400;letter-spacing:.01em;border-radius:100px;min-height:48px;font-size:16px; }
.button.primary { background:linear-gradient(180deg,#1684fa 0%,#075ddd 72%,#0551ce 100%);border:1px solid #167bfa;box-shadow:inset 0 1px 0 #effaff66,var(--button-shadow); }
.button.primary:hover { background:linear-gradient(180deg,#2693ff,#085cda);box-shadow:inset 0 1px 0 #d9f1ff88,0 7px 22px #1e81f949; }
[data-theme=dark] .button.primary { background:radial-gradient(ellipse at 50% -40%,#47caff 0%,transparent 64%),linear-gradient(180deg,#057ceb,#0654b9);border:1px solid #8bd9ff;box-shadow:inset 0 0 8px #a9e6ff8a,0 0 3px #e1faff99,var(--button-shadow);color:#fff; }
[data-theme=dark] .button.primary:hover { box-shadow:inset 0 0 9px #a9e6ffb0,0 0 22px #359dfc80; }
.text-link { font-family:var(--display);font-size:14px;font-weight:400; }
.icon { stroke-width:1.65; }
/* Navigation stays quiet, with the approved original logo assets. */
.site-header { height:90px;background:var(--bg);border-bottom:1px solid var(--line); }
.header-inner { gap:28px; }
.brand-type { width:185px; }
.brand-emblem,.brand-emblem img { width:50px;height:50px; }
.desktop-nav { gap:30px; }
.desktop-nav a { font-family:var(--latin);font-size:13px;font-weight:500; }
.header-cta { min-height:41px;padding:9px 24px;font-size:14px; }
.theme-toggle { border:1px solid var(--line);background:var(--surface);width:36px;height:36px; }
.theme-toggle .icon { width:17px;height:17px; }
.mobile-break { display:none; }
/* Hero: silver-blue light, a recognizable orbit, and live product content. */
.hero { background:radial-gradient(ellipse at 76% 73%,#cce7ff80,transparent 50%),linear-gradient(105deg,#f5f9ff 0%,#fff 42%,#eaf4ff 100%);border-bottom:1px solid var(--line); }
[data-theme=dark] .hero { background:radial-gradient(ellipse at 76% 70%,#0c345c8c,transparent 55%),linear-gradient(110deg,#020916,#071528 65%,#0a2642); }
.hero-inner { min-height:610px;padding:61px 0 72px;grid-template-columns:1fr 1.07fr;gap:32px; }
.hero-copy { padding-bottom:20px; }
.hero-copy .eyebrow { font-size:9px;letter-spacing:.21em;color:#5479a5;margin-bottom:21px; }
.hero-copy .eyebrow span { width:4px;height:4px;border-radius:0;transform:rotate(45deg); }
.hero-copy h1 { font-family:var(--display);font-weight:500;font-size:clamp(34px,3.08vw,50px);line-height:1.26;letter-spacing:0;white-space:normal;color:var(--heading); }
.title-line { display:block;white-space:nowrap; }
.latin-title { font-family:var(--latin);font-weight:700;letter-spacing:-.045em; }
.brand-gradient { color:#0965e6;background:linear-gradient(100deg,#0051c3 0%,#237df3 58%,#00469e 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
[data-theme=dark] .brand-gradient { background:linear-gradient(120deg,#f6faff 0%,#94d9ff 45%,#cce9ff 70%,#63b9ff 100%);background-clip:text;-webkit-background-clip:text; }
[data-theme=dark] .hero-copy h1 { color:#f2f7ff;text-shadow:0 0 18px #59a9e814; }
.hero-description { font-size:16px;color:#4e6584;line-height:1.9;margin-top:23px;max-width:570px; }
[data-theme=dark] .hero-description { color:#bacce2; }
.hero-ctas { margin-top:28px;gap:14px; }
.hero-ctas .button { min-height:50px;padding-inline:30px; }
.hero-benefits { margin-top:39px;gap:14px; }
.hero-benefits .icon { width:26px;height:26px; }
.hero-benefits b { font-family:var(--latin);font-size:10px;font-weight:600; }
.hero-benefits small { font-size:11px;line-height:1.55;margin-top:4px; }
.hero-benefits>div { gap:10px; }
[data-theme=dark] .hero-benefits .icon { filter:drop-shadow(0 0 5px #4eabff35); }
.hero-watermark { width:395px;height:395px;left:-230px;top:36px;opacity:.18; }
[data-theme=dark] .hero-watermark { opacity:.11; }
.celestial-planet { position:absolute;z-index:-2;pointer-events:none;width:710px;height:710px;right:-222px;top:-330px;border-radius:50%;background:radial-gradient(circle at 33% 62%,#e1f3ff,#b0cceb 38%,#7598b5 65%,#123a65);box-shadow:inset 9px -9px 25px #f1fcff,0 0 0 2px #d8efff,0 0 45px #73c3ff44;opacity:.43; }
.celestial-planet:after { content:'';position:absolute;inset:0;border-radius:50%;background:url('assets/planet-detail.webp') center/cover;mix-blend-mode:luminosity;opacity:.30; }
[data-theme=dark] .celestial-planet { background:radial-gradient(circle at 50% 35%,#142b43,#153855 50%,#4276a2 83%,#c9f0ff);box-shadow:inset -4px -8px 17px #aae6ff,0 0 0 1px #b9e8ff,0 0 24px #49abff99,0 0 90px #1487ef44;opacity:.8;right:-160px;top:-440px;width:880px;height:880px; }
[data-theme=dark] .celestial-planet:after { opacity:.35;mix-blend-mode:soft-light; }
.celestial-orbit { position:absolute;z-index:-1;pointer-events:none;border:1px solid #adcfee70;border-radius:50%;right:-150px;top:-360px;width:1050px;height:1120px;transform:rotate(-37deg) scaleY(.56);box-shadow:0 0 15px #e3f4ff77; }
.orbit-two { right:-165px;top:-372px;width:1070px;opacity:.36;border-width:2px; }
[data-theme=dark] .celestial-orbit { border-color:#66bbf773;box-shadow:0 0 8px #81c8ff18;opacity:.5; }
.cosmic-edge,[data-theme=dark] .cosmic-edge { z-index:-1;top:auto;bottom:0;right:0;width:425px;height:320px;background:url('assets/exploration-light.webp') right bottom/cover no-repeat;mask-image:linear-gradient(90deg,transparent,#000 49%),linear-gradient(180deg,transparent,#000 38%,#000 85%,transparent);mask-composite:intersect;opacity:.74; }
[data-theme=dark] .cosmic-edge { width:370px;height:495px;background-image:url('assets/exploration-dark.webp');opacity:.83;mask-image:linear-gradient(90deg,transparent,#000 52%),linear-gradient(180deg,transparent,#000 18%,#000 85%,transparent);mask-composite:intersect; }
.hero-grid-decoration { background-image:radial-gradient(#8fbde530 1px,transparent 1px);background-size:65px 65px;mask-image:linear-gradient(90deg,transparent 35%,#000); }
[data-theme=dark] .hero-grid-decoration { background-image:radial-gradient(#a3d5ff75 .65px,transparent 1px),radial-gradient(#75bcfa54 .7px,transparent 1px);background-size:79px 97px,127px 173px;mask-image:linear-gradient(90deg,transparent 12%,#000); }
.star-point { position:absolute;z-index:-1;pointer-events:none;width:4px;height:4px;background:#fff;border-radius:50%;box-shadow:0 0 9px 4px #96d3ff5c; }
.star-point:before,.star-point:after { content:'';position:absolute;left:50%;top:50%;width:38px;height:1px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#b5e2ff,transparent); }
.star-point:after { transform:translate(-50%,-50%) rotate(90deg); }
.star-point-one { left:49%;top:70px; }
.star-point-two { right:7%;bottom:155px;transform:scale(.6); }
.exploration-caption { position:absolute;right:35px;bottom:340px;z-index:0;font:500 8px/2 var(--latin);letter-spacing:.29em;color:#759fc4;pointer-events:none; }
[data-theme=dark] .exploration-caption { color:#a4d7ff; }
/* Real DOM dashboard and reused particle-wave AI interface. */
.hero-visual { height:430px;margin-left:0; }
.dashboard-shell { top:18px;width:calc(100% - 46px);height:378px;border-radius:18px;transform:perspective(1600px) rotateY(-5deg) rotateX(1deg) rotateZ(-1.7deg);background:#fff;border:1px solid #b6d9fc; }
[data-theme=dark] .dashboard-shell { background:#051223;border-color:#6aa4d382; }
.dashboard-top { height:46px; }
.dashboard-brand { letter-spacing:.08em;font-size:10px; }
.dash-content { padding:19px 16px; }
.dash-greeting h3 { font-size:12px;font-weight:600; }
.dash-greeting small { font-size:9px; }
.metric-grid { margin-top:16px; }
.metric { padding:12px 10px;border-radius:9px; }
.metric>strong { font-size:19px;font-weight:700; }
.metric>span { font-size:8px; }
.metric>small { font-size:7px; }
.dash-panels { margin-top:14px; }
.main-chart { height:111px; }
.panel-title { font-size:8px; }
.status-panel { gap:13px; }
.status-panel>b { font-size:8px; }
.status-panel>span { font-size:7px; }
.dash-bottom-note { font-size:7px; }
[data-theme=dark] .chart-line { stroke:#8ad3ff;filter:drop-shadow(0 0 3px #5eb8ff70); }
[data-theme=dark] .chart-dots { fill:#d6f1ff;stroke:#8dd2ff; }
.hero-ai-card { width:218px;top:68px;right:-14px;padding:15px 13px 12px;border-radius:18px;border:1px solid #c0defa;box-shadow:0 4px 9px #317bcb16,0 14px 38px #2064b124; }
[data-theme=dark] .hero-ai-card { background:linear-gradient(145deg,#0b1b30,#051122);border-color:#67a5d698;box-shadow:inset -1px 0 0 #addcff66,0 0 2px #a0d8ff77,0 0 10px #3d99eb33,0 16px 38px #0009; }
.ai-mini-icon { background:transparent;box-shadow:none;width:33px;height:33px;border-radius:0; }
.ai-mini-icon img { width:33px;height:33px;object-fit:contain; }
.ai-card-title b { font-weight:600;font-size:10px; }
.ai-card-title small { font-size:7px; }
.orb-scene { height:130px; }
.ai-card-greeting { font-family:var(--display);font-size:14px;line-height:1.45;font-weight:400; }
.ai-card-greeting small { font-family:var(--font);font-size:9px; }
.visual-caption { font-size:8px;letter-spacing:.16em; }
/* More content breathing room than a compressed concept image. */
.section { padding-top:58px;padding-bottom:58px; }
.services-section { padding-top:50px;padding-bottom:52px; }
.services-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.service-card { border-radius:16px;padding:24px 24px 20px;border-color:var(--line);box-shadow:var(--shadow); }
.service-card:hover { transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 9px 28px #1765b611; }
.service-name { font-family:var(--latin);font-size:16px;font-weight:600;letter-spacing:-.02em; }
.service-thai { font-family:var(--display);font-size:16px;font-weight:400;line-height:1.5;margin-top:4px; }
.service-desc { font-size:13px;line-height:1.8;color:var(--muted); }
.service-top { margin-bottom:15px; }
.service-icon { background:linear-gradient(135deg,#f1f9ff,#eaf3ff);border:1px solid #e2effd;border-radius:11px;color:#126bf0; }
[data-theme=dark] .service-icon { background:linear-gradient(135deg,#0d2742,#0a1d34);border-color:#23466a;color:#9fdcff;filter:drop-shadow(0 0 8px #5cadff10); }
.service-icon .icon { width:25px;height:25px; }
.service-bottom { font-family:var(--latin);font-size:9px;letter-spacing:0; }
.card-index { font-family:var(--latin);font-weight:500;color:var(--subtle); }
[data-theme=dark] .service-card { background:linear-gradient(115deg,#081527,#061120); }
[data-theme=dark] .service-card:hover { box-shadow:0 0 20px #3ba2ff10;border-color:#3b79a8; }
.plans-section { background:var(--surface-alt);padding-top:43px;padding-bottom:43px; }
.plan-card { border:1px solid var(--line);border-radius:16px;box-shadow:none; }
.plan-copy h3 { font-size:23px;font-weight:400; }
.plan-copy p { font-size:13px; }
.plan-copy .eyebrow { font-size:9px; }
.technology-section { padding-top:50px;padding-bottom:39px; }
.tech-layout { grid-template-columns:260px 1fr;gap:36px; }
.tech-heading h2 { font-size:29px;line-height:1.4;letter-spacing:0; }
.tech-heading>p:not(.eyebrow) { font-size:13px; }
.tech-item { border-radius:12px;background:var(--surface);border:1px solid var(--line);padding:17px 15px;box-shadow:var(--shadow); }
.tech-item b { font-family:var(--latin);font-size:12px;font-weight:600; }
.tech-item small { font-size:11px; }
.tech-item>.icon { width:28px;height:28px; }
.roles-section { padding-top:30px;padding-bottom:49px; }
.role-tabs>button { border-radius:13px;border:1px solid var(--line); }
.role-tabs>button b { font-family:var(--display);font-size:14px;font-weight:400; }
.role-tabs>button small { font-size:11px; }
.role-description { font-size:13px; }
.role-panel { border-radius:13px; }
.portfolio-section { padding-top:49px;padding-bottom:59px;background:linear-gradient(var(--surface-alt),var(--bg)); }
.portfolio-filters>button { font-family:var(--latin);font-size:11px;font-weight:500; }
.project-card { border-radius:16px;box-shadow:var(--shadow); }
.project-info h3 { font-family:var(--latin);font-size:20px;font-weight:600;letter-spacing:-.04em; }
.project-info>p { font-size:13px;line-height:1.8; }
.project-category { font-family:var(--latin);font-size:9px;font-weight:600;letter-spacing:.12em; }
.project-tags>span { font-family:var(--latin);font-size:9px; }
.project-link { font-family:var(--display);font-size:14px;font-weight:400; }
.project-preview-badge { font-size:9px; }
.portfolio-note { font-size:11px; }
/* Contact is an intentional midnight / silver-blue brand signature in both themes. */
.contact-section { padding:12px 0 48px; }
.contact-card { border-radius:20px;background:radial-gradient(ellipse at 104% 20%,#21507a,transparent 52%),linear-gradient(115deg,#061529,#091e37);border:1px solid #72b6ee70;color:#dfefff;padding:46px 52px;box-shadow:0 7px 32px #0d2f6b15; }
[data-theme=dark] .contact-card { background:radial-gradient(ellipse at 104% 20%,#164572,transparent 50%),linear-gradient(115deg,#061222,#071a2e);border-color:#32618c; }
.contact-copy h2 { font-size:33px;color:#f1f7ff;line-height:1.3;font-weight:400; }
.contact-copy h2 span { color:#9bddff; }
.contact-copy .eyebrow { color:#8bcbff; }
.contact-copy>p:not(.eyebrow) { color:#b5cde4;font-size:14px; }
.contact-method { color:#eaf6ff;border-color:#355473; }
.contact-method strong { color:#f0f7ff;font-family:var(--latin);font-size:22px;font-weight:500;letter-spacing:-.02em; }
.contact-method small { color:#c1d6e9;font-size:11px; }
.contact-method>span { background:#143657;border:1px solid #446a91;color:#9fdbff;box-shadow:none; }
.contact-method>.icon { color:#a4d8ff; }
.contact-bottom { color:#b2cce1;font-size:10px; }
.contact-bottom .icon { color:#92d6ff; }
.contact-emblem { opacity:.15; }
.contact-emblem .theme-light { display:none!important; }
.contact-emblem .theme-dark { display:inline-block!important; }
.footer-top>p { font-family:var(--latin);font-size:12px; }
.footer-bottom { font-size:11px; }
.footer-bottom>span { font-size:10px; }
.brand-guide-link { margin-left:0!important;color:var(--muted);font-family:var(--latin); }
.brand-guide-link:hover { color:var(--primary); }
.dialog-top .eyebrow { font-size:9px; }
.detail-lead { font-size:15px;line-height:1.85; }
.detail-list { font-size:14px; }
.detail-note { font-size:12px; }
.field input,.field select,.field textarea { font-size:15px; }
.chat-bubble { font-size:14px;line-height:1.8; }
.chat-form input { font-size:15px; }
.chat-starters>button { font-size:11px; }
.chat-heading b { font-family:var(--latin); }
.floating-ai { box-shadow:0 3px 20px #1464b52b; }
/* Compact desktop keeps the approved row-of-services composition, without unreadable text. */
@media(min-width:1450px) {
  .services-grid { grid-template-columns:repeat(6,minmax(0,1fr));gap:14px; }
  .service-card { padding:22px 18px 16px; }
  .service-name { font-size:14px; }
  .service-thai { font-size:15px;min-height:45px; }
  .service-desc { font-size:12px;line-height:1.8; }
  .service-bottom { font-size:8px; }
  .service-top { margin-bottom:16px; }
}
@media(min-width:1700px) {
  .hero-inner { min-height:635px;padding-block:67px; }
  .hero-visual { height:435px; }
  .dashboard-shell { height:389px; }
  .hero-ai-card { top:72px; }
}
@media(max-width:1280px) {
  .container { width:calc(100% - 72px); }
  .header-inner { gap:20px; }
  .brand-type { width:168px; }
  .brand-emblem,.brand-emblem img { width:45px;height:45px; }
  .desktop-nav { gap:24px; }
  .hero-inner { gap:26px;min-height:570px; }
  .hero-copy h1 { font-size:36px; }
  .hero-description { font-size:15px; }
  .hero-copy .eyebrow { font-size:8px;letter-spacing:.12em; }
  .hero-benefits { gap:10px; }
  .hero-benefits b { font-size:8px; }
  .hero-benefits small { font-size:9px; }
  .hero-benefits .icon { width:23px;height:23px; }
  .hero-visual { height:394px; }
  .dashboard-shell { width:calc(100% - 20px);height:354px; }
  .hero-ai-card { width:185px;right:-12px;top:69px;padding:12px; }
  .orb-scene { height:113px; }
  .metric>strong { font-size:16px; }
  .dash-content { padding:16px 13px; }
  .main-chart { height:95px; }
  .tech-layout { grid-template-columns:220px 1fr;gap:26px; }
  .tech-item { padding:15px 11px;gap:9px; }
  .tech-item b { font-size:10px; }
  .tech-item small { font-size:10px; }
  .tech-heading h2 { font-size:26px; }
  .service-name { font-size:16px; }
  .role-tabs>button b { font-size:13px; }
  .role-tabs>button small { font-size:10px; }
  .contact-card { gap:37px;padding:40px; }
  .contact-method strong { font-size:20px; }
}
@media(max-width:1080px) {
  .site-header { height:78px; }
  .container { width:calc(100% - 56px); }
  .hero-inner { grid-template-columns:1fr;gap:30px;padding:48px 0 60px; }
  .hero-copy { text-align:center;padding:0;max-width:700px;margin:auto; }
  .hero-copy h1 { font-size:48px; }
  .hero-copy .eyebrow { font-size:9px;letter-spacing:.16em;justify-content:center;margin-bottom:20px; }
  .hero-description { margin-inline:auto;font-size:16px; }
  .hero-ctas { justify-content:center; }
  .hero-benefits { width:560px;max-width:100%;margin:30px auto 0; }
  .hero-benefits>div { text-align:left; }
  .hero-benefits b { font-size:10px; }
  .hero-benefits small { font-size:11px; }
  .hero-visual { width:690px;max-width:calc(100% - 25px);height:430px;margin:6px auto 0; }
  .dashboard-shell { width:calc(100% - 45px);height:381px; }
  .hero-ai-card { width:213px;top:71px;right:-11px;padding:15px 13px 12px; }
  .orb-scene { height:132px; }
  .dash-content { padding:19px 16px; }
  .main-chart { height:111px; }
  .metric>strong { font-size:19px; }
  .hero-watermark { opacity:.1;top:82px; }
  .celestial-planet { top:260px;right:-190px;width:570px;height:570px;opacity:.36; }
  [data-theme=dark] .celestial-planet { top:80px;right:-310px;width:800px;height:800px;opacity:.6; }
  .celestial-orbit { top:100px;opacity:.5; }
  .cosmic-edge,[data-theme=dark] .cosmic-edge { width:340px;height:320px;opacity:.55; }
  .exploration-caption { display:none; }
  .services-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:15px; }
  .service-card { padding:23px 20px; }
  .service-thai { font-size:16px; }
  .service-desc { font-size:13px; }
  .service-name { font-size:15px; }
  .tech-layout { grid-template-columns:1fr;gap:24px; }
  .tech-heading { display:grid;grid-template-columns:1fr 1fr;column-gap:30px;align-items:center; }
  .tech-heading .eyebrow { grid-column:1 / -1; }
  .tech-heading .text-link { margin:0;grid-column:2; }
  .technology-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .tech-item b { font-size:11px; }
  .tech-item small { font-size:11px; }
  .section-heading { align-items:flex-start; }
  .section-heading>p { font-size:12px; }
  .role-tabs>button { padding:15px 10px;gap:8px; }
  .role-tabs>button b { font-size:12px; }
  .role-tabs>button small { font-size:10px; }
  .contact-card { padding:35px;gap:30px; }
  .contact-method strong { font-size:19px; }
}
@media(max-width:760px) {
  .container { width:calc(100% - 40px); }
  .site-header { height:72px; }
  .header-cta { display:none; }
  .brand-type { width:149px; }
  .brand-emblem,.brand-emblem img { width:39px;height:39px; }
  .header-actions { gap:10px; }
  .hero-inner { padding:39px 0 43px;gap:20px; }
  .hero-copy { text-align:left;width:100%;max-width:580px; }
  .hero-copy .eyebrow { justify-content:flex-start;font-size:8px;letter-spacing:.14em;margin-bottom:19px; }
  .hero-copy h1 { font-size:clamp(29px,5.3vw,40px);line-height:1.28; }
  .hero-description { font-size:14px;line-height:1.85;margin-top:20px;margin-left:0; }
  .hero-ctas { justify-content:flex-start;gap:12px;margin-top:24px; }
  .hero-ctas .button { font-size:15px;min-height:46px;padding:11px 24px; }
  .hero-benefits { width:100%;max-width:520px;margin-top:26px;margin-left:0;gap:13px; }
  .hero-benefits .icon { width:22px;height:22px; }
  .hero-benefits>div { gap:7px; }
  .hero-benefits b { font-size:8px;white-space:normal; }
  .hero-benefits small { font-size:9px;white-space:normal; }
  .hero-visual { max-width:calc(100% - 14px);width:560px;height:357px;margin:7px auto 0; }
  .dashboard-shell { top:16px;width:calc(100% - 14px);height:313px;border-radius:13px; }
  .dashboard-top { height:37px;padding-inline:9px; }
  .dashboard-brand { font-size:8px; }
  .dashboard-body { height:calc(100% - 37px); }
  .dash-sidebar { width:86px;padding:12px 7px; }
  .dash-sidebar button,.dash-nav-decoration { font-size:7px;gap:5px;padding:7px 4px; }
  .dash-content { padding:14px 11px; }
  .dash-greeting h3 { font-size:10px; }
  .dash-greeting small { font-size:7px; }
  .metric-grid { margin-top:12px;gap:6px; }
  .metric { padding:9px 7px;gap:4px; }
  .metric>span { font-size:6px; }
  .metric>strong { font-size:15px; }
  .metric>small { font-size:5px; }
  .dash-panels { grid-template-columns:1fr 82px;gap:6px;margin-top:10px; }
  .main-chart { height:88px; }
  .panel-title,.status-panel>b { font-size:6px; }
  .status-panel { gap:10px;padding:9px 6px; }
  .status-panel>span { font-size:5px; }
  .hero-ai-card { width:178px;top:66px;right:-8px;padding:12px 11px;border-radius:14px; }
  .ai-card-title b { font-size:8px; }
  .ai-card-title small { font-size:6px; }
  .ai-mini-icon,.ai-mini-icon img { width:25px;height:25px; }
  .orb-scene { height:106px; }
  .visual-caption { font-size:6px; }
  .cosmic-edge,[data-theme=dark] .cosmic-edge { width:240px;height:310px; }
  .celestial-planet { width:480px;height:480px;top:290px;right:-330px; }
  [data-theme=dark] .celestial-planet { width:640px;height:640px;top:320px;right:-400px;opacity:.54; }
  .hero-watermark { width:280px;height:280px;left:-220px;top:60px;opacity:.07; }
  .star-point-one { left:auto;right:24px;top:135px; }
  .star-point-two { display:none; }
  .section { padding-block:40px; }
  .section-heading { display:block;margin-bottom:24px; }
  .section-heading h2,h2 { font-size:27px;line-height:1.4; }
  .section-heading h2>span:not(.heading-latin) { font-size:.8em; }
  .section-heading>p { margin-top:12px;font-size:13px; }
  .section-heading .eyebrow,.eyebrow { font-size:9px; }
  .services-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
  .service-card { padding:23px 18px 17px;border-radius:14px; }
  .service-name { font-size:15px; }
  .service-thai { font-size:16px; }
  .service-desc { font-size:13px;line-height:1.8; }
  .service-bottom { font-size:8px;margin-top:18px; }
  .plans-grid { grid-template-columns:1fr;gap:14px; }
  .plan-card { padding:26px 22px; }
  .plan-copy h3 { font-size:22px; }
  .plan-copy p { font-size:14px; }
  .plan-note { font-size:11px; }
  .tech-heading { display:block; }
  .tech-heading h2 { font-size:27px; }
  .tech-heading>p:not(.eyebrow) { font-size:14px; }
  .tech-heading .text-link { margin-top:12px; }
  .technology-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
  .tech-item { padding:16px 12px;min-height:76px;gap:9px; }
  .tech-item b { font-size:12px; }
  .tech-item small { font-size:11px; }
  .role-tabs>button b { font-size:14px; }
  .role-tabs>button small { font-size:11px; }
  .role-tabs>button { padding:18px 13px; }
  .role-panel { font-size:13px;padding:17px; }
  .portfolio-filters { margin-top:20px;padding:5px;gap:4px;max-width:100%;display:flex;flex-wrap:wrap; }
  .portfolio-filters>button { font-size:11px;min-height:35px;padding:7px 12px; }
  .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:15px; }
  .project-info { padding:20px 18px; }
  .project-info h3 { font-size:18px; }
  .project-info>p { font-size:13px; }
  .contact-section { padding:8px 0 34px; }
  .contact-card { grid-template-columns:1fr;padding:32px 26px;gap:28px;border-radius:18px; }
  .contact-copy h2 { font-size:31px; }
  .contact-copy>p:not(.eyebrow) { font-size:14px; }
  .contact-method strong { font-size:21px; }
  .contact-method small { font-size:11px; }
  .contact-bottom { font-size:10px; }
  .contact-emblem { opacity:.1; }
  .footer-bottom { gap:15px; }
  .footer-bottom>span { font-size:10px; }
  .brand-guide-link { font-size:11px; }
  .detail-lead { font-size:15px; }
  .detail-note { font-size:12px; }
  .chat-bubble { font-size:14px; }
  .chat-form input { font-size:16px; }
  .chat-starters>button { font-size:11px; }
}
@media(max-width:470px) {
  .container { width:calc(100% - 36px); }
  .brand-type { width:135px; }
  .brand-emblem,.brand-emblem img { width:36px;height:36px; }
  .hero-copy h1 { font-size:clamp(26px,6.3vw,30px);line-height:1.35; }
  .hero-copy .eyebrow { font-size:7px;letter-spacing:.095em;gap:7px; }
  .hero-description { font-size:14px;line-height:1.85; }
  .mobile-break { display:block; }
  .hero-ctas .button { font-size:14px;min-height:46px;padding-inline:21px; }
  .hero-benefits { gap:13px; }
  .hero-benefits>div { flex-direction:column;align-items:flex-start;gap:7px; }
  .hero-benefits b { font-size:9px;line-height:1.4; }
  .hero-benefits small { font-size:10px; }
  .hero-visual { width:100%;height:303px;max-width:calc(100% - 3px);margin-top:9px; }
  .dashboard-shell { height:263px;width:calc(100% - 14px);top:15px; }
  .dashboard-top { height:33px; }
  .dashboard-body { height:calc(100% - 33px); }
  .dashboard-brand { font-size:7px; }
  .dash-sidebar { width:61px;padding:9px 4px; }
  .dash-sidebar button,.dash-nav-decoration { font-size:5px;gap:3px;padding:6px 3px; }
  .dash-sidebar .icon { width:9px;height:9px; }
  .dash-content { padding:11px 9px; }
  .dash-greeting h3 { font-size:8px; }
  .dash-greeting small { font-size:6px; }
  .metric-grid { margin-top:10px;gap:4px; }
  .metric { padding:7px 5px;gap:3px; }
  .metric>span { font-size:5px; }
  .metric>strong { font-size:11px; }
  .metric>small { font-size:4px; }
  .dash-panels { grid-template-columns:1fr 62px;gap:4px;margin-top:8px; }
  .main-chart { height:72px; }
  .chart-panel { padding:8px 6px; }
  .panel-title { font-size:5px; }
  .status-panel { gap:7px;padding:8px 5px; }
  .status-panel>b { font-size:5px; }
  .status-panel>span { font-size:4px;gap:3px; }
  .dash-bottom-note { font-size:4px;margin-top:7px; }
  .hero-ai-card { width:148px;top:66px;right:-6px;padding:11px 9px 9px; }
  .ai-card-title b { font-size:7px; }
  .ai-card-title small { font-size:5px; }
  .ai-mini-icon,.ai-mini-icon img { width:23px;height:23px; }
  .orb-scene { height:86px; }
  .hero-ai-card h3 { font-size:11px; }
  .hero-ai-card>p { font-size:8px; }
  .ai-suggestion { font-size:7px; }
  .hero-ai-card .ai-disclaimer { font-size:6px; }
  .visual-caption { font-size:5px; }
  .section-heading h2,h2 { font-size:26px; }
  .section-heading h2>span:not(.heading-latin) { display:block;font-size:21px;margin-top:3px; }
  .service-card { padding:20px 15px 16px; }
  .service-name { font-size:13px; }
  .service-thai { font-size:15px; }
  .service-desc { font-size:12px;line-height:1.85; }
  .service-bottom { font-size:7px; }
  .service-top { margin-bottom:12px; }
  .tech-item b { font-size:11px; }
  .tech-item small { font-size:10px; }
  .tech-item>.icon { width:25px;height:25px; }
  .role-tabs>button b { font-size:13px; }
  .role-tabs>button small { font-size:11px; }
  .role-tabs>button { padding:16px 11px;gap:9px; }
  .portfolio-grid { grid-template-columns:1fr;gap:20px; }
  .portfolio-filters>button { font-size:10px;padding-inline:10px; }
  .project-info { padding:23px 22px; }
  .project-info h3 { font-size:20px; }
  .project-info>p { font-size:14px; }
  .project-category { font-size:9px; }
  .project-tags>span { font-size:10px; }
  .project-link { font-size:14px; }
  .portfolio-note { font-size:10px; }
  .contact-card { padding:31px 24px; }
  .contact-copy h2 { font-size:29px; }
  .contact-method strong { font-size:19px; }
  .contact-method>span { width:38px;height:38px; }
  .contact-bottom { font-size:9px;gap:10px; }
  .footer-top>div { font-size:12px; }
  .footer-top>div .text-link { font-size:12px; }
  .dialog-contact-links a { font-size:12px; }
  .form-tools>button { font-size:12px; }
  .chat-heading small { font-size:10px; }
  .chat-starters>button { font-size:11px; }
}
@media(max-width:360px) {
  .container { width:calc(100% - 28px); }
  .brand-type { width:118px; }
  .header-actions { gap:5px; }
  .hero-copy h1 { font-size:24px; }
  .hero-copy .eyebrow { font-size:6px; }
  .hero-description { font-size:13px; }
  .hero-ctas .button { padding-inline:17px;font-size:13px; }
  .services-grid { grid-template-columns:1fr; }
  .service-name { font-size:16px; }
  .service-thai { font-size:17px; }
  .service-desc { font-size:14px; }
  .hero-ai-card { width:139px; }
  .tech-item b { font-size:10px; }
  .contact-card { padding:28px 21px; }
  .contact-method strong { font-size:17px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-visual,.celestial-orbit { transition:none; }
}
@media print {
  .celestial-planet,.celestial-orbit,.star-point,.exploration-caption,.brand-guide-link { display:none!important; }
  .brand-gradient { -webkit-text-fill-color:#071b44;color:#071b44;background:none; }
  .contact-card { background:#f3f6fa!important;color:#173151; }
  .contact-copy h2,.contact-method strong { color:#173151!important; }
}

/* Readable interface copy and input type size. */
.ai-card-copy strong{font-family:var(--display);font-size:15px;font-weight:500;line-height:1.4}
.ai-card-copy p{font-family:var(--font);font-size:10px;line-height:1.7}
.ai-demo-label{font-size:7px}
.role-panel p{font-size:13px;line-height:1.8}
.role-panel b{font-family:var(--display);font-size:14px;font-weight:400}
#contactForm input,#contactForm select,#contactForm textarea{font-size:16px}
@media(max-width:760px){.ai-card-copy strong{font-size:12px}.ai-card-copy p{font-size:9px}.ai-demo-label{font-size:6px}.role-panel p{font-size:13px}}
@media(max-width:470px){.ai-card-copy strong{font-size:11px}.ai-card-copy p{font-size:8px}.ai-demo-label{font-size:6px}.role-panel b{font-size:14px}}