/* Reference-led hero: airy product marketing composition with a directional growth visual. */
.site-shell .container,
.site-shell .hero .container { width:min(100% - 72px,1420px); }

.site-shell .header {
  height:88px;
  border-bottom:0;
  background:rgba(249,252,255,.72);
  box-shadow:none;
}
.site-shell .header::after { display:none; }
.site-shell .nav-wrap { gap:38px; }
.site-shell .brand { gap:11px; color:#07163b; font-size:20px; font-weight:800; letter-spacing:-.06em; }
.site-shell .brand .logo { width:35px; height:35px; }
.site-shell .main-nav { margin:0 auto 0 70px; gap:39px; }
.site-shell .main-nav a {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:11px 0;
  color:#17253d;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.02em;
  text-transform:none;
}
.site-shell .main-nav a .chevron { width:13px; height:13px; }
.site-shell .nav-actions { gap:15px; }
.site-shell .language-menu summary,
.site-shell .login-link,
.site-shell .header .button-sm {
  min-height:46px;
  border:1px solid #d5e2f2;
  border-radius:14px;
  background:rgba(255,255,255,.68);
  color:#18273f;
  font-size:13px;
  font-weight:700;
}
.site-shell .language-menu summary { padding:0 15px; }
.site-shell .login-link { display:inline-flex; align-items:center; padding:0 24px; }
.site-shell .header .button-sm {
  padding:0 27px;
  border-color:#0877ef;
  background:#0877ef;
  color:#fff;
  box-shadow:0 11px 25px rgba(8,119,239,.18);
}

.site-shell .hero {
  min-height:820px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 44% 64% at 83% 34%,rgba(72,194,255,.14),transparent 72%),
    radial-gradient(ellipse 28% 44% at 98% 22%,rgba(42,216,190,.1),transparent 76%),
    linear-gradient(142deg,#fff 0%,#fcfdff 48%,#f5fbff 100%);
}
.site-shell .hero::before {
  inset:auto auto -355px -210px;
  width:1050px;
  height:620px;
  border:70px solid rgba(64,161,245,.055);
  border-radius:50%;
  background:transparent;
  transform:rotate(12deg);
  mask-image:none;
}
.site-shell .hero::after {
  top:28px;
  right:-270px;
  width:780px;
  height:520px;
  border:0;
  border-radius:48% 52% 54% 46%;
  background:linear-gradient(145deg,rgba(67,166,255,.07),rgba(44,215,193,.06));
  box-shadow:none;
  animation:none;
  transform:rotate(-7deg);
}
.site-shell .hero-surface { min-height:820px; padding:105px 0 100px; }
.site-shell .hero-grid {
  grid-template-columns:minmax(620px,.96fr) minmax(620px,1.04fr);
  gap:35px;
  align-items:center;
}
.site-shell .hero-copy { position:relative; z-index:6; max-width:650px; }
.site-shell .hero-badge {
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  margin-bottom:27px;
  padding:0 17px;
  border-radius:999px;
  background:linear-gradient(90deg,#e5f1ff,#eaf5ff);
  color:#0875e8;
  font-size:13px;
  font-weight:700;
}
.site-shell .hero-badge span { font-size:19px; line-height:1; }
.site-shell .hero h1 {
  max-width:650px;
  margin:0 0 25px;
  font-family:"Plus Jakarta Sans","Noto Sans Thai",system-ui,sans-serif;
  font-size:clamp(54px,4.1vw,66px);
  font-weight:800;
  line-height:1.09;
  letter-spacing:-.06em;
  overflow:visible;
}
.site-shell .hero h1>span {
  color:#07163b;
  font-size:1em;
  letter-spacing:inherit;
  text-transform:none;
}
.site-shell .hero h1>strong {
  display:block;
  width:100%;
  max-width:650px;
  margin-top:1px;
  padding:0 .02em .13em;
  background:linear-gradient(92deg,#147ef1 4%,#0b9fd3 52%,#12ad8d 100%);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  font:inherit;
  letter-spacing:inherit;
  white-space:normal;
}
.site-shell .hero-copy>p { max-width:560px; color:#536881; font-size:16px; line-height:1.68; }
.site-shell .hero-actions { gap:18px; margin-top:32px; }
.site-shell .hero-actions .button {
  min-height:58px;
  padding:0 28px;
  border-radius:15px;
  font-size:14px;
}
.site-shell .hero-actions .button-ghost {
  border:1px solid #cbdced;
  background:rgba(255,255,255,.76);
  box-shadow:0 10px 28px rgba(32,80,116,.05);
  color:#13223d;
}
.site-shell .hero-benefits { display:flex; flex-wrap:wrap; gap:28px; margin-top:29px; }
.site-shell .hero-benefits>span { display:flex; align-items:center; gap:9px; color:#52647b; font-size:12px; font-weight:600; }
.site-shell .hero-benefits i {
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#13b6a5;
  color:#fff;
}
.site-shell .hero-benefits svg { width:12px; height:12px; }

.site-shell .order-stage {
  position:relative;
  z-index:3;
  min-height:570px;
  justify-items:center;
  perspective:1300px;
}
.site-shell .hero-panel-layer {
  position:absolute;
  width:87%;
  height:78%;
  right:2%;
  top:10%;
  border-radius:26px;
  background:linear-gradient(145deg,rgba(218,241,255,.72),rgba(172,218,255,.38));
  box-shadow:0 25px 75px rgba(43,126,195,.09);
  transform:rotate(-5deg) translate(28px,25px);
}
.site-shell .hero-panel-layer.layer-two {
  width:91%;
  height:82%;
  right:-3%;
  top:8%;
  opacity:.58;
  transform:rotate(2deg) translate(42px,43px);
}
.site-shell .order-window {
  z-index:4;
  width:min(100%,660px);
  border-color:rgba(128,173,207,.3);
  border-radius:24px;
  box-shadow:0 35px 90px rgba(31,104,164,.15),0 8px 25px rgba(35,86,125,.08);
  transform:rotate(-4deg);
  transform-origin:center;
}
.site-shell .order-window-bar { min-height:66px; }
.site-shell .order-window-body { padding:34px 36px 32px; }
.site-shell .order-service-list article { min-height:94px; }
.site-shell .signal-line.one { width:640px; height:440px; top:35px; right:-105px; opacity:.45; transform:rotate(-8deg); }
.site-shell .signal-line.two { width:500px; height:350px; top:75px; right:-30px; opacity:.55; transform:rotate(-8deg); }
.site-shell .floating-platform {
  position:absolute;
  z-index:8;
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  padding:14px;
  border:1px solid rgba(131,175,207,.25);
  border-radius:19px;
  background:rgba(255,255,255,.78);
  box-shadow:0 20px 44px rgba(30,100,156,.15);
  backdrop-filter:blur(12px);
  transform:rotate(-8deg);
}
.site-shell .floating-platform svg { width:100%; height:100%; }
.site-shell .floating-facebook { left:-43px; top:176px; }
.site-shell .floating-tiktok { left:-62px; top:300px; width:64px; height:64px; transform:rotate(7deg); }
@media (prefers-color-scheme:dark) and (scripting:none) {
  .site-shell .header { background:rgba(9,20,33,.76); }
  .site-shell .main-nav a,.site-shell .login-link,.site-shell .language-menu summary { color:#e1ebf2; }
  .site-shell .login-link,.site-shell .language-menu summary { border-color:rgba(142,177,198,.22); background:rgba(16,34,49,.65); }
  .site-shell .hero { background:radial-gradient(ellipse 44% 64% at 83% 34%,rgba(38,155,221,.1),transparent 72%),linear-gradient(142deg,#091421,#0d1d2c); }
  .site-shell .hero h1>span { color:#f5f9fc; }
  .site-shell .hero-badge { background:rgba(31,100,163,.2); color:#67b8ff; }
  .site-shell .hero-benefits>span { color:#b9c7d2; }
  .site-shell .hero-panel-layer { background:linear-gradient(145deg,rgba(36,83,116,.44),rgba(26,90,105,.28)); }
}

@media (max-width:1200px) {
  .site-shell .container,.site-shell .hero .container { width:min(100% - 44px,1420px); }
  .site-shell .main-nav { margin-left:25px; gap:24px; }
  .site-shell .hero-grid { grid-template-columns:minmax(410px,.9fr) minmax(520px,1.1fr); gap:25px; }
  .site-shell .hero h1 { font-size:52px; }
  .site-shell .floating-facebook { left:-20px; }
  .site-shell .floating-tiktok { left:-30px; }
}
@media (max-width:1000px) {
  .site-shell .header { height:76px; }
  .site-shell .main-nav { display:none; }
  .site-shell .hero-surface { padding:80px 0 105px; }
  .site-shell .hero-grid { grid-template-columns:1fr; gap:64px; }
  .site-shell .hero-copy { max-width:720px; }
  .site-shell .order-stage { width:min(100%,760px); margin-inline:auto; }
  .site-shell .floating-facebook { left:0; }
  .site-shell .floating-tiktok { left:-8px; }
}
@media (max-width:700px) {
  .site-shell .container,.site-shell .hero .container { width:min(100% - 32px,1420px); }
  .site-shell .header { height:68px; }
  .site-shell .brand { font-size:17px; }
  .site-shell .brand .logo { width:30px; height:30px; }
  .site-shell .language-menu summary { min-height:40px; padding:0 11px; border:0; background:transparent; }
  .site-shell .hero { min-height:0; }
  .site-shell .hero-surface { min-height:0; padding:62px 0 82px; }
  .site-shell .hero-badge { min-height:34px; margin-bottom:22px; padding:0 13px; font-size:11px; }
  .site-shell .hero h1 { font-size:43px; line-height:1.05; }
  .site-shell .hero h1>span { font-size:1em; }
  .site-shell .hero-copy>p { font-size:14px; }
  .site-shell .hero-actions { flex-direction:column; }
  .site-shell .hero-actions .button { width:100%; min-height:54px; }
  .site-shell .hero-benefits { gap:15px 20px; }
  .site-shell .order-stage { min-height:430px; }
  .site-shell .hero-panel-layer { height:72%; top:12%; }
  .site-shell .order-window { width:96%; transform:rotate(-2deg); }
  .site-shell .floating-platform { width:52px; height:52px; padding:10px; border-radius:15px; }
  .site-shell .floating-facebook { left:-5px; top:115px; }
  .site-shell .floating-tiktok { left:-7px; top:210px; width:48px; height:48px; }
}