/* Softaken homepage (1index.php) — sectioned + minified
   Sections match page order. Shared tokens live in style.css. */

/* ========== 01 LAYOUT ========== */
.wrap-page{width:min(1120px,calc(100% - 32px));margin-inline:auto}
.section{padding:56px 0}
.sand{background:var(--bg)}
.paper{background:#fff}
.section .stats{padding:0}
.stk-footer{margin-top:0}
.section h2,.center h2{margin:0 0 8px;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em}
.center{text-align:center}
.center p{color:var(--muted);margin:0 auto 8px;max-width:42rem}
.kicker{margin:0 0 8px;color:var(--brand);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.eyebrow{display:inline-block;background:var(--brand-soft);color:var(--brand-dark);border-radius:999px;padding:4px 10px;font-size:.78rem;font-weight:700}
.band-row,.split,.cards,.services,.suite,.stories{display:grid;gap:22px}

/* ========== 02 BUTTONS ========== */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border-radius:8px;font-weight:700;text-decoration:none}
.btn svg{width:18px;height:18px;fill:currentColor}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-dark)}
.btn-line{background:#fff;color:var(--brand);border:1.5px solid var(--brand)}
.btn-line:hover{background:var(--brand-soft)}

/* ========== 03 HERO + TRUST BADGES ========== */
.hero{background:#CAE4F2;padding:48px 0 40px}
.hero .wrap-page{width:min(1320px,calc(100% - 48px))}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
.hero h1{margin:0 0 12px;font-size:clamp(2rem,4vw,3.1rem);line-height:1.12;letter-spacing:-.03em}
.lead{margin:0 0 18px;color:var(--muted);font-size:1.05rem;max-width:38rem}
.hero-shot{width:100%;height:auto;aspect-ratio:1080/588;object-fit:cover;border-radius:16px;box-shadow:0 16px 40px rgba(20,89,113,.12);margin-top:18px}
.hero-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;margin:18px 0 0;padding:0;max-width:38rem}
.hero-trust li{display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 12px;background:rgba(255,255,255,.72);border:1px solid rgba(20,89,113,.14);border-radius:12px;box-shadow:0 6px 16px rgba(20,89,113,.06);backdrop-filter:blur(4px)}
.hero-trust-icon{flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:linear-gradient(160deg,#e7f5fa 0%,#d4ebf4 100%);color:var(--brand);display:grid;place-items:center}
.hero-trust-icon svg{width:18px;height:18px;fill:currentColor}
.hero-trust-text{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.2}
.hero-trust-text strong{color:var(--ink);font-size:.86rem;font-weight:700}
.hero-trust-text em{color:var(--muted);font-style:normal;font-size:.75rem;font-weight:500}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;max-width:38rem}
@media (max-width:700px){.hero-trust{grid-template-columns:1fr;max-width:none}.hero-cta{max-width:none}}

/* ========== 04 PRODUCT CATEGORIES ========== */
.cats{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px 18px;min-height:420px}
.cats h2{margin:12px 0 4px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#4a5560}
.cat{display:grid;grid-template-columns:40px 1fr 18px;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.cat:first-of-type{border-top:0}
.cat svg{width:28px;height:28px;fill:var(--brand)}
.cat strong{display:block;color:var(--ink)}
.cat span{color:#4a5560;font-size:.92rem}
.cat .go{width:16px;height:16px;fill:var(--muted)}
.cat:hover strong{color:var(--brand)}
.note{display:block;margin:0 0 8px;color:var(--brand-dark);font-weight:700;text-decoration:none}

/* ========== 05 ACHIEVEMENTS / STATS ========== */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:8px 0 28px}
@media (max-width:1100px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:#fff;border-left:3px solid var(--brand);padding:16px}
.stat b{display:block;font-size:1.8rem;line-height:1}
.stat span{color:var(--muted)}

/* ========== 06 ENTERPRISE BAND ========== */
.band{background:var(--brand);color:#fff;padding:28px 0}
.band-row{grid-template-columns:1.4fr auto;align-items:center}
.band p{margin:6px 0 0}
.band .btn-line{background:#fff}
.band .kicker-band{color:#E8F6FB}

/* ========== 07 WHY SOFTAKEN CARDS ========== */
.cards{grid-template-columns:repeat(4,1fr);margin-top:22px}
.card,.service,.story{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.card svg,.icon-badge svg,.service-icon svg{width:36px;height:36px;fill:var(--brand)}
.card h3,.service h3{margin:12px 0 8px;font-size:1.15rem}
.card p,.service p,.suite p{margin:0;color:var(--muted)}

/* ========== 08 CLIENTS ========== */
.clients{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center}
.clients p{margin:0 0 8px;color:var(--muted);line-height:1.6}
.btn-clients{margin-top:22px;background:var(--brand);color:#fff;border:1.5px solid var(--brand);border-radius:10px;box-shadow:0 8px 18px rgba(20,89,113,.18);transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
.btn-clients:hover{background:var(--brand-dark);border-color:var(--brand-dark);transform:translateY(-1px);box-shadow:0 10px 22px rgba(20,89,113,.24)}
.btn-clients svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.logo-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line)}
.logo-grid img{width:100%;height:auto;aspect-ratio:140/78;object-fit:contain;padding:10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);content-visibility:auto}

/* ========== 09 SERVICES / EXPERIENCE ========== */
.services{grid-template-columns:1.15fr 1fr 1fr;align-items:stretch}
.service-lead{grid-column:1;grid-row:1/span 2;background:var(--brand);color:#fff;border-radius:14px;padding:28px}
.service-lead span{display:inline-block;background:var(--brand-soft);color:var(--brand-dark);border-radius:999px;padding:4px 10px;font-size:.78rem;font-weight:700}
.service-lead h2{color:#fff;margin:14px 0 8px}
.service{text-align:center}
.service img{width:56px;height:56px;margin:0 auto 8px}
.service-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex-shrink:0}

/* ========== 10 SUITE ========== */
.suite{grid-template-columns:1.2fr .8fr;align-items:center}
.point{display:grid;grid-template-columns:42px 1fr;gap:12px;margin-top:16px}
.icon-badge{width:42px;height:42px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center}
.icon-badge svg{width:22px;height:22px}
.suite img{border-radius:16px}

/* ========== 11 CTA DOWNLOAD ========== */
.cta{display:flex;justify-content:space-between;gap:16px;align-items:center;background:var(--brand-deep);color:#fff;border-radius:16px;padding:22px 24px}
.cta h2{margin:0 0 4px;font-size:1.5rem}
.cta p{margin:0}

/* ========== 12 STORIES / VIDEO ========== */
.stories{grid-template-columns:1fr 1.05fr;align-items:center}
.quote{margin:8px 0 16px;font-size:1.2rem;line-height:1.55}
.people{display:flex;gap:10px}
.people button{width:54px;height:54px;padding:0;border-radius:50%;border:3px solid transparent;background:#fff;cursor:pointer;overflow:hidden}
.people button.is-on{border-color:var(--brand);width:64px;height:64px}
.people img{width:100%;height:100%;object-fit:cover}
.video{position:relative;border-radius:16px;overflow:hidden;background:#1C2430;min-height:280px;aspect-ratio:16/9;contain:layout paint}
.video img,.video iframe{width:100%;height:100%;object-fit:cover;border:0;position:absolute;inset:0}
.video img[src^="data:"]{background:#1C2430}
.play{position:absolute;left:16px;bottom:16px;z-index:2;width:52px;height:52px;border:0;border-radius:50%;background:var(--brand);color:#fff;cursor:pointer}
.play svg{width:20px;height:20px;fill:currentColor;margin-left:3px}

/* ========== 13 INSIGHTS / NEWS ========== */
.insights-section{background:#E8F4F9;padding:56px 0}
.insights-head{margin:0 auto 32px;max-width:40rem;text-align:center}
.insights-head .kicker{margin:0 0 8px}
.insights-head h2{margin:0 0 10px}
.insights-head p{margin:0 auto;color:var(--muted);max-width:32rem}
.insights-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.icard{display:flex;flex-direction:column;background:#fff;border:1px solid #c9e3ee;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(20,89,113,.08);min-height:100%}
.icard-label{padding:12px 18px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:#145971}
.icard--case .icard-label{background:#1a7a96}
.icard--blog .icard-label{background:#0F4557}
.icard-img{display:block;height:150px;overflow:hidden;background:#0F4557;flex-shrink:0;text-decoration:none}
.icard-img img{width:100%;height:100%;object-fit:cover;display:block}
.icard-img--fallback{display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#145971 0%,#0F4557 100%)}
.icard-img--fallback span{color:#fff;font-size:.85rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.92}
.icard--case .icard-img--fallback{background:linear-gradient(145deg,#1a7a96 0%,#145971 100%)}
.icard--blog .icard-img--fallback{background:linear-gradient(145deg,#0F4557 0%,#145971 100%)}
.icard-body{display:flex;flex-direction:column;gap:10px;padding:18px;flex:1}
.icard-date{font-size:.8rem;font-weight:700;color:#5a6a75}
.icard-title{margin:0;font-size:1.05rem;line-height:1.35}
.icard-title a{color:#1C2430;text-decoration:none}
.icard-title a:hover{color:#145971}
.icard-text{margin:0;color:#5a6a75;font-size:.92rem;line-height:1.5;flex:1}
.icard-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:700;color:#145971;text-decoration:none}
.icard-link:hover{color:#0F4557}
.icard-empty{margin:0;color:#5a6a75}
@media (max-width:900px){
.insights-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
.icard-img{height:170px}
}

/* ========== 14 TRUST / CERTIFICATIONS ========== */
.trust-strip{padding-bottom:88px;background:#E1F3F9}
.trust{display:flex;align-items:stretch;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:18px;padding:0;box-shadow:0 10px 28px rgba(20,89,113,.1)}
.trust-brand{flex:0 0 210px;display:flex;align-items:center;justify-content:center;padding:22px 24px;background:#fff;border-right:1px solid #CAE4F2}
.trust-brand img{width:160px;height:auto}
.trust-main{flex:1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 28px;background:linear-gradient(95deg,#145971 0%,#0F4557 100%);color:#fff}
.trust-copy{min-width:0;max-width:22rem}
.trust-copy strong{display:block;margin-bottom:6px;font-size:clamp(1.15rem,2vw,1.45rem);letter-spacing:.04em;line-height:1.25;text-transform:uppercase}
.trust-copy span{display:block;color:rgba(255,255,255,.9);line-height:1.5}
.badges{display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:14px}
.badges div{text-align:center;font-size:.7rem;font-weight:600;line-height:1.3;color:#fff;width:78px}
.badges img{width:52px;height:52px;margin:0 auto 6px;object-fit:contain}

/* ========== 15 RESPONSIVE ≤900px ========== */
@media (max-width:900px){
.hero-grid,.band-row,.cards,.clients,.services,.suite,.stories,.stats{grid-template-columns:1fr}
.service-lead{grid-column:auto;grid-row:auto}
.trust,.trust-main{flex-direction:column;align-items:flex-start}
.trust-brand{flex:none;width:100%;border-right:0;border-bottom:1px solid var(--line)}
.badges{flex-wrap:wrap;justify-content:flex-start}
.logo-grid{grid-template-columns:repeat(3,1fr)}
.cta{flex-direction:column;align-items:flex-start}
}