/* Homepage — Strategic Finance for Property Development */
.hp{--hp-ink:#0d1b33;--hp-navy:#14284b;--hp-rule:#e3e8f0;--hp-gold-l:#e2c27a}
.hp h1,.hp h2,.hp h3{letter-spacing:-.005em}
.hp-label{margin:0 0 .75rem;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.hp-label-gold{color:var(--hp-gold-l)}
.hp-more{font-weight:600;font-size:.9375rem;text-decoration:none;color:var(--navy);border-bottom:1px solid var(--gold);padding-bottom:.125rem;white-space:nowrap}
.hp-more:hover{color:var(--gold-ink)}

/* Hero */
.hp-hero{position:relative;background:radial-gradient(120% 90% at 85% 10%,#1f3a68 0,var(--hp-ink) 62%);color:#fff;overflow:hidden;padding-bottom:3rem}
.hp-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(180deg,#000 30%,transparent 95%);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 95%)}
.hp-hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3.5rem;align-items:center;padding-top:4.5rem;padding-bottom:3.5rem}
.hp-kicker{display:flex;align-items:center;gap:.75rem;margin:0 0 1.5rem;font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--hp-gold-l)}
.hp-kicker span{display:block;width:2.25rem;height:2px;background:var(--gold)}
.hp-hero h1{font-size:clamp(2.125rem,1.3rem + 3.2vw,3.5rem);line-height:1.22;font-weight:700;margin:0 0 1.5rem}
.hp-hero h1 em{font-style:normal;color:var(--hp-gold-l)}
.hp-lead{font-size:1.125rem;line-height:1.8;color:#c9d3e4;max-width:34rem;margin:0}
.hp-lead strong{color:#fff;font-weight:600}
.hp-actions{display:flex;flex-wrap:wrap;gap:.875rem;margin:2rem 0 0}
.hp-btn{display:inline-flex;align-items:center;padding:.75rem 1.5rem;font-weight:600;text-decoration:none;border-radius:2px;transition:background .15s,border-color .15s,color .15s}
.hp-btn-gold{background:var(--gold);color:var(--hp-ink)}
.hp-btn-gold:hover{background:var(--hp-gold-l);color:var(--hp-ink)}
.hp-btn-ghost{border:1px solid rgba(255,255,255,.35);color:#fff}
.hp-btn-ghost:hover{border-color:var(--gold);color:#fff}

.hp-panel{margin:0;background:rgba(9,20,40,.55);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:1.25rem 1.25rem 0;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.hp-panel-head{display:flex;justify-content:space-between;align-items:center;font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#dbe2ee;margin-bottom:.75rem}
.hp-panel-tag{font-size:.75rem;letter-spacing:0;text-transform:none;font-weight:400;color:#8fa0bd;border:1px solid rgba(255,255,255,.15);padding:0 .5rem;border-radius:2rem}
.hp-chart{display:block;width:100%;height:auto;overflow:visible}
.hp-chart-grid line{stroke:rgba(255,255,255,.07);stroke-width:1}
.hp-chart-zero{stroke:rgba(255,255,255,.35);stroke-width:1;stroke-dasharray:3 4}
.hp-chart-area{fill:rgba(194,154,63,.14)}
.hp-chart-line{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:640;stroke-dashoffset:640;animation:hp-draw 1.6s .2s ease-out forwards}
.hp-chart-peak{stroke:var(--hp-gold-l);stroke-width:1;stroke-dasharray:2 3;opacity:.7}
.hp-chart-dot{fill:var(--hp-gold-l)}
.hp-chart-halo{fill:var(--gold);opacity:.25}
.hp-chart-lbl{fill:var(--hp-gold-l);font:600 11px Sarabun,sans-serif;letter-spacing:.04em}
.hp-chart-axis{fill:#8fa0bd;font:400 10px Sarabun,sans-serif}
@keyframes hp-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.hp-chart-line{animation:none;stroke-dashoffset:0}}
.hp-panel-stages{list-style:none;margin:.25rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);font-size:.75rem;color:#8fa0bd;text-align:center;line-height:1.3}
.hp-panel-stages li{padding:.375rem 0;border-top:1px solid rgba(255,255,255,.1)}
.hp-panel-stages li:nth-child(3){color:var(--hp-gold-l);border-top:2px solid var(--gold)}
.hp-panel-kpi{display:grid;grid-template-columns:repeat(3,1fr);margin:0 -1.25rem;border-top:1px solid rgba(255,255,255,.1)}
.hp-panel-kpi div{padding:.875rem 1rem;border-left:1px solid rgba(255,255,255,.1)}
.hp-panel-kpi div:first-child{border-left:0}
.hp-panel-kpi dt{font-weight:700;color:#fff;font-size:.9375rem;line-height:1.3}
.hp-panel-kpi dd{margin:0;font-size:.75rem;color:#8fa0bd;line-height:1.4}

.hp-stats{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.14)}
.hp-stats li{padding:1.5rem 1.25rem 0;line-height:1.3;border-left:1px solid rgba(255,255,255,.1)}
.hp-stats li:first-child{border-left:0;padding-left:0}
.hp-stats b{display:block;font-size:2.25rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.hp-stats span{font-size:.875rem;color:#a9b6cc}

/* Sections */
.hp-sec{padding:5rem 0}
.hp-sec-mist{background:var(--mist)}
.hp-sec-head{max-width:46rem;margin-bottom:2.5rem}
.hp-sec-head h2{font-size:clamp(1.625rem,1.2rem + 1.4vw,2.25rem);line-height:1.3;color:var(--navy);margin:0 0 .75rem}
.hp-sec-head p:not(.hp-label){margin:0;color:var(--muted)}
.hp-sec-head-row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.hp-sec-head-row>div{max-width:46rem}

/* Steps */
.hp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--navy)}
.hp-steps li{border-right:1px solid var(--hp-rule)}
.hp-steps li:last-child{border-right:0}
.hp-steps a{display:flex;flex-direction:column;height:100%;padding:1.75rem 1.5rem 1.5rem;text-decoration:none;color:var(--muted);font-size:.9375rem;line-height:1.65;position:relative;transition:background .15s}
.hp-steps a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.hp-steps a:hover{background:#fafbfd;color:var(--muted)}
.hp-steps a:hover::before{transform:none}
.hp-step-no{font-size:2.5rem;font-weight:700;line-height:1;color:var(--gold);margin-bottom:1.25rem;font-variant-numeric:tabular-nums}
.hp-steps b{font-size:1.1875rem;color:var(--navy);margin-bottom:.375rem;line-height:1.4}
.hp-steps span:not(.hp-step-no){flex:1}
.hp-steps i{font-style:normal;font-weight:600;color:var(--navy);margin-top:1.25rem;font-size:.875rem}
.hp-steps a:hover i{color:var(--gold-ink)}

/* Principle */
.hp-sec-dark{background:var(--hp-ink);color:#c9d3e4}
.hp-quote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 4rem;align-items:start}
.hp-quote .hp-label{grid-column:1/-1}
.hp-quote blockquote{margin:0;border-left:3px solid var(--gold);padding-left:1.5rem}
.hp-quote blockquote p{margin:0;font-size:clamp(1.5rem,1.1rem + 1.5vw,2.25rem);line-height:1.4;font-weight:600;color:#fff}
.hp-quote-body p{margin:0 0 1rem;line-height:1.85}
.hp-link-gold{color:var(--hp-gold-l);font-weight:600;text-decoration:none;border-bottom:1px solid var(--gold)}
.hp-link-gold:hover{color:#fff}

/* Stages */
.hp-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--hp-rule);border-radius:4px;overflow:hidden}
.hp-stages li{display:flex;flex-direction:column;padding:1.5rem 1.25rem;border-left:1px solid var(--hp-rule);background:#fff;position:relative}
.hp-stages li:first-child{border-left:0}
.hp-stages li::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--navy)}
.hp-stages li:nth-child(3)::before{background:var(--gold)}
.hp-stage-no{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.hp-stages h3{margin:.375rem 0 .625rem;font-size:1.125rem;line-height:1.4}
.hp-stages h3 a{color:var(--navy);text-decoration:none}
.hp-stages h3 a:hover{color:var(--gold-ink)}
.hp-stages p{margin:0 0 1.25rem;font-size:.9375rem;line-height:1.65;color:var(--muted);flex:1}
.hp-stage-tool{display:block;font-size:.8125rem;font-weight:600;line-height:1.4;color:var(--navy);text-decoration:none;padding-top:.875rem;border-top:1px solid var(--hp-rule)}
.hp-stage-tool::before{content:"เครื่องมือ";display:block;font-weight:400;color:var(--muted);font-size:.75rem}
.hp-stage-tool:hover{color:var(--gold-ink)}

/* Tools */
.hp-tools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.hp-tools a{display:flex;flex-direction:column;height:100%;background:#fff;padding:1.5rem;text-decoration:none;color:var(--ink);border:1px solid var(--hp-rule);border-radius:4px;transition:border-color .15s,box-shadow .15s,transform .15s}
.hp-tools a:hover{border-color:var(--gold);box-shadow:0 14px 30px -18px rgba(13,27,51,.35);transform:translateY(-2px);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.hp-tools a{transition:none}.hp-tools a:hover{transform:none}}
.hp-tool-code{align-self:flex-start;font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--hp-gold-l);background:var(--hp-ink);padding:.25rem .625rem;border-radius:2px;margin-bottom:1.25rem}
.hp-tools h3{margin:0 0 .5rem;font-size:1.125rem;line-height:1.4;color:var(--navy)}
.hp-tools p{margin:0 0 1.25rem;font-size:.9375rem;line-height:1.65;color:var(--muted);flex:1}
.hp-tools i{font-style:normal;font-weight:600;font-size:.875rem;color:var(--gold-ink)}

/* Library */
.hp-lib{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:4rem}
.hp-sub{font-size:.8125rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 1rem}
.hp-books,.hp-cats{list-style:none;margin:0 0 1.5rem;padding:0;border-top:1px solid var(--navy)}
.hp-books a{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem;align-items:baseline;padding:1.125rem 0;border-bottom:1px solid var(--hp-rule);text-decoration:none}
.hp-book-no{font-weight:700;color:var(--gold);font-size:1.125rem}
.hp-books b{display:block;color:var(--navy);font-size:1.0625rem;line-height:1.5}
.hp-books small{color:var(--muted);font-size:.875rem}
.hp-books a:hover b{color:var(--gold-ink)}
.hp-cats a{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--hp-rule);text-decoration:none;color:var(--navy);font-weight:600;line-height:1.5}
.hp-cats b{font-weight:600;color:var(--gold-ink);font-variant-numeric:tabular-nums;min-width:2rem;text-align:right}
.hp-cats a:hover span{color:var(--gold-ink)}
.hp-cats-note{font-size:.8125rem;color:var(--muted);margin:-1rem 0 1rem}

/* Responsive */
@media (max-width:64rem){.hp-stages{grid-template-columns:repeat(2,1fr)}.hp-stages li{border-top:1px solid var(--hp-rule)}.hp-stages li:nth-child(odd){border-left:0}.hp-tools{grid-template-columns:repeat(2,1fr)}}
@media (max-width:56rem){.hp-hero-in{grid-template-columns:1fr;gap:2.5rem;padding-top:3rem}.hp-steps{grid-template-columns:repeat(2,1fr)}.hp-steps li{border-bottom:1px solid var(--hp-rule)}.hp-steps li:nth-child(2){border-right:0}.hp-quote,.hp-lib{grid-template-columns:1fr;gap:2rem}}
@media (max-width:40rem){.hp-sec{padding:3.5rem 0}.hp-stats{grid-template-columns:repeat(2,1fr)}.hp-stats li:nth-child(3){border-left:0;padding-left:0}.hp-stats b{font-size:1.75rem}.hp-steps,.hp-stages,.hp-tools{grid-template-columns:1fr}.hp-steps li{border-right:0}.hp-stages li{border-left:0}.hp-hero h1 br{display:none}.hp-panel-kpi dd{display:none}}
@media print{.hp-hero{background:none;color:#000}.hp-grid,.hp-panel{display:none}}