@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Noto+Serif+Thai:wght@400;500;600&display=swap');
@import url('premium-nav.css');
@import url('pricing-v2.css');
@import url('professional-polish.css');
:root{--pine:#071d19;--pine2:#10342c;--gold:#d8b773;--gold2:#f0dbad;--ivory:#f8f3e8;--paper:#fffdf8;--ink:#17221f;--muted:#68736f;--line:rgba(23,34,31,.13);--shadow:0 28px 75px rgba(5,29,24,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans Thai",sans-serif}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.wrap{width:min(1160px,calc(100% - 40px));margin:auto}.display{font-family:"Noto Serif Thai",serif;font-weight:500;line-height:1.2;letter-spacing:-.025em}.eyebrow{margin:0 0 13px;color:#a57436;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:11px 23px;border:1px solid var(--gold);border-radius:4px;font-weight:600}.btn-gold{background:var(--gold);color:var(--pine)}.btn-dark{background:var(--pine);color:#fff;border-color:var(--pine)}
.site-nav{position:relative;z-index:30;background:var(--pine);color:#fff;border-bottom:1px solid rgba(255,255,255,.12)}.nav-inner{height:86px;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:12px;margin-right:auto}.brand-mark{display:grid;width:43px;height:43px;place-items:center;border:1px solid var(--gold);transform:rotate(45deg)}.brand-mark span{color:var(--gold);font-family:"Noto Serif Thai";font-size:20px;transform:rotate(-45deg)}.brand-copy strong,.brand-copy small{display:block}.brand-copy strong{font-family:"Noto Serif Thai";font-size:16px;font-weight:500}.brand-copy small{color:rgba(255,255,255,.5);font-size:8px;letter-spacing:.14em}.main-menu{display:flex;align-items:center;gap:25px;font-size:12px}.main-menu details{position:relative}.main-menu summary{cursor:pointer;list-style:none}.main-menu summary::-webkit-details-marker{display:none}.main-menu summary::after{content:"⌄";margin-left:6px;color:var(--gold)}.subnav{position:absolute;top:38px;left:50%;width:260px;padding:9px;background:var(--paper);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.25);transform:translateX(-50%)}.subnav a{display:block;padding:11px 12px}.subnav a:hover{background:var(--ivory)}.nav-login{font-size:12px}.nav-cta{padding:10px 16px;border:1px solid var(--gold);border-radius:3px;color:var(--gold);font-size:11px;font-weight:700}
.page-hero{position:relative;overflow:hidden;padding:110px 0 105px;background:linear-gradient(120deg,var(--pine),var(--pine2));color:#fff}.page-hero::before{content:"";position:absolute;right:-120px;top:-250px;width:650px;height:650px;border:1px solid rgba(216,183,115,.13);transform:rotate(45deg)}.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:75px;align-items:center}.page-hero h1{max-width:720px;margin:0;font-size:clamp(44px,5.5vw,72px)}.page-hero p:not(.eyebrow){max-width:590px;margin:24px 0 30px;color:rgba(255,255,255,.7);font-size:16px;font-weight:300;line-height:1.9}.page-hero .eyebrow{color:var(--gold2)}.hero-image{position:relative;padding:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 90px rgba(0,0,0,.35)}.hero-image img{width:100%;aspect-ratio:1.25;object-fit:cover}.hero-tag{position:absolute;right:-18px;bottom:-20px;padding:14px 18px;background:var(--gold);color:var(--pine);font-family:"Noto Serif Thai"}
.section{padding:95px 0}.section.alt{background:var(--ivory)}.section.dark{background:var(--pine);color:#fff}.section-head{display:flex;justify-content:space-between;align-items:end;gap:45px;margin-bottom:45px}.section-head h2{max-width:720px;margin:0;font-size:clamp(34px,4vw,54px)}.section-head>p{max-width:400px;margin:0;color:var(--muted);line-height:1.8}.dark .section-head>p{color:rgba(255,255,255,.57)}.dark .eyebrow{color:var(--gold)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{padding:30px;background:#fff;border:1px solid var(--line)}.card.dark-card{background:var(--pine2);border-color:rgba(255,255,255,.1)}.card-no{color:#a5763c;font-family:"Noto Serif Thai"}.card h3{margin:18px 0 9px;font-family:"Noto Serif Thai";font-size:23px;font-weight:500}.card p{margin:0;color:var(--muted);font-size:12px;line-height:1.8}.dark-card p{color:rgba(255,255,255,.53)}.card-link{display:inline-block;margin-top:20px;color:#a26f32;font-size:11px;font-weight:700}.image-card{overflow:hidden;background:#fff;color:var(--ink)}.image-card img{width:100%;height:310px;object-fit:cover}.image-card-copy{padding:24px}.image-card h3{margin:2px 0;font-family:"Noto Serif Thai";font-size:24px;font-weight:500}.image-card small{color:#9a713d;letter-spacing:.12em}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin:65px 0}.feature-row:nth-child(even) .feature-visual{order:2}.feature-visual{padding:12px;background:#fff;box-shadow:var(--shadow)}.feature-visual img{width:100%;aspect-ratio:1.35;object-fit:cover}.feature-copy h2{margin:0;font-size:42px}.feature-copy p{color:var(--muted);line-height:1.9}.ticks{padding:0;list-style:none}.ticks li{margin:12px 0;font-size:13px}.ticks li::before{content:"✓";margin-right:10px;color:#a36f2f}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}.price-card{position:relative;padding:36px;background:#fff;border:1px solid var(--line)}.price-card.featured{padding-top:50px;background:var(--pine);color:#fff;box-shadow:var(--shadow);transform:translateY(-10px)}.badge{position:absolute;top:0;left:0;right:0;padding:8px;background:var(--gold);color:var(--pine);text-align:center;font-size:10px;font-weight:700}.price-card h2{margin:0;font-family:"Noto Serif Thai";font-size:27px;font-weight:500}.price-card>p{min-height:50px;color:var(--muted);font-size:12px;line-height:1.7}.featured>p{color:rgba(255,255,255,.57)}.price{margin:24px 0;font-family:"Noto Serif Thai";font-size:38px}.price small{font-family:"Noto Sans Thai";font-size:10px}.price-card .ticks{min-height:220px;padding-top:18px;border-top:1px solid var(--line)}.featured .ticks{border-color:rgba(255,255,255,.12)}.price-card .btn{width:100%}.compare{width:100%;border-collapse:collapse;background:#fff}.compare th,.compare td{padding:17px;border-bottom:1px solid var(--line);text-align:center;font-size:12px}.compare th:first-child,.compare td:first-child{text-align:left}.compare th{background:var(--pine);color:#fff}.compare .yes{color:#8c662f;font-weight:700}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px}.contact-panel{padding:35px;background:var(--pine);color:#fff}.contact-panel h2{margin-top:0;font-size:36px}.contact-item{padding:18px 0;border-top:1px solid rgba(255,255,255,.12)}.contact-item small,.contact-item strong{display:block}.contact-item small{color:var(--gold);letter-spacing:.1em}.contact-item strong{margin-top:5px;font-weight:400}.form{display:grid;grid-template-columns:1fr 1fr;gap:17px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:11px;font-weight:600}.field input,.field select,.field textarea{width:100%;padding:14px;border:1px solid var(--line);background:#fff;font:inherit}.field textarea{min-height:130px;resize:vertical}.form-note{grid-column:1/-1;color:var(--muted);font-size:10px}.form .btn{justify-self:start}
.cta{padding:90px 0;background:linear-gradient(120deg,#0a2a23,#17463a);color:#fff;text-align:center}.cta h2{max-width:750px;margin:0 auto;font-size:clamp(36px,4vw,58px)}.cta p{color:rgba(255,255,255,.62)}.cta-actions{display:flex;justify-content:center;gap:12px;margin-top:28px}.footer{padding:50px 0 25px;background:#041713;color:#fff}.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:45px}.footer p{max-width:310px;color:rgba(255,255,255,.43);font-size:10px;line-height:1.8}.footer-col strong{display:block;margin-bottom:15px;color:var(--gold2);font-family:"Noto Serif Thai";font-weight:500}.footer-col a{display:block;margin:9px 0;color:rgba(255,255,255,.53);font-size:10px}.copyright{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.3);font-size:9px}
@media(max-width:900px){.main-menu,.nav-login{display:none}.hero-grid,.feature-row,.contact-grid{grid-template-columns:1fr}.hero-image{max-width:650px}.cards,.price-grid{grid-template-columns:1fr}.price-card.featured{transform:none}.feature-row:nth-child(even) .feature-visual{order:0}.footer-grid{grid-template-columns:1fr 1fr}.section-head{display:block}.section-head>p{margin-top:20px}}
@media(max-width:600px){.wrap{width:calc(100% - 28px)}.page-hero,.section{padding:70px 0}.page-hero h1{font-size:43px}.nav-cta{display:none}.cards{grid-template-columns:1fr}.form{grid-template-columns:1fr}.field.full,.form-note{grid-column:auto}.cta-actions{flex-direction:column}.footer-grid{grid-template-columns:1fr}.compare{display:block;overflow-x:auto}.feature-copy h2{font-size:34px}}

/* Template collection */
.template-intro{max-width:760px}.template-filters{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 34px}.template-filter{padding:10px 17px;border:1px solid rgba(23,34,31,.18);border-radius:999px;background:transparent;color:var(--ink);font:600 11px/1 "Noto Sans Thai",sans-serif;cursor:pointer;transition:.2s ease}.template-filter:hover,.template-filter.is-active{background:var(--pine);border-color:var(--pine);color:#fff}.template-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.template-card{overflow:hidden;background:#fff;border:1px solid rgba(23,34,31,.11);border-radius:12px;box-shadow:0 18px 50px rgba(7,29,25,.08);transition:transform .25s ease,box-shadow .25s ease}.template-card:hover{transform:translateY(-5px);box-shadow:0 25px 65px rgba(7,29,25,.15)}.template-card[hidden]{display:none}.template-card-media{position:relative;overflow:hidden;aspect-ratio:3/2;background:#d8d3c8}.template-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.template-card:hover .template-card-media img{transform:scale(1.018)}.template-card-no{position:absolute;top:14px;left:14px;padding:8px 11px;border:1px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(5,20,17,.72);color:#fff;font-size:9px;font-weight:700;letter-spacing:.13em;backdrop-filter:blur(8px)}.template-preview-button{position:absolute;inset:0;border:0;background:transparent;cursor:zoom-in}.template-card-copy{padding:23px}.template-card-topline{display:flex;align-items:center;justify-content:space-between;gap:14px}.template-card small{color:#9a713d;font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.template-card h3{margin:6px 0 8px;font-family:"Noto Serif Thai",serif;font-size:25px;font-weight:500}.template-card p{min-height:46px;margin:0;color:var(--muted);font-size:12px;line-height:1.75}.template-card-actions{display:flex;gap:9px;margin-top:20px}.template-card-actions .btn{flex:1;min-height:44px;padding:8px 14px;font-size:11px}.template-card-actions button{font-family:inherit;cursor:pointer}.template-preview-dialog{width:min(1260px,calc(100% - 32px));max-height:92vh;padding:0;border:0;border-radius:12px;background:#fff;box-shadow:0 30px 100px rgba(0,0,0,.45)}.template-preview-dialog::backdrop{background:rgba(2,15,12,.82);backdrop-filter:blur(5px)}.template-preview-toolbar{display:flex;align-items:center;gap:16px;padding:15px 18px;border-bottom:1px solid var(--line)}.template-preview-toolbar strong{margin-right:auto;font-family:"Noto Serif Thai",serif;font-size:18px;font-weight:500}.template-preview-toolbar .btn{min-height:40px;padding:7px 15px;font-size:10px}.template-preview-close{display:grid;width:40px;height:40px;place-items:center;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:20px;cursor:pointer}.template-preview-dialog img{width:100%;height:auto}.selected-template-field input{border-color:var(--gold)!important;background:var(--ivory)!important;font-weight:600;color:var(--pine)}
@media(max-width:760px){.template-gallery{grid-template-columns:1fr}.template-card-copy{padding:20px}.template-card p{min-height:0}.template-card-actions{flex-direction:column}.template-preview-toolbar{flex-wrap:wrap}.template-preview-toolbar strong{width:calc(100% - 58px)}.template-preview-toolbar .btn{order:3;width:100%}.hero-tag{right:10px;bottom:10px}.template-filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;scrollbar-width:none}.template-filters::-webkit-scrollbar{display:none}.template-filter{flex:0 0 auto}}

/* Professional feature cards on the template collection page */
.included-feature-grid {
  gap: 20px;
}

.included-feature-card {
  display: flex;
  min-height: 224px;
  padding: 26px;
  flex-direction: column;
  border: 1px solid rgba(216, 183, 115, .16);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
  color: #fff;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}

.included-feature-card:hover,
.included-feature-card:focus-visible {
  border-color: rgba(216, 183, 115, .62);
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .028));
  box-shadow: 0 20px 45px rgba(0, 0, 0, .16);
  outline: none;
  transform: translateY(-3px);
}

.included-feature-card.is-featured {
  border-color: rgba(216, 183, 115, .42);
  background: linear-gradient(145deg, rgba(216, 183, 115, .095), rgba(255, 255, 255, .025));
}

.included-feature-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(216, 183, 115, .35);
  border-radius: 8px;
  background: rgba(4, 23, 19, .42);
  color: var(--gold);
}

.included-feature-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.included-feature-card h3 {
  margin: 20px 0 8px;
  font-family: "Noto Serif Thai", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
}

.included-feature-card p {
  margin: 0;
  color: rgba(255, 255, 255, .64);
  font-size: 12px;
  line-height: 1.8;
}

.included-feature-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 18px;
  color: var(--gold2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
}

.included-feature-link b {
  font-size: 16px;
  font-weight: 400;
  transition: transform .2s ease;
}

.included-feature-card:hover .included-feature-link b,
.included-feature-card:focus-visible .included-feature-link b {
  transform: translateX(3px);
}

@media(max-width:900px){
  .included-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:600px){
  .included-feature-grid{grid-template-columns:1fr}
  .included-feature-card{min-height:210px;padding:23px}
}