/* Landing page - premium minimal theme */
:root {
  --bg: #FFFFFF; /* primary white base */
  --surface: #F8F9FB; /* very light section background */
  --card-border: #E6E9EE; /* subtle border */
  --fg: #111827; /* main text */
  --muted: #6B7280; /* muted text */
  --primary: #2563EB; /* brand primary (blue) */
  --accent: #3a2f24;
  --gold: #b7893a;
  --radius-lg: 20px;
  --radius-md: 12px;
  --shadow-soft: 0 6px 24px rgba(16,24,40,0.06);
}

body.landing-page {
  background-color: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
}

.landing-page .landing-container {
  width: 100%;
  max-width: 1160px;
  margin: 48px auto;
  padding: 32px;
  background: linear-gradient(to bottom, #ffffff, #fbfdff); /* subtle depth */
  border-radius: 20px; /* soft rounded corners */
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--card-border);
  overflow: hidden;
}

.landing-page .container-fluid { width: 100%; }
.landing-page .muted { color: var(--muted); }
.landing-page .highlight {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(183, 137, 58, 0.08);
  border: 1px solid rgba(183, 137, 58, 0.14);
}

.landing-page .img-rounded { border-radius: var(--radius-md); }
.landing-page .img-shadow { box-shadow: 0 8px 24px rgba(16,24,40,0.06); }
.landing-page .product-image { width: 100%; max-width: 150px; margin-bottom: 14px; object-fit: cover; display:block; }
.landing-page .testimonial-image { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; border: 2px solid rgba(0,0,0,0.04); }

.landing-page .landing-header{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px 0 16px;border-bottom:1px solid rgba(0,0,0,0.04)}
.landing-page .brand {display:flex;align-items:center;gap:14px}
.landing-page .brand .logo-mark{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--primary),#60a5fa);display:grid;place-items:center;color:#fff;font-weight:800;box-shadow:0 6px 20px rgba(37,99,235,0.12)}
.landing-page .brand-text{display:flex;flex-direction:column}
.landing-page .eyebrow{color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;margin:0}
.landing-page .site-title{font-size:1.15rem;color:var(--fg);margin:0;font-weight:700}

.landing-page .hero-card{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding:28px}
.landing-page .hero-copy .hero-tag{display:inline-block;padding:8px 14px;border-radius:999px;background:rgba(183,137,58,0.12);color:var(--gold);font-weight:700;font-size:.85rem}
.landing-page .hero-copy h2{font-size:2.2rem;margin:6px 0;color:var(--fg);line-height:1.05}
.landing-page .hero-copy p{color:var(--muted);max-width:62ch}
.landing-page .cta-group{display:flex;gap:14px;margin-top:8px}
.landing-page .btn-primary{background:var(--primary);color:#fff;padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:700;box-shadow:0 6px 18px rgba(37,99,235,0.12)}
.landing-page .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.landing-page .btn-primary.btn-large{padding:14px 28px;font-size:1.05rem}
.landing-page .btn-outline{border:1px solid rgba(16,24,40,0.06);padding:10px 20px;border-radius:12px;color:var(--fg);background:transparent}

.landing-page .hero-aside .hero-panel{padding:24px;border-radius:20px;background:#fff;border:1px solid rgba(0,0,0,0.04);box-shadow:0 18px 40px rgba(30,24,18,0.04)}
.landing-page .feature-highlight{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:16px;background:linear-gradient(180deg,#fff,#fff);border:1px solid rgba(0,0,0,0.04)}
.landing-page .feature-highlight span{width:48px;height:48px;border-radius:12px;background:var(--gold);display:grid;place-items:center;color:#fff;font-weight:800}
.landing-page .feature-highlight h3{margin:0 0 6px 0;color:var(--accent)}
.landing-page .feature-highlight p{margin:0;color:var(--muted)}

.landing-page .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.landing-page .product-card{padding:28px;border-radius:18px;background:linear-gradient(180deg,#fff,#fff);border:1px solid rgba(0,0,0,0.04);box-shadow:0 20px 50px rgba(30,24,18,0.04)}
.landing-page .product-badge{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(183,137,58,0.12);color:var(--gold);font-weight:800;margin-bottom:10px}

.landing-page .testimonials{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px}
.landing-page .testimonial{flex:1 1 280px;padding:20px;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,0.04);box-shadow:0 12px 30px rgba(30,24,18,0.04)}
.landing-page .testimonial p{color:var(--muted);font-size:.98rem}
.landing-page .testimonial .author{margin-top:12px;font-weight:700;color:var(--accent)}

.landing-page .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.landing-page .pricing-card{padding:22px;border-radius:14px;background:linear-gradient(180deg,#fff,#fff);border:1px solid rgba(0,0,0,0.04)}
.landing-page .pricing-card h4{margin:0 0 8px 0;color:var(--accent)}
.landing-page .pricing-card .price{font-size:1.6rem;color:var(--gold);font-weight:800}

.landing-page .contact-form{display:grid;grid-template-columns:1fr 300px;gap:20px;margin-top:20px}
.landing-page .contact-form form{display:flex;flex-direction:column;gap:12px}
.landing-page .contact-form input,.landing-page .contact-form textarea{padding:12px;border-radius:8px;border:1px solid rgba(0,0,0,0.06)}
.landing-page .contact-form button{padding:12px 18px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-weight:700}

@media (max-width:1000px){
  .landing-page .hero-card{grid-template-columns:1fr}
  .landing-page .feature-grid,.landing-page .pricing-grid{grid-template-columns:1fr}
  .landing-page .contact-form{grid-template-columns:1fr}
}

/* Responsive: improve spacing, typography and CTA stacking on small screens */
@media (max-width: 720px) {
  .landing-page .landing-container {
    padding: 20px;
    margin: 20px;
    border-radius: 16px;
  }

  .landing-page .landing-header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .landing-page .brand{justify-content:center}
  .landing-page .header-actions{width:100%;display:flex;justify-content:center}

  .landing-page .landing-header h1 {
    font-size: 1.6rem;
    max-width: 100%;
  }

  .landing-page .cta-group {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .landing-page .btn-primary, .landing-page .btn-outline {
    width: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
  }

  .landing-page .hero-copy h2 {
    font-size: 1.5rem;
  }

  .landing-page .hero-copy p {
    max-width: 100%;
  }

  .landing-page .hero-aside {
    order: 2;
  }

  .landing-page .hero-aside .hero-image, .landing-page .hero-image {
    margin: 0 auto;
    max-width: 320px;
    width: 100%;
  }

  .landing-page .feature-grid, .landing-page .pricing-grid, .landing-page .testimonials {
    grid-template-columns: 1fr;
  }

  .landing-page .product-card { padding: 18px; }
}

@media (max-width: 420px) {
  .landing-page .landing-container { padding: 16px; margin: 12px; border-radius: 12px; }
  .landing-page .landing-header h1 { font-size: 1.25rem; }
  .landing-page .hero-copy h2 { font-size: 1.25rem; }
  .landing-page .btn-primary, .landing-page .btn-outline { font-size: 0.95rem; padding: 10px 14px; }
}

/* Prevent horizontal overflow and ensure images scale */
.landing-page img { max-width: 100%; height: auto; display: block; }

/* Unified image frame helper and subtle transitions */

.img-frame{border-radius:var(--radius-md);overflow:hidden;border:1px solid rgba(16,24,40,0.04);box-shadow:0 8px 24px rgba(16,24,40,0.04)}

/* Small decorative note used for "free — notify admin" */
.note-small{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(37,99,235,0.04), rgba(16,185,129,0.02));
  border: 1px solid rgba(37,99,235,0.06);
  color: var(--muted);
  font-size: 0.95rem;
}
.note-small a{ color: var(--primary); font-weight:700; text-decoration:none }
.note-small a:hover{ text-decoration:underline }
.note-small .tag-free{ background: rgba(16,185,129,0.08); color:var(--primary); padding:6px 10px; border-radius:999px; font-weight:700; font-size:0.9rem; border:1px solid rgba(16,185,129,0.08) }
.note-small .icon-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);display:inline-block}

/* Contact channel links inside small notes */
.contact-channels a{color:var(--primary);font-weight:700;text-decoration:none}
.contact-channels a:hover{text-decoration:underline}

/* Icon buttons for Line / Telegram */
.contact-icons{display:inline-flex;gap:8px;margin-left:10px;vertical-align:middle}
.contact-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid rgba(16,24,40,0.04);background:var(--surface);box-shadow:0 6px 16px rgba(16,24,40,0.04);text-decoration:none}
.contact-btn svg{width:18px;height:18px;display:block}
.contact-btn.contact-line{border-color:rgba(37,99,235,0.06);background:linear-gradient(180deg,rgba(37,99,235,0.03),transparent)}
.contact-btn.contact-telegram{border-color:rgba(59,130,246,0.06);background:linear-gradient(180deg,rgba(59,130,246,0.03),transparent)}
.contact-btn:hover{transform:translateY(-2px)}

/* Slight spacing for contact panel icons */
.contact-panel .contact-icons{margin-top:8px;margin-left:0}

/* subtle transitions for links and buttons */
a, .btn { transition: all 180ms cubic-bezier(.2,.9,.2,1) }

/* Allow grid/flex children to shrink instead of causing overflow */
.landing-page .hero-card > *,
.landing-page .feature-grid > *,
.landing-page .pricing-grid > *,
.landing-page .testimonials > *,
.landing-page .contact-form > * {
  min-width: 0;
}

.landing-page .landing-container { box-sizing: border-box; }

/* Hero image responsive tweaks */
.landing-page .hero-aside .hero-image,
.landing-page .hero-image {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 18px 40px rgba(30,24,18,0.06);
}

@media (max-width: 720px) {
  .landing-page .hero-aside .hero-image, .landing-page .hero-image { max-width: 100%; }
}

/* Hero Section */
.hero-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 40px;
  background: linear-gradient(135deg, #ffffff, #f8f9fb);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.hero-card .hero-copy {
  flex: 1;
}
.hero-card .hero-copy h1 {
  font-size: 2.5rem;
  color: #111827;
  margin-bottom: 10px;
}
.hero-card .hero-copy p {
  font-size: 1.2rem;
  color: #6B7280;
  margin-bottom: 20px;
}
.hero-card .cta-group {
  display: flex;
  gap: 15px;
}
.hero-card .image-container {
  position: relative;
  max-width: 400px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.hero-card .image-container .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.05);
}
.hero-card .hero-image {
  width: 100%;
  display: block;
}

/* Features Section */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.feature-grid h2{grid-column:1/-1;font-size:1.8rem;margin-bottom:6px;color:var(--fg)}
.feature-grid .section-sub{grid-column:1/-1;color:var(--muted);max-width:780px;margin-bottom:10px}
.product-card {
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.product-card .card-image-container {
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(16,24,40,0.04);
  height: 160px; /* fixed visual crop for uniform cards */
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.product-card .product-image { width:100%; height:100%; object-fit:cover; display:block }

/* center title/description spacing */
.product-card h3 { margin: 8px 0 6px 0 }
.product-card p { margin: 0; color: var(--muted) }

/* subtle media hover for polish */
.product-card .card-image-container:hover img { transform: scale(1.03); transition: transform 240ms ease }

.product-card .card-media-badge{position:absolute;right:12px;top:12px;background:rgba(0,0,0,0.6);color:#fff;padding:6px 10px;border-radius:8px;font-size:0.85rem}

/* Testimonials Section */
.testimonials {
  margin-top: 60px;
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}
.testimonials h2 {
  font-size: 2rem;
  color: #111827;
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
}
.testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 340px;
  margin: 8px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(16,24,40,0.04);
}
.testimonial img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 0 12px 0;
  display: block;
  border: 2px solid rgba(0,0,0,0.04);
}
.testimonial p {
  font-size: 1rem;
  color: #6B7280;
  margin-bottom: 10px;
  text-align: center;
}
.testimonial .author {
  font-size: 0.9rem;
  color: #111827;
  font-weight: 600;
  text-align: center;
}

/* Steps and Trust layouts */
.how-it-works .steps { display:flex;gap:20px;justify-content:center;flex-wrap:wrap }
.how-it-works .step { max-width:220px;text-align:center }
.how-it-works .step h3 { margin-top:10px;margin-bottom:6px }

.trust-section .trust-items { display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap }
.trust-section .trust-item { display:flex;flex-direction:column;align-items:center;gap:8px;max-width:180px }

/* How it works heading/subheading */
.how-it-works h2 { font-size:1.75rem; color:var(--fg); margin-bottom:6px }
.how-it-works .section-sub { color:var(--muted); margin:0 auto 18px auto; max-width:680px; font-size:1rem }

/* Icon frame for steps: circular layered image with badge */
.icon-frame { position:relative; display:flex; justify-content:center; align-items:center; margin:0 auto 8px auto; width:96px; height:96px }
.icon-bg { width:84px; height:84px; border-radius:50%; background:linear-gradient(135deg, rgba(37,99,235,0.10), rgba(99,102,241,0.04)); display:grid; place-items:center; border:1px solid rgba(16,24,40,0.04); box-shadow:0 8px 20px rgba(16,24,40,0.04); overflow:hidden }
.icon-bg img { width:56px; height:56px; object-fit:cover; border-radius:10px }
.step-badge { position:absolute; right:-6px; bottom:-6px; background:var(--primary); color:#fff; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-weight:700; font-size:0.85rem; box-shadow:0 6px 16px rgba(37,99,235,0.12) }

@media (max-width:420px){
  .icon-frame{width:72px;height:72px}
  .icon-bg{width:62px;height:62px}
  .icon-bg img{width:44px;height:44px}
  .step-badge{width:24px;height:24px;font-size:0.8rem}
}


/* Footer */
.footer {
  margin-top: 60px;
  padding: 20px;
  text-align: center;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.9rem;
}
.footer a {
  color: var(--primary);
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}

/* General Layout */
body {
  background-color: #FFFFFF;
  color: #111827;
  font-family: 'Sarabun', sans-serif;
  line-height: 1.6;
}

/* Section Styling */
section {
  padding: 60px 20px;
}
section:nth-child(even) {
  background-color: #F8F9FB;
}

/* Card / Container */
.card {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* CTA Button */
.btn-primary {
  background-color: #2563EB;
  color: #FFFFFF;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  background-color: #1D4ED8;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

/* Typography */
h1, h2, h3 {
  color: #111827;
  margin-bottom: 20px;
}
p {
  color: #6B7280;
  margin-bottom: 16px;
}

/* Shadow and Layering */
.shadow-soft {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Responsive Design */
@media (max-width: 768px) {
  section {
    padding: 40px 10px;
  }
  .card {
    padding: 16px;
  }
  .btn-primary {
    padding: 10px 20px;
  }
}