html { scroll-padding-top: 20px; }
body { background: radial-gradient(circle at 90% 5%, #392451 0, transparent 30%), radial-gradient(circle at 10% 35%, #15335d66 0, transparent 32%), #090b14; }
.s2-header { gap: 12px; }
.s2-header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.s2-header nav a { border: 1px solid #394662; border-radius: 999px; padding: 8px 11px; background: #151b30; color: #e9f0ff; font-size: 12px; }
.s2-header nav a:hover { border-color: var(--blue); }
.s2-hero { display: grid; gap: 22px; align-items: center; margin-top: 14px; padding: 30px 24px; border: 1px solid #51628f; border-radius: 26px; background: linear-gradient(125deg, #151e39 0%, #10162c 55%, #241937 100%); box-shadow: 0 24px 80px #0006, inset 0 1px #ffffff15; overflow: hidden; }
.s2-hero__copy { position: relative; z-index: 1; }
.s2-hero h1 { margin: 0 0 13px; font: 700 clamp(36px, 8.5vw, 66px)/1.08 "Space Grotesk", "IBM Plex Sans Thai", sans-serif; letter-spacing: -.035em; }
.s2-hero h1 span { color: #ffd77f; }
.s2-hero__copy > p:not(.eyebrow) { max-width: 520px; margin-bottom: 22px; color: #d1dcf3; font-size: 15px; }
.s2-hero__actions { display: flex; flex-wrap: wrap; gap: 9px; }
.s2-hero__art { display: none; justify-self: center; position: relative; }
.s2-hero__art img { display: block; width: min(100%, 280px); height: auto; margin-inline: auto; filter: drop-shadow(0 20px 34px #0008); transform: rotate(5deg); }
.s2-hero__art span { position: absolute; bottom: -4px; right: -10px; padding: 7px 11px; border-radius: 999px; background: #232f4c; border: 1px solid #7484a6; font: 700 10px "Space Grotesk", sans-serif; letter-spacing: .13em; white-space: nowrap; }
.s2-note { display: flex; align-items: flex-start; gap: 11px; margin: 18px 0 22px; padding: 13px 15px; border: 1px solid #655633; border-radius: 15px; background: #2d251a; color: #f7ebcf; }
.s2-note__icon { color: var(--gold); font-size: 20px; }
.s2-note p { margin: 0; font-size: 12px; }
.s2-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 7px; scrollbar-width: thin; }
.s2-tabs a { display: inline-flex; gap: 10px; align-items: center; flex: none; padding: 10px 15px; border: 1px solid #424f73; border-radius: 999px; background: #171e35; color: #f4f7ff; text-decoration: none; font-weight: 700; font-size: 13px; }
.s2-tabs a:hover { border-color: #fbbf24; background: #242039; }
.s2-tabs span { color: #ffda84; }
.s2-section { padding-top: 32px; scroll-margin-top: 12px; }
.s2-section__heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 14px; border-bottom: 1px solid #3b486b; }
.s2-section__heading h2 { margin: 0 0 9px; font: 700 clamp(27px, 6vw, 40px) "Space Grotesk", sans-serif; }
.s2-section__heading > p { display: none; margin-bottom: 13px; color: var(--muted); font-size: 13px; }
.s2-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.s2-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 13px; padding: 11px; border: 1px solid #374669; border-radius: 18px; background: linear-gradient(145deg, #19213a, #13192b); box-shadow: inset 0 1px #ffffff10; min-width: 0; }
.s2-card:hover { border-color: #8ba7e0; transform: translateY(-2px); transition: transform .15s, border-color .15s; }
.s2-card__image { display: block; align-self: start; overflow: hidden; border-radius: 12px; border: 1px solid #52617e; background: #080b13; }
.s2-card__image img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.s2-card__content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.s2-card__tag { color: #bbadff; font: 700 10px "Space Grotesk", sans-serif; letter-spacing: .09em; }
.s2-card h3 { margin: 4px 0 5px; font: 700 clamp(16px, 4.2vw, 21px)/1.2 "Space Grotesk", "IBM Plex Sans Thai", sans-serif; overflow-wrap: anywhere; }
.s2-card__price { margin: 0 0 9px; color: #cbd7ef; font-size: 12px; }
.s2-card__price strong { color: #ffcb51; font: 700 25px "Space Grotesk", sans-serif; }
.s2-card button { width: 100%; margin-top: auto; padding: 8px 9px; border: 1px solid #68aff5; border-radius: 10px; background: #133258; color: #f3f9ff; font-size: 12px; font-weight: 700; }
.s2-card button:hover { background: #1c4d81; }
.s2-contact { display: grid; gap: 16px; margin: 48px 0 60px; padding: 24px; border: 1px solid #5f6690; border-radius: 22px; background: linear-gradient(120deg, #1c2442, #231d39); }
.s2-contact h2 { margin-bottom: 7px; font-size: 26px; }
.s2-contact p:last-child { margin: 0; color: var(--muted); }
.s2-contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.s2-dialog { width: min(500px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 24px; border: 1px solid #7184b4; border-radius: 20px; background: #151b30; color: #fff; box-shadow: 0 25px 90px #000b; }
.s2-dialog::backdrop { background: #040812cc; }
.s2-dialog__close { float: right; width: 34px; height: 34px; border: 1px solid #5f6b89; border-radius: 8px; background: #252d45; color: white; font-size: 22px; }
.s2-dialog h2 { margin-bottom: 14px; }
.s2-dialog label { display: block; margin-bottom: 5px; color: #d6e4ff; font-size: 13px; }
.s2-dialog textarea { width: 100%; padding: 11px; border: 1px solid #59698c; border-radius: 10px; background: #0d1425; color: #f9fbff; resize: vertical; font: inherit; }
.s2-dialog__actions { display: flex; flex-wrap: wrap; gap: 9px; }
.s2-dialog #s2-copy-status { margin: 7px 0 14px; color: #c6d4eb; font-size: 12px; }
@media (min-width: 580px) { .s2-hero { grid-template-columns: minmax(0, 1fr) 220px; padding: 38px; }.s2-hero__art { display: block; }.s2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.s2-card { grid-template-columns: 96px minmax(0, 1fr); }.s2-section__heading > p { display: block; } }
@media (min-width: 860px) { .s2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.s2-card { grid-template-columns: 112px minmax(0, 1fr); }.s2-hero { grid-template-columns: minmax(0, 1fr) 300px; }.s2-contact { grid-template-columns: 1fr auto; align-items: center; } }
@media (max-width: 360px) { .s2-header nav a { padding: 6px 8px; font-size: 11px; }.s2-card { grid-template-columns: 88px minmax(0, 1fr); }.s2-card h3 { font-size: 15px; }.s2-card__price strong { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .s2-card:hover { transform: none; } }