:root { --ink:#121927; --muted:#5c6778; --line:#d7dfe9; --paper:#f6f8fb; --white:#fff; --navy:#0a1730; --navy-2:#10284f; --slate:#202a39; --blue:#4f8dff; --blue-pale:#e8f0ff; --max:1160px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:74px; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,system-ui,sans-serif; line-height:1.65; overflow-x:hidden; } a { color:inherit; text-decoration:none; } button { font:inherit; } img { display:block; max-width:100%; }.container { width:min(calc(100% - 40px),var(--max)); margin:0 auto; }.narrow { max-width:780px; margin-left:0; }.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }.skip-link { position:fixed; left:20px; top:-100px; z-index:10; background:#fff; padding:10px 14px; border:1px solid var(--ink); }.skip-link:focus { top:20px; }
.site-header { position:sticky; top:0; z-index:5; background:rgb(10 23 48 / .96); color:#eef4ff; border-bottom:1px solid rgb(255 255 255 / .14); backdrop-filter:blur(14px); }.nav { height:72px; display:flex; align-items:center; justify-content:space-between; }.brand { letter-spacing:.12em; font-size:.9rem; font-weight:800; }.nav-links { display:flex; align-items:center; gap:27px; color:#c5d0e3; font-size:.91rem; }.nav-links a { padding:8px 0; }.nav-links a:hover,.nav-links a:focus-visible { color:#fff; }.menu-toggle { display:none; padding:8px; border:0; background:transparent; }.menu-toggle span:not(.sr-only) { display:block; width:22px; height:1.5px; margin:5px; background:#fff; }
.hero { color:#f7faff; background:var(--navy); padding:72px 0 0; }.hero-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:center; gap:75px; }.eyebrow { margin:0 0 13px; color:var(--blue); text-transform:uppercase; font-size:.76rem; font-weight:800; letter-spacing:.14em; }.hero h1 { margin:0; font-size:clamp(4rem,9vw,8.3rem); line-height:.86; letter-spacing:-.08em; }.hero-services { margin:26px 0 0; font-size:clamp(1.4rem,2.5vw,2.2rem); font-weight:800; line-height:1.35; letter-spacing:-.035em; }.hero-statement { margin:28px 0 14px; max-width:650px; font-size:clamp(1.85rem,3.3vw,3.15rem); font-weight:700; line-height:1.22; letter-spacing:-.045em; }.hero-statement span { color:#8db8ff; }.intro { max-width:540px; margin:0; color:#b9c7dc; font-size:1.04rem; }.hero-price { display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:12px; width:max-content; margin-top:28px; padding:12px 16px 10px; border-left:3px solid var(--blue); background:rgb(255 255 255 / .07); }.hero-price span { color:#c9d8f2; font-size:.82rem; }.hero-price strong { font-size:1.42rem; line-height:1; letter-spacing:-.04em; }.hero-price p { grid-column:1 / -1; margin:2px 0 0; color:#b9c7dc; font-size:.78rem; }.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 18px; border-radius:4px; font-weight:800; font-size:.91rem; transition:background .15s,color .15s,border-color .15s; }.button-primary { color:#fff; background:#276fe9; }.button-primary:hover { background:#145bcf; }.button-secondary { color:#eaf1ff; border:1px solid #607695; }.button-secondary:hover { color:#fff; border-color:#fff; }.button-disabled { cursor:not-allowed; color:#afc2e1; border:1px solid #41628e; background:rgb(255 255 255 / .06); }.hero-visual { margin:0; padding:10px; background:linear-gradient(145deg,#284b7e,#10244a); border-radius:10px 10px 0 0; box-shadow:0 20px 60px rgb(0 0 0 / .22); }.hero-visual img { width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top; border-radius:5px; }.hero-visual figcaption { padding:10px 3px 0; color:#cad6ea; font-size:.73rem; letter-spacing:.04em; }.mini-highlights { display:grid; grid-template-columns:repeat(3,1fr); margin-top:52px; border-top:1px solid rgb(255 255 255 / .14); }.mini-highlights span { padding:17px 22px; color:#c9d6ea; font-size:.86rem; font-weight:700; border-right:1px solid rgb(255 255 255 / .14); }.mini-highlights span:first-child { padding-left:0; }.mini-highlights span:last-child { border:0; }
.section { padding:88px 0; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:38px; }.section h2 { margin:0; font-size:clamp(2.3rem,4vw,4rem); font-weight:850; line-height:1.08; letter-spacing:-.055em; }.section-heading > p { max-width:380px; margin:0; color:var(--muted); font-size:1.03rem; }.work { background:#e9eff7; }.project-list { display:grid; gap:20px; }.project { display:grid; grid-template-columns:260px minmax(0,1fr); gap:48px; padding:34px; background:var(--white); border:1px solid #dbe3ed; border-radius:8px; box-shadow:0 8px 23px rgb(22 45 77 / .06); }.project-meta { display:flex; gap:14px; }.project-meta span,.service-list span { color:#286fe8; font-size:.8rem; font-weight:850; padding-top:5px; }.project h3 { margin:0; font-size:1.38rem; line-height:1.28; letter-spacing:-.035em; }.project-content > p { max-width:690px; margin:0 0 16px; font-size:1.03rem; }.project-note { color:var(--muted); }.video-wrap { position:relative; overflow:hidden; width:100%; aspect-ratio:16/9; margin-top:25px; background:#152742; border-radius:7px; box-shadow:0 9px 20px rgb(27 43 67 / .14); }.video-wrap iframe { position:absolute; width:100%; height:100%; border:0; }.text-link { display:inline-block; margin-top:14px; color:#174a9e; font-size:.9rem; font-weight:850; }.text-link span { margin-left:5px; }
.featured { color:#f5f8ff; background:var(--navy-2); }.featured .eyebrow { color:#83b0ff; }.feature-grid { display:grid; grid-template-columns:minmax(0,.92fr) minmax(430px,1.08fr); align-items:center; gap:74px; }.feature-subtitle { margin:9px 0 24px; color:#91b8ff; font-size:1.13rem; font-weight:800; }.feature-copy > p:not(.eyebrow):not(.feature-subtitle) { max-width:525px; margin-bottom:26px; color:#cfdaec; font-size:1.04rem; }.capabilities { list-style:none; padding:0; margin:0 0 30px; display:flex; flex-wrap:wrap; gap:8px; }.capabilities li { border:1px solid #5577a8; color:#dbe7fa; padding:5px 9px; border-radius:3px; font-size:.78rem; }.feature-image { margin:0; padding:10px; background:#edf3ff; border-radius:8px; box-shadow:0 22px 55px rgb(0 0 0 / .24); }.feature-image img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:4px; }.feature-image figcaption { margin-top:9px; color:#576270; font-size:.75rem; }
.services { color:#eff4fc; background:var(--slate); }.services .eyebrow { color:#8eb7ff; }.services .section-heading > p { color:#b7c2d2; }.service-list { display:grid; grid-template-columns:repeat(3,1fr); gap:0 38px; }.service-list article { display:grid; grid-template-columns:28px 1fr; column-gap:12px; padding:25px 0; border-top:1px solid rgb(255 255 255 / .18); }.service-list h3 { margin:0 0 7px; font-size:1.12rem; line-height:1.38; }.service-list p { grid-column:2; margin:0; color:#b9c5d4; font-size:.93rem; }.about { background:#fff; }.about-copy { margin:25px 0 18px; font-size:1.4rem; font-weight:800; line-height:1.53; letter-spacing:-.025em; }.about-copy + p { max-width:650px; color:var(--muted); font-size:1.06rem; }.contact { color:#fff; background:#071326; }.contact .eyebrow { color:#8eb7ff; }.contact h2 { max-width:750px; font-size:clamp(2.5rem,4.6vw,4.4rem); }.contact .narrow > p:not(.eyebrow) { max-width:700px; margin:15px 0 0; color:#c5d0e2; font-size:1.1rem; }.contact .contact-emphasis { color:#fff!important; font-size:1.4rem!important; font-weight:800; }.contact-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }.contact .button-secondary { color:#fff; border-color:#6a7e9d; }.contact-empty { margin-top:25px!important; font-size:.9rem!important; } footer { color:#aebdce; background:#071326; border-top:1px solid #27394f; font-size:.79rem; } footer .container { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:21px 0; } footer span:first-child { color:#fff; letter-spacing:.1em; font-weight:850; }
@media (max-width:900px) { .hero-grid { grid-template-columns:minmax(0,1fr) 270px; gap:42px; }.project { grid-template-columns:205px minmax(0,1fr); gap:32px; }.feature-grid { grid-template-columns:minmax(0,1fr) minmax(340px,1fr); gap:44px; }.service-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px) { html { scroll-padding-top:64px; }.nav { height:64px; }.menu-toggle { display:block; z-index:2; }.nav-links { display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:3px; padding:13px 20px 18px; color:#e9f0fb; background:var(--navy); border-bottom:1px solid rgb(255 255 255 / .14); }.nav-links.is-open { display:flex; }.nav-links a { width:100%; padding:10px 0; }.hero { padding-top:58px; }.hero-grid { grid-template-columns:1fr; gap:38px; }.hero h1 { font-size:clamp(4rem,18vw,6rem); }.hero-visual { width:min(100%,390px); }.mini-highlights { grid-template-columns:1fr; margin-top:37px; }.mini-highlights span,.mini-highlights span:first-child { padding:13px 0; border-right:0; border-bottom:1px solid rgb(255 255 255 / .14); }.mini-highlights span:last-child { border-bottom:0; }.section { padding:68px 0; }.section-heading { display:block; margin-bottom:30px; }.section-heading > p { margin-top:15px; }.project { grid-template-columns:1fr; gap:22px; padding:23px; }.project h3 br { display:none; }.feature-grid { grid-template-columns:1fr; gap:38px; }.feature-image { width:min(100%,560px); transform:none; }.service-list { grid-template-columns:1fr; }.narrow { max-width:100%; } }
@media (max-width:440px) { .container { width:min(calc(100% - 32px),var(--max)); }.hero-services { font-size:1.42rem; }.hero-statement { margin-top:25px; font-size:1.88rem; }.intro br { display:none; }.hero-price { margin-top:23px; }.actions .button { flex:1; }.section h2 { font-size:2.25rem; }.project { padding:20px; }.project-content > p { font-size:1rem; }.contact h2 { font-size:2.5rem; } footer .container { flex-direction:column; gap:4px; } }
/* Centered, readable closing sections */
.about { padding:70px 0; }
.about .narrow, .contact .narrow { width:min(calc(100% - 40px),700px); margin-left:auto; margin-right:auto; text-align:center; }
.about .eyebrow, .contact .eyebrow { margin-bottom:17px; }
.about h2 { margin-bottom:29px; }
.about-copy { margin:0 0 22px; font-size:1.48rem; font-weight:800; line-height:1.58; letter-spacing:-.025em; }
.about-copy + p { max-width:680px; margin:0 auto; color:var(--muted); font-size:1.12rem; line-height:1.9; }
.contact h2 { max-width:700px; margin-left:auto; margin-right:auto; }
.contact .narrow > p:not(.eyebrow) { max-width:680px; margin:20px auto 0; font-size:1.16rem; line-height:1.85; }
.contact .contact-emphasis { margin-top:26px!important; font-size:1.48rem!important; line-height:1.5!important; }
.contact-links { justify-content:center; margin-top:34px; }
.contact-empty { margin-left:auto!important; margin-right:auto!important; font-size:.96rem!important; }
@media (max-width:720px) { .about { padding:60px 0; } }
@media (max-width:440px) { .about .narrow, .contact .narrow { width:min(calc(100% - 32px),700px); }.about h2 { margin-bottom:23px; }.about-copy { font-size:1.34rem; }.about-copy + p, .contact .narrow > p:not(.eyebrow) { font-size:1.06rem; line-height:1.8; }.contact .contact-emphasis { font-size:1.31rem!important; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }

/* Premium copy and direct-contact refinements */
.feature-subtitle { font-size:1.26rem; line-height:1.55; }
.feature-copy > p:not(.eyebrow):not(.feature-subtitle) { font-size:1.12rem; line-height:1.82; }
.feature-tech { max-width:580px; margin:0 0 31px!important; color:#e0eaff!important; font-size:1rem!important; font-weight:800; line-height:1.75!important; }
.feature-tech span { color:#86aff8; padding:0 4px; }
.service-list { gap:0 46px; }
.service-list article { grid-template-columns:35px 1fr; column-gap:15px; padding:31px 0; }
.service-list span { font-size:.9rem; padding-top:6px; }
.service-list h3 { margin:0 0 10px; font-size:1.3rem; font-weight:850; line-height:1.42; letter-spacing:-.02em; }
.service-list p { color:#d1dbea; font-size:1.06rem; line-height:1.78; }
.price { padding:78px 0; background:#e4edf9; text-align:center; }
.price .narrow { width:min(calc(100% - 40px),700px); margin-left:auto; margin-right:auto; }
.price .eyebrow { margin-bottom:14px; }
.price-kicker { margin:0 0 6px; color:#385274; font-size:1.12rem; font-weight:800; }
.price h2 { color:#0f2850; font-size:clamp(2.55rem,4.6vw,4.35rem); }
.price h2 + p { max-width:570px; margin:18px auto 0; color:#43556d; font-size:1.12rem; line-height:1.8; }
.price-note { max-width:570px; margin:14px auto 0; color:#64748a; font-size:.99rem; line-height:1.75; }
.contact { padding:92px 0; }
.contact h2 { max-width:680px; font-size:clamp(2.45rem,4.5vw,4.25rem); }
.contact .contact-summary { max-width:640px!important; margin-top:20px!important; color:#cdd9eb!important; font-size:1.16rem!important; line-height:1.85!important; }
.contact-phone { margin:35px auto 0; padding:25px 18px 27px; max-width:640px; border-top:1px solid rgb(142 183 255 / .35); border-bottom:1px solid rgb(142 183 255 / .35); }
.contact-phone span { display:block; margin-bottom:6px; color:#96bbff; font-size:.84rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.contact-phone a { display:inline-block; color:#fff; font-size:clamp(2.65rem,6vw,5.5rem); font-weight:850; line-height:1; letter-spacing:-.07em; text-decoration:none; text-shadow:0 0 28px rgb(89 144 255 / .17); }
.contact-phone a:hover,.contact-phone a:focus-visible { color:#9ac1ff; }
.contact-lower { display:flex; flex-direction:column; align-items:center; gap:21px; margin:37px auto 0; }
.line-qr { margin:0; padding:10px; background:#fff; border-radius:7px; box-shadow:0 15px 36px rgb(0 0 0 / .16); }
.line-qr img { width:220px; height:220px; object-fit:contain; }
.line-qr figcaption { margin-top:10px; color:#202a39; font-size:.92rem; font-weight:800; }
.contact-details > p { margin:0 0 10px; color:#96bbff; font-size:.8rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.contact-links { justify-content:center; margin-top:0; }
.contact .contact-links .button { min-width:116px; }
@media (max-width:720px) { .service-list article { padding:27px 0; }.service-list h3 { font-size:1.24rem; }.service-list p { font-size:1.03rem; }.price { padding:66px 0; }.contact { padding:74px 0; } }
@media (max-width:440px) { .feature-subtitle { font-size:1.16rem; }.feature-copy > p:not(.eyebrow):not(.feature-subtitle) { font-size:1.06rem; }.feature-tech { font-size:.93rem!important; }.service-list article { grid-template-columns:31px 1fr; column-gap:12px; padding:25px 0; }.service-list span { font-size:.84rem; }.service-list h3 { font-size:1.17rem; }.service-list p { font-size:1rem; line-height:1.76; }.price .narrow { width:min(calc(100% - 32px),700px); }.price h2 { font-size:2.45rem; }.price h2 + p { font-size:1.06rem; }.contact-phone { margin-top:30px; padding:23px 5px 25px; }.contact-phone a { font-size:clamp(2.45rem,12.2vw,3.45rem); letter-spacing:-.065em; }.line-qr img { width:205px; height:205px; }.contact .contact-summary { font-size:1.08rem!important; } }

/* AI AMULET and Services: exact dark treatment and readable scale */
.featured { background:#05070A !important; }
.featured h2 { font-size:clamp(48px,4.2vw,60px); font-weight:800; line-height:1.12; }
.featured .feature-subtitle { font-size:20px; font-weight:800; line-height:1.55; }
.featured .feature-copy > p:not(.eyebrow):not(.feature-subtitle):not(.feature-tech) { color:#D7DEE9; font-size:18px; line-height:1.7; }
.featured .feature-tech { color:#E5EAF2!important; font-size:16px!important; font-weight:600; line-height:1.7!important; }
.featured .feature-image { padding:0; overflow:hidden; background:transparent; border:1px solid rgba(255,255,255,0.12); border-radius:12px; box-shadow:0 16px 38px rgba(0,0,0,0.24); transform:none!important; rotate:0deg!important; }
.featured .feature-image img { border-radius:0; }
.featured .feature-image figcaption { margin:0; padding:10px 12px; color:#C6CFDC; background:#0C0F14; font-size:.82rem; }
.services { background:#090C12 !important; }
.services .container { width:min(calc(100% - 40px),1220px); }
.services .section-heading { align-items:center; gap:64px; }
.services .section-heading > div { flex:1 1 700px; max-width:760px; }
.services .section-heading h2 { font-size:clamp(48px,4vw,56px); font-weight:800; line-height:1.15; letter-spacing:-.05em; }
.services .section-heading h2 span { white-space:nowrap; }
.services .section-heading > p { max-width:385px; color:#C9D0DB; font-size:18px; line-height:1.7; }
.services .service-list { grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:48px; row-gap:26px; }
.services .service-list article { grid-template-columns:40px minmax(0,1fr); column-gap:17px; padding:34px 0; }
.services .service-list span { color:#4F8DFF; font-size:16px; font-weight:800; padding-top:7px; }
.services .service-list h3 { margin:0 0 11px; color:#F3F6FB; font-size:22px; font-weight:700; line-height:1.4; letter-spacing:-.02em; }
.services .service-list p { color:#D3DAE5; font-size:18px; line-height:1.7; }
@media (max-width:1100px) { .services .section-heading { display:block; }.services .section-heading > div { max-width:none; }.services .section-heading > p { max-width:620px; margin-top:18px; } }
@media (max-width:720px) { .featured h2 { font-size:40px; }.featured .feature-subtitle { font-size:18px; }.featured .feature-copy > p:not(.eyebrow):not(.feature-subtitle):not(.feature-tech) { font-size:17px; }.services .container { width:min(calc(100% - 40px),1220px); }.services .service-list { grid-template-columns:1fr; row-gap:0; }.services .service-list article { grid-template-columns:37px minmax(0,1fr); column-gap:15px; padding:29px 0; }.services .service-list h3 { font-size:20px; }.services .service-list p { font-size:17px; line-height:1.7; } }
@media (max-width:440px) { .featured h2 { font-size:38px; }.featured .feature-subtitle { font-size:18px; }.featured .feature-tech { font-size:16px!important; }.services .container { width:min(calc(100% - 32px),1220px); }.services .service-list article { grid-template-columns:35px minmax(0,1fr); column-gap:13px; padding:27px 0; }.services .service-list span { font-size:15px; }.services .service-list h3 { font-size:20px; }.services .service-list p { font-size:16px; line-height:1.7; } }