:root{
  --canvas:#f8fafc;
  --paper:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --brand:#3b82f6;
  --brand-2:#6366f1;
  --brand-deep:#4338ca;
  --ok:#0f766e;
  --radius:14px;
  --shadow:0 10px 25px -5px rgba(0,0,0,.06),0 8px 10px -6px rgba(15,23,42,.04);
  --shadow-lg:0 22px 40px -18px rgba(15,23,42,.18);
  --accent:#3b82f6;
  --accent-2:#1d4ed8;
  --green:#3b82f6;
  --green-dark:#4338ca;
  --green-soft:#eef2ff;
  --ink-soft:#64748b;
  --line-soft:#e2e8f0;
  --hero-grad:linear-gradient(180deg,#eef2ff 0%,#f8fafc 62%);
  --hero-copy-bg:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  --card:#ffffff;
  --font:"Anuphan",Inter,"Plus Jakarta Sans",system-ui,sans-serif;
}
html{background:var(--canvas)}
body{
  background:
    radial-gradient(920px 460px at 6% -12%,rgba(99,102,241,.14),transparent 58%),
    radial-gradient(720px 420px at 100% 0,rgba(59,130,246,.10),transparent 52%),
    var(--canvas);
  color:var(--ink);
  font-family:var(--font);
}
a{color:var(--brand-deep)}
.skip-link:focus{background:var(--brand-2);color:#fff}
.site-header{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid #e2e8f0;
  box-shadow:0 10px 30px -22px rgba(15,23,42,.45);
}
.brand{color:var(--ink);letter-spacing:-.03em}
.brand small{color:var(--muted);font-weight:600}
.nav-wrap nav a{
  color:#334155;
  border-radius:999px;
  padding:8px 12px;
  font-weight:700;
}
.nav-wrap nav a:hover{background:#eef2ff;color:var(--brand-deep)}
.button{
  border-radius:14px;
  font-weight:800;
  letter-spacing:-.01em;
  box-shadow:none;
}
.button.primary{
  background:linear-gradient(135deg,#3b82f6,#6366f1);
  color:#fff;
  border:0;
  box-shadow:0 12px 24px -12px rgba(59,130,246,.7);
}
.button.primary:hover{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff}
.button.ghost{
  background:#fff;
  color:#1e293b;
  border:1px solid #e2e8f0;
}
.button.ghost:hover{border-color:#c7d2fe;background:#eef2ff;color:#3730a3}
.button.line{
  background:#0f172a;
  color:#fff;
  border:0;
  border-radius:999px;
}
.button.line:hover{background:#1e293b;color:#fff}
.nav-login{
  background:linear-gradient(135deg,#3b82f6,#6366f1)!important;
  color:#fff!important;
  border:0!important;
  border-radius:999px!important;
  padding:8px 16px!important;
  box-shadow:0 10px 22px -12px rgba(59,130,246,.8)!important;
}
.hero{padding:28px 0 8px}
.hero-copy,.hero-product,.mini-product,.bento,
.lead-form,.qr-card,.service-grid article,.faq-list details,
.article-grid article,.product-card,.contact-grid article,
.search-box,.category-tabs{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  box-shadow:var(--shadow);
}
.hero-copy{
  padding:28px;
  background:
    linear-gradient(180deg,rgba(238,242,255,.9),#fff 42%);
}
.hero-copy h1{letter-spacing:-.05em;color:#0f172a}
.hero-copy h1 span{
  background:linear-gradient(135deg,#2563eb,#6366f1);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.eyebrow{
  color:var(--brand-deep);
  background:#eef2ff;
  border:1px solid #c7d2fe;
  border-radius:999px;
  padding:6px 12px;
  display:inline-flex;
}
.trust-list li{background:#fff;border-color:#e2e8f0;color:#334155}
.hero-product{overflow:hidden}
.hero-image-shell{background:linear-gradient(180deg,#eef2ff,#fff);border-radius:14px}
.tag{background:#eef2ff;color:#3730a3;border-radius:999px}
.mini-product.accent{background:linear-gradient(180deg,#eef2ff,#fff)}
.section-heading h2,.split-heading h2{letter-spacing:-.04em}
.section.soft-bg{background:transparent}
.category-tabs{padding:8px;gap:8px}
.category-tabs button{border-radius:999px;border:0;background:transparent;color:#475569;font-weight:700}
.category-tabs button.active,.category-tabs button[aria-selected="true"]{
  background:linear-gradient(135deg,#3b82f6,#6366f1);
  color:#fff;
}
.product-card{
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.product-card .price,.price{color:var(--brand-deep);font-weight:800}
.steps li,.service-grid article{background:#fff}
.steps li::before{background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff}
.apply-section{background:linear-gradient(180deg,#eef2ff 0%,#f8fafc 100%)}
.lead-form{padding:22px}
.lead-form input,.lead-form select,.lead-form textarea{
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{
  outline:2px solid #c7d2fe;
  border-color:#818cf8;
}
.faq-list details{padding:4px 8px}
.faq-list summary{font-weight:800}
.contact-section iframe,.map-embed,iframe{
  border-radius:14px;
  box-shadow:var(--shadow);
}
footer{
  background:#0f172a;
  color:#e2e8f0;
  border-top:0;
}
footer a{color:#c7d2fe}
@media (max-width:1050px){
  .nav-wrap nav{display:none}
  .nav-login{display:inline-flex!important}
}
@media (max-width:760px){
  .hero-copy,.hero-product,.mini-product,.lead-form{border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  .product-card{transition:none}
  .product-card:hover{transform:none}
}