/* Novara guides — brand styles shared by guides/index.html and every article.
   Mirrors index.html (Tailwind-free): dark navy ground, cyan→violet gradient,
   glass cards, Bricolage Grotesque headings + Inter body (Noto Sans Thai for th). */
:root{ --cyan:#22d3ee; --violet:#a855f7; --pink:#ec4899; --ink:#e9e7f2; --bg:#0b0713; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
html[lang="th"] body, html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] h4{ font-family:'Noto Sans Thai','Inter',system-ui,sans-serif; }
body{ overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column; }
h1,h2,h3,h4,.font-display{ font-family:'Bricolage Grotesque','Inter',system-ui,sans-serif; letter-spacing:-.02em; line-height:1.1; margin:0; }
a{ color:inherit; }
img{ max-width:100%; height:auto; }
main{ flex:1; }

/* backdrop */
.bg-aura{ position:fixed; inset:0; z-index:-2; background:
    radial-gradient(60% 50% at 15% 8%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(55% 45% at 88% 12%, rgba(168,85,247,.22), transparent 60%),
    radial-gradient(60% 50% at 50% 100%, rgba(236,72,153,.14), transparent 55%),
    linear-gradient(165deg,#0a0612 0%,#140b2b 45%,#0d0820 100%); }
.bg-grid{ position:fixed; inset:0; z-index:-1; opacity:.4;
    background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:64px 64px; mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%); -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%); }

/* brand atoms */
.grad-text{ background:linear-gradient(115deg,#67e8f9 5%,#c084fc 48%,#f9a8d4 92%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.glass{ background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%); }
.glass-strong{ background:rgba(20,12,40,.6); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.chip{ display:inline-flex; align-items:center; gap:.4em; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:999px; padding:.35rem .8rem; font-size:.8rem; color:rgba(255,255,255,.7); text-decoration:none; }
.chip:hover{ background:rgba(255,255,255,.1); color:#fff; }
.btn-primary{ display:inline-flex; align-items:center; gap:.7rem; color:#fff; text-decoration:none; font-weight:600; border-radius:1rem; padding:.85rem 1.4rem;
  background:linear-gradient(120deg,#22d3ee,#7c3aed 60%,#a855f7); box-shadow:0 10px 30px -8px rgba(124,58,237,.7),0 0 0 1px rgba(255,255,255,.08) inset; transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -8px rgba(124,58,237,.85),0 0 0 1px rgba(255,255,255,.14) inset; }
.btn-primary .stack{ text-align:left; line-height:1; }
.btn-primary .stack small{ display:block; font-size:11px; font-weight:500; opacity:.8; margin-bottom:.2rem; }
.btn-primary .stack b{ display:block; font-size:1rem; font-weight:700; }
.btn-glass{ display:inline-flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.9); text-decoration:none; font-weight:600; border-radius:1rem; padding:.85rem 1.4rem; transition:color .2s,background .2s; }
.btn-glass:hover{ color:#fff; background:rgba(255,255,255,.09); }
.btn-sm{ padding:.55rem 1rem; border-radius:999px; font-size:.85rem; }
.ce-ic{ height:1.22em; width:1.22em; vertical-align:-0.24em; object-fit:contain; display:inline-block; margin:0 .05em; }
h1 .ce-ic,h2 .ce-ic,h3 .ce-ic{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

/* layout */
.wrap{ width:100%; max-width:72rem; margin:0 auto; padding:0 1.25rem; }
.wrap-narrow{ width:100%; max-width:46rem; margin:0 auto; padding:0 1.25rem; }

/* nav */
.nav{ position:sticky; top:0; z-index:50; background:rgba(12,8,24,.72); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.nav .wrap{ height:4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none; font-family:'Bricolage Grotesque','Inter',system-ui,sans-serif; font-weight:700; font-size:1.125rem; }
.brand img{ width:30px; height:30px; border-radius:.5rem; box-shadow:0 8px 20px -6px rgba(168,85,247,.5); outline:1px solid rgba(255,255,255,.1); }
.nav-links{ display:flex; align-items:center; gap:1.4rem; font-size:.875rem; color:rgba(255,255,255,.7); }
.nav-links a{ text-decoration:none; transition:color .2s; }
.nav-links a:hover{ color:#fff; }
.nav-links .btn-primary{ padding:.5rem 1rem; border-radius:999px; font-size:.85rem; }
@media (max-width:640px){ .nav-links .hide-sm{ display:none; } }

/* breadcrumb + article header */
.crumbs{ display:flex; flex-wrap:wrap; gap:.4rem; font-size:.8rem; color:rgba(255,255,255,.45); padding:1.5rem 0 0; list-style:none; margin:0; }
.crumbs a{ color:rgba(255,255,255,.6); text-decoration:none; }
.crumbs a:hover{ color:#fff; }
.crumbs li+li::before{ content:"›"; margin-right:.4rem; }
.article-head{ padding:1.5rem 0 2rem; }
.article-head h1{ font-size:clamp(2rem,5vw,3.25rem); font-weight:800; }
.article-head .lede{ font-size:1.15rem; line-height:1.6; color:rgba(255,255,255,.7); margin:1.25rem 0 0; }
.byline{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin-top:1.5rem; font-size:.85rem; color:rgba(255,255,255,.55); }
.byline .avatar{ width:36px; height:36px; border-radius:999px; padding:2px; background:linear-gradient(135deg,#22d3ee,#a855f7); }
.byline .avatar img{ width:100%; height:100%; border-radius:999px; object-fit:cover; display:block; background:#0b0713; }
.byline .dot{ opacity:.4; }

/* article body */
.prose{ font-size:1.0625rem; line-height:1.75; color:rgba(255,255,255,.82); }
.prose>*+*{ margin-top:1.1em; }
.prose h2{ font-size:1.65rem; font-weight:800; margin-top:2.4em; color:#fff; }
.prose h3{ font-size:1.25rem; font-weight:700; margin-top:1.8em; color:#fff; }
.prose h2+p,.prose h3+p{ margin-top:.7em; }
.prose p{ margin-bottom:0; }
.prose a{ color:#67e8f9; text-decoration:underline; text-decoration-color:rgba(103,232,249,.4); text-underline-offset:3px; }
.prose a:hover{ text-decoration-color:#67e8f9; }
.prose strong{ color:#fff; }
.prose ul,.prose ol{ padding-left:1.4em; }
.prose li+li{ margin-top:.4em; }
.prose li::marker{ color:#c084fc; }
.prose blockquote{ margin:1.5em 0; padding:1rem 1.25rem; border-left:3px solid #a855f7; background:rgba(168,85,247,.08); border-radius:0 1rem 1rem 0; color:rgba(255,255,255,.85); font-style:italic; }
.prose blockquote p{ margin:0; }
.prose hr{ border:0; border-top:1px solid rgba(255,255,255,.1); margin:2.5em 0; }
.prose img{ border-radius:1rem; }
.prose figure{ margin:1.5em 0; }
.prose figcaption{ font-size:.8rem; color:rgba(255,255,255,.5); margin-top:.5rem; text-align:center; }
.prose .callout{ border-radius:1.25rem; padding:1.1rem 1.3rem; background:rgba(34,211,238,.07); border:1px solid rgba(34,211,238,.25); color:rgba(255,255,255,.88); }
.prose .callout.tip{ background:rgba(52,211,153,.07); border-color:rgba(52,211,153,.3); }
.prose .callout.warn{ background:rgba(236,72,153,.07); border-color:rgba(236,72,153,.3); }
.prose .callout>:first-child{ margin-top:0; }
.prose .callout>:last-child{ margin-bottom:0; }
.prose .callout .callout-title{ display:block; font-weight:700; color:#fff; margin-bottom:.35em; }
.prose .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:1.25rem; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); }
.prose table{ width:100%; border-collapse:collapse; font-size:.95rem; min-width:28rem; }
.prose th,.prose td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top; }
.prose th{ font-weight:700; color:#fff; background:rgba(255,255,255,.05); font-size:.85rem; letter-spacing:.02em; }
.prose tr:last-child td{ border-bottom:0; }
.prose td:first-child{ color:#fff; font-weight:600; }
.prose .kicker{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:#c084fc; font-weight:700; }
.prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:rgba(255,255,255,.08); padding:.1em .35em; border-radius:.35em; }

/* related + cta */
.related{ margin:3rem 0 0; padding:1.5rem 1.75rem; border-radius:1.5rem; }
.related h2{ font-size:1.1rem; font-weight:700; margin-bottom:.9rem; }
.related ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.related li a{ display:block; padding:.7rem .9rem; border-radius:.9rem; text-decoration:none; color:rgba(255,255,255,.85); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); transition:background .2s,border-color .2s; }
.related li a:hover{ background:rgba(255,255,255,.08); border-color:rgba(168,85,247,.45); color:#fff; }
.related .all{ display:inline-block; margin-top:1rem; font-size:.85rem; color:#67e8f9; text-decoration:none; }
.cta-block{ position:relative; overflow:hidden; margin:2.5rem 0 3rem; padding:2.5rem 1.75rem; border-radius:2rem; text-align:center; }
.cta-block::before{ content:""; position:absolute; top:-6rem; right:-6rem; width:18rem; height:18rem; border-radius:50%; background:radial-gradient(circle,rgba(168,85,247,.4),transparent 65%); filter:blur(30px); pointer-events:none; }
.cta-block::after{ content:""; position:absolute; bottom:-6rem; left:-6rem; width:18rem; height:18rem; border-radius:50%; background:radial-gradient(circle,rgba(34,211,238,.35),transparent 65%); filter:blur(30px); pointer-events:none; }
.cta-block>*{ position:relative; }
.cta-block h2{ font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800; }
.cta-block p{ color:rgba(255,255,255,.65); max-width:36rem; margin:1rem auto 0; line-height:1.6; }
.cta-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; margin-top:1.75rem; }
.cta-block .phone{ width:150px; margin:0 auto 1.25rem; border-radius:28px; padding:7px; background:linear-gradient(160deg,#2a2440,#0f0b1c); box-shadow:0 30px 60px -24px rgba(124,58,237,.55),0 0 0 1px rgba(255,255,255,.06); }
.cta-block .phone img{ display:block; width:100%; border-radius:22px; }

/* sticky bottom CTA */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:40; padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); transform:translateY(110%); transition:transform .35s cubic-bezier(.2,.8,.2,1); border-top:1px solid rgba(255,255,255,.1); }
.sticky-cta.show{ transform:none; }
.sticky-cta .inner{ max-width:72rem; margin:0 auto; display:flex; align-items:center; gap:.9rem; }
.sticky-cta .txt{ flex:1; min-width:0; font-size:.85rem; color:rgba(255,255,255,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-cta .txt b{ color:#fff; }
.sticky-cta .btn-primary{ padding:.5rem .9rem; border-radius:999px; font-size:.85rem; }
.sticky-cta .btn-glass{ padding:.5rem .9rem; border-radius:999px; font-size:.85rem; }
.sticky-cta .close{ width:32px; height:32px; border-radius:999px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff; font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }
@media (max-width:640px){ .sticky-cta .txt{ display:none; } .sticky-cta .inner{ justify-content:center; } }
body.has-sticky{ padding-bottom:4.5rem; }

/* guides index */
.hero-guides{ padding:3.5rem 0 2rem; text-align:center; }
.hero-guides h1{ font-size:clamp(2.2rem,6vw,3.6rem); font-weight:800; }
.hero-guides p{ color:rgba(255,255,255,.65); max-width:38rem; margin:1rem auto 0; line-height:1.6; font-size:1.05rem; }
.lang-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin-top:1.75rem; }
.lang-chips .chip.active{ border-color:rgba(168,85,247,.6); background:rgba(168,85,247,.15); color:#fff; }
.lang-group{ padding:2rem 0; scroll-margin-top:5rem; }
.lang-group h2{ font-size:1.5rem; font-weight:800; display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; }
.lang-group h2 .flag{ font-size:1.35rem; }
.lang-group h2 small{ font-family:'Inter',system-ui,sans-serif; font-weight:500; font-size:.8rem; color:rgba(255,255,255,.4); letter-spacing:.06em; text-transform:uppercase; }
.cards{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr)); }
.card{ display:flex; flex-direction:column; gap:.6rem; padding:1.4rem; border-radius:1.5rem; text-decoration:none; color:inherit; transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s; }
.card:hover{ transform:translateY(-4px); border-color:rgba(168,85,247,.45); background:rgba(255,255,255,.06); }
.card h3{ font-size:1.1rem; font-weight:700; color:#fff; line-height:1.3; }
.card p{ margin:0; font-size:.9rem; line-height:1.55; color:rgba(255,255,255,.6); flex:1; }
.card .read{ font-size:.85rem; color:#67e8f9; font-weight:600; }

/* footer */
.foot{ margin-top:2rem; padding:3rem 0; border-top:1px solid rgba(255,255,255,.08); font-size:.875rem; color:rgba(255,255,255,.5); }
.foot .row{ display:flex; flex-direction:column; gap:1.25rem; align-items:center; justify-content:space-between; }
@media (min-width:768px){ .foot .row{ flex-direction:row; } }
.foot .links{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.5rem; }
.foot .links a{ text-decoration:none; transition:color .2s; }
.foot .links a:hover{ color:#fff; }
.foot .brand{ font-size:1rem; }
.foot .brand img{ width:24px; height:24px; box-shadow:none; }
.foot .copy{ color:rgba(255,255,255,.35); }
.foot .disc{ margin:1.5rem 0 0; font-size:.75rem; color:rgba(255,255,255,.3); text-align:center; }
@media (min-width:768px){ .foot .disc{ text-align:left; } }

@media (prefers-reduced-motion:reduce){ .btn-primary,.card,.sticky-cta{ transition:none; } }