/* =============================================================
   pages.css — BDSD Technology
   All custom CSS for redesigned pages & components.
   Loaded globally via layout.php.
   -------------------------------------------------------------
   Sections:
     1. Design tokens (shared CSS variables)
     2. Header & top bar        (.hdr-*)
     3. Mini query popup        (.mq-*)
     4. Contact Us page         (.cu-*)
     5. Website Development     (.wd-*)
     6. Services page           (.sv-*)
     7. Blog pagination         (.blp-pager-*)
     8. Blog details hero       (.bpd-hero-bg, .bpd-orb*, .bpd-hero-desc)
   ============================================================= */

/* ── 1. Shared design tokens ─────────────────────────── */
:root {
    --bdsd-primary:    #1d4ed8;
    --bdsd-primary-lt: #2563eb;
    --bdsd-accent:     #ea580c;
    --bdsd-accent-lt:  #f97316;
    --bdsd-dark:       #0f172a;
    --bdsd-body:       #374151;
    --bdsd-muted:      #6b7280;
    --bdsd-border:     #e5e7eb;
    --bdsd-soft:       #f8fafc;
    --bdsd-gm:         linear-gradient(135deg,#1d4ed8,#2563eb);
    --bdsd-ga:         linear-gradient(135deg,#ea580c,#f97316);
}

/* ── 2. Header & top bar ──────────────────────────── */
/* ── Top bar ──────────────────────────────────────────── */
.hdr-top { background:#0f172a; padding:7px 0; font-size:12px; }
.hdr-top-inner { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.hdr-top-left { display:flex;align-items:center;gap:18px; }
.hdr-top-link { color:rgba(255,255,255,.75);text-decoration:none;display:flex;align-items:center;gap:6px;font-size:11.5px;transition:color .18s; }
.hdr-top-link:hover { color:#fff; }
.hdr-top-link i { color:#60a5fa;font-size:10px; }
.hdr-top-link-md { display:none; }
@media(min-width:768px){ .hdr-top-link-md{display:flex;} }
.hdr-top-right { display:flex;align-items:center;gap:5px; }
.hdr-top-follow { color:rgba(255,255,255,.4);font-size:10.5px;margin-right:4px; }
.hdr-top-si { width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;font-size:10px;text-decoration:none;transition:all .18s; }
.hdr-top-si:hover { background:#1d4ed8;border-color:#1d4ed8;color:#fff; }
.hdr-top-wa:hover { background:#16a34a;border-color:#16a34a; }

/* ── Main nav ─────────────────────────────────────────── */
.hdr { background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:1000;transition:box-shadow .3s; }
.hdr.scrolled { box-shadow:0 4px 24px rgba(0,0,0,.09); }
.hdr-inner { display:flex;align-items:center;gap:24px;height:68px; }
.hdr-logo { flex-shrink:0;display:flex;align-items:center;text-decoration:none; }
.hdr-logo img { height:40px;width:auto; }

/* Desktop nav */
.hdr-nav { flex:1;display:none; }
@media(min-width:1100px){ .hdr-nav{display:flex;} }
.hdr-menu { list-style:none;margin:0;padding:0;display:flex;align-items:center;height:68px; }
.hdr-item { position:relative; }
.hdr-link { display:flex;align-items:center;gap:4px;padding:0 13px;height:68px;color:#374151;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;position:relative;transition:color .2s; }
.hdr-link::after { content:'';position:absolute;bottom:0;left:13px;right:13px;height:2.5px;background:#1d4ed8;border-radius:2px 2px 0 0;transform:scaleX(0);transition:transform .22s; }
.hdr-item:hover > .hdr-link { color:#1d4ed8; }
.hdr-item:hover > .hdr-link::after { transform:scaleX(1); }
.hdr-chevron { font-size:9px;transition:transform .22s; }
.hdr-item:hover .hdr-chevron { transform:rotate(180deg); }

/* Simple dropdown */
.hdr-drop { position:absolute;top:calc(100% + 1px);left:0;min-width:240px;background:#fff;border:1px solid #e5e7eb;border-top:2px solid #1d4ed8;border-radius:0 0 12px 12px;padding:6px 0;list-style:none;margin:0;box-shadow:0 12px 40px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s;z-index:200; }
.hdr-item:hover .hdr-drop { opacity:1;visibility:visible;transform:translateY(0); }
.hdr-drop li a { display:flex;align-items:center;gap:9px;padding:9px 18px;color:#374151;font-size:13px;text-decoration:none;transition:background .15s,color .15s; }
.hdr-drop li a i { color:#1d4ed8;font-size:11px;width:14px;flex-shrink:0; }
.hdr-drop li a:hover { background:#f0f7ff;color:#1d4ed8; }
.hdr-drop-all { font-weight:700;color:#1d4ed8 !important;border-top:1px solid #f1f5f9;margin-top:4px;padding-top:10px !important; }

/* Mega menu */
.hdr-item.hdr-has-mega { position:static; }
.hdr-mega { position:absolute;top:calc(100% + 1px);left:0;right:0;background:#fff;border-top:2px solid #1d4ed8;box-shadow:0 20px 60px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .22s,transform .22s,visibility .22s;z-index:200; }
.hdr-item.hdr-has-mega:hover .hdr-mega { opacity:1;visibility:visible;transform:translateY(0); }
.hdr-mega-inner { display:flex;max-height:calc(100vh - 120px); }

/* Tab sidebar */
.hdr-mega-tabs { flex-shrink:0;width:190px;background:#f8fafc;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;padding:1rem 0; }
.hdr-tab { display:flex;align-items:center;gap:.65rem;padding:.7rem 1.1rem;border:none;background:none;font-size:13px;font-weight:600;color:#6b7280;cursor:pointer;text-align:left;transition:background .18s,color .18s;border-left:3px solid transparent; }
.hdr-tab:hover { background:#eff6ff;color:#1d4ed8; }
.hdr-tab.hdr-tab-active { color:#1d4ed8;background:#fff;border-left-color:#1d4ed8; }
.hdr-tab i { font-size:14px;width:18px;flex-shrink:0; }

/* Tab content */
.hdr-mega-content { flex:1;overflow:hidden; }
.hdr-tab-panel { display:none;padding:1.5rem 1.8rem; }
.hdr-tab-panel.hdr-tab-active { display:block; }
.hdr-mega-cols { display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; }
.hdr-mega-col h4 { font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#9ca3af;margin:0 0 .65rem;padding-bottom:.5rem;border-bottom:1px solid #f1f5f9; }
.hdr-mega-col ul { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2rem; }
.hdr-mega-col ul a { font-size:12.5px;color:#374151;text-decoration:none;padding:.28rem .5rem;border-radius:6px;display:block;transition:background .15s,color .15s; }
.hdr-mega-col ul a:hover { background:#eff6ff;color:#1d4ed8; }

/* Mega footer */
.hdr-mega-footer { border-top:1px solid #f1f5f9;padding:.75rem 1.8rem; }
.hdr-mega-footer-inner { display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap; }
.hdr-mf-label { font-size:11.5px;font-weight:700;color:#9ca3af; }
.hdr-mf-link { display:inline-flex;align-items:center;gap:.45rem;font-size:12px;color:#374151;text-decoration:none;font-weight:600;transition:color .15s; }
.hdr-mf-link i { color:#1d4ed8;font-size:11px; }
.hdr-mf-link:hover { color:#1d4ed8; }
.hdr-mf-chat { display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .9rem;background:#1d4ed8;color:#fff;border-radius:999px;font-size:12px;font-weight:700;text-decoration:none;transition:opacity .18s;margin-left:auto; }
.hdr-mf-chat:hover { opacity:.88;color:#fff; }

/* ── Header actions ───────────────────────────────────── */
.hdr-actions { display:flex;align-items:center;gap:.65rem;margin-left:auto; }
.hdr-phone-link { display:none;align-items:center;gap:.45rem;color:#374151;text-decoration:none;font-size:13px;font-weight:600;padding:.45rem .8rem;border:1.5px solid #e5e7eb;border-radius:999px;transition:border-color .18s,color .18s; }
.hdr-phone-link:hover { border-color:#1d4ed8;color:#1d4ed8; }
@media(min-width:1280px){ .hdr-phone-link{display:flex;} }
.hdr-phone-link i { color:#1d4ed8;font-size:11px; }
.hdr-cta { background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;border:none;padding:.55rem 1.2rem;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .18s,transform .15s;box-shadow:0 4px 14px rgba(29,78,216,.3);display:none; }
@media(min-width:768px){ .hdr-cta{display:block;} }
.hdr-cta:hover { opacity:.9;transform:translateY(-1px); }
.hdr-burger { display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;border-radius:8px; }
@media(min-width:1100px){ .hdr-burger{display:none;} }
.hdr-burger span { width:22px;height:2px;background:#374151;border-radius:2px;transition:all .28s; }
.hdr-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hdr-burger.open span:nth-child(2){ opacity:0; }
.hdr-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ────────────────────────────────────── */
.hdr-overlay { position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1100;opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s; }
.hdr-overlay.open { opacity:1;visibility:visible; }
.hdr-drawer { position:fixed;top:0;right:0;bottom:0;width:min(320px,90vw);background:#fff;z-index:1200;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);overflow-y:auto; }
.hdr-drawer.open { transform:translateX(0); }

.hdr-drawer-head { display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid #f1f5f9;flex-shrink:0; }
.hdr-drawer-head img { height:34px; }
.hdr-drawer-close { background:none;border:none;cursor:pointer;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#6b7280;font-size:1.1rem;transition:background .18s; }
.hdr-drawer-close:hover { background:#f1f5f9; }

.hdr-drawer-nav { flex:1;padding:.5rem 0; }
.hdr-dm-link { display:block;padding:.75rem 1.3rem;color:#374151;font-size:.9rem;font-weight:600;text-decoration:none;border-bottom:1px solid #f8fafc;transition:color .15s,background .15s; }
.hdr-dm-link:hover { color:#1d4ed8;background:#f0f7ff; }
.hdr-dm-group { border-bottom:1px solid #f1f5f9; }
.hdr-dm-group summary { list-style:none; }
.hdr-dm-group summary::-webkit-details-marker { display:none; }
.hdr-dm-summary { display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.3rem;color:#374151;font-size:.9rem;font-weight:600;cursor:pointer;user-select:none; }
.hdr-dm-summary i { font-size:.65rem;transition:transform .22s; }
.hdr-dm-group[open] .hdr-dm-summary i { transform:rotate(180deg); }
.hdr-dm-sub { padding:.25rem 0 .75rem; }
.hdr-dm-sub a { display:block;padding:.5rem 1.3rem .5rem 2rem;color:#6b7280;font-size:.83rem;text-decoration:none;transition:color .15s; }
.hdr-dm-sub a:hover { color:#1d4ed8; }
.hdr-dm-cat { display:block;padding:.45rem 1.3rem .25rem;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:#9ca3af; }

.hdr-drawer-foot { padding:1rem 1.2rem;border-top:1px solid #f1f5f9;flex-shrink:0;display:flex;flex-direction:column;gap:.65rem; }
.hdr-df-link { display:flex;align-items:center;gap:.5rem;color:#374151;font-size:.83rem;font-weight:600;text-decoration:none; }
.hdr-df-link i { color:#1d4ed8;font-size:.8rem; }
.hdr-df-cta { width:100%;padding:.7rem;background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;border:none;border-radius:999px;font-weight:700;font-size:.9rem;cursor:pointer; }

/* ── 3. Mini query popup ─────────────────────────── */
.mq-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(8,12,28,.65); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.mq-overlay.mq-hidden { display: none !important; }
.mq-overlay.mq-in { animation: mqFadeIn .28s ease forwards; }
@keyframes mqFadeIn { from { opacity:0 } to { opacity:1 } }

.mq-card {
    background: #fff; border-radius: 14px;
    width: 100%; max-width: 390px;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    animation: mqUp .35s cubic-bezier(.22,.68,0,1.18);
    scrollbar-width: thin;
}
@keyframes mqUp {
    from { transform: translateY(30px) scale(.96); opacity:0 }
    to   { transform: translateY(0) scale(1); opacity:1 }
}

/* Banner */
.mq-banner {
    position: relative;
    background: linear-gradient(135deg,#e55a1c,#f97316 55%,#ea580c);
    padding: .95rem 1.1rem .85rem; border-radius: 14px 14px 0 0;
}
.mq-close {
    position: absolute; top: 7px; right: 10px;
    width: 24px; height: 24px; line-height: 24px; text-align: center;
    background: rgba(0,0,0,.22); border: none; border-radius: 50%;
    color: #fff; font-size: .95rem; cursor: pointer; padding: 0;
    transition: background .15s;
}
.mq-close:hover { background: rgba(0,0,0,.42); }
.mq-banner-inner { display: flex; align-items: center; gap: .75rem; }
.mq-off-badge {
    flex-shrink: 0; background: #fff; color: #e55a1c;
    font-size: 1rem; font-weight: 900; padding: .38rem .65rem;
    border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.14);
}
.mq-banner-copy { color: #fff; font-size: .82rem; line-height: 1.4; }
.mq-banner-copy strong { display: block; font-size: .9rem; font-weight: 800; }

/* Body */
.mq-body { padding: .85rem 1.1rem 1.1rem; }
.mq-urgency { font-size: .78rem; font-weight: 700; color: #e55a1c; margin: 0 0 .35rem; }
.mq-heading { font-size: 1.05rem; font-weight: 800; color: #111827; line-height: 1.25; margin: 0 0 .35rem; }
.mq-heading span { color: #e55a1c; }
.mq-sub { font-size: .78rem; color: #4b5563; margin: 0 0 .7rem; line-height: 1.5; }

/* Timer */
.mq-timer-box {
    background: #fff8f0; border: 1.5px dashed #f97316;
    border-radius: 7px; padding: .42rem .8rem;
    font-size: .78rem; color: #374151;
    text-align: center; margin-bottom: .75rem;
}
.mq-time { color: #dc2626; font-weight: 800; font-size: .88rem; }

/* Fields */
.mq-field { margin-bottom: .48rem; }
.mq-field-el,
.mq-field input,
.mq-field textarea,
.mq-select {
    width: 100%; padding: .6rem .8rem;
    background: #f1f5f9; border: 1.5px solid #e2e8f0; border-radius: 9px;
    font-size: .82rem; color: #1f2937; outline: none;
    font-family: inherit; resize: none; appearance: none; -webkit-appearance: none;
    transition: border-color .18s, box-shadow .18s;
}
.mq-field input::placeholder,
.mq-field textarea::placeholder { color: #9ca3af; }
.mq-field input:focus,
.mq-field textarea:focus,
.mq-select:focus {
    border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); background: #fff;
}
.mq-field input.mq-invalid,
.mq-field textarea.mq-invalid { border-color: #ef4444; background: #fef2f2; }
.mq-err { display: block; font-size: .71rem; color: #ef4444; margin-top: .12rem; min-height: .8rem; }

/* Phone row */
.mq-phone-row { display: flex; gap: .4rem; margin-bottom: .12rem; }
.mq-country {
    flex: 0 0 118px; padding: .6rem .4rem .6rem .6rem;
    background: #f1f5f9; border: 1.5px solid #e2e8f0; border-radius: 9px;
    font-size: .78rem; color: #1f2937; outline: none; cursor: pointer;
    font-family: inherit; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 5px center; padding-right: 18px;
    transition: border-color .18s, box-shadow .18s;
}
.mq-country:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); background-color: #fff; }
.mq-country.mq-invalid { border-color: #ef4444; background-color: #fef2f2; }
.mq-phone-row input[type="tel"] {
    flex: 1; padding: .6rem .8rem;
    background: #f1f5f9; border: 1.5px solid #e2e8f0; border-radius: 9px;
    font-size: .82rem; color: #1f2937; outline: none; font-family: inherit;
    transition: border-color .18s, box-shadow .18s;
}
.mq-phone-row input[type="tel"]::placeholder { color: #9ca3af; }
.mq-phone-row input[type="tel"]:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); background: #fff; }
.mq-phone-row input[type="tel"].mq-invalid { border-color: #ef4444; background: #fef2f2; }

/* Service select */
.mq-select {
    cursor: pointer; color: #4b5563;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px;
}
.mq-select option { color: #1f2937; }

/* Submit */
.mq-submit {
    width: 100%; padding: .75rem;
    background: linear-gradient(135deg,#1e3a8a,#1d4ed8 50%,#0284c7);
    color: #fff; border: none; border-radius: 9px;
    font-size: .9rem; font-weight: 800; cursor: pointer; margin-top: .25rem;
    transition: opacity .18s, transform .15s; letter-spacing: .01em;
}
.mq-submit:hover { opacity: .92; transform: translateY(-1px); }
.mq-submit:active { transform: translateY(0); }

.mq-trust {
    text-align: center; font-size: .7rem; color: #9ca3af;
    margin: .5rem 0 0; display: flex; align-items: center; justify-content: center; gap: .25rem;
}

/* Success */
.mq-success { text-align: center; padding: 1.2rem 0 .2rem; }
.mq-success-icon { font-size: 2.4rem; margin-bottom: .5rem; }
.mq-success h3 { font-size: 1.05rem; font-weight: 800; color: #111827; margin: 0 0 .35rem; }
.mq-success p  { font-size: .8rem; color: #6b7280; margin: 0 0 1rem; line-height: 1.6; }
.mq-close-btn {
    padding: .48rem 1.8rem; background: #1d4ed8; color: #fff;
    border: none; border-radius: 7px; font-weight: 700; cursor: pointer; font-size: .82rem;
}

@media (max-width: 420px) {
    .mq-card { border-radius: 12px; max-height: 100vh; }
    .mq-banner { border-radius: 12px 12px 0 0; padding: .8rem .9rem .75rem; }
    .mq-body { padding: .75rem .9rem .9rem; }
    .mq-country { flex: 0 0 100px; }
}

/* ── 4. Contact Us page ──────────────────────────── */
/* ── Hero ────────────────────────────────────────────────── */
.cu-hero {
    position: relative;
    background: #0f172a;
    padding: 5.5rem 0 4rem;
    overflow: hidden;
}
.cu-hero-bg { position: absolute; inset: 0; }
.cu-orb {
    position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: .4;
}
.cu-orb1 { width: 500px; height: 500px; background: radial-gradient(circle, #6366f1, transparent); top: -150px; left: -80px; animation: cuOrb 14s ease-in-out infinite alternate; }
.cu-orb2 { width: 380px; height: 380px; background: radial-gradient(circle, #3b82f6, transparent); top: 30%; right: -60px; animation: cuOrb 11s ease-in-out infinite alternate-reverse; }
.cu-orb3 { width: 260px; height: 260px; background: radial-gradient(circle, #f97316, transparent); bottom: -60px; left: 40%; opacity: .25; animation: cuOrb 16s ease-in-out infinite alternate; }
.cu-dots {
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 26px 26px;
}
@keyframes cuOrb { from { transform: translate(0,0) scale(1); } to { transform: translate(30px,-25px) scale(1.15); } }

.cu-hero-inner { position: relative; z-index: 2; }
.cu-breadcrumb {
    display: flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.55);
    margin-bottom: 1.4rem;
}
.cu-breadcrumb a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .18s; }
.cu-breadcrumb a:hover { color: #fff; }
.cu-breadcrumb i { font-size: .6rem; color: rgba(255,255,255,.3); }

.cu-hero-title {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 900; color: #fff; line-height: 1.18;
    margin: 0 0 1rem; max-width: 680px;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.cu-hero-title span {
    background: linear-gradient(90deg, #60a5fa, #818cf8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.cu-hero-sub {
    font-size: clamp(.95rem, 1.5vw, 1.1rem);
    color: rgba(255,255,255,.7); margin: 0 0 2rem; max-width: 520px; line-height: 1.65;
}

/* Quick chips */
.cu-hero-chips { display: flex; flex-wrap: wrap; gap: .65rem; }
.cu-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1.1rem; border-radius: 999px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
    color: #fff; font-size: .84rem; font-weight: 600;
    text-decoration: none; backdrop-filter: blur(8px);
    transition: background .18s, border-color .18s;
}
.cu-chip:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color: #fff; }
.cu-chip i { font-size: .85rem; }
.cu-chip-wa { background: rgba(37,211,102,.15); border-color: rgba(37,211,102,.35); }
.cu-chip-wa:hover { background: rgba(37,211,102,.25); }

/* ── Main section ────────────────────────────────────────── */
.cu-main { padding: 5rem 0; background: #f8fafc; }

/* Contact cards */
.cu-cards { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2.5rem; }
.cu-card {
    display: flex; align-items: center; gap: 1rem;
    background: #fff; border: 1.5px solid #e5e7eb; border-radius: 14px;
    padding: 1rem 1.1rem; text-decoration: none; color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cu-card:hover {
    border-color: #1d4ed8; box-shadow: 0 6px 24px rgba(29,78,216,.1);
    transform: translateX(4px); color: inherit;
}
.cu-card-addr { cursor: default; }
.cu-card-addr:hover { transform: none; border-color: #e5e7eb; box-shadow: none; }

.cu-card-icon {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
}
.cu-icon-blue   { background: rgba(29,78,216,.1);  color: #1d4ed8; }
.cu-icon-indigo { background: rgba(99,102,241,.1); color: #6366f1; }
.cu-icon-teal   { background: rgba(20,184,166,.1); color: #0d9488; }
.cu-icon-green  { background: rgba(22,163,74,.1);  color: #16a34a; }
.cu-icon-orange { background: rgba(234,88,12,.1);  color: #ea580c; }

.cu-card-body { flex: 1; min-width: 0; }
.cu-card-label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin-bottom: .18rem; }
.cu-card-val   { display: block; font-size: .9rem; font-weight: 700; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-card-sub   { display: block; font-size: .75rem; color: #6b7280; margin-top: .12rem; }
.cu-card-arrow { color: #d1d5db; font-size: .8rem; flex-shrink: 0; transition: color .2s, transform .2s; }
.cu-card:hover .cu-card-arrow { color: #1d4ed8; transform: translateX(3px); }

/* Steps */
.cu-steps { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 16px; padding: 1.5rem; margin-bottom: 2rem; }
.cu-steps-title { font-size: 1rem; font-weight: 800; color: #111827; margin: 0 0 1.2rem; }
.cu-step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.cu-step { display: flex; gap: 1rem; align-items: flex-start; }
.cu-step-num {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff; font-size: .8rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.cu-step-body strong { display: block; font-size: .9rem; font-weight: 700; color: #111827; margin-bottom: .2rem; }
.cu-step-body p { font-size: .82rem; color: #6b7280; margin: 0; line-height: 1.55; }

/* Social */
.cu-social { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cu-social-label { font-size: .78rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .06em; }
.cu-social-icons { display: flex; gap: .5rem; }
.cu-si {
    width: 36px; height: 36px; border-radius: 50%;
    background: #fff; border: 1.5px solid #e5e7eb;
    color: #374151; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all .18s;
}
.cu-si:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; transform: translateY(-2px); }
.cu-si-wa:hover { background: #16a34a; border-color: #16a34a; }

/* ── Form card ───────────────────────────────────────────── */
.cu-form-card {
    background: #fff; border-radius: 20px;
    border: 1.5px solid #e5e7eb;
    box-shadow: 0 12px 48px rgba(0,0,0,.07);
    padding: 2.2rem;
}
.cu-form-head {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 1rem;
    margin-bottom: 1.8rem;
    padding-bottom: 1.4rem;
    border-bottom: 1.5px solid #f1f5f9;
}
.cu-form-title { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 800; color: #111827; margin: 0 0 .3rem; }
.cu-form-sub   { font-size: .82rem; color: #6b7280; margin: 0; }
.cu-form-badge {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.2);
    color: #16a34a; font-size: .72rem; font-weight: 700;
    padding: .35rem .8rem; border-radius: 999px; white-space: nowrap;
}

/* Fields */
.cu-field { display: flex; flex-direction: column; gap: .35rem; }
.cu-field label { font-size: .8rem; font-weight: 700; color: #374151; }
.cu-req { color: #ef4444; }
.cu-input {
    width: 100%; padding: .7rem .9rem;
    background: #f8fafc; border: 1.5px solid #e5e7eb; border-radius: 10px;
    font-size: .875rem; color: #111827; outline: none;
    font-family: inherit; transition: border-color .18s, box-shadow .18s, background .18s;
    appearance: none; -webkit-appearance: none;
}
.cu-input::placeholder { color: #9ca3af; }
.cu-input:focus { border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.1); background: #fff; }
.cu-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 36px; cursor: pointer; color: #374151;
}
.cu-textarea { resize: vertical; min-height: 110px; }

.cu-submit {
    width: 100%; padding: .9rem 1.5rem;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff; border: none; border-radius: 12px;
    font-size: 1rem; font-weight: 800; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    transition: opacity .18s, transform .15s, box-shadow .18s;
    box-shadow: 0 8px 24px rgba(29,78,216,.3);
    letter-spacing: .01em;
}
.cu-submit:hover { opacity: .93; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(29,78,216,.4); }
.cu-submit:active { transform: translateY(0); }

.cu-disclaimer {
    text-align: center; font-size: .75rem; color: #9ca3af;
    margin: .75rem 0 0; display: flex; align-items: center;
    justify-content: center; gap: .3rem;
}
.cu-disclaimer i { color: #16a34a; }

/* Trust row */
.cu-trust-row {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-top: 1.2rem;
}
.cu-trust-item {
    flex: 1; min-width: 120px;
    display: flex; align-items: center; gap: .5rem;
    background: #fff; border: 1.5px solid #e5e7eb; border-radius: 10px;
    padding: .65rem .9rem; font-size: .8rem; color: #374151;
}
.cu-trust-item i { color: #1d4ed8; font-size: .85rem; flex-shrink: 0; }
.cu-trust-item strong { color: #111827; }

/* ── Benefits strip ──────────────────────────────────────── */
.cu-benefits {
    background: #fff; border-top: 1.5px solid #e5e7eb;
    padding: 2rem 0;
}
.cu-benefits-inner {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; gap: 0;
}
.cu-benefit {
    display: flex; align-items: center; gap: .55rem;
    padding: .75rem 1.5rem; font-size: .875rem; color: #374151;
}
.cu-benefit i { color: #1d4ed8; font-size: 1rem; }
.cu-sep { width: 1px; height: 28px; background: #e5e7eb; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
    .cu-hero { padding: 4rem 0 3rem; }
    .cu-main  { padding: 3.5rem 0; }
    .cu-form-card { padding: 1.5rem; }
    .cu-form-head { flex-direction: column; gap: .6rem; }
    .cu-benefits-inner { gap: .5rem; }
    .cu-sep { display: none; }
}
@media (max-width: 575px) {
    .cu-hero { padding: 3rem 0 2.5rem; }
    .cu-hero-chips { flex-direction: column; }
    .cu-chip { justify-content: center; }
    .cu-form-card { padding: 1.2rem; border-radius: 14px; }
    .cu-trust-item { min-width: 100%; }
    .cu-benefit { padding: .5rem 1rem; }
}

/* ── 5. Website Development page ─────────────────── */
/* ── Design tokens ─────────────────────────────────────── */
:root {
    --wd-p:      #1d4ed8;
    --wd-p-lt:   #2563eb;
    --wd-a:      #ea580c;
    --wd-dark:   #0f172a;
    --wd-body:   #374151;
    --wd-muted:  #6b7280;
    --wd-border: #e5e7eb;
    --wd-soft:   #f0f5ff;
    --wd-gm:     linear-gradient(135deg,#1d4ed8,#2563eb);
    --wd-ga:     linear-gradient(135deg,#ea580c,#f97316);
}

/* ── Hero ──────────────────────────────────────────────── */
.wd-hero {
    position: relative; background: var(--wd-dark);
    padding: 5.5rem 0 4.5rem; overflow: hidden;
}
.wd-hero-bg { position: absolute; inset: 0; }
.wd-orb {
    position: absolute; border-radius: 50%;
    filter: blur(90px); opacity: .38;
}
.wd-orb1 { width: 520px; height: 520px; background: radial-gradient(circle,#6366f1,transparent); top: -160px; left: -80px; animation: wdOrb 14s ease-in-out infinite alternate; }
.wd-orb2 { width: 380px; height: 380px; background: radial-gradient(circle,#3b82f6,transparent); top: 30%; right: -60px; animation: wdOrb 10s ease-in-out infinite alternate-reverse; }
.wd-orb3 { width: 240px; height: 240px; background: radial-gradient(circle,#ea580c,transparent); bottom: -60px; left: 42%; opacity: .22; animation: wdOrb 17s ease-in-out infinite alternate; }
.wd-dots { position: absolute; inset: 0; background-image: radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px); background-size: 26px 26px; }
@keyframes wdOrb { from { transform:translate(0,0) scale(1); } to { transform:translate(28px,-22px) scale(1.14); } }
.wd-hero-inner { position: relative; z-index: 2; }

.wd-breadcrumb {
    display: flex; align-items: center; gap: .4rem;
    font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.5);
    margin-bottom: 1.5rem;
}
.wd-breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .18s; }
.wd-breadcrumb a:hover { color: #fff; }
.wd-breadcrumb i { font-size: .58rem; color: rgba(255,255,255,.28); }

.wd-kicker {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.8); font-size: .78rem; font-weight: 700;
    padding: .4rem 1rem; border-radius: 999px; margin-bottom: 1.1rem;
    letter-spacing: .03em; backdrop-filter: blur(8px);
}
.wd-kicker i { color: #60a5fa; }
.wd-kicker-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); }

.wd-hero-title {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 900; color: #fff; line-height: 1.18;
    margin: 0 0 1.1rem; max-width: 640px;
}
.wd-hero-title span {
    background: linear-gradient(90deg,#60a5fa,#818cf8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.wd-hero-lead {
    font-size: clamp(.95rem, 1.4vw, 1.05rem); color: rgba(255,255,255,.68);
    line-height: 1.7; margin: 0 0 1.8rem; max-width: 560px;
}
.wd-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.6rem; }
.wd-btn-primary {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .75rem 1.5rem; border-radius: 999px;
    background: var(--wd-gm); color: #fff; font-weight: 700; font-size: .9rem;
    text-decoration: none; border: none; cursor: pointer;
    box-shadow: 0 6px 20px rgba(29,78,216,.35);
    transition: opacity .18s, transform .15s, box-shadow .18s;
}
.wd-btn-primary:hover { opacity: .92; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(29,78,216,.45); color: #fff; }
.wd-btn-outline {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .73rem 1.4rem; border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.3); color: #fff;
    font-weight: 600; font-size: .9rem; text-decoration: none;
    backdrop-filter: blur(8px); background: rgba(255,255,255,.06);
    transition: background .18s, border-color .18s;
}
.wd-btn-outline:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.55); color: #fff; }
.wd-trust-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.wd-pill {
    display: inline-flex; align-items: center; gap: .38rem;
    font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.65);
}
.wd-pill i { color: #4ade80; font-size: .7rem; }

/* Hero card */
.wd-hero-card {
    background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 20px; padding: 1.8rem; backdrop-filter: blur(12px);
}
.wd-hero-card-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; }
.wd-hc-icon {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
    background: rgba(96,165,250,.15); color: #60a5fa;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.wd-hc-title { font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 .3rem; }
.wd-hc-sub   { font-size: .82rem; color: rgba(255,255,255,.6); margin: 0; line-height: 1.5; }
.wd-check-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.wd-check-list li { display: flex; align-items: flex-start; gap: .65rem; font-size: .86rem; color: rgba(255,255,255,.78); }
.wd-check-list li i { color: #4ade80; font-size: .8rem; margin-top: .18rem; flex-shrink: 0; }
.wd-hero-stats {
    display: flex; align-items: center; gap: 0;
    background: rgba(255,255,255,.06); border-radius: 12px;
    padding: .9rem 1rem; border: 1px solid rgba(255,255,255,.08);
}
.wd-stat { flex: 1; text-align: center; }
.wd-stat strong { display: block; font-size: 1.25rem; font-weight: 900; color: #fff; }
.wd-stat span   { font-size: .72rem; color: rgba(255,255,255,.5); font-weight: 600; }
.wd-stat-sep    { width: 1px; height: 36px; background: rgba(255,255,255,.12); }

/* ── Section base ──────────────────────────────────────── */
.wd-section { padding: 5rem 0; }
.wd-bg-white { background: #fff; }
.wd-bg-soft  { background: #f8fafc; }
.wd-bg-dark  { background: var(--wd-dark); }

.wd-section-head { text-align: center; max-width: 820px; margin: 0 auto 3.5rem; }
.wd-head-light { }
.wd-label {
    display: inline-block; font-size: .7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .12em; color: var(--wd-p);
    margin-bottom: .7rem;
}
.wd-label-light { color: rgba(255,255,255,.55); }
.wd-section-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; color: #111827;
    line-height: 1.2; margin: 0 0 .9rem;
}
.wd-section-title.wd-left { text-align: left; }
.wd-section-sub { font-size: .95rem; color: var(--wd-muted); margin: 0; line-height: 1.7; }
.wd-body-text   { font-size: .95rem; color: var(--wd-body); line-height: 1.75; margin: 0 0 1.8rem; }

/* ── Capability cards ──────────────────────────────────── */
.wd-cap-card {
    background: #fff; border: 1.5px solid var(--wd-border); border-radius: 16px;
    padding: 1.6rem; height: 100%;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.wd-cap-card:hover { border-color: var(--wd-p); box-shadow: 0 8px 28px rgba(29,78,216,.1); transform: translateY(-5px); }
.wd-cap-icon {
    width: 50px; height: 50px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; margin-bottom: 1rem;
    transition: transform .2s;
}
.wd-cap-card:hover .wd-cap-icon { transform: scale(1.1) rotate(-5deg); }
.wd-icon-blue { background: rgba(29,78,216,.1);  color: var(--wd-p); }
.wd-icon-acc  { background: rgba(234,88,12,.1);  color: var(--wd-a); }
.wd-cap-title { font-size: .95rem; font-weight: 800; color: #111827; margin: 0 0 .45rem; }
.wd-cap-desc  { font-size: .82rem; color: var(--wd-muted); margin: 0; line-height: 1.6; }

/* ── Why us feature list ───────────────────────────────── */
.wd-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.wd-feature-list li { display: flex; align-items: flex-start; gap: .9rem; }
.wd-feature-list li i { color: #16a34a; font-size: 1rem; margin-top: .18rem; flex-shrink: 0; }
.wd-feature-list li strong { display: block; font-size: .9rem; font-weight: 700; color: #111827; margin-bottom: .2rem; }
.wd-feature-list li p { font-size: .82rem; color: var(--wd-muted); margin: 0; line-height: 1.55; }

.wd-why-card {
    background: #fff; border: 1.5px solid var(--wd-border); border-radius: 14px;
    padding: 1.4rem; height: 100%;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.wd-why-card:hover { border-color: var(--wd-p); box-shadow: 0 8px 24px rgba(29,78,216,.1); transform: translateY(-4px); }
.wd-why-icon { font-size: 1.6rem; color: var(--wd-p); margin-bottom: .75rem; display: block; transition: transform .2s; }
.wd-why-card:hover .wd-why-icon { transform: scale(1.15) rotate(-5deg); }
.wd-why-title { font-size: .92rem; font-weight: 800; color: #111827; margin: 0 0 .4rem; }
.wd-why-desc  { font-size: .8rem; color: var(--wd-muted); margin: 0; line-height: 1.6; }

/* ── Process steps ─────────────────────────────────────── */
.wd-step-card {
    background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 16px; padding: 1.6rem; height: 100%;
    transition: background .2s, border-color .2s, transform .2s;
}
.wd-step-card:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.22); transform: translateY(-5px); }
.wd-step-active { background: rgba(29,78,216,.18); border-color: rgba(29,78,216,.4); }
.wd-step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.wd-step-num {
    font-size: 2rem; font-weight: 900; color: rgba(255,255,255,.15);
    font-family: inherit; line-height: 1;
}
.wd-step-active .wd-step-num { color: #60a5fa; }
.wd-step-icon { font-size: 1.4rem; color: rgba(255,255,255,.4); }
.wd-step-active .wd-step-icon { color: #60a5fa; }
.wd-step-title { font-size: 1.05rem; font-weight: 800; color: #fff; margin: 0 0 .55rem; }
.wd-step-desc  { font-size: .82rem; color: rgba(255,255,255,.58); margin: 0; line-height: 1.65; }

/* ── Project tier cards ────────────────────────────────── */
.wd-tier-card {
    background: #fff; border: 1.5px solid var(--wd-border); border-radius: 18px;
    padding: 2rem; height: 100%; position: relative; overflow: hidden;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.wd-tier-card:hover { border-color: var(--wd-p); box-shadow: 0 12px 36px rgba(29,78,216,.1); transform: translateY(-6px); }
.wd-tier-featured {
    border-color: var(--wd-p);
    background: linear-gradient(180deg,#eff6ff 0%,#fff 60%);
    box-shadow: 0 8px 32px rgba(29,78,216,.14);
}
.wd-tier-badge {
    display: inline-block; font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--wd-p); background: rgba(29,78,216,.1);
    padding: .3rem .8rem; border-radius: 999px; margin-bottom: 1rem;
    border: 1px solid rgba(29,78,216,.2);
}
.wd-tier-badge-feat { background: var(--wd-gm); color: #fff; border-color: transparent; }
.wd-tier-title { font-size: 1.15rem; font-weight: 800; color: #111827; margin: 0 0 .75rem; line-height: 1.25; }
.wd-tier-desc  { font-size: .86rem; color: var(--wd-muted); margin: 0 0 1.2rem; line-height: 1.65; }
.wd-tier-list  { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.wd-tier-list li {
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .83rem; color: var(--wd-body);
}
.wd-tier-list li::before { content: '✓'; font-weight: 800; color: #16a34a; flex-shrink: 0; }
.wd-tier-cta {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .85rem; font-weight: 700; color: var(--wd-p);
    text-decoration: none; transition: gap .18s, color .18s;
}
.wd-tier-cta:hover { gap: .7rem; color: var(--wd-p-lt); }
.wd-tier-featured .wd-tier-cta {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--wd-gm); color: #fff; padding: .65rem 1.3rem;
    border-radius: 999px; box-shadow: 0 4px 14px rgba(29,78,216,.3);
    transition: opacity .18s, transform .15s;
}
.wd-tier-featured .wd-tier-cta:hover { opacity: .9; transform: translateY(-1px); color: #fff; }

/* ── Industry cards ────────────────────────────────────── */
.wd-ind-card {
    display: flex; align-items: center; gap: 1rem;
    background: #fff; border: 1.5px solid var(--wd-border); border-radius: 14px;
    padding: 1.1rem 1.2rem; text-decoration: none; color: inherit; height: 100%;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.wd-ind-card:hover { border-color: var(--wd-p); box-shadow: 0 6px 22px rgba(29,78,216,.1); transform: translateX(5px); color: inherit; }
.wd-ind-icon {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
    transition: transform .2s;
}
.wd-ind-card:hover .wd-ind-icon { transform: scale(1.1) rotate(-5deg); }
.wd-ind-body { flex: 1; min-width: 0; }
.wd-ind-title { font-size: .88rem; font-weight: 800; color: #111827; margin: 0 0 .22rem; }
.wd-ind-desc  { font-size: .75rem; color: var(--wd-muted); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wd-ind-arrow { color: #d1d5db; font-size: .78rem; flex-shrink: 0; transition: color .2s, transform .2s; }
.wd-ind-card:hover .wd-ind-arrow { color: var(--wd-p); transform: translateX(3px); }

/* ── CTA ───────────────────────────────────────────────── */
.wd-cta {
    position: relative; background: var(--wd-dark);
    padding: 5rem 0; overflow: hidden;
}
.wd-cta-bg { position: absolute; inset: 0; }
.wd-cta-orb1 { width: 450px; height: 450px; background: radial-gradient(circle,#4f46e5,transparent); top: -150px; left: -80px; }
.wd-cta-orb2 { width: 320px; height: 320px; background: radial-gradient(circle,#ea580c,transparent); bottom: -100px; right: -60px; opacity: .3; }
.wd-cta-inner {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    gap: 3rem; flex-wrap: wrap;
}
.wd-cta-left { flex: 1; min-width: 280px; }
.wd-cta-title { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 900; color: #fff; line-height: 1.2; margin: .7rem 0 .9rem; }
.wd-cta-sub   { font-size: .95rem; color: rgba(255,255,255,.6); margin: 0; line-height: 1.7; max-width: 520px; }
.wd-cta-right { flex-shrink: 0; display: flex; flex-direction: column; gap: .75rem; min-width: 220px; }
.wd-btn-white {
    display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
    padding: .85rem 1.8rem; border-radius: 999px;
    background: #fff; color: var(--wd-p); font-weight: 800; font-size: .92rem;
    text-decoration: none; transition: opacity .18s, transform .15s;
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.wd-btn-white:hover { opacity: .92; transform: translateY(-2px); color: var(--wd-p); }
.wd-btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
    padding: .82rem 1.6rem; border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.28); color: #fff;
    font-weight: 600; font-size: .9rem; text-decoration: none;
    transition: background .18s, border-color .18s;
}
.wd-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: #fff; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 991px) {
    .wd-hero  { padding: 4rem 0 3.5rem; }
    .wd-section { padding: 3.5rem 0; }
    .wd-cta   { padding: 3.5rem 0; }
    .wd-cta-inner { flex-direction: column; text-align: center; }
    .wd-cta-sub   { margin: 0 auto; }
    .wd-cta-right { flex-direction: row; flex-wrap: wrap; justify-content: center; min-width: auto; }
    .wd-section-head { margin-bottom: 2.5rem; }
}
@media (max-width: 575px) {
    .wd-hero-actions { flex-direction: column; }
    .wd-btn-primary, .wd-btn-outline { width: 100%; justify-content: center; }
    .wd-hero-card { padding: 1.2rem; }
    .wd-cta-right { flex-direction: column; }
    .wd-btn-white, .wd-btn-ghost { width: 100%; }
}

/* ── 6. Services page ────────────────────────────── */
/* ── Tokens ───────────────────────────────────────────── */
:root {
    --sv-p:     #1d4ed8; --sv-p-lt: #2563eb;
    --sv-a:     #ea580c; --sv-dark: #0f172a;
    --sv-body:  #374151; --sv-muted: #6b7280;
    --sv-bdr:   #e5e7eb;
    --sv-gm:    linear-gradient(135deg,#1d4ed8,#2563eb);
    --sv-ga:    linear-gradient(135deg,#ea580c,#f97316);
}

/* ── Hero ─────────────────────────────────────────────── */
.sv-hero { position:relative; background:var(--sv-dark); padding:5.5rem 0 4.5rem; overflow:hidden; }
.sv-hero-bg { position:absolute; inset:0; }
.sv-orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.38; }
.sv-orb1 { width:500px;height:500px; background:radial-gradient(circle,#6366f1,transparent); top:-160px;left:-80px; animation:svOrb 14s ease-in-out infinite alternate; }
.sv-orb2 { width:380px;height:380px; background:radial-gradient(circle,#3b82f6,transparent); top:30%;right:-60px; animation:svOrb 10s ease-in-out infinite alternate-reverse; }
.sv-orb3 { width:260px;height:260px; background:radial-gradient(circle,#ea580c,transparent); bottom:-60px;left:40%; opacity:.22; animation:svOrb 18s ease-in-out infinite alternate; }
.sv-dots { position:absolute;inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px); background-size:26px 26px; }
@keyframes svOrb { from{transform:translate(0,0) scale(1)} to{transform:translate(28px,-22px) scale(1.14)} }
.sv-hero-inner { position:relative; z-index:2; }

.sv-breadcrumb { display:flex;align-items:center;gap:.4rem; font-size:.75rem;font-weight:600;color:rgba(255,255,255,.45); margin-bottom:1.5rem; }
.sv-breadcrumb a { color:rgba(255,255,255,.5);text-decoration:none;transition:color .18s; }
.sv-breadcrumb a:hover { color:#fff; }
.sv-breadcrumb i { font-size:.58rem;color:rgba(255,255,255,.25); }

.sv-kicker { display:inline-flex;align-items:center;gap:.4rem; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.8);font-size:.78rem;font-weight:700; padding:.4rem 1rem;border-radius:999px;margin-bottom:1.1rem; backdrop-filter:blur(8px); }
.sv-kicker i { color:#60a5fa; }
.sv-kicker-light { background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2); }

.sv-hero-title { font-size:clamp(1.85rem,4.5vw,2.9rem);font-weight:900;color:#fff;line-height:1.18;margin:0 0 1.1rem;max-width:620px; }
.sv-hero-title span { background:linear-gradient(90deg,#60a5fa,#818cf8); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.sv-hero-lead { font-size:clamp(.92rem,1.4vw,1.04rem);color:rgba(255,255,255,.65);line-height:1.72;margin:0 0 1.8rem;max-width:540px; }

.sv-hero-actions { display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.6rem; }
.sv-btn-primary { display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:999px; background:var(--sv-gm);color:#fff;font-weight:700;font-size:.9rem;text-decoration:none; box-shadow:0 6px 20px rgba(29,78,216,.35);transition:opacity .18s,transform .15s; }
.sv-btn-primary:hover { opacity:.9;transform:translateY(-2px);color:#fff; }
.sv-btn-solid { border-radius:12px !important; }
.sv-btn-outline { display:inline-flex;align-items:center;gap:.5rem;padding:.73rem 1.4rem;border-radius:999px; border:1.5px solid rgba(255,255,255,.28);color:#fff;font-weight:600;font-size:.9rem;text-decoration:none; backdrop-filter:blur(8px);background:rgba(255,255,255,.06);transition:background .18s,border-color .18s; }
.sv-btn-outline:hover { background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff; }

.sv-chips { display:flex;flex-wrap:wrap;gap:.45rem; }
.sv-chip { display:inline-flex;align-items:center;gap:.38rem;padding:.32rem .75rem;border-radius:999px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.6);font-size:.72rem;font-weight:600; }

/* Console widget */
.sv-console { background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);border-radius:20px;overflow:hidden;backdrop-filter:blur(12px); }
.sv-console-bar { display:flex;align-items:center;gap:.75rem;padding:.85rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.08); }
.sv-console-dots { display:flex;gap:.4rem; }
.sv-console-dots span { width:10px;height:10px;border-radius:50%; }
.sv-console-dots span:nth-child(1){ background:#ff5f57; }
.sv-console-dots span:nth-child(2){ background:#febc2e; }
.sv-console-dots span:nth-child(3){ background:#28c840; }
.sv-console-bar small { color:rgba(255,255,255,.4);font-size:.75rem;font-weight:600;margin-left:auto; }
.sv-console-stats { display:flex;align-items:center;padding:1.1rem 1.2rem;gap:0;border-bottom:1px solid rgba(255,255,255,.06); }
.sv-cstat { flex:1;text-align:center; }
.sv-cstat strong { display:block;font-size:1.2rem;font-weight:900;color:#fff; }
.sv-cstat span   { font-size:.68rem;color:rgba(255,255,255,.45);font-weight:600; }
.sv-cstat-sep    { width:1px;height:34px;background:rgba(255,255,255,.1); }
.sv-console-grid { display:grid;grid-template-columns:1fr 1fr;gap:0; }
.sv-mini-card { display:flex;align-items:flex-start;gap:.7rem;padding:1rem 1.1rem; border-right:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06); text-decoration:none;transition:background .18s; }
.sv-mini-card:nth-child(even){ border-right:none; }
.sv-mini-card:nth-child(3),.sv-mini-card:nth-child(4){ border-bottom:none; }
.sv-mini-card:hover { background:rgba(255,255,255,.05); }
.sv-mini-icon { flex-shrink:0;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.9rem; }
.sv-mini-card strong { display:block;font-size:.78rem;font-weight:700;color:#fff;margin-bottom:.2rem;line-height:1.25; }
.sv-mini-card span { font-size:.68rem;color:rgba(255,255,255,.45);line-height:1.45; }

/* ── Section base ─────────────────────────────────────── */
.sv-section { padding:5rem 0; }
.sv-bg-white { background:#fff; }
.sv-bg-soft  { background:#f8fafc; }
.sv-bg-dark  { background:var(--sv-dark); }
.sv-head { text-align:center;max-width:800px;margin:0 auto 3.5rem; }
.sv-head-light { }
.sv-label { display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--sv-p);margin-bottom:.6rem; }
.sv-label-light { color:rgba(255,255,255,.5); }
.sv-section-title { font-size:clamp(1.55rem,3vw,2.35rem);font-weight:900;color:#111827;line-height:1.2;margin:0 0 .85rem; }
.sv-section-title.sv-left { text-align:left; }
.sv-section-sub { font-size:.95rem;color:var(--sv-muted);margin:0;line-height:1.7; }
.sv-section-sub.sv-left { text-align:left; }

/* ── Pillar colours ───────────────────────────────────── */
.sv-blue   { background:rgba(29,78,216,.1);  color:#1d4ed8; }
.sv-indigo { background:rgba(99,102,241,.1); color:#6366f1; }
.sv-teal   { background:rgba(13,148,136,.1); color:#0d9488; }
.sv-purple { background:rgba(124,58,237,.1); color:#7c3aed; }
.sv-orange { background:rgba(234,88,12,.1);  color:#ea580c; }
.sv-green  { background:rgba(22,163,74,.1);  color:#16a34a; }

/* ── Pillar cards ─────────────────────────────────────── */
.sv-pillar-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem; }
.sv-pillar-card { background:#fff;border:1.5px solid var(--sv-bdr);border-radius:16px;padding:1.8rem;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s,transform .2s; }
.sv-pillar-card:hover { border-color:var(--sv-p);box-shadow:0 8px 28px rgba(29,78,216,.1);transform:translateY(-5px);color:inherit; }
.sv-pillar-icon { width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:1.1rem;transition:transform .2s; }
.sv-pillar-card:hover .sv-pillar-icon { transform:scale(1.1) rotate(-5deg); }
.sv-pillar-title { font-size:1rem;font-weight:800;color:#111827;margin:0 0 .5rem; }
.sv-pillar-desc  { font-size:.82rem;color:var(--sv-muted);margin:0 0 1.2rem;line-height:1.65;flex:1; }
.sv-pillar-link  { font-size:.8rem;font-weight:700;color:var(--sv-p);display:inline-flex;align-items:center;gap:.35rem;transition:gap .18s; }
.sv-pillar-card:hover .sv-pillar-link { gap:.6rem; }

/* ── Catalog grid ─────────────────────────────────────── */
.sv-catalog-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem; }
.sv-group-card { background:#f8fafc;border:1.5px solid var(--sv-bdr);border-radius:18px;padding:1.8rem; }
.sv-group-head { display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.4rem; }
.sv-group-icon { flex-shrink:0;width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.1rem; }
.sv-group-title { font-size:1rem;font-weight:800;color:#111827;margin:0 0 .3rem; }
.sv-group-desc  { font-size:.8rem;color:var(--sv-muted);margin:0;line-height:1.55; }
.sv-link-grid { display:flex;flex-wrap:wrap;gap:.45rem; }
.sv-link-pill { display:inline-flex;align-items:center;gap:.38rem;padding:.38rem .85rem;border-radius:999px; background:#fff;border:1.5px solid var(--sv-bdr);color:var(--sv-body); font-size:.78rem;font-weight:600;text-decoration:none;transition:border-color .18s,color .18s,background .18s; }
.sv-link-pill i { font-size:.65rem;color:#9ca3af;transition:color .18s; }
.sv-link-pill:hover { border-color:var(--sv-p);color:var(--sv-p);background:#eff6ff; }
.sv-link-pill:hover i { color:var(--sv-p); }

/* ── Delivery steps ───────────────────────────────────── */
.sv-steps { display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem; }
.sv-step { background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);border-radius:16px;padding:1.6rem;transition:background .2s,transform .2s; }
.sv-step:hover { background:rgba(255,255,255,.09);transform:translateY(-5px); }
.sv-step-active { background:rgba(29,78,216,.2);border-color:rgba(29,78,216,.45); }
.sv-step-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem; }
.sv-step-num  { font-size:2rem;font-weight:900;color:rgba(255,255,255,.12);line-height:1; }
.sv-step-active .sv-step-num { color:#60a5fa; }
.sv-step-icon { font-size:1.3rem;color:rgba(255,255,255,.35); }
.sv-step-active .sv-step-icon { color:#60a5fa; }
.sv-step-title { font-size:1.05rem;font-weight:800;color:#fff;margin:0 0 .55rem; }
.sv-step-desc  { font-size:.82rem;color:rgba(255,255,255,.55);margin:0;line-height:1.65; }

/* ── Explore clusters ─────────────────────────────────── */
.sv-cluster-grid { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
.sv-cluster-card { background:#fff;border:1.5px solid var(--sv-bdr);border-radius:14px;padding:1.4rem;transition:border-color .2s,box-shadow .2s; }
.sv-cluster-card:hover { border-color:var(--sv-p);box-shadow:0 6px 20px rgba(29,78,216,.08); }
.sv-cluster-title { font-size:.9rem;font-weight:800;color:#111827;margin:0 0 .35rem; }
.sv-cluster-desc  { font-size:.75rem;color:var(--sv-muted);margin:0 0 .85rem;line-height:1.55; }
.sv-cluster-links { display:flex;flex-wrap:wrap;gap:.35rem; }
.sv-cluster-link  { font-size:.75rem;font-weight:600;color:var(--sv-p);text-decoration:none;padding:.25rem .6rem;border-radius:6px;background:rgba(29,78,216,.07);border:1px solid rgba(29,78,216,.15);transition:background .15s; }
.sv-cluster-link:hover { background:rgba(29,78,216,.14); }

/* ── CTA ──────────────────────────────────────────────── */
.sv-cta { position:relative;background:var(--sv-dark);padding:5rem 0;overflow:hidden; }
.sv-cta-bg { position:absolute;inset:0; }
.sv-cta-orb1 { width:450px;height:450px;background:radial-gradient(circle,#4f46e5,transparent);top:-150px;left:-80px; }
.sv-cta-orb2 { width:320px;height:320px;background:radial-gradient(circle,#ea580c,transparent);bottom:-100px;right:-60px;opacity:.3; }
.sv-cta-inner { position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:3rem;flex-wrap:wrap; }
.sv-cta-left  { flex:1;min-width:280px; }
.sv-cta-title { font-size:clamp(1.45rem,3vw,2.1rem);font-weight:900;color:#fff;line-height:1.22;margin:.7rem 0 .85rem; }
.sv-cta-sub   { font-size:.95rem;color:rgba(255,255,255,.58);margin:0;line-height:1.7;max-width:500px; }
.sv-cta-right { flex-shrink:0;display:flex;flex-direction:column;gap:.75rem;min-width:210px; }
.sv-btn-white { display:inline-flex;align-items:center;gap:.5rem;justify-content:center;padding:.85rem 1.8rem;border-radius:999px; background:#fff;color:var(--sv-p);font-weight:800;font-size:.9rem;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.2);transition:opacity .18s,transform .15s; }
.sv-btn-white:hover { opacity:.92;transform:translateY(-2px);color:var(--sv-p); }
.sv-btn-ghost { display:inline-flex;align-items:center;gap:.5rem;justify-content:center;padding:.82rem 1.6rem;border-radius:999px; border:1.5px solid rgba(255,255,255,.25);color:#fff;font-weight:600;font-size:.88rem;text-decoration:none;transition:background .18s,border-color .18s; }
.sv-btn-ghost:hover { background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);color:#fff; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width:1199px) { .sv-pillar-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:991px) {
    .sv-hero { padding:4rem 0 3.5rem; } .sv-section { padding:3.5rem 0; } .sv-cta { padding:3.5rem 0; }
    .sv-steps { grid-template-columns:1fr 1fr; }
    .sv-cta-inner { flex-direction:column;text-align:center; }
    .sv-cta-sub   { margin:0 auto; }
    .sv-cta-right { flex-direction:row;flex-wrap:wrap;justify-content:center;min-width:auto; }
    .sv-head { margin-bottom:2.5rem; }
}
@media (max-width:767px) {
    .sv-catalog-grid { grid-template-columns:1fr; }
    .sv-cluster-grid { grid-template-columns:1fr; }
    .sv-pillar-grid  { grid-template-columns:1fr; }
}
@media (max-width:575px) {
    .sv-hero-actions { flex-direction:column; }
    .sv-btn-primary,.sv-btn-outline { width:100%;justify-content:center; }
    .sv-steps { grid-template-columns:1fr; }
    .sv-cta-right { flex-direction:column; }
    .sv-btn-white,.sv-btn-ghost { width:100%; }
    .sv-console-stats { padding:.85rem; }
    .sv-cstat strong { font-size:1rem; }
}

/* ── 9. Testimonials page  (.tm-*) ─────────────────────── */

/* Hero */
.tm-hero { position:relative;background:#0f172a;padding:5.5rem 0 0;overflow:hidden; }
.tm-hero-bg { position:absolute;inset:0; }
.tm-orb { position:absolute;border-radius:50%;filter:blur(90px);opacity:.38; }
.tm-orb1 { width:480px;height:480px;background:radial-gradient(circle,#6366f1,transparent);top:-140px;left:-80px;animation:tmOrb 14s ease-in-out infinite alternate; }
.tm-orb2 { width:360px;height:360px;background:radial-gradient(circle,#3b82f6,transparent);top:30%;right:-60px;animation:tmOrb 10s ease-in-out infinite alternate-reverse; }
.tm-orb3 { width:240px;height:240px;background:radial-gradient(circle,#f97316,transparent);bottom:60px;left:42%;opacity:.22;animation:tmOrb 17s ease-in-out infinite alternate; }
.tm-dots { position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px; }
@keyframes tmOrb { from{transform:translate(0,0)scale(1)} to{transform:translate(26px,-20px)scale(1.13)} }
.tm-hero-inner { position:relative;z-index:2;padding-bottom:0; }

.tm-breadcrumb { display:flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;color:rgba(255,255,255,.45);margin-bottom:1.5rem; }
.tm-breadcrumb a { color:rgba(255,255,255,.5);text-decoration:none;transition:color .18s; }
.tm-breadcrumb a:hover { color:#fff; }
.tm-breadcrumb i { font-size:.58rem;color:rgba(255,255,255,.25); }

.tm-hero-content { max-width:760px;margin-bottom:2.5rem; }
.tm-kicker { display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8);font-size:.78rem;font-weight:700;padding:.4rem 1rem;border-radius:999px;margin-bottom:1.1rem;backdrop-filter:blur(8px); }
.tm-kicker i { color:#fbbf24; }
.tm-hero-title { font-size:clamp(1.85rem,4.5vw,2.9rem);font-weight:900;color:#fff;line-height:1.18;margin:0 0 1rem; }
.tm-hero-title span { background:linear-gradient(90deg,#60a5fa,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.tm-hero-lead { font-size:clamp(.92rem,1.4vw,1.04rem);color:rgba(255,255,255,.65);line-height:1.72;margin:0 0 1.8rem;max-width:620px; }

/* Platform badges */
.tm-platform-row { display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2rem; }
.tm-platform { display:flex;align-items:center;gap:.65rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.6rem 1rem;backdrop-filter:blur(8px); }
.tm-platform-icon { font-size:1.2rem; }
.tm-pl-google .tm-platform-icon { color:#ea4335; }
.tm-pl-clutch .tm-platform-icon { color:#ef4444; }
.tm-pl-gf     .tm-platform-icon { color:#f59e0b; }
.tm-platform-rating { display:block;font-size:.9rem;font-weight:800;color:#fff; }
.tm-platform-name   { font-size:.72rem;color:rgba(255,255,255,.55);font-weight:600; }

/* Stats bar */
.tm-stats { display:flex;align-items:stretch;background:rgba(255,255,255,.07);border-top:1px solid rgba(255,255,255,.1);backdrop-filter:blur(12px); }
.tm-stat { flex:1;text-align:center;padding:1.4rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.35rem; }
.tm-stat-icon { font-size:1.1rem;color:#60a5fa; }
.tm-stat strong { font-size:1.5rem;font-weight:900;color:#fff;line-height:1; }
.tm-stat span   { font-size:.72rem;color:rgba(255,255,255,.5);font-weight:600; }
.tm-stat-sep { width:1px;background:rgba(255,255,255,.1);align-self:stretch; }

/* Section base */
.tm-section { padding:5rem 0; }
.tm-bg-white { background:#fff; }
.tm-bg-soft  { background:#f8fafc; }
.tm-head { text-align:center;max-width:800px;margin:0 auto 3.5rem; }
.tm-label { display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:#1d4ed8;margin-bottom:.6rem; }
.tm-section-title { font-size:clamp(1.55rem,3vw,2.3rem);font-weight:900;color:#111827;line-height:1.2;margin:0 0 .85rem; }
.tm-section-title.tm-left { text-align:left; }
.tm-section-sub { font-size:.95rem;color:#6b7280;margin:0;line-height:1.7; }
.tm-body-text   { font-size:.95rem;color:#374151;line-height:1.75;margin:0 0 1.6rem; }

/* Featured */
.tm-featured { background:#fff;border:1.5px solid #e5e7eb;border-radius:20px;padding:2.5rem;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.06); }
.tm-featured::before { content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#1d4ed8,#6366f1,#a855f7); }
.tm-featured-quote { font-size:6rem;font-weight:900;color:#eff6ff;line-height:.8;position:absolute;top:.5rem;left:1.5rem;font-family:Georgia,serif;pointer-events:none; }
.tm-featured-text { font-size:clamp(1rem,2vw,1.2rem);color:#1e293b;line-height:1.75;margin:0 0 1.8rem;position:relative;z-index:1;font-style:italic; }
.tm-featured-author { display:flex;align-items:center;gap:1rem;flex-wrap:wrap; }
.tm-featured-badge { margin-left:auto;background:#eff6ff;color:#1d4ed8;font-size:.75rem;font-weight:700;padding:.35rem .85rem;border-radius:999px;border:1px solid #dbeafe;white-space:nowrap; }

/* Avatars */
.tm-avatar { width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;color:#fff;flex-shrink:0; }
.tm-avatar-sm { width:38px;height:38px;font-size:.85rem; }
.tm-av-blue   { background:linear-gradient(135deg,#1d4ed8,#2563eb); }
.tm-av-purple { background:linear-gradient(135deg,#7c3aed,#8b5cf6); }
.tm-av-teal   { background:linear-gradient(135deg,#0d9488,#14b8a6); }
.tm-av-green  { background:linear-gradient(135deg,#16a34a,#22c55e); }
.tm-av-orange { background:linear-gradient(135deg,#ea580c,#f97316); }
.tm-av-pink   { background:linear-gradient(135deg,#db2777,#ec4899); }
.tm-av-indigo { background:linear-gradient(135deg,#4f46e5,#6366f1); }

/* Stars */
.tm-stars { display:flex;gap:2px; }
.tm-stars i { color:#f59e0b;font-size:.82rem; }
.tm-stars-sm i { font-size:.72rem; }

/* Testimonials grid */
.tm-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem; }
.tm-card { background:#f8fafc;border:1.5px solid #e5e7eb;border-radius:16px;padding:1.6rem;display:flex;flex-direction:column;gap:1rem;transition:border-color .2s,box-shadow .2s,transform .2s; }
.tm-card:hover { border-color:#1d4ed8;box-shadow:0 8px 28px rgba(29,78,216,.1);transform:translateY(-4px); }
.tm-card-top { display:flex;align-items:center;justify-content:space-between;gap:.5rem; }
.tm-service-tag { font-size:.7rem;font-weight:700;color:#1d4ed8;background:#eff6ff;border:1px solid #dbeafe;border-radius:999px;padding:.22rem .6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px; }
.tm-card-quote { font-size:.84rem;color:#374151;line-height:1.7;margin:0;flex:1;font-style:italic; }
.tm-card-author { display:flex;align-items:center;gap:.75rem;margin-top:auto; }
.tm-card-name { display:block;font-size:.88rem;font-weight:700;color:#111827; }
.tm-card-role { display:block;font-size:.75rem;color:#6b7280;margin-top:.1rem; }

/* Why list */
.tm-why-list { list-style:none;margin:0 0 1.8rem;padding:0;display:flex;flex-direction:column;gap:.9rem; }
.tm-why-list li { display:flex;align-items:flex-start;gap:.85rem;font-size:.88rem;color:#374151;line-height:1.6; }
.tm-why-list li i { color:#16a34a;font-size:.95rem;margin-top:.18rem;flex-shrink:0; }

/* Review platform links */
.tm-review-platforms { }
.tm-rp-label { font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9ca3af;margin-bottom:.6rem; }
.tm-rp-links { display:flex;flex-wrap:wrap;gap:.5rem; }
.tm-rp-btn { display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:999px;font-size:.8rem;font-weight:700;text-decoration:none;border:1.5px solid;transition:opacity .18s,transform .15s; }
.tm-rp-btn:hover { opacity:.85;transform:translateY(-1px); }
.tm-rp-google { background:#fff;color:#ea4335;border-color:#fca5a5; }
.tm-rp-clutch { background:#fff;color:#ef4444;border-color:#fca5a5; }
.tm-rp-gf     { background:#fff;color:#d97706;border-color:#fcd34d; }

/* Feedback form */
.tm-form-card { background:#fff;border:1.5px solid #e5e7eb;border-radius:18px;padding:2rem;box-shadow:0 8px 32px rgba(0,0,0,.06); }
.tm-form-head { margin-bottom:1.5rem;padding-bottom:1.2rem;border-bottom:1.5px solid #f1f5f9; }
.tm-form-title { font-size:1.15rem;font-weight:800;color:#111827;margin:0 0 .3rem; }
.tm-form-sub   { font-size:.8rem;color:#6b7280;margin:0; }
.tm-field { display:flex;flex-direction:column;gap:.35rem; }
.tm-field label { font-size:.8rem;font-weight:700;color:#374151; }
.tm-req { color:#ef4444; }
.tm-input { width:100%;padding:.65rem .85rem;background:#f8fafc;border:1.5px solid #e5e7eb;border-radius:9px;font-size:.86rem;color:#111827;outline:none;font-family:inherit;transition:border-color .18s,box-shadow .18s,background .18s;appearance:none;-webkit-appearance:none; }
.tm-input::placeholder { color:#9ca3af; }
.tm-input:focus { border-color:#1d4ed8;box-shadow:0 0 0 3px rgba(29,78,216,.1);background:#fff; }
.tm-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px;cursor:pointer;color:#374151; }
.tm-textarea { resize:vertical;min-height:100px; }
.tm-star-picker { display:flex;gap:.35rem;align-items:center; }
.tm-pick-star { font-size:1.5rem;color:#d1d5db;cursor:pointer;transition:color .15s,transform .15s; }
.tm-pick-star:hover { transform:scale(1.2); }
.tm-star-lit { color:#f59e0b; }
.tm-submit { width:100%;padding:.85rem;background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;border:none;border-radius:10px;font-size:.95rem;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 6px 20px rgba(29,78,216,.3);transition:opacity .18s,transform .15s; }
.tm-submit:hover { opacity:.92;transform:translateY(-2px); }

/* CTA */
.tm-cta { position:relative;background:#0f172a;padding:5rem 0;overflow:hidden; }
.tm-cta-bg { position:absolute;inset:0; }
.tm-cta-orb1 { width:440px;height:440px;background:radial-gradient(circle,#4f46e5,transparent);top:-140px;left:-80px; }
.tm-cta-orb2 { width:300px;height:300px;background:radial-gradient(circle,#ea580c,transparent);bottom:-90px;right:-60px;opacity:.28; }
.tm-cta-inner { position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:3rem;flex-wrap:wrap; }
.tm-cta-left  { flex:1;min-width:280px; }
.tm-cta-title { font-size:clamp(1.45rem,3vw,2.1rem);font-weight:900;color:#fff;line-height:1.22;margin:0 0 .85rem; }
.tm-cta-sub   { font-size:.95rem;color:rgba(255,255,255,.58);margin:0;line-height:1.7;max-width:480px; }
.tm-cta-right { flex-shrink:0;display:flex;flex-direction:column;gap:.65rem;min-width:200px; }
.tm-cta-btn-white { display:inline-flex;align-items:center;gap:.5rem;justify-content:center;padding:.82rem 1.8rem;border-radius:999px;background:#fff;color:#1d4ed8;font-weight:800;font-size:.9rem;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.18);transition:opacity .18s,transform .15s; }
.tm-cta-btn-white:hover { opacity:.92;transform:translateY(-2px);color:#1d4ed8; }
.tm-cta-btn-wa { display:inline-flex;align-items:center;gap:.5rem;justify-content:center;padding:.8rem 1.6rem;border-radius:999px;background:#16a34a;color:#fff;font-weight:700;font-size:.88rem;text-decoration:none;transition:opacity .18s,transform .15s; }
.tm-cta-btn-wa:hover { opacity:.9;transform:translateY(-2px);color:#fff; }

/* Responsive */
@media(max-width:1099px) { .tm-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:991px)  {
    .tm-hero{padding:4rem 0 0;} .tm-section{padding:3.5rem 0;} .tm-cta{padding:3.5rem 0;}
    .tm-cta-inner{flex-direction:column;text-align:center;} .tm-cta-sub{margin:0 auto;}
    .tm-cta-right{flex-direction:row;flex-wrap:wrap;justify-content:center;min-width:auto;}
    .tm-stats{flex-wrap:wrap;} .tm-stat{min-width:50%;} .tm-stat-sep{display:none;}
    .tm-head{margin-bottom:2.5rem;} .tm-featured{padding:1.8rem;}
}
@media(max-width:767px) { .tm-grid{grid-template-columns:1fr;} }
@media(max-width:575px) {
    .tm-platform-row{flex-direction:column;} .tm-featured-author{flex-direction:column;align-items:flex-start;}
    .tm-featured-badge{margin-left:0;} .tm-form-card{padding:1.3rem;}
    .tm-cta-right{flex-direction:column;} .tm-cta-btn-white,.tm-cta-btn-wa{width:100%;}
}

/* ── 10. Technologies page (.tech-page, .tech-*) ──────── */
    .tech-page {
        --tech-ink: #0d2230;
        --tech-muted: #58707d;
        --tech-accent: #f07d3a;
        --tech-accent-dark: #d8661d;
        --tech-surface: #f7f1e8;
        --tech-cream: #fffaf4;
        --tech-line: rgba(13, 34, 48, 0.12);
        --tech-shadow: 0 24px 70px rgba(13, 34, 48, 0.09);
        background:
            radial-gradient(circle at top left, rgba(240, 125, 58, 0.15), transparent 28%),
            linear-gradient(180deg, #fffdf9 0%, #f7f1e8 100%);
        color: var(--tech-ink);
    }

    .tech-page section {
        position: relative;
    }

    .tech-page .tech-shell {
        padding: 72px 0;
    }

    .tech-page .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(240, 125, 58, 0.12);
        color: var(--tech-accent-dark);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .tech-page .eyebrow::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--tech-accent);
        box-shadow: 0 0 0 6px rgba(240, 125, 58, 0.14);
    }

    .tech-page .section-heading h1,
    .tech-page .section-heading h2,
    .tech-page .section-heading h3,
    .tech-page .tech-hero__title {
        color: var(--tech-ink);
        font-family: Georgia, "Times New Roman", serif;
        line-height: 1.08;
        letter-spacing: -0.03em;
    }

    .tech-page .section-heading p,
    .tech-page .tech-hero__copy,
    .tech-page .tech-card p,
    .tech-page .tech-flow__item p,
    .tech-page .tech-support__panel p {
        color: var(--tech-muted);
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 0;
    }

    .tech-page .tech-hero {
        padding: 28px 0 18px;
    }

    .tech-page .tech-hero__panel {
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 32px;
        background:
            linear-gradient(135deg, rgba(10, 35, 49, 0.98) 0%, rgba(19, 62, 79, 0.94) 50%, rgba(240, 125, 58, 0.90) 140%);
        box-shadow: var(--tech-shadow);
    }

    .tech-page .tech-hero__inner {
        padding: 56px;
    }

    .tech-page .tech-hero__title {
        color: #fff9f3;
        font-size: clamp(2.6rem, 4.5vw, 4.8rem);
        margin: 20px 0 18px;
    }

    .tech-page .tech-hero__copy {
        color: rgba(255, 249, 243, 0.84);
        max-width: 640px;
    }

    .tech-page .tech-hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 32px;
    }

    .tech-page .tech-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 14px 22px;
        border-radius: 999px;
        border: 1px solid transparent;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.25s ease;
    }

    .tech-page .tech-btn--solid {
        background: #fff8ef;
        color: var(--tech-ink);
        box-shadow: 0 12px 30px rgba(8, 17, 25, 0.16);
    }

    .tech-page .tech-btn--solid:hover {
        color: var(--tech-ink);
        transform: translateY(-2px);
    }

    .tech-page .tech-btn--ghost {
        border-color: rgba(255, 248, 239, 0.45);
        color: #fff8ef;
        background: transparent;
    }

    .tech-page .tech-btn--ghost:hover {
        color: #fff8ef;
        background: rgba(255, 248, 239, 0.12);
    }

    .tech-page .tech-btn--ink {
        border-color: rgba(13, 34, 48, 0.18);
        color: var(--tech-ink);
        background: rgba(255, 255, 255, 0.52);
    }

    .tech-page .tech-btn--ink:hover {
        color: var(--tech-ink);
        background: rgba(13, 34, 48, 0.06);
    }

    .tech-page .tech-hero__badges {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 32px;
    }

    .tech-page .tech-hero__badges span {
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid rgba(255, 248, 239, 0.18);
        background: rgba(255, 248, 239, 0.08);
        color: #fff8ef;
        font-size: 13px;
        font-weight: 600;
    }

    .tech-page .tech-hero__stack {
        padding: 30px;
        height: 100%;
        border-left: 1px solid rgba(255, 248, 239, 0.16);
        background: linear-gradient(180deg, rgba(255, 248, 239, 0.08), rgba(255, 248, 239, 0.02));
    }

    .tech-page .tech-hero__stack-card {
        padding: 22px;
        border-radius: 24px;
        background: rgba(255, 250, 244, 0.1);
        border: 1px solid rgba(255, 248, 239, 0.16);
        backdrop-filter: blur(8px);
    }

    .tech-page .tech-hero__stack-card h3,
    .tech-page .tech-support__panel h3 {
        margin-bottom: 10px;
        color: #fff8ef;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 28px;
        letter-spacing: -0.03em;
    }

    .tech-page .tech-hero__stack-card p {
        color: rgba(255, 249, 243, 0.78);
        font-size: 15px;
        line-height: 1.7;
    }

    .tech-page .tech-hero__mini-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 18px;
    }

    .tech-page .tech-hero__mini {
        padding: 16px;
        min-height: 138px;
        border-radius: 20px;
        background: rgba(8, 17, 25, 0.22);
        border: 1px solid rgba(255, 248, 239, 0.12);
    }

    .tech-page .tech-hero__mini i {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: rgba(240, 125, 58, 0.18);
        color: #fff6ee;
        font-size: 18px;
    }

    .tech-page .tech-hero__mini h4 {
        margin: 14px 0 8px;
        color: #fff8ef;
        font-size: 17px;
        font-weight: 700;
    }

    .tech-page .tech-hero__mini p {
        color: rgba(255, 249, 243, 0.74);
        font-size: 14px;
        line-height: 1.7;
        margin: 0;
    }

    .tech-page .section-heading {
        max-width: 760px;
        margin-bottom: 32px;
    }

    .tech-page .section-heading h2 {
        font-size: clamp(2rem, 3.2vw, 3.2rem);
        margin: 16px 0 14px;
    }

    .tech-page .tech-principles__grid,
    .tech-page .tech-card-grid {
        display: grid;
        gap: 22px;
    }

    .tech-page .tech-principles__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .tech-page .tech-principle {
        height: 100%;
        padding: 28px 24px;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid var(--tech-line);
        box-shadow: 0 18px 46px rgba(13, 34, 48, 0.06);
    }

    .tech-page .tech-principle__number {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-bottom: 20px;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(240, 125, 58, 0.2), rgba(240, 125, 58, 0.05));
        color: var(--tech-accent-dark);
        font-weight: 700;
    }

    .tech-page .tech-principle h3,
    .tech-page .tech-card h3,
    .tech-page .tech-flow__item h3 {
        margin-bottom: 10px;
        font-size: 22px;
        color: var(--tech-ink);
        letter-spacing: -0.02em;
    }

    .tech-page .tech-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 28px;
    }

    .tech-page .tech-tabs .nav-link {
        padding: 12px 18px;
        border-radius: 999px;
        border: 1px solid var(--tech-line);
        background: rgba(255, 255, 255, 0.6);
        color: var(--tech-ink);
        font-size: 14px;
        font-weight: 700;
        box-shadow: none;
    }

    .tech-page .tech-tabs .nav-link.active,
    .tech-page .tech-tabs .nav-link:hover {
        background: var(--tech-ink);
        color: #fffaf4;
        border-color: var(--tech-ink);
    }

    .tech-page .tech-category__summary {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 20px;
        margin-bottom: 22px;
    }

    .tech-page .tech-category__summary p {
        max-width: 760px;
        color: var(--tech-muted);
        margin-bottom: 0;
    }

    .tech-page .tech-category__count {
        min-width: 110px;
        padding: 12px 16px;
        border-radius: 18px;
        background: rgba(240, 125, 58, 0.1);
        color: var(--tech-accent-dark);
        text-align: center;
        font-weight: 700;
    }

    .tech-page .tech-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tech-page .tech-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 26px;
        border-radius: 26px;
        border: 1px solid var(--tech-line);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 249, 242, 0.84));
        box-shadow: 0 18px 46px rgba(13, 34, 48, 0.06);
        transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    }

    .tech-page .tech-card:hover {
        transform: translateY(-6px);
        border-color: rgba(240, 125, 58, 0.3);
        box-shadow: 0 24px 60px rgba(13, 34, 48, 0.1);
    }

    .tech-page .tech-card__icon {
        width: 58px;
        height: 58px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        border-radius: 18px;
        background: linear-gradient(135deg, rgba(240, 125, 58, 0.18), rgba(240, 125, 58, 0.04));
        color: var(--tech-accent-dark);
        font-size: 22px;
    }

    .tech-page .tech-card__tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 18px 0 22px;
    }

    .tech-page .tech-card__tags span,
    .tech-page .tech-support__chips span {
        display: inline-flex;
        align-items: center;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(13, 34, 48, 0.06);
        color: var(--tech-ink);
        font-size: 13px;
        font-weight: 600;
    }

    .tech-page .tech-card__link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-top: auto;
        color: var(--tech-accent-dark);
        font-weight: 700;
        text-decoration: none;
    }

    .tech-page .tech-card__link:hover {
        color: var(--tech-accent-dark);
    }

    .tech-page .tech-flow {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 24px;
        align-items: stretch;
    }

    .tech-page .tech-flow__panel,
    .tech-page .tech-support__panel,
    .tech-page .tech-cta__panel {
        height: 100%;
        padding: 34px;
        border-radius: 28px;
        border: 1px solid var(--tech-line);
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 20px 52px rgba(13, 34, 48, 0.06);
    }

    .tech-page .tech-flow__panel h3 {
        margin-bottom: 24px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 32px;
        letter-spacing: -0.03em;
    }

    .tech-page .tech-flow__list {
        display: grid;
        gap: 16px;
    }

    .tech-page .tech-flow__item {
        display: grid;
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 18px;
        padding: 20px;
        border-radius: 22px;
        background: #fffdf9;
        border: 1px solid rgba(13, 34, 48, 0.08);
    }

    .tech-page .tech-flow__step {
        width: 66px;
        height: 66px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        background: linear-gradient(135deg, rgba(240, 125, 58, 0.18), rgba(240, 125, 58, 0.06));
        color: var(--tech-accent-dark);
        font-size: 18px;
        font-weight: 800;
    }

    .tech-page .tech-flow__item h3 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .tech-page .tech-support__panel {
        background: linear-gradient(180deg, #112d3e 0%, #183f55 100%);
        border-color: rgba(255, 248, 239, 0.14);
        color: #fff8ef;
    }

    .tech-page .tech-support__panel p {
        color: rgba(255, 249, 243, 0.82);
        margin-bottom: 22px;
    }

    .tech-page .tech-support__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .tech-page .tech-support__chips span {
        background: rgba(255, 248, 239, 0.1);
        color: #fff8ef;
    }

    .tech-page .tech-cta {
        padding: 0 0 76px;
    }

    .tech-page .tech-cta__panel {
        overflow: hidden;
        background:
            radial-gradient(circle at top right, rgba(240, 125, 58, 0.18), transparent 32%),
            linear-gradient(135deg, #fff7ec 0%, #fffdf9 100%);
    }

    .tech-page .tech-cta__panel h2 {
        margin-bottom: 14px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(2rem, 3vw, 3.1rem);
        letter-spacing: -0.03em;
    }

    .tech-page .tech-cta__panel p {
        max-width: 760px;
        margin-bottom: 0;
        color: var(--tech-muted);
        font-size: 16px;
        line-height: 1.8;
    }

    .tech-page .tech-cta__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 28px;
    }

    @media (max-width: 1199px) {
        .tech-page .tech-principles__grid,
        .tech-page .tech-card-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .tech-page .tech-flow {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 991px) {
        .tech-page .tech-shell {
            padding: 58px 0;
        }

        .tech-page .tech-hero__inner {
            padding: 34px 28px;
        }

        .tech-page .tech-hero__stack {
            padding: 0 28px 28px;
            border-left: 0;
            border-top: 1px solid rgba(255, 248, 239, 0.16);
        }

        .tech-page .tech-category__summary {
            flex-direction: column;
            align-items: start;
        }
    }

    @media (max-width: 767px) {
        .tech-page .tech-principles__grid,
        .tech-page .tech-card-grid {
            grid-template-columns: 1fr;
        }

        .tech-page .tech-hero__title {
            font-size: 2.4rem;
        }

        .tech-page .tech-hero__mini-grid {
            grid-template-columns: 1fr;
        }

        .tech-page .tech-flow__item {
            grid-template-columns: 1fr;
        }

        .tech-page .tech-flow__step {
            width: 58px;
            height: 58px;
        }

        .tech-page .tech-flow__panel,
        .tech-page .tech-support__panel,
        .tech-page .tech-cta__panel {
            padding: 24px;
            border-radius: 24px;
        }
    }