/* ThaiDNS - WorkFlow DMS
 Brand palette pulled from flyer image
 ============================================ */
:root{
 --navy-900:#03103a;
 --navy-800:#061849;
 --navy-700:#0a2160;
 --navy-600:#0f2d80;
 --blue-500:#1d4ed8;
 --blue-400:#3b82f6;
 --gold-500:#ffc107;
 --gold-400:#ffd54f;
 --green-500:#22c55e;
 --green-600:#16a34a;
 --purple-500:#7c3aed;
 --red-500:#ef4444;
 --text:#1f2937;
 --text-muted:#64748b;
 --bg:#f7f9fc;
 --white:#ffffff;
 --shadow-sm:0 2px 8px rgba(6,24,73,.08);
 --shadow-md:0 8px 24px rgba(6,24,73,.12);
 --shadow-lg:0 20px 50px rgba(6,24,73,.18);
 --radius:14px;
 --radius-md:18px;
 --radius-lg:22px;
 --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
:target{scroll-margin-top:90px}
section[id]{scroll-margin-top:90px}
body{
 font-family:"Sarabun","Prompt","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
 color:var(--text);
 background:var(--bg);
 line-height:1.65;
 -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue-500);text-decoration:none}
a:hover{color:var(--navy-700)}

/* ====== NAVBAR ====== */
.nav{
 position:sticky;top:0;z-index:50;
 background:linear-gradient(135deg,var(--navy-800) 0%,var(--navy-700) 60%,var(--blue-500) 100%);
 box-shadow:var(--shadow-sm);
}
.nav-inner{
 max-width:var(--maxw);margin:0 auto;
 display:flex;align-items:center;justify-content:space-between;
 padding:14px 22px;color:#fff;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.25rem;color:#fff}
.brand-mark{
 width:42px;height:42px;border-radius:10px;
 background:linear-gradient(135deg,var(--gold-500),#ff8a00);
 display:flex;align-items:center;justify-content:center;
 color:var(--navy-800);font-weight:900;font-size:1.1rem;
 box-shadow:0 4px 12px rgba(255,193,7,.35);
}
.brand small{display:block;font-weight:500;font-size:.7rem;opacity:.85;letter-spacing:.08em}

.menu{display:flex;gap:6px;align-items:center;list-style:none}
.menu a{
 color:#dbeafe;font-weight:500;padding:8px 14px;border-radius:8px;
 transition:.2s;font-size:.95rem;
}
.menu a:hover,.menu a.active{background:rgba(255,255,255,.12);color:#fff}

/* Nav dropdown */
.menu li.has-dropdown{position:relative}
.menu li.has-dropdown > a::after{content:" ▾";font-size:.7em;opacity:.85;margin-left:2px}
.menu .dropdown{
 position:absolute;top:calc(100% + 8px);left:0;min-width:280px;
 background:#fff;border-radius:12px;box-shadow:0 20px 50px rgba(6,24,73,.25);
 padding:8px;list-style:none;opacity:0;visibility:hidden;
 transform:translateY(-6px);transition:.18s ease;z-index:60;
 border:1px solid #e5e7eb;
}
.menu li.has-dropdown:hover > .dropdown,
.menu li.has-dropdown.open > .dropdown,
.menu li.has-dropdown:focus-within > .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.menu .dropdown li{margin:0}
.menu .dropdown a{
 display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;
 color:var(--navy-800);font-weight:600;font-size:.92rem;
}
.menu .dropdown a:hover,.menu .dropdown a.active{background:#eff6ff;color:var(--blue-500)}
.menu .dropdown a i{color:var(--blue-500);width:18px;text-align:center;font-size:.95rem}
.menu .dropdown small{display:block;color:var(--text-muted);font-weight:400;font-size:.78rem;margin-top:1px}
/* Mobile: collapse dropdown inside open menu */
@media (max-width:860px){
 .menu li.has-dropdown > a::after{content:" ▾";float:right}
 .menu .dropdown{
  position:static;opacity:1;visibility:visible;transform:none;
  box-shadow:none;border:none;background:rgba(255,255,255,.05);
  padding:4px 0 4px 12px;margin:6px 0 0;display:none;min-width:0;
 }
 .menu li.has-dropdown.open > .dropdown{display:block}
 .menu .dropdown a{color:#dbeafe;padding:8px 12px}
 .menu .dropdown a:hover,.menu .dropdown a.active{background:rgba(255,255,255,.1);color:#fff}
 .menu .dropdown a i{color:var(--gold-400)}
 .menu .dropdown small{color:#94a3b8}
}

.nav-right{display:flex;gap:10px;align-items:center}
.lang-switch{
 display:flex;background:rgba(255,255,255,.1);
 border-radius:8px;overflow:hidden;font-size:.85rem;
}
.lang-switch button{
 background:none;border:none;color:#dbeafe;padding:6px 12px;cursor:pointer;font-weight:600;
}
.lang-switch button.on{background:var(--gold-500);color:var(--navy-800)}

.btn{
 display:inline-flex;align-items:center;gap:8px;
 padding:11px 22px;border-radius:10px;font-weight:700;font-size:.95rem;
 border:none;cursor:pointer;transition:.2s;text-decoration:none;
}
.btn-primary{
 background:linear-gradient(135deg,var(--gold-500),#ff8a00);color:var(--navy-800);
 box-shadow:0 6px 18px rgba(255,138,0,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(255,138,0,.45);color:var(--navy-800)}
.btn-ghost{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-ghost:hover{background:rgba(255,255,255,.25);color:#fff}
.btn-outline{background:transparent;color:var(--blue-500);border:2px solid var(--blue-500)}
.btn-outline:hover{background:var(--blue-500);color:#fff}

.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer}

/* ====== HERO ====== */
.hero{
 position:relative;overflow:hidden;color:#fff;
 background:radial-gradient(1200px 600px at 80% -10%,rgba(59,130,246,.45),transparent 60%),
 radial-gradient(900px 500px at 10% 100%,rgba(124,58,237,.35),transparent 60%),
 linear-gradient(135deg,var(--navy-900) 0%,var(--navy-800) 50%,var(--navy-700) 100%);
 padding:90px 0 120px;
}
.hero::before{
 content:"";position:absolute;inset:0;
 background-image:
 linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
 background-size:60px 60px;
 mask-image:radial-gradient(ellipse at center,#000 0%,transparent 70%);
 -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,transparent 70%);
}
.hero-inner{
 max-width:var(--maxw);margin:0 auto;padding:0 22px;
 display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;
 position:relative;
}
.hero-eyebrow{
 display:inline-flex;align-items:center;gap:8px;
 background:rgba(255,193,7,.15);border:1px solid rgba(255,193,7,.4);
 color:var(--gold-400);padding:6px 14px;border-radius:99px;
 font-size:.85rem;font-weight:600;margin-bottom:18px;
}
.hero h1{
 font-size:clamp(2.2rem,5vw,3.6rem);font-weight:900;line-height:1.15;
 margin-bottom:18px;
 background:linear-gradient(135deg,#fff 0%,#e0e7ff 60%,var(--gold-400) 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero h1 .accent{color:var(--gold-500);-webkit-text-fill-color:var(--gold-500)}
.hero p.lead{font-size:1.15rem;color:#cbd5e1;margin-bottom:28px;max-width:560px}
/* Single-column hero (service detail pages without right visual) */
.hero-inner:has(> :only-child),
.hero-inner.solo{grid-template-columns:1fr;max-width:880px;text-align:center}
.hero-inner.solo .hero-eyebrow,
.hero-inner:has(> :only-child) .hero-eyebrow{margin-left:auto;margin-right:auto}
.hero p.hero-accent{
 font-size:1.1rem;color:var(--gold-400);font-weight:700;margin-bottom:14px;
 letter-spacing:.01em;
}
.hero p.hero-lead{
 font-size:1.05rem;color:#cbd5e1;margin-bottom:24px;max-width:780px;
 line-height:1.75;
}
.hero-inner.solo .hero-lead,
.hero-inner:has(> :only-child) .hero-lead{margin-left:auto;margin-right:auto}
.hero .hero-card{margin-top:24px}
.hero-inner.solo .hero-card,
.hero-inner:has(> :only-child) .hero-card{max-width:760px;margin-left:auto;margin-right:auto;text-align:left}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.hero-stats{display:flex;gap:30px;flex-wrap:wrap}
.stat{}
.stat .n{font-size:1.7rem;font-weight:900;color:var(--gold-500)}
.stat .l{font-size:.85rem;color:#94a3b8}

.hero-visual{position:relative}
.hero-card{
 background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
 border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);
 border-radius:20px;padding:22px 26px;box-shadow:var(--shadow-lg);
}
.hero-inner.solo .hero-card{display:flex;flex-direction:column;gap:14px}
.hero-inner.solo .hero-card .hero-cta{margin-bottom:0;justify-content:center}
.hero-inner.solo .hero-card .price-quick{text-align:center;display:flex;justify-content:center;align-items:baseline;gap:10px;flex-wrap:wrap}
.hero-inner.solo .hero-card .price-label{color:#cbd5e1;font-size:.95rem}
.hero-inner.solo .hero-card .price-value{color:#fff;font-size:1.6rem;font-weight:900}
.hero-inner.solo .hero-card .price-value small{color:var(--gold-400);font-size:.85rem;font-weight:600;margin-left:2px}
.hero-inner.solo .hero-card .price-note,
.hero-inner.solo .hero-card .price-or{flex-basis:100%;color:#94a3b8;font-size:.82rem}
.hero .trust-bar{margin-top:32px}
.hero .trust-item{padding:14px 14px;font-size:.85rem;line-height:1.35}
.hero .trust-item i{font-size:1.35rem}
.hero-card h3{color:#fff;font-size:1.2rem;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.hero-feature{
 display:flex;align-items:center;gap:12px;padding:12px 0;
 border-bottom:1px solid rgba(255,255,255,.08);color:#e2e8f0;font-size:.95rem;
}
.hero-feature:last-child{border-bottom:none}
.hero-feature .check{
 width:24px;height:24px;border-radius:50%;background:var(--green-500);
 color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;
}
.hero-badge{
 position:absolute;top:-44px;right:18px;z-index:3;
 background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;
 padding:14px 22px;border-radius:16px;font-weight:800;font-size:.82rem;
 box-shadow:0 12px 28px rgba(220,38,38,.45);transform:rotate(-4deg);
 text-align:center;line-height:1.2;
}
.hero-badge span:first-child{display:block;font-size:.78rem;font-weight:600;color:#fff;opacity:.95;letter-spacing:.05em}
.hero-badge span:nth-child(2){display:block;font-size:1.7rem;color:var(--gold-400);margin:2px 0;line-height:1.1}
.hero-badge small{display:block;font-size:.72rem;font-weight:600;opacity:.95;margin-top:2px}

/* ====== SECTION GENERIC ====== */
.section{padding:80px 0}
.section .container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section-head{text-align:center;margin-bottom:50px}
.section-head .eyebrow{
 display:inline-block;color:var(--blue-500);font-weight:700;
 font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px;
}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--navy-800);font-weight:900;margin-bottom:12px}
.section-head p{color:var(--text-muted);font-size:1.05rem;max-width:680px;margin:0 auto}

/* ====== FEATURE PILLS ====== */
.pills{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:-60px;position:relative;z-index:5}
.pill{
 background:#fff;border-radius:var(--radius);padding:20px;
 box-shadow:var(--shadow-md);text-align:center;transition:.25s;
}
.pill:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pill .ico{
 width:54px;height:54px;border-radius:12px;margin:0 auto 12px;
 display:flex;align-items:center;justify-content:center;
 background:linear-gradient(135deg,var(--blue-500),var(--navy-700));color:#fff;font-size:1.4rem;
}
.pill h4{color:var(--navy-800);font-size:1rem;margin-bottom:4px}
.pill p{color:var(--text-muted);font-size:.85rem;margin:0}

/* ====== SERVICE CARDS ====== */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-card{
 background:#fff;border-radius:var(--radius-lg);padding:0;
 box-shadow:var(--shadow-sm);border:1px solid #e5e7eb;transition:.25s;
 display:flex;flex-direction:column;
}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--blue-400)}
.svc-card > .svc-icon,
.svc-card > .icon{
 width:56px;height:56px;border-radius:14px;
 background:linear-gradient(135deg,var(--blue-500),var(--navy-700));
 color:#fff;display:flex;align-items:center;justify-content:center;
 font-size:1.5rem;margin:26px 26px 0;flex-shrink:0;
}
.svc-card > .svc-icon i,
.svc-card > .icon i{color:#fff}
.svc-card > h3{padding:14px 26px 0;margin:0 0 8px;font-size:1.15rem;font-weight:800;color:var(--navy-800)}
.svc-card > p{padding:0 26px 26px;margin:0;color:var(--text-muted);font-size:.95rem;line-height:1.7;flex:1}

/* Tables: comparison + pricing */
.table-wrap,.compare-table-wrap{overflow-x:auto;margin:8px 0 14px;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:#fff}
.compare-table,.pricing-table{
 width:100%;border-collapse:separate;border-spacing:0;background:#fff;
 font-size:.95rem;color:var(--navy-800);min-width:640px;
}
.compare-table th,.pricing-table th{
 background:linear-gradient(135deg,var(--navy-800),var(--navy-700));
 color:#fff;text-align:left;padding:14px 16px;font-weight:700;font-size:.92rem;
 border-bottom:2px solid var(--navy-900);white-space:nowrap;
}
.compare-table td,.pricing-table td{
 padding:13px 16px;border-bottom:1px solid #eef2f7;vertical-align:middle;
}
.compare-table tbody tr:nth-child(even),
.pricing-table tbody tr:nth-child(even){background:#f8fafc}
.compare-table tbody tr:hover,
.pricing-table tbody tr:hover{background:#fff8e6}
.compare-table tbody tr:last-child td,
.pricing-table tbody tr:last-child td{border-bottom:none}
.compare-table td:first-child,
.pricing-table td:first-child{font-weight:600;color:var(--navy-800)}
.compare-table th:nth-child(2),
.compare-table td:nth-child(2){background:rgba(255,193,7,.10);font-weight:700}
.compare-table th:nth-child(2){background:linear-gradient(135deg,var(--gold-500),#d97706);color:#fff}
.compare-table tbody tr:nth-child(even) td:nth-child(2){background:rgba(255,193,7,.15)}
.pricing-table td.popular,.pricing-table th.popular{background:rgba(255,193,7,.12)}
.pricing-table .price-cell{font-weight:800;color:var(--blue-500);font-size:1rem;white-space:nowrap}
.compare-table .check,.compare-table-yes{color:var(--green-600);font-weight:800}
.compare-table .x,.compare-table-no{color:#ef4444;font-weight:800}
.table-note{font-size:.82rem;color:var(--text-muted);margin-top:10px;line-height:1.6}
@media (max-width:720px){
 .compare-table,.pricing-table{font-size:.85rem}
 .compare-table th,.pricing-table th,.compare-table td,.pricing-table td{padding:14px 16px}
}
.svc-head{
 padding:26px 26px 22px;color:#fff;
 border-radius:var(--radius-lg) var(--radius-lg) 0 0;
 display:flex;align-items:center;gap:14px;
}
.svc-head .ico{
 width:54px;height:54px;border-radius:12px;background:rgba(255,255,255,.18);
 display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.svc-head h3{font-size:1.2rem;font-weight:800;margin:0}
.svc-head small{display:block;font-weight:500;opacity:.85;font-size:.8rem;margin-top:2px}
.svc-blue .svc-head{background:linear-gradient(135deg,var(--blue-500),var(--navy-700))}
.svc-green .svc-head{background:linear-gradient(135deg,var(--green-600),#0d9488)}
.svc-purple .svc-head{background:linear-gradient(135deg,var(--purple-500),#6d28d9)}
.svc-orange .svc-head{background:linear-gradient(135deg,#f59e0b,#d97706)}
.svc-body{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column}
.svc-body ul{list-style:none;margin-bottom:18px;flex:1}
.svc-body li{
 padding:8px 0 8px 28px;position:relative;color:#374151;font-size:.95rem;
}
.svc-body li::before{
 content:"✓";position:absolute;left:0;top:8px;
 width:20px;height:20px;border-radius:50%;background:var(--green-500);color:#fff;
 display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;
}

/* ====== PRICING ====== */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pricing-grid-4{grid-template-columns:repeat(4,1fr);gap:18px}
.pricing-grid-5{grid-template-columns:repeat(5,1fr);gap:16px}
/* Compact price card when in 5-col grid */
.pricing-grid-5 .price-card{padding:26px 18px}
.pricing-grid-5 .price-card .price-name{font-size:1.1rem;margin-bottom:4px}
.pricing-grid-5 .price-card .price-tag{font-size:.82rem;min-height:36px;margin-bottom:14px}
.pricing-grid-5 .price-card .price-amount{flex-wrap:wrap;align-items:baseline;gap:3px;margin-bottom:14px}
.pricing-grid-5 .price-card .price-amount .num{font-size:2rem}
.pricing-grid-5 .price-card .price-amount .per{font-size:.78rem;white-space:nowrap}
.pricing-grid-5 .price-card .price-amount .currency{font-size:.85rem}
.pricing-grid-5 .price-card .price-list li{font-size:.88rem;padding:6px 0 6px 22px}
.pricing-grid-5 .price-card.popular{transform:none}
.pricing-grid-5 .price-card.popular::before{font-size:.7rem;padding:5px 12px;right:16px;top:-12px}
@media (max-width:1200px){.pricing-grid-5{grid-template-columns:repeat(3,1fr);gap:20px}.pricing-grid-5 .price-card{padding:30px 24px}.pricing-grid-5 .price-card .price-amount .num{font-size:2.4rem}}
@media (max-width:1100px){.pricing-grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.pricing-grid-5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pricing-grid-4,.pricing-grid-5{grid-template-columns:1fr}}
@media (max-width:600px){.wfdms-teaser-grid{grid-template-columns:repeat(2,1fr) !important}}
.price-card{
 background:#fff;border-radius:var(--radius-lg);padding:34px 28px;
 box-shadow:var(--shadow-sm);border:2px solid #e5e7eb;
 position:relative;transition:.25s;display:flex;flex-direction:column;
}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.price-card.popular{
 border-color:var(--gold-500);transform:scale(1.03);
 box-shadow:0 20px 50px rgba(255,193,7,.25);
}
.price-card.popular::before{
 content:"แนะนำ";position:absolute;top:-14px;right:22px;
 background:linear-gradient(135deg,var(--red-500),#dc2626);color:#fff;
 padding:6px 16px;border-radius:99px;font-weight:800;font-size:.8rem;
 box-shadow:0 6px 16px rgba(239,68,68,.4);
}
html[data-lang="en"] .price-card.popular::before{content:"POPULAR"}
.price-name{color:var(--navy-800);font-weight:800;font-size:1.3rem;margin-bottom:6px}
.price-tag{font-size:.9rem;color:var(--text-muted);margin-bottom:18px;min-height:42px}
.price-amount{display:flex;align-items:baseline;gap:6px;margin-bottom:22px}
.price-amount .currency{color:var(--text-muted);font-size:1rem}
.price-amount .num{font-size:2.8rem;font-weight:900;color:var(--navy-800);line-height:1}
.price-amount .per{color:var(--text-muted);font-size:.9rem}
.price-list{list-style:none;margin-bottom:24px;flex:1}
.price-list li{padding:8px 0 8px 28px;position:relative;color:#374151;font-size:.95rem;border-bottom:1px dashed #e5e7eb}
.price-list li::before{
 content:"✓";position:absolute;left:0;top:10px;color:var(--green-600);font-weight:900;
}
.price-list li.dim{color:#cbd5e1;text-decoration:line-through}
.price-list li.dim::before{content:"×";color:#cbd5e1}
.price-card .btn{justify-content:center;width:100%}
.price-card h3{color:var(--navy-800);font-weight:800;font-size:1.6rem;margin:0 0 10px}
.price-card .price{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.price-card .price .amount{font-size:2.4rem;font-weight:900;color:var(--navy-800);line-height:1}
.price-card .price .per{color:var(--text-muted);font-size:.9rem}
.price-card .price-yearly{color:var(--green-600);font-weight:700;font-size:.9rem;margin:0 0 18px}
.price-card .popular-tag{position:absolute;top:-14px;right:22px;background:linear-gradient(135deg,var(--red-500),#dc2626);color:#fff;padding:6px 16px;border-radius:99px;font-weight:800;font-size:.8rem;box-shadow:0 6px 16px rgba(239,68,68,.4)}
.price-card .popular-tag + h3{margin-top:6px}
.price-card .feat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.price-card .feat-list li{padding:8px 0 8px 26px;position:relative;color:#374151;font-size:.93rem;border-top:1px dashed #e5e7eb}
.price-card .feat-list li:first-child{border-top:none}
.price-card .feat-list li::before{content:"✓";position:absolute;left:0;top:8px;color:var(--green-600);font-weight:900}
.vat-note{color:var(--text-muted);font-size:.85rem;margin-top:18px}
.text-center{text-align:center}

/* ====== PROMO STRIP ====== */
.promo{
 background:linear-gradient(135deg,var(--gold-500),#ff8a00);
 border-radius:var(--radius-lg);padding:36px;color:var(--navy-800);
 display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
 box-shadow:0 25px 50px rgba(255,138,0,.25);
}
.promo h3{font-size:1.6rem;font-weight:900;margin-bottom:6px}
.promo p{font-size:1rem;margin:0}
.promo .big{
 font-size:3rem;font-weight:900;color:var(--red-500);line-height:1;
 text-shadow:2px 2px 0 rgba(255,255,255,.5);
}

/* ====== BENEFITS / WHO ====== */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.benefit{text-align:center;padding:20px}
.benefit .ico{
 width:64px;height:64px;border-radius:50%;
 background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:var(--blue-500);
 display:flex;align-items:center;justify-content:center;font-size:1.8rem;
 margin:0 auto 14px;
}
.benefit h4{color:var(--navy-800);margin-bottom:6px;font-size:1.05rem}
.benefit p{color:var(--text-muted);font-size:.9rem;margin:0}

.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.who{
 background:#fff;border-radius:var(--radius);padding:24px 18px;text-align:center;
 box-shadow:var(--shadow-sm);transition:.25s;border:1px solid #e5e7eb;
}
.who:hover{transform:translateY(-4px);border-color:var(--blue-400);box-shadow:var(--shadow-md)}
.who .ico{
 width:56px;height:56px;margin:0 auto 12px;border-radius:14px;
 background:linear-gradient(135deg,var(--blue-500),var(--navy-700));color:#fff;
 display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.who h4{color:var(--navy-800);font-size:1rem;margin:0}

/* ====== CTA SECTION ====== */
.cta-band{
 background:linear-gradient(135deg,var(--navy-800),var(--blue-500));
 color:#fff;border-radius:var(--radius-lg);padding:50px 40px;text-align:center;
 box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
}
.cta-band::before{
 content:"";position:absolute;inset:0;
 background:radial-gradient(600px 300px at 20% 0%,rgba(255,193,7,.25),transparent 60%);
}
.cta-band h2{font-size:2rem;margin-bottom:10px;position:relative}
.cta-band p{opacity:.9;margin-bottom:24px;font-size:1.05rem;position:relative}
.cta-band .btn{position:relative}

/* ====== CONTACT ====== */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;align-items:start}
.contact-info{background:#fff;border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm)}
.contact-info h3{color:var(--navy-800);font-size:1.25rem;margin-bottom:18px}
.contact-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #e5e7eb}
.contact-row:last-child{border-bottom:none}
.contact-row .ico{
 width:44px;height:44px;border-radius:12px;flex-shrink:0;
 background:linear-gradient(135deg,var(--blue-500),var(--navy-700));color:#fff;
 display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.contact-row .meta{flex:1}
.contact-row .meta strong{display:block;color:var(--navy-800);font-size:.95rem;margin-bottom:2px}
.contact-row .meta span{color:var(--text-muted);font-size:.95rem}
.contact-row .meta a{font-weight:700}

.form{background:#fff;border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm)}
.form h3{color:var(--navy-800);font-size:1.25rem;margin-bottom:6px}
.form .sub{color:var(--text-muted);font-size:.9rem;margin-bottom:22px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.field{margin-bottom:14px}
.field label{display:block;color:var(--navy-800);font-weight:600;font-size:.9rem;margin-bottom:6px}
.field input,.field select,.field textarea{
 width:100%;padding:12px 14px;border:1.5px solid #e5e7eb;border-radius:10px;
 font-family:inherit;font-size:.95rem;color:var(--text);background:#fff;transition:.2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
 outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(29,78,216,.12);
}
.field textarea{min-height:120px;resize:vertical}

/* ====== BRAND LOGO ====== */
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand-logo{display:block;height:64px;width:auto;max-width:280px;object-fit:contain}
.footer .brand-logo{height:80px;max-width:300px;margin-bottom:14px}
@media(max-width:600px){.brand-logo{height:52px;max-width:220px}.footer .brand-logo{height:72px;max-width:260px}}

/* ====== FOOTER ====== */
.footer{
 background:linear-gradient(180deg,var(--navy-900) 0%,#050e1f 100%);
 color:#cbd5e1;padding:60px 0 0;margin-top:60px;position:relative;
}
.footer::before{
 content:"";position:absolute;top:0;left:0;right:0;height:3px;
 background:linear-gradient(90deg,var(--blue-500),var(--gold-400),var(--blue-500));
}
.footer-inner{
 max-width:var(--maxw);margin:0 auto;padding:0 22px;
 display:grid;grid-template-columns:1.4fr .9fr .9fr .9fr 1.2fr;gap:32px;
}
.footer-col{position:relative}
.footer-col + .footer-col{padding-left:20px}
.footer-col + .footer-col::before{
 content:"";position:absolute;left:0;top:0;bottom:30px;width:1px;
 background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.08) 20%,rgba(255,255,255,.08) 80%,transparent 100%);
}
.footer h5{
 color:#fff;font-size:.78rem;margin-bottom:18px;font-weight:800;
 letter-spacing:.18em;text-transform:uppercase;
 display:flex;align-items:center;gap:10px;
}
.footer h5::before{
 content:"";width:24px;height:2px;background:var(--gold-400);border-radius:2px;flex:none;
}
.footer ul{list-style:none}
.footer li{padding:7px 0;font-size:.92rem;color:#cbd5e1;line-height:1.5}
.footer a{color:#cbd5e1;font-size:.92rem;transition:color .2s,padding .2s;display:inline-block}
.footer a:hover{color:var(--gold-400);padding-left:4px}
.footer .brand{color:#fff;margin-bottom:16px}
.footer .brand small{color:#94a3b8;font-weight:500;letter-spacing:.05em}
.footer .footer-desc{
 font-size:.9rem;color:#94a3b8;margin:0 0 18px;line-height:1.65;max-width:340px;
}
.footer .footer-contact{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.footer .footer-contact a{
 display:flex;align-items:center;gap:10px;color:#cbd5e1;font-size:.9rem;padding:6px 0;
}
.footer .footer-contact .ico-mini{
 width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
 background:rgba(255,255,255,.06);color:var(--gold-400);font-size:.9rem;flex:none;transition:.2s;
}
.footer .footer-contact a:hover .ico-mini{background:var(--gold-400);color:var(--navy-900)}
.footer .footer-contact .ico-mini.line{color:#06c755}
.footer .footer-contact .ico-mini.fb{color:#60a5fa}
.footer .footer-contact a:hover{padding-left:0;color:#fff}
.footer .footer-hours{
 display:flex;align-items:center;gap:10px;color:#94a3b8;font-size:.88rem;
 padding:8px 0 0;margin-top:6px;border-top:1px dashed rgba(255,255,255,.08);
}
.footer .footer-hours .ico-mini{color:var(--gold-400)}
.footer-bottom{
 text-align:center;border-top:1px solid rgba(255,255,255,.08);
 padding:22px;margin-top:44px;color:#94a3b8;font-size:.85rem;
 background:rgba(0,0,0,.2);
}
.footer-bottom strong{color:#cbd5e1;font-weight:600}

/* ====== FAB CONTACT ====== */
.fab{
 position:fixed;bottom:24px;right:24px;z-index:40;
 display:flex;flex-direction:column;gap:10px;
}
.fab a{
 width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
 color:#fff;box-shadow:0 10px 25px rgba(0,0,0,.2);transition:.25s;text-decoration:none;font-size:1.3rem;
}
.fab a:hover{transform:scale(1.1)}
.fab .line{background:#06c755}
.fab .phone{background:linear-gradient(135deg,var(--blue-500),var(--navy-700))}

/* ====== UTILS ====== */
.text-center{text-align:center}

/* WorkFlow DMS packages — keep price line aligned across 4 cards */
.wfd-packages .svc-head{align-items:flex-start;min-height:106px}
.wfd-packages .svc-head small{display:block;min-height:38px;line-height:1.4}
.wfd-packages .svc-body > div:nth-child(1){min-height:42px}
.wfd-packages .svc-body > div:nth-child(2){min-height:32px}
.wfd-packages .svc-body > div:nth-child(3){min-height:24px}

/* Language swap is handled by main.js (swaps textContent). */
.mt-1{margin-top:24px}
.alt-bg{background:#fff}

/* ====== RESPONSIVE ====== */
@media (max-width: 960px){
 .hero-inner{grid-template-columns:1fr;gap:30px}
 .pills{grid-template-columns:repeat(2,1fr)}
 .svc-grid,.pricing-grid{grid-template-columns:1fr;gap:20px}
 .price-card.popular{transform:none}
 .benefits,.who-grid{grid-template-columns:repeat(2,1fr)}
 .footer-inner{grid-template-columns:1fr 1fr;gap:24px}
 .footer-col + .footer-col::before{display:none}
 .contact-grid{grid-template-columns:1fr}
 .menu{
 display:none;position:absolute;top:100%;left:0;right:0;
 flex-direction:column;background:var(--navy-800);padding:14px;gap:0;
 }
 .menu.open{display:flex}
 .menu a{display:block;padding:12px 14px;border-radius:6px}
 .menu-toggle{display:block}
 .promo{grid-template-columns:1fr;text-align:center}
 .form .row{grid-template-columns:1fr}
 .hero{padding:60px 0 90px}
 .section{padding:60px 0}
}
@media (max-width:520px){
 .pills{grid-template-columns:1fr}
 .benefits,.who-grid{grid-template-columns:1fr 1fr}
 .footer-inner{grid-template-columns:1fr}
}

/* Breadcrumb */
.breadcrumb{background:var(--navy-900);border-bottom:1px solid rgba(255,255,255,.05);font-size:.85rem}
.breadcrumb-inner{max-width:var(--maxw);margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.5)}
.breadcrumb-inner a{color:rgba(255,255,255,.7);text-decoration:none;transition:.2s}
.breadcrumb-inner a:hover{color:#fff;text-decoration:none}
.breadcrumb-inner .sep{color:rgba(255,255,255,.3)}
.breadcrumb-inner .current{color:var(--gold-400);font-weight:500}

/* Trust bar */
.trust-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:center}
.trust-item{display:flex;gap:12px;align-items:center;background:#fff;padding:16px;border-radius:var(--radius-md);border:1px solid #e5e7eb;color:var(--navy-800);font-size:.92rem;font-weight:600}
.trust-item i{font-size:1.6rem;color:var(--blue-500);flex-shrink:0}
.trust-item strong{display:block;font-size:.92rem;color:var(--navy-800)}
.trust-item small{display:block;color:var(--text-muted);font-size:.78rem;margin-top:2px}
@media (max-width:960px){.trust-bar{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.trust-bar{grid-template-columns:1fr}}

/* Cookie consent banner */
.tdns-cookie{
    position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;
    background:#0b2545;color:#e2e8f0;border-radius:14px;
    box-shadow:0 20px 50px rgba(11,37,69,.45);
    border:1px solid rgba(251,191,36,.25);
    padding:18px 22px;
    transform:translateY(20px);opacity:0;transition:.28s ease;
}
.tdns-cookie.show{transform:translateY(0);opacity:1}
.tdns-cookie-inner{
    max-width:var(--maxw);margin:0 auto;
    display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
}
.tdns-cookie-text strong{display:block;color:#fff;font-size:1rem;margin-bottom:4px}
.tdns-cookie-text p{margin:0;font-size:.88rem;line-height:1.55;color:#cbd5e1}
.tdns-cookie-text a{color:var(--gold-400);text-decoration:underline}
.tdns-cookie-actions{display:flex;gap:10px;flex-shrink:0}
.tdns-cookie-actions button{
    border:none;cursor:pointer;font-weight:700;padding:10px 18px;border-radius:10px;
    font-family:inherit;font-size:.9rem;transition:.18s;
}
.btn-cookie-necessary{background:rgba(255,255,255,.08);color:#e2e8f0;border:1px solid rgba(255,255,255,.18)!important}
.btn-cookie-necessary:hover{background:rgba(255,255,255,.14)}
.btn-cookie-accept{background:linear-gradient(135deg,var(--gold-400),var(--gold-500));color:var(--navy-900)}
.btn-cookie-accept:hover{filter:brightness(1.08)}
@media (max-width:760px){
    .tdns-cookie{left:8px;right:8px;bottom:8px;padding:16px}
    .tdns-cookie-inner{grid-template-columns:1fr;gap:12px}
    .tdns-cookie-actions{justify-content:stretch}
    .tdns-cookie-actions button{flex:1}
}

/* FAQ */
.faq-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius-md);padding:0;overflow:hidden}
.faq-item summary{padding:18px 22px;cursor:pointer;font-weight:600;color:var(--navy-800);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.4rem;color:var(--blue-500);font-weight:400;transition:transform .2s}
.faq-item[open] summary::after{content:"−"}
.faq-item p{padding:0 22px 18px;margin:0;color:var(--text-muted);line-height:1.7}
.faq-item p a{color:var(--blue-500)}