:root{
    --bg: #eef3f8;
    --bg-2: #f7f9fc;
    --card: #ffffff;
    --card-soft: #f8fbff;
    --text: #142235;
    --muted: #607086;
    --line: rgba(20,34,53,0.12);
    --line-strong: rgba(20,34,53,0.18);

    --primary: #1f4b7a;
    --primary-2: #2e6aa3;
    --accent: #c99052;
    --accent-soft: rgba(201,144,82,0.14);
    --success-soft: rgba(73,140,94,0.14);

    --shadow-sm: 0 10px 24px rgba(20,34,53,0.06);
    --shadow-md: 0 20px 48px rgba(20,34,53,0.10);

    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;

    --container: 1200px;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

.container{
    width:min(var(--container), calc(100% - 32px));
    margin:0 auto;
}

.site-main section{
    padding:28px 0;
}

/* Header */
.site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(247,249,252,0.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(20,34,53,0.08);
}

.topbar{
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    position:relative;
    z-index:102;
}

.brand__logo{
    width:44px;
    height:44px;
    border-radius:14px;
    display:grid;
    place-items:center;
    font-size:15px;
    font-weight:800;
    color:#fff;
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow:0 14px 26px rgba(31,75,122,0.24);
    flex:0 0 auto;
}

.brand__text{
    min-width:0;
}

.brand__name{
    font-size:1rem;
    font-weight:800;
    letter-spacing:-0.02em;
}

.brand__tag{
    font-size:.88rem;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.nav{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.nav a{
    padding:10px 14px;
    border-radius:999px;
    font-weight:700;
    color:#39506a;
    transition:background .18s ease, color .18s ease;
}

.nav a:hover,
.nav a.is-active{
    background:#e8eff7;
}

.nav__cta{
    color:#fff !important;
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow:0 14px 28px rgba(31,75,122,0.18);
}

.menu-toggle-input,
.menu-button,
.nav-overlay,
.nav__header{
    display:none;
}

/* Shared sections */
.section{
    padding:28px 0;
}

.section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:18px;
    margin-bottom:18px;
}

.section-head h2{
    margin:0;
    font-size:clamp(1.55rem, 2.5vw, 2.3rem);
    letter-spacing:-0.03em;
    color:var(--text);
}

.section-head p{
    margin:8px 0 0;
    color:var(--muted);
    max-width:760px;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.16);
    color:rgba(255,255,255,0.94);
    font-size:.88rem;
    font-weight:800;
    margin-bottom:16px;
}

.eyebrow--light{
    background:#edf4fb;
    border:1px solid rgba(20,34,53,0.08);
    color:var(--primary);
}

.eyebrow__dot{
    width:8px;
    height:8px;
    border-radius:999px;
    background:#ffd7a8;
}

.btn{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:0 18px;
    border-radius:14px;
    border:1px solid transparent;
    font-weight:800;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    cursor:pointer;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn--light{
    background:#fff;
    color:var(--primary);
}

.btn--ghost{
    background:rgba(255,255,255,0.10);
    border-color:rgba(255,255,255,0.18);
    color:#fff;
}

.btn--primary{
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
    color:#fff;
    box-shadow:0 14px 28px rgba(31,75,122,0.18);
}

.btn--secondary{
    background:#fff;
    border-color:var(--line);
    color:var(--text);
}

.btn--full{
    width:100%;
}

.text-link{
    color:var(--primary);
    font-weight:800;
}

/* Hero */
.hero{
    padding:30px 0 16px;
}

.hero-card{
    border:1px solid var(--line);
    border-radius:var(--radius-xl);
    background:linear-gradient(135deg, #1f3f63 0%, #295883 100%);
    color:#fff;
    box-shadow:var(--shadow-md);
    overflow:hidden;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:24px;
    align-items:center;
    padding:30px;
}

.hero h1,
.page-hero-card h1,
.post-title,
.product-page-title{
    margin:0 0 14px;
    font-size:clamp(2.1rem, 3.4vw, 3.4rem);
    line-height:1.02;
    letter-spacing:-0.045em;
}

.lead,
.hero-text,
.page-hero-card p,
.post-intro,
.product-page-intro{
    margin:0 0 18px;
    max-width:720px;
    color:rgba(255,255,255,0.82);
    font-size:1.04rem;
}

.hero-actions,
.product-actions,
.cta-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.hero-points{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}

.hero-point{
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.14);
    color:rgba(255,255,255,0.94);
    font-size:.92rem;
    font-weight:700;
}

.hero-preview{
    border-radius:24px;
    background:#fff;
    color:var(--text);
    padding:18px;
    box-shadow:0 18px 36px rgba(0,0,0,0.14);
}

.preview-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:16px;
}

.window-dots{
    display:flex;
    gap:8px;
}

.window-dots span{
    width:10px;
    height:10px;
    border-radius:999px;
    background:#d7dee7;
}

.window-chip{
    padding:7px 10px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:800;
    color:var(--primary);
    background:#edf4fb;
}

.preview-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:14px;
}

.panel{
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--card);
    padding:14px;
}

.panel__title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    font-weight:800;
    font-size:.95rem;
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 10px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:800;
}

.badge--featured{
    color:#3e6d4b;
    background:var(--success-soft);
}

.badge--growing{
    color:#956634;
    background:var(--accent-soft);
}

.kpis{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    margin-bottom:12px;
}

.kpi{
    padding:12px;
    border-radius:14px;
    background:var(--card-soft);
    border:1px solid rgba(20,34,53,0.06);
}

.kpi small{
    display:block;
    color:var(--muted);
    margin-bottom:4px;
}

.chart{
    height:160px;
    border-radius:14px;
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(180deg, rgba(46,106,163,0.08), rgba(46,106,163,0.02)),
        repeating-linear-gradient(to right, rgba(148,163,184,0.10) 0, rgba(148,163,184,0.10) 1px, transparent 1px, transparent 48px),
        repeating-linear-gradient(to top, rgba(148,163,184,0.10) 0, rgba(148,163,184,0.10) 1px, transparent 1px, transparent 38px);
}

.chart svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.mini-list{
    display:grid;
    gap:10px;
}

.mini-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-radius:14px;
    background:var(--card-soft);
    border:1px solid rgba(20,34,53,0.06);
    font-size:.93rem;
    color:#33485f;
}

/* Page hero */
.page-hero{
    padding:30px 0 16px;
}

.page-hero-card,
.post-hero-card{
    border:1px solid var(--line);
    border-radius:var(--radius-xl);
    background:linear-gradient(135deg, #1f3f63 0%, #295883 100%);
    color:#fff;
    box-shadow:var(--shadow-md);
    padding:30px;
}

.page-hero-card p,
.post-intro{
    color:rgba(255,255,255,0.82);
}

/* Filters */
.filters,
.filter-chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.filter-pill,
.filter-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    color:#33485f;
    font-weight:700;
    font-size:.94rem;
}

.filter-pill.is-active,
.filter-chip.is-active{
    color:#fff;
    border-color:transparent;
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
}

.catalog-toolbar{
    padding-top:12px !important;
    padding-bottom:12px !important;
}

.catalog-toolbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}

.catalog-count{
    color:var(--muted);
    font-weight:700;
}

/* Product cards */
.products-grid,
.product-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:18px;
}

.product-card{
    border:1px solid var(--line-strong);
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:var(--card);
    box-shadow:var(--shadow-md);
}

.product-cover{
    padding:16px;
    background:linear-gradient(180deg, #f3f7fb, #e7eef6);
    border-bottom:1px solid rgba(20,34,53,0.08);
}

.product-media,
.product-media-image{
    padding:16px;
    border-bottom:1px solid rgba(20,34,53,0.08);
    min-height:228px;
}

.product-media-image{
    overflow:hidden;
}

.product-media-image img{
    width:100%;
    height:196px;
    /*object-fit:cover;*/
   /* border-radius:16px;*/
    border:1px solid rgba(20,34,53,0.10);
}

.mock-ui{
    border-radius:16px;
    border:1px solid rgba(20,34,53,0.10);
    background:#fff;
    padding:12px;
    min-height:196px;
}

.mock-ui__top{
    display:flex;
    gap:8px;
    margin-bottom:12px;
}

.mock-ui__top span{
    width:10px;
    height:10px;
    border-radius:999px;
    background:#d9e1eb;
}

.mock-bars{
    display:grid;
    gap:8px;
    margin-bottom:12px;
}

.mock-bars i{
    display:block;
    height:10px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(46,106,163,0.22), rgba(201,144,82,0.20));
    font-style:normal;
}

.mock-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.mock-stats div{
    height:74px;
    border-radius:14px;
    background:#f8fbff;
    border:1px solid rgba(20,34,53,0.06);
}

.product-media-accent-1,
.product-media-accent-2,
.product-media-accent-3{
    position:relative;
}

.product-media-accent-1::before,
.product-media-accent-2::before,
.product-media-accent-3::before{
    content:"";
    display:block;
    width:100%;
    height:196px;
    border-radius:16px;
    border:1px solid rgba(20,34,53,0.10);
    background:#fff;
}

.product-media-accent-1::after,
.product-media-accent-2::after,
.product-media-accent-3::after{
    content:"";
    position:absolute;
    left:28px;
    right:28px;
    top:28px;
    bottom:28px;
    border-radius:16px;
}

.product-media-accent-1::after{
    background:
        linear-gradient(135deg, rgba(31,75,122,.92), rgba(46,106,163,.76)),
        radial-gradient(circle at 24% 24%, rgba(255,255,255,.22), transparent 36%);
}

.product-media-accent-2::after{
    background:
        linear-gradient(135deg, rgba(201,144,82,.88), rgba(31,75,122,.76)),
        radial-gradient(circle at 72% 28%, rgba(255,255,255,.18), transparent 34%);
}

.product-media-accent-3::after{
    background:
        linear-gradient(135deg, rgba(73,140,94,.78), rgba(31,75,122,.74)),
        radial-gradient(circle at 30% 70%, rgba(255,255,255,.18), transparent 30%);
}

.product-body{
    padding:20px;
}

.product-top,
.product-topline{
    display:flex;
    align-items:start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}

.product-top h3,
.product-body h3{
    margin:0;
    font-size:1.22rem;
    letter-spacing:-0.02em;
}

.product-type,
.tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 10px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:800;
    white-space:nowrap;
}

.product-type,
.tag--finance{
    color:var(--primary);
    background:#edf4fb;
}

.tag--marketing{
    color:#8b5d2e;
    background:var(--accent-soft);
}

.tag--data{
    color:#3e6d4b;
    background:var(--success-soft);
}

.tag--soon,
.product-badge{
    color:#8b5d2e;
    background:#f6ede2;
}

.product-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 10px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:800;
}

.product-desc,
.product-body p,
.post-excerpt,
.blog-card p,
.side-note{
    margin:0 0 14px;
    color:var(--muted);
}

.info-block{
    margin-bottom:14px;
}

.info-title{
    margin-bottom:8px;
    font-size:.9rem;
    font-weight:800;
    color:#33485f;
}

.chips,
.product-meta,
.product-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.chip,
.product-meta span,
.product-tags span{
    display:inline-flex;
    align-items:center;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    color:#33485f;
    font-size:.88rem;
    font-weight:700;
}

.product-features{
    display:grid;
    gap:10px;
    margin:14px 0;
    padding:0;
    list-style:none;
}

.product-features li{
    position:relative;
    padding-left:26px;
    color:#33485f;
    font-size:.93rem;
    line-height:1.45;
    font-weight:700;
}

.product-features li::before{
    content:"";
    position:absolute;
    left:0;
    top:.32em;
    width:16px;
    height:16px;
    border-radius:999px;
    background:rgba(46,106,163,0.10);
    border:1px solid rgba(46,106,163,0.18);
}

.product-features li::after{
    content:"";
    position:absolute;
    left:5px;
    top:.66em;
    width:6px;
    height:3px;
    border-left:2px solid var(--primary-2);
    border-bottom:2px solid var(--primary-2);
    transform:rotate(-45deg);
}

.product-features--compact{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:9px 12px;
}

.product-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:14px;
}

.price-stack{
    display:flex;
    align-items:baseline;
    gap:10px;
    flex-wrap:wrap;
}

.old-price{
    color:#8e9bab;
    text-decoration:line-through;
    font-size:.92rem;
    font-weight:700;
}

.product-actions-inline{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}

/* Content cards */
.content-card,
.value-card,
.category-box,
.blog-card,
.post-card-large,
.empty-state,
.compare-wrap,
.cta-box,
.buy-card,
.note-card,
.metric-card{
    border:1px solid var(--line-strong);
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.content-card,
.value-card,
.category-box,
.blog-card,
.empty-state,
.buy-card,
.note-card,
.metric-card{
    border-radius:20px;
    padding:20px;
}

.note-card{
    height:100%;
}

.content-card h2,
.content-card h3,
.value-card h3{
    margin:0 0 10px;
    letter-spacing:-0.02em;
}

.content-card h2 {
    margin-bottom: 12px;
}

.feature-list{
    display:grid;
    gap:10px;
}

.feature-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.feature-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background:var(--primary-2);
    margin-top:8px;
    flex:0 0 auto;
}

.values-grid,
.value-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    /*grid-template-columns:repeat(4, minmax(0,1fr));*/
    gap:16px;
}

.value-icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:16px;
    margin-bottom:14px;
    font-size:1rem;
    font-weight:900;
    color:#fff;
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
}

/* Compare table */
.compare-wrap{
    border-radius:22px;
    overflow:hidden;
}

.compare-table{
    width:100%;
    border-collapse:collapse;
}

.compare-table th,
.compare-table td{
    padding:16px 18px;
    text-align:left;
    border-bottom:1px solid rgba(20,34,53,0.08);
    vertical-align:top;
}

.compare-table th{
    background:#f5f8fc;
    font-size:.92rem;
    color:#33485f;
    font-weight:800;
}

.compare-table td{
    font-size:.95rem;
    color:#33485f;
}

.compare-table tr:last-child td{
    border-bottom:none;
}

.status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 10px;
    border-radius:999px;
    font-size:.8rem;
    font-weight:800;
}

.status--yes{
    color:#3e6d4b;
    background:var(--success-soft);
}

.status--planned{
    color:#8b5d2e;
    background:var(--accent-soft);
}

/* CTA */
.cta-box{
    border-radius:28px;
    background:linear-gradient(135deg, #ffffff, #f4f8fc);
    box-shadow:var(--shadow-md);
    padding:28px;
}

.cta-grid,
.cta-band-inner{
    display:grid;
    grid-template-columns:1fr auto;
    gap:18px;
    align-items:center;
}

.cta-box h2,
.cta-band-inner h2{
    margin:0 0 10px;
    font-size:clamp(1.7rem, 3vw, 2.7rem);
    letter-spacing:-0.03em;
}

.cta-box p{
    margin:0;
    color:var(--muted);
    max-width:760px;
}

/* Footer */
.footer,
.site-footer{
    padding:8px 0 34px;
}

.footer-card{
    border-top:1px solid rgba(20,34,53,0.08);
    padding-top:24px;
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    align-items:center;
}

.footer-meta{
    color:var(--muted);
    font-size:.95rem;
}

.footer-nav{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.footer-nav a{
    color:#33485f;
    font-weight:700;
}

/* Existing page support */
.topbar-left,
.topbar-right,
.dot,
.hero-metrics,
.hero-panel,
.panel-card,
.panel-label,
.panel-actions,
.panel-list,
.about-grid,
.about-copy,
.about-note,
.blog-grid,
.blog-layout,
.blog-main,
.blog-side,
.post-list,
.post-card-body,
.post-meta-top,
.post-meta-line,
.sidebar-links,
.post-hero,
.post-cover-section,
.post-content-section,
.product-page-grid,
.product-page-main,
.product-page-sidebar,
.product-cover-section,
.product-content-grid,
.product-content-main,
.product-content-side,
.detail-list,
.detail-row,
.gallery-grid,
.gallery-card,
.contact-layout,
.contact-main,
.contact-side,
.contact-form-grid,
.form-field,
.form-actions,
.form-alert{
    /* keep selectors alive for existing pages */
}

.post-card-large{
    overflow:hidden;
    border-radius:20px;
}

.post-card-media,
.post-card-media-image{
    padding:16px;
    background:linear-gradient(180deg, #f3f7fb, #e7eef6);
    border-bottom:1px solid rgba(20,34,53,0.08);
    min-height:228px;
}

.post-card-media-image img{
    width:100%;
    height:196px;
    object-fit:cover;
    border-radius:16px;
    border:1px solid rgba(20,34,53,0.10);
}

.post-media-accent-1,
.post-media-accent-2,
.post-media-accent-3{
    position:relative;
}

.post-media-accent-1::before,
.post-media-accent-2::before,
.post-media-accent-3::before{
    content:"";
    display:block;
    width:100%;
    height:196px;
    border-radius:16px;
    border:1px solid rgba(20,34,53,0.10);
    background:#fff;
}

.post-media-accent-1::after,
.post-media-accent-2::after,
.post-media-accent-3::after{
    content:"";
    position:absolute;
    left:28px;
    right:28px;
    top:28px;
    bottom:28px;
    border-radius:16px;
}

.post-media-accent-1::after{
    background:
        linear-gradient(135deg, rgba(31,75,122,.92), rgba(46,106,163,.76)),
        radial-gradient(circle at 24% 24%, rgba(255,255,255,.22), transparent 36%);
}

.post-media-accent-2::after{
    background:
        linear-gradient(135deg, rgba(201,144,82,.88), rgba(31,75,122,.76)),
        radial-gradient(circle at 72% 28%, rgba(255,255,255,.18), transparent 34%);
}

.post-media-accent-3::after{
    background:
        linear-gradient(135deg, rgba(73,140,94,.78), rgba(31,75,122,.74)),
        radial-gradient(circle at 30% 70%, rgba(255,255,255,.18), transparent 30%);
}

.post-card-body{
    padding:20px;
}

.sidebar-links{
    display:grid;
    gap:10px;
}

.sidebar-links a{
    display:block;
    padding:12px 14px;
    border-radius:14px;
    background:#f5f8fb;
    border:1px solid var(--line);
    color:#495866;
    font-weight:700;
}

.sidebar-links a.is-current{
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
    border-color:transparent;
    color:#fff;
}

.breadcrumbs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:14px;
    color:rgba(255,255,255,0.82);
    font-size:14px;
}

.product-page-grid,
.product-content-grid,
.blog-layout,
.contact-layout,
.about-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:20px;
}

.buy-card{
    border-radius:22px;
}

.product-price-stack strong{
    font-size:2rem;
    line-height:1;
}

.buy-card-actions{
    display:grid;
    gap:10px;
    margin-top:18px;
}

.buy-card-points{
    display:grid;
    gap:10px;
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid rgba(20,34,53,0.08);
    color:#39506a;
    font-weight:700;
    font-size:.92rem;
}

.product-cover-wrap{
    overflow:hidden;
    border-radius:22px;
    border:1px solid var(--line-strong);
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.product-cover-image{
    width:100%;
    max-height:620px;
    object-fit:cover;
}

.product-cover-placeholder,
.post-cover-placeholder{
    min-height:360px;
    border-radius:22px;
    border:1px solid var(--line-strong);
    box-shadow:var(--shadow-sm);
    background:linear-gradient(135deg, #1f3f63 0%, #295883 100%);
}

.rich-text,
.article-content{
    color:#33485f;
    line-height:1.85;
    font-size:1rem;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
}

.gallery-card{
    padding:0;
    overflow:hidden;
}

.gallery-card img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.detail-list{
    display:grid;
    gap:14px;
}

.detail-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(20,34,53,0.08);
}

.detail-row:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.contact-form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
    margin-top:18px;
}

.form-field{
    display:grid;
    gap:8px;
}

.form-field-full{
    grid-column:1 / -1;
}

.form-field label{
    font-size:14px;
    font-weight:700;
    color:#334250;
}

.form-field input,
.form-field textarea{
    width:100%;
    border:1px solid var(--line);
    border-radius:16px;
    padding:14px 16px;
    background:#f9fbfc;
    color:var(--text);
    font:inherit;
}

.form-field input:focus,
.form-field textarea:focus{
    outline:none;
    border-color:#a9bfd2;
    background:#fff;
    box-shadow:0 0 0 4px rgba(44,94,135,.08);
}

.form-actions{
    grid-column:1 / -1;
    display:flex;
    justify-content:flex-start;
    padding-top:6px;
}

.form-alert{
    border-radius:18px;
    padding:14px 16px;
    margin-top:16px;
    font-size:15px;
}

.form-alert ul{
    margin:0;
    padding-left:18px;
}

.form-alert-error{
    background:#fcebea;
    border:1px solid #f2c7c2;
    color:#9a3e34;
}

.form-alert-success{
    background:#e9f6ee;
    border:1px solid #bddfc7;
    color:#2d6a42;
}

/* Responsive */
@media (max-width: 1100px){
    .hero-grid,
    .preview-grid,
    .products-grid,
    .product-grid,
    .value-grid,
    .values-grid,
    .cta-grid,
    .cta-band-inner,
    .product-page-grid,
    .product-content-grid,
    .blog-layout,
    .contact-layout,
    .about-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 860px){
    .topbar{
        min-height:68px;
        flex-direction:row;
        align-items:center;
        padding:10px 0;
    }

    .brand{
        max-width:calc(100% - 64px);
    }

    .brand__tag{
        max-width:52vw;
    }

    .menu-button{
        width:46px;
        height:46px;
        display:inline-flex;
        flex:0 0 auto;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        border:1px solid rgba(20,34,53,0.12);
        border-radius:14px;
        background:#fff;
        box-shadow:0 10px 24px rgba(20,34,53,0.06);
        cursor:pointer;
        position:relative;
        z-index:102;
    }

    .menu-button span{
        width:20px;
        height:2px;
        border-radius:999px;
        background:var(--text);
    }

    .nav-overlay{
        position:fixed;
        inset:0;
        z-index:98;
        background:rgba(10,22,36,0.46);
        opacity:0;
        visibility:hidden;
        transition:opacity .22s ease, visibility .22s ease;
        cursor:pointer;
    }

    .nav{
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        z-index:99;
        width:min(86vw, 360px);
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        padding:20px;
        background:linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
        box-shadow:-24px 0 60px rgba(20,34,53,0.22);
        transform:translateX(105%);
        transition:transform .24s ease;
        overflow-y:auto;
        flex-wrap:nowrap;
    }

    .nav__header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding-bottom:14px;
        margin-bottom:6px;
        border-bottom:1px solid rgba(20,34,53,0.10);
        color:var(--text);
        font-size:1rem;
        font-weight:850;
    }

    .nav__close{
        width:42px;
        height:42px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border:1px solid rgba(20,34,53,0.12);
        border-radius:14px;
        background:#fff;
        color:var(--text);
        font-size:30px;
        line-height:1;
        cursor:pointer;
    }

    .nav a{
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        min-height:48px;
        padding:12px 14px;
        border:1px solid rgba(20,34,53,0.08);
        border-radius:16px;
        background:#fff;
        color:#33485f;
    }

    .nav a:hover,
    .nav a.is-active{
        background:#edf4fb;
    }

    .nav__cta{
        justify-content:center !important;
        margin-top:6px;
        border-color:transparent !important;
        color:#fff !important;
    }

    .menu-toggle-input:checked ~ .nav-overlay{
        display:block;
        opacity:1;
        visibility:visible;
    }

    .menu-toggle-input:checked ~ .nav{
        transform:translateX(0);
    }

    .kpis{
        grid-template-columns:1fr;
    }

    .compare-wrap{
        overflow-x:auto;
    }

    .compare-table{
        min-width:760px;
    }

    .footer-card{
        grid-template-columns:1fr;
    }
}

/* "What's Included" on tablet */
@media (min-width: 600px) and (max-width: 1024px){
    .values-grid,
    .value-grid{
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap:16px;
    }
}


@media (max-width: 760px){
    .container{
        width:min(var(--container), calc(100% - 20px));
    }

    .hero-card,
    .page-hero-card,
    .post-hero-card,
    .cta-box{
        padding:0;
    }

    .hero-grid,
    .page-hero-card,
    .post-hero-card{
        padding:22px;
    }

    .site-main section{
        padding:22px 0;
    }

    .products-grid,
    .product-grid,
    .value-grid,
    .values-grid,
    .blog-grid,
    .gallery-grid{
        gap:14px;
        grid-template-columns:1fr;
    }

    .contact-form-grid{
        grid-template-columns:1fr;
    }

    .detail-row{
        flex-direction:column;
    }
}

/* Layout */
/* Product page layout */
.product-layout{
    display:flex;
    align-items:flex-start;
    gap:24px;
    min-width:0;
}

.product-main{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.product-sidebar{
    flex:0 0 320px;
    width:320px;
    min-width:0;
}

.product-main > *,
.product-sidebar > *{
    min-width:0;
}

/* Product page cards */
.content-card{
    background:#fff;
    border:1px solid var(--line-strong);
    border-radius:20px;
    padding:20px;
    box-shadow:var(--shadow-sm);
}

.content-card h2{
    margin:0 0 12px;
}

.feature-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:12px;
    min-width:0;
}

.feature-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-width:0;
}

.feature-item span:last-child{
    min-width:0;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.feature-icon{
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 20px;
}

.feature-icon svg{
    width:20px;
    height:20px;
    fill:#cee53f;
}

.product-price-stack,
.price-stack,
.buy-card-actions,
.buy-card-points,
.detail-list,
.rich-text{
    min-width:0;
}

.rich-text,
.detail-row,
.product-desc,
.side-note{
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* Tablet */
@media (max-width: 1100px){
    .product-layout{
        gap:20px;
    }

    .product-sidebar{
        flex:0 0 280px;
        width:280px;
    }
}

/* Mobile + tablet stacked layout */
@media (max-width: 900px){
    .product-layout{
        flex-direction:column;
    }

    .product-main,
    .product-sidebar{
        width:100%;
        flex:1 1 100%;
    }

    .product-main{
        order:1;
    }

    .product-sidebar{
        order:2;
    }
}

/* Small mobile */
@media (max-width: 760px){
    .product-layout{
        gap:16px;
    }

    .product-main{
        gap:16px;
    }

    .content-card,
    .buy-card,
    .note-card,
    .metric-card{
        padding:18px;
    }

    .feature-item{
        align-items:flex-start;
    }

    .product-price-stack,
    .price-stack{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }
}

/*-----------------------------------------------------*/
/*   Hero preview index.php new */

/*.hero-preview--visual{*/
/*    display:flex;*/
/*    align-items:center;*/
/*    justify-content:center;*/
/*}*/

/*.preview-surface{*/
/*    position:relative;*/
/*    width:100%;*/
/*    max-width:420px;*/
/*    padding:18px;*/
/*}*/

/*.preview-main{*/
/*    position:relative;*/
/*    z-index:1;*/
/*}*/

/*.preview-window{*/
/*    background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);*/
/*    border:1px solid rgba(15,23,42,.08);*/
/*    border-radius:24px;*/
/*    box-shadow:0 24px 60px rgba(15,23,42,.10);*/
/*    overflow:hidden;*/
/*}*/

/*.preview-window__bar{*/
/*    display:flex;*/
/*    gap:6px;*/
/*    padding:14px 16px;*/
/*    border-bottom:1px solid rgba(15,23,42,.06);*/
/*    background:rgba(248,250,252,.9);*/
/*}*/

/*.preview-window__bar span{*/
/*    width:8px;*/
/*    height:8px;*/
/*    border-radius:999px;*/
/*    background:rgba(15,23,42,.14);*/
/*    display:block;*/
/*}*/

/*.preview-window__body{*/
/*    padding:18px;*/
/*}*/

/*.preview-stat-row{*/
/*    display:flex;*/
/*    gap:10px;*/
/*    margin-bottom:14px;*/
/*}*/

/*.preview-stat{*/
/*    flex:1;*/
/*    height:52px;*/
/*    border-radius:16px;*/
/*    background:linear-gradient(180deg,#ffffff 0%,#eef6ff 100%);*/
/*    border:1px solid rgba(15,23,42,.05);*/
/*}*/

/*.preview-chart{*/
/*    height:120px;*/
/*    border-radius:18px;*/
/*    margin-bottom:14px;*/
/*    background:*/
/*        linear-gradient(180deg,rgba(58,125,191,.10),rgba(58,125,191,.03)),*/
/*        linear-gradient(135deg,#ffffff 0%,#f2f8ff 100%);*/
/*    border:1px solid rgba(15,23,42,.05);*/
/*    position:relative;*/
/*    overflow:hidden;*/
/*}*/

/*.preview-chart:before{*/
/*    content:"";*/
/*    position:absolute;*/
/*    left:14px;*/
/*    right:14px;*/
/*    bottom:22px;*/
/*    height:44px;*/
/*    border-radius:999px;*/
/*    border:2px solid rgba(58,125,191,.28);*/
/*    border-color:transparent transparent rgba(58,125,191,.28) transparent;*/
/*    transform:skewX(-12deg);*/
/*}*/

/*.preview-chart:after{*/
/*    content:"";*/
/*    position:absolute;*/
/*    left:18px;*/
/*    right:18px;*/
/*    bottom:28px;*/
/*    height:2px;*/
/*    background:linear-gradient(90deg,rgba(58,125,191,.12),rgba(58,125,191,.35));*/
/*}*/

/*.preview-list{*/
/*    display:flex;*/
/*    flex-direction:column;*/
/*    gap:10px;*/
/*}*/

/*.preview-line{*/
/*    height:12px;*/
/*    border-radius:999px;*/
/*    background:rgba(15,23,42,.08);*/
/*}*/

/*.preview-line--lg{ width:82%; }*/
/*.preview-line{ width:66%; }*/
/*.preview-line--sm{ width:48%; }*/

/*.preview-float{*/
/*    position:absolute;*/
/*    z-index:2;*/
/*    width:180px;*/
/*    padding:14px 14px 12px;*/
/*    border:1px solid rgba(15,23,42,.08);*/
/*    border-radius:18px;*/
/*    background:rgba(255,255,255,.92);*/
/*    box-shadow:0 16px 34px rgba(15,23,42,.10);*/
/*    backdrop-filter:blur(8px);*/
/*}*/

/*.preview-float--top{*/
/*    top:-6px;*/
/*    right:-6px;*/
/*}*/

/*.preview-float--bottom{*/
/*    left:-2px;*/
/*    bottom:8px;*/
/*}*/

/*.preview-float strong{*/
/*    display:block;*/
/*    margin-top:8px;*/
/*    color:#0f172a;*/
/*    font-size:.98rem;*/
/*    line-height:1.3;*/
/*}*/

/*.preview-float em{*/
/*    display:block;*/
/*    margin-top:4px;*/
/*    font-style:normal;*/
/*    color:#526071;*/
/*    font-size:.84rem;*/
/*    line-height:1.45;*/
/*}*/

/*.preview-chip{*/
/*    display:inline-block;*/
/*    padding:6px 10px;*/
/*    border-radius:999px;*/
/*    font-size:.74rem;*/
/*    line-height:1;*/
/*    color:#0f172a;*/
/*    background:rgba(15,23,42,.06);*/
/*}*/

/*.preview-chip--product{*/
/*    background:rgba(58,125,191,.12);*/
/*}*/

/*.preview-chip--insight{*/
/*    background:rgba(16,185,129,.12);*/
/*}*/

/*@media (max-width: 767px){*/
/*    .preview-surface{*/
/*        max-width:100%;*/
/*        padding:8px 0 0;*/
/*    }*/

/*    .preview-float{*/
/*        position:static;*/
/*        width:100%;*/
/*        margin-top:12px;*/
/*    }*/
/*}*/





/* ---------------------------------------------- */
/* Hero preview products.php new   */


.hero-preview--product-panel-compact{
    display:flex;
    justify-content:flex-start;
}

.product-panel-compact{
    width:100%;
    padding:16px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:22px;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    box-shadow:0 18px 42px rgba(15,23,42,.07);
    box-sizing:border-box;
}

.product-panel-compact__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding-bottom:12px;
    margin-bottom:12px;
    border-bottom:1px solid rgba(15,23,42,.06);
}

.product-panel-compact__name{
    display:block;
    color:#0f172a;
    font-size:1rem;
    font-weight:600;
    line-height:1.3;
    letter-spacing:-.01em;
}

.product-panel-compact__status{
    display:block;
    margin-top:4px;
    color:#526071;
    font-size:.82rem;
    line-height:1.3;
}

.product-panel-compact__grid{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
}

.product-panel-compact__item{
    width:calc(50% - 4px);
    padding:10px 11px;
    border:1px solid rgba(15,23,42,.05);
    border-radius:14px;
    background:rgba(255,255,255,.72);
    box-sizing:border-box;
}

.product-panel-compact__label{
    display:block;
    color:#94a3b8;
    font-size:.7rem;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:6px;
}

.product-panel-compact__value{
    display:block;
    color:#0f172a;
    font-size:.9rem;
    font-weight:600;
    line-height:1.3;
}

.product-panel-compact__section{
    padding-top:2px;
    margin-top:10px;
}

.product-panel-compact__title{
    display:block;
    margin-bottom:10px;
    color:#94a3b8;
    font-size:.72rem;
    font-weight:600;
    line-height:1;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.product-panel-compact__tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.product-panel-compact__meta{
    display:flex;
    gap:8px;
}

.product-meta{
    flex:1;
    padding:11px 10px;
    border:1px solid rgba(15,23,42,.05);
    border-radius:14px;
    background:rgba(255,255,255,.72);
    text-align:center;
}

.product-meta strong{
    display:block;
    color:#0f172a;
    font-size:1rem;
    line-height:1.2;
}

.product-meta span{
    display:block;
    margin-top:4px;
    color:#526071;
    font-size:.76rem;
    line-height:1.2;
}

.product-badge{
    display:inline-block;
    padding:7px 10px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
}

.product-badge--live{
    background:rgba(16,185,129,.12);
    color:#047857;
}

.product-badge--yes{
    background:rgba(58,125,191,.10);
    color:#2e6aa3;
}

.product-badge--soft{
    background:rgba(15,23,42,.06);
    color:#526071;
}

.product-badge--plan{
    background:rgba(245,158,11,.12);
    color:#b45309;
}

@media (max-width: 767px){
    .product-panel-compact{
        max-width:100%;
        padding:14px;
        border-radius:20px;
    }

    .product-panel-compact__item{
        width:100%;
    }

    .product-panel-compact__meta{
        flex-direction:column;
    }
}

/*-----------------------------------------------------*/
/*   Hero preview ABOUT.php new */

.hero-preview--profile-compact{
    display:flex;
    justify-content:flex-start;
}

.profile-compact{
    width:100%;
    max-width:380px;
    padding:16px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:22px;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    box-shadow:0 18px 42px rgba(15,23,42,.07);
    box-sizing:border-box;
}

.profile-compact__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    padding-bottom:12px;
    margin-bottom:12px;
    border-bottom:1px solid rgba(15,23,42,.06);
}

.profile-compact__name{
    display:block;
    color:#0f172a;
    font-size:1rem;
    font-weight:600;
    line-height:1.3;
    letter-spacing:-.01em;
}

.profile-compact__role{
    display:block;
    margin-top:4px;
    color:#526071;
    font-size:.82rem;
    line-height:1.3;
}

.profile-compact__grid{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:12px;
}

.profile-compact__item{
    width:calc(50% - 4px);
    padding:10px 11px;
    border:1px solid rgba(15,23,42,.05);
    border-radius:14px;
    background:rgba(255,255,255,.72);
    box-sizing:border-box;
}

.profile-compact__label{
    display:block;
    color:#94a3b8;
    font-size:.7rem;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:6px;
}

.profile-compact__value{
    display:block;
    color:#0f172a;
    font-size:.9rem;
    font-weight:600;
    line-height:1.3;
}

.profile-compact__section{
    padding-top:2px;
}

.profile-compact__title{
    display:block;
    margin-bottom:10px;
    color:#94a3b8;
    font-size:.72rem;
    font-weight:600;
    line-height:1;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.profile-compact__tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.profile-badge{
    display:inline-block;
    padding:7px 10px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
}

.profile-badge--yes{
    background:rgba(58,125,191,.10);
    color:#2e6aa3;
}

.profile-badge--live{
    background:rgba(245,158,11,.12);
    color:#b45309;
}

.profile-badge--open{
    background:rgba(16,185,129,.12);
    color:#047857;
}

@media (max-width: 767px){
    .profile-compact{
        max-width:100%;
        padding:14px;
        border-radius:20px;
    }

    .profile-compact__item{
        width:100%;
    }
}

/*-----------------------------------------------------*/
/*   Hero preview Contact.php new */

.hero-preview--contact-premium{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:22px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:24px;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
    box-shadow:0 22px 50px rgba(15,23,42,.08);
}

.hero-preview--contact-premium h3{
    margin:2px 0 0;
    color:#0f172a;
    font-size:1.18rem;
    line-height:1.34;
    letter-spacing:-.01em;
}

.contact-premium-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.contact-premium-item{
    padding:14px 14px 13px;
    border:1px solid rgba(15,23,42,.06);
    border-radius:18px;
    background:rgba(255,255,255,.74);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

.contact-premium-item strong{
    display:block;
    color:#0f172a;
    font-size:.96rem;
    line-height:1.35;
}

.contact-premium-item span{
    display:block;
    margin-top:6px;
    color:#526071;
    font-size:.9rem;
    line-height:1.52;
}

.contact-premium-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding-top:2px;
}

.contact-premium-meta span{
    display:inline-block;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(15,23,42,.05);
    color:#526071;
    font-size:.78rem;
    line-height:1;
}

@media (max-width: 767px){
    .hero-preview--contact-premium{
        max-width:100%;
        padding:18px;
        border-radius:20px;
    }

    .hero-preview--contact-premium h3{
        max-width:none;
    }
}

/* -----Index.php----------------------------------  */
.value-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:8px;
}

.value-number{
    font-size:.85rem;
    font-weight:800;
    color:var(--primary);
    background:var(--accent-soft);
    padding:6px 10px;
    border-radius:999px;
    flex:0 0 auto;
}

.value-card h3{
    margin:0;
    font-size:1.05rem;
}

.value-card p{
    margin:0;
}

.products-grid--featured{
    grid-template-columns:repeat(3, minmax(0, 1fr));
}

.package-includes{
    margin-top:12px;
}

.package-list{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px 14px;
    margin:0;
    padding:0;
    list-style:none;
}

.package-list li{
    position:relative;
    padding-left:14px;
    color:var(--muted);
    font-size:.9rem;
    line-height:1.4;
}

.package-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:.62em;
    width:5px;
    height:5px;
    border-radius:999px;
    background:var(--primary-2);
}

@media (max-width: 1100px){
    .products-grid--featured{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px){
    .products-grid--featured{
        grid-template-columns:1fr;
    }

    .package-list{
        grid-template-columns:1fr;
    }
}

/*-------------Products-page-------------------------*/

.not-products__note{
    margin-top:14px;
    padding:14px 16px;
    border-radius:18px;
    background:rgba(206,229,63,.18);
    border:1px solid rgba(206,229,63,.4);
    font-size:14px;
    line-height:1.6;
    color:var(--ink);
}
.product-info-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.product-info-grid--support{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.product-info-card{
    min-width:0;
    padding:18px;
    border-radius:20px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.product-info-card__label{
    display:inline-flex;
    margin-bottom:10px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--muted);
}

.product-info-card h3{
    margin:0 0 8px;
    font-size:17px;
    line-height:1.2;
    letter-spacing:-.02em;
    color:var(--ink);
}

.product-info-card p{
    margin:0;
    font-size:14px;
    line-height:1.55;
    color:var(--muted);
}

.product-note{
    max-width:760px;
    margin-top:14px;
    padding:14px 16px;
    border-radius:18px;
    border:1px solid var(--border);
    font-size:14px;
    line-height:1.6;
    color:var(--muted);
}

@media (max-width:980px){
    .product-info-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .product-info-grid--support{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:640px){
    .product-info-grid,
    .product-info-grid--support{
        grid-template-columns:1fr;
    }

    .product-info-card{
        padding:16px;
        border-radius:18px;
    }

    .product-info-card h3{
        font-size:16px;
    }
}

/* Right section visual banner */
.principles-banner-card{
    margin:0;
    padding:0;
    border:1px solid var(--line-strong);
    border-radius:24px;
    background:#fff;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
}

.principles-banner-card__image{
    display:block;
    width:100%;
    object-fit:cover;
    object-position:center;
}

@media (max-width: 760px){
    .principles-banner-card{
        border-radius:20px;
    }
}

/* Products page upgrade */

.products-page .products-grid--three {
    display: grid;
    gap: 24px;
}

@media (min-width: 1024px) {
    .products-page .products-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.products-hero__card {
    overflow: hidden;
    position: relative;
}

.products-hero__card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 34%),
        radial-gradient(circle at bottom left, rgba(239, 68, 68, 0.10), transparent 30%);
}

.products-hero__grid {
    position: relative;
    z-index: 1;
}

.products-hero__note {
    margin-top: 22px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    max-width: 620px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.products-hero-panel {
    padding: 18px;
}

.products-panel {
    border-radius: 24px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
    color: #0f172a;
}

.products-panel__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.products-panel__label,
.products-panel__grid span,
.products-panel__footer > span {
    display: block;
    margin-bottom: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.products-panel__top strong {
    display: block;
    max-width: 240px;
    font-size: 1.15rem;
    line-height: 1.25;
}

.products-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.products-panel__grid div {
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #f8fafc;
}

.products-panel__grid strong {
    font-size: 0.98rem;
    color: #111827;
}

.products-panel__footer {
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.products-panel__tags,
.package-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.products-panel__tags span,
.package-list span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    background: #eef2ff;
}

.package-list--soft span {
    color: #475569;
    background: #f1f5f9;
}

.product-card--portfolio {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card--portfolio:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, 0.20);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}

.product-card--portfolio__media {
    min-height: 180px;
}

.product-card--portfolio .product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px;
}

.product-top--portfolio {
    align-items: flex-start;
    gap: 14px;
}

.product-top--portfolio h3 {
    margin-bottom: 6px;
}

.product-card__meta {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #64748b;
}

.product-mini-block {
    margin-top: 18px;
}

.product-mini-block > span {
    display: block;
    margin-bottom: 9px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.product-footer--portfolio {
    margin-top: auto;
    padding-top: 22px;
}

.products-page-note {
    margin-top: 26px;
    padding: 16px 18px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 18px;
    color: #334155;
    background: #eff6ff;
}

.products-value-card,
.products-use-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.products-use-grid {
    display: grid;
    gap: 18px;
}

@media (min-width: 768px) {
    .products-use-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .products-use-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.products-cta {
    position: relative;
    overflow: hidden;
}

.products-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 34%);
}

.products-cta .cta-grid {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .products-panel__top {
        flex-direction: column;
    }

    .products-panel__grid {
        grid-template-columns: 1fr;
    }

    .product-card--portfolio .product-body {
        padding: 18px;
    }
}

/* Products page upgrade — add to add.css */

.products-page .products-grid--three {
    display: grid;
    gap: 24px;
}

@media (min-width: 1024px) {
    .products-page .products-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.products-hero__card {
    overflow: hidden;
    position: relative;
}

.products-hero__card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 34%),
        radial-gradient(circle at bottom left, rgba(239, 68, 68, 0.10), transparent 30%);
}

.products-hero__grid {
    position: relative;
    z-index: 1;
}

.products-hero__note {
    margin-top: 22px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    max-width: 620px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.products-hero-panel {
    padding: 18px;
}

.products-panel {
    border-radius: 24px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
    color: #0f172a;
}

.products-panel__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.products-panel__label,
.products-panel__grid span,
.products-panel__footer > span {
    display: block;
    margin-bottom: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.products-panel__top strong {
    display: block;
    max-width: 240px;
    font-size: 1.15rem;
    line-height: 1.25;
}

.products-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.products-panel__grid div {
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #f8fafc;
}

.products-panel__grid strong {
    font-size: 0.98rem;
    color: #111827;
}

.products-panel__footer {
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.products-panel__tags,
.package-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.products-panel__tags span,
.package-list span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    background: #eef2ff;
}

.package-list--soft span {
    color: #475569;
    background: #f1f5f9;
}

.product-card--portfolio {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card--portfolio:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, 0.20);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}

.product-card--portfolio__media {
    min-height: 180px;
}

.product-card--portfolio .product-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px;
}

.product-top--portfolio {
    align-items: flex-start;
    gap: 14px;
}

.product-top--portfolio h3 {
    margin-bottom: 6px;
}

.product-card__meta {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #64748b;
}

.product-mini-block {
    margin-top: 18px;
}

.product-mini-block > span {
    display: block;
    margin-bottom: 9px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.product-footer--portfolio {
    margin-top: auto;
    padding-top: 22px;
}

.products-page-note {
    margin-top: 26px;
    padding: 16px 18px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 18px;
    color: #334155;
    background: #eff6ff;
}

.products-value-card,
.products-use-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.products-use-grid {
    display: grid;
    gap: 18px;
}

@media (min-width: 768px) {
    .products-use-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .products-use-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.products-cta {
    position: relative;
    overflow: hidden;
}

.products-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 34%);
}

.products-cta .cta-grid {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .products-panel__top {
        flex-direction: column;
    }

    .products-panel__grid {
        grid-template-columns: 1fr;
    }

    .product-card--portfolio .product-body {
        padding: 18px;
    }
}

/* Product cards — professional specification layout */
.product-card--portfolio .product-desc {
    margin-bottom: 0;
}

.product-snapshot {
    display: grid;
    gap: 10px;
    margin-top: 20px;
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.product-snapshot__row {
    display: grid;
    grid-template-columns: minmax(95px, 0.36fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.product-snapshot__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.product-snapshot__row span {
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.product-snapshot__row strong {
    font-size: 0.92rem;
    font-weight: 750;
    line-height: 1.45;
    color: #0f172a;
}

.product-fit {
    margin-top: 14px;
    padding: 14px 16px;
    border-left: 3px solid rgba(37, 99, 235, 0.65);
    border-radius: 14px;
    background: #eff6ff;
}

.product-fit span {
    display: block;
    margin-bottom: 5px;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2563eb;
}

.product-fit p {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.45;
    color: #1e3a8a;
}

@media (max-width: 520px) {
    .product-snapshot__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}
/* Blog hero — aligned with products page */
.blog-page .blog-hero--product-style {
    padding: 30px 0 16px;
}

.blog-hero__card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1f3f63 0%, #295883 100%);
}

.blog-hero__card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top right, rgba(46, 106, 163, 0.28), transparent 34%),
        radial-gradient(circle at bottom left, rgba(201, 144, 82, 0.16), transparent 30%);
}

.blog-hero__grid,
.blog-hero__card .blog-topic-row {
    position: relative;
    z-index: 1;
}

.blog-hero__main h1 {
    max-width: 820px;
}

.blog-hero__note {
    margin-top: 22px;
    max-width: 650px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
    line-height: 1.55;
    backdrop-filter: blur(10px);
}

.blog-hero-panel {
    padding: 18px;
}

.blog-insight-panel {
    border-radius: 24px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
    color: #0f172a;
}

.blog-insight-panel__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.blog-insight-panel__label,
.blog-insight-panel__grid span,
.blog-insight-panel__footer > span {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-insight-panel__top strong {
    display: block;
    max-width: 250px;
    color: #0f172a;
    font-size: 1.15rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.blog-insight-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(73, 140, 94, 0.14);
    color: #3e6d4b;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.blog-insight-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.blog-insight-panel__grid div {
    padding: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #f8fafc;
}

.blog-insight-panel__grid strong {
    color: #111827;
    font-size: 0.98rem;
    line-height: 1.25;
}

.blog-insight-panel__footer {
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.blog-insight-panel__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.blog-insight-panel__tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #edf4fb;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
}

.blog-hero__card .blog-topic-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 30px 30px;
}

.blog-hero__card .blog-topic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.90);
    font-size: 0.9rem;
    font-weight: 800;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.blog-hero__card .blog-topic:hover,
.blog-hero__card .blog-topic.is-active {
    border-color: rgba(255, 255, 255, 0.92);
    background: #ffffff;
    color: var(--primary);
}

@media (max-width: 1100px) {
    .blog-hero__visual-wrap {
        max-width: 620px;
    }
}

@media (max-width: 767px) {
    .blog-hero__card .blog-topic-row {
        padding: 0 22px 22px;
    }

    .blog-insight-panel__top {
        flex-direction: column;
    }

    .blog-insight-panel__grid {
        grid-template-columns: 1fr;
    }

    .blog-hero-panel,
    .blog-insight-panel {
        padding: 16px;
    }
}


/* Blog page — corrected article grid and card layout */
.blog-page .blog-section,
.blog-page .blog-closing{
    padding:42px 0;
}

.blog-page .blog-section__head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:24px;
}

.blog-page .section-kicker{
    display:inline-flex;
    margin-bottom:13px;
    color:var(--primary-2);
    font-size:.76rem;
    font-weight:850;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.blog-page .blog-section__head h2,
.blog-page .blog-closing__box h2{
    max-width:760px;
    margin:0 0 12px;
    color:var(--text);
    font-size:clamp(1.85rem, 3.4vw, 3rem);
    line-height:1.05;
    letter-spacing:-.045em;
}

.blog-page .blog-section__head p,
.blog-page .blog-closing__box p{
    max-width:720px;
    margin:0;
    color:var(--muted);
    line-height:1.72;
}

.blog-page .blog-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:22px;
    align-items:stretch;
}

.blog-page .blog-card{
    display:flex;
    flex-direction:column;
    min-width:0;
    height:100%;
    overflow:hidden;
    border:1px solid rgba(20,34,53,.10);
    border-radius:24px;
    background:#fff;
    box-shadow:0 18px 46px rgba(20,34,53,.06);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.blog-page .blog-card:hover{
    transform:translateY(-4px);
    border-color:rgba(46,106,163,.22);
    box-shadow:0 26px 64px rgba(20,34,53,.10);
}

.blog-page .blog-card__image,
.blog-page .blog-card__visual{
    display:block;
    width:100%;
    height:176px;
    flex:0 0 auto;
    text-decoration:none;
}

.blog-page .blog-card__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.blog-page .blog-card__visual{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 78% 18%, rgba(46,106,163,.16), transparent 30%),
        linear-gradient(135deg, #f8fbff, #edf4fb);
}

.blog-page .blog-card__visual::before,
.blog-page .blog-card__visual::after,
.blog-page .blog-card__visual span{
    content:"";
    position:absolute;
}

.blog-page .blog-card__visual::before{
    left:22px;
    top:24px;
    width:52%;
    height:16px;
    border-radius:999px;
    background:rgba(46,106,163,.20);
}

.blog-page .blog-card__visual::after{
    left:22px;
    top:56px;
    width:72%;
    height:86px;
    border:1px solid rgba(20,34,53,.08);
    border-radius:20px;
    background:rgba(255,255,255,.72);
}

.blog-page .blog-card__visual span{
    right:-42px;
    bottom:-52px;
    width:150px;
    height:150px;
    border-radius:999px;
    background:rgba(201,144,82,.14);
}

.blog-page .blog-visual--green,
.blog-page .blog-visual--orange,
.blog-page .blog-visual--purple,
.blog-page .blog-visual--teal,
.blog-page .blog-visual--slate{
    background:
        radial-gradient(circle at 78% 18%, rgba(46,106,163,.13), transparent 30%),
        linear-gradient(135deg, #f8fbff, #edf4fb);
}

.blog-page .blog-card__body{
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    min-width:0;
    min-height:286px;
    padding:22px;
}

.blog-page .blog-card__meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    color:var(--muted);
    font-size:.78rem;
    font-weight:850;
    letter-spacing:.055em;
    text-transform:uppercase;
}

.blog-page .blog-card__meta span{
    color:var(--primary-2);
}

.blog-page .blog-card__meta time::before{
    content:"•";
    margin-right:8px;
    color:#cbd5e1;
}

.blog-page .blog-card h3{
    margin:0 0 12px;
    color:var(--text);
    font-size:1.22rem;
    line-height:1.24;
    letter-spacing:-.025em;
}

.blog-page .blog-card h3 a{
    color:inherit;
    text-decoration:none;
}

.blog-page .blog-card h3 a:hover{
    color:var(--primary-2);
}

.blog-page .blog-card p{
    margin:0;
    color:var(--muted);
    line-height:1.68;
}

.blog-page .blog-card__footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-top:auto;
    padding-top:22px;
}

.blog-page .blog-card__footer a{
    color:var(--primary-2);
    font-weight:850;
    text-decoration:none;
}

.blog-page .blog-card__footer a:hover{
    text-decoration:underline;
}

.blog-page .blog-card__footer span{
    color:#8e9bab;
    font-size:.9rem;
    font-weight:750;
    white-space:nowrap;
}

.blog-page .blog-empty-state,
.blog-page .blog-closing__box{
    border:1px solid rgba(20,34,53,.10);
    background:#fff;
    box-shadow:0 18px 52px rgba(20,34,53,.06);
}

.blog-page .blog-empty-state{
    border-radius:28px;
    padding:34px;
    text-align:center;
}

.blog-page .blog-empty-state h2{
    margin:0 0 10px;
    color:var(--text);
}

.blog-page .blog-empty-state p{
    max-width:520px;
    margin:0 auto 20px;
    color:var(--muted);
}

.blog-page .blog-closing__box{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:28px;
    align-items:center;
    border-radius:28px;
    padding:clamp(28px, 5vw, 48px);
    background:linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.blog-page .blog-closing__actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:12px;
}

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

@media (max-width:760px){
    .blog-page .blog-section,
    .blog-page .blog-closing{
        padding:28px 0;
    }

    .blog-page .blog-section__head{
        display:block;
    }

    .blog-page .blog-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .blog-page .blog-card__body{
        min-height:auto;
        padding:18px;
    }

    .blog-page .blog-closing__box{
        grid-template-columns:1fr;
        border-radius:24px;
    }

    .blog-page .blog-closing__actions{
        justify-content:flex-start;
    }
}
/* =========================================================
   About Page — Cordinant
   Add this CSS to your main app.css / add.css file.
   ========================================================= */

.about-page {
    background:
        radial-gradient(circle at top left, rgba(46, 106, 163, 0.08), transparent 34%),
        linear-gradient(180deg, #f7fafc 0%, #ffffff 48%, #f7fafc 100%);
}

.about-hero {
    padding: 72px 0 44px;
}

.about-hero__card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 34px;
    background:
        linear-gradient(135deg, rgba(32, 83, 132, 0.96), rgba(15, 38, 69, 0.98)),
        radial-gradient(circle at 78% 18%, rgba(201, 144, 82, 0.28), transparent 30%);
    box-shadow: 0 28px 70px rgba(15, 38, 69, 0.22);
    color: #ffffff;
}

.about-hero__card::before {
    content: "";
    position: absolute;
    inset: auto -12% -35% 35%;
    height: 420px;
    background: radial-gradient(circle, rgba(201, 144, 82, 0.28), transparent 65%);
    pointer-events: none;
}

.about-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.8fr);
    gap: 44px;
    align-items: center;
    padding: 34px;
}

.about-hero__content h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(2.4rem, 3.4vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.about-hero__lead {
    max-width: 690px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1.08rem, 1.7vw, 1.32rem);
    line-height: 1.34;
}

.about-hero__text {
    max-width: 650px;
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    line-height: 1.8;
}

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

.about-hero__visual {
    display: flex;
    justify-content: flex-end;
}

.about-photo-card {
    position: relative;
    width: min(100%, 420px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.22);
}

.about-photo-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
}

.about-photo-card__caption {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    background: rgba(8, 22, 40, 0.7);
    backdrop-filter: blur(16px);
}

.about-photo-card__caption span,
.about-photo-card__caption strong {
    display: block;
}

.about-photo-card__caption span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
}

.about-photo-card__caption strong {
    margin-top: 4px;
    color: #ffffff;
    font-size: 1rem;
}

.about-section {
    padding: 56px 0;
}

.about-section--soft {
    background: rgba(247, 250, 252, 0.78);
}

.about-section--last {
    padding-bottom: 86px;
}

.about-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #2e6aa3;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.about-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c99052;
}

.about-two-column {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
    gap: 42px;
    align-items: start;
}

.about-two-column--center {
    align-items: center;
}

.about-intro-card,
.about-rich-text,
.about-note-card,
.about-purpose-card,
.about-cta,
.about-build-card,
.about-philosophy-card {
    border: 1px solid rgba(15, 38, 69, 0.09);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 48px rgba(15, 38, 69, 0.08);
}

.about-intro-card {
    padding: 34px;
}

.about-intro-card h2,
.about-purpose-card h2,
.about-cta h2 {
    margin: 0;
    color: #10223b;
    font-size: clamp(1.8rem, 2vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.about-rich-text {
    padding: 34px;
}

.about-rich-text p,
.about-purpose-card p,
.about-cta p,
.about-section-lead {
    margin: 0;
    color: #536173;
    font-size: 1.02rem;
    line-height: 1.86;
}

.about-rich-text p + p {
    margin-top: 18px;
}

.section-head--center {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.section-head--center .about-kicker {
    justify-content: center;
}

.about-carousel {
    margin-top: 32px;
    overflow: hidden;
}

.about-carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 1fr);
    gap: 18px;
    overflow-x: auto;
    padding: 4px 4px 18px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.about-carousel__item {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(15, 38, 69, 0.09);
    border-radius: 28px;
    background: #e8eef5;
    box-shadow: 0 18px 48px rgba(15, 38, 69, 0.08);
    scroll-snap-align: start;
}

.about-carousel__item img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.about-carousel__item:hover img {
    transform: scale(1.035);
}

.about-carousel__item figcaption {
    position: absolute;
    right: 16px;
    bottom: 16px;
    left: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 18px;
    background: rgba(8, 22, 40, 0.66);
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 700;
    backdrop-filter: blur(14px);
}

.about-note-card {
    max-width: 860px;
    margin: 24px auto 0;
    padding: 24px 28px;
    text-align: center;
}

.about-note-card p {
    margin: 0;
    color: #34465d;
    font-size: 1.06rem;
    line-height: 1.75;
}

.about-build-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.about-build-card {
    position: relative;
    overflow: hidden;
    min-height: 245px;
    padding: 28px;
}

.about-build-card::after {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -58px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(46, 106, 163, 0.08);
}

.about-build-card__number {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(46, 106, 163, 0.1);
    color: #2e6aa3;
    font-size: 0.82rem;
    font-weight: 900;
}

.about-build-card h3,
.about-philosophy-card h3 {
    margin: 24px 0 10px;
    color: #10223b;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.about-build-card p,
.about-philosophy-card p {
    margin: 0;
    color: #5a6878;
    font-size: 0.96rem;
    line-height: 1.72;
}

.about-philosophy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.about-philosophy-card {
    padding: 24px;
}

.about-philosophy-card h3 {
    margin-top: 0;
}

.about-purpose-card {
    padding: clamp(32px, 5vw, 56px);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 252, 0.96)),
        radial-gradient(circle at top right, rgba(201, 144, 82, 0.16), transparent 38%);
}

.about-purpose-card p {
    max-width: 900px;
    margin-top: 20px;
}

.about-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
    padding: clamp(32px, 5vw, 54px);
    background: linear-gradient(135deg, #10223b, #1e4f7c);
    color: #ffffff;
}

.about-cta h2 {
    color: #ffffff;
}

.about-cta p {
    max-width: 760px;
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.76);
}

.about-cta .about-kicker {
    color: rgba(255, 255, 255, 0.78);
}

.about-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}

@media (max-width: 1080px) {
    .about-hero__grid,
    .about-two-column,
    .about-cta {
        grid-template-columns: 1fr;
    }

    .about-hero__visual {
        justify-content: flex-start;
    }

    .about-build-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-cta__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .about-hero {
        padding-top: 38px;
    }

    .about-hero__grid {
        padding: 28px;
        gap: 30px;
    }

    .about-hero__content h1 {
        font-size: clamp(2.2rem, 13vw, 3.35rem);
    }

    .about-section {
        padding: 38px 0;
    }

    .about-intro-card,
    .about-rich-text,
    .about-note-card,
    .about-purpose-card,
    .about-cta,
    .about-build-card,
    .about-philosophy-card {
        border-radius: 22px;
    }

    .about-intro-card,
    .about-rich-text {
        padding: 26px;
    }

    .about-build-grid,
    .about-philosophy-grid {
        grid-template-columns: 1fr;
    }

    .about-carousel__track {
        grid-auto-columns: 82%;
    }

    .about-carousel__item,
    .about-carousel__item img {
        min-height: 280px;
    }
}
/* Header */


/* =========================================================
    Mobile Navigation
   ========================================================= */

.menu-toggle-input,
.nav-overlay,
.nav__header{
    display:none !important;
}

.menu-button{
    display:none;
}

.mobile-nav-overlay,
.mobile-nav-panel{
    display:none;
}

body.is-mobile-menu-open{
    overflow:hidden;
}

.nav--desktop{
    display:flex;
}

@media (max-width: 860px){
    .site-header{
        z-index:1000;
    }

    .topbar{
        min-height:68px;
        flex-direction:row;
        align-items:center;
        padding:10px 0;
    }

    .brand{
        max-width:calc(100% - 64px);
    }

    .brand__tag{
        max-width:52vw;
    }

    .nav--desktop{
        display:none !important;
    }

    .menu-button{
        width:46px;
        height:46px;
        display:inline-flex;
        flex:0 0 auto;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        border:1px solid rgba(20,34,53,0.12);
        border-radius:14px;
        background:#fff;
        box-shadow:0 10px 24px rgba(20,34,53,0.06);
        cursor:pointer;
        position:relative;
        z-index:1002;
    }

    .menu-button span{
        width:20px;
        height:2px;
        border-radius:999px;
        background:var(--text);
    }

    .mobile-nav-overlay{
        position:fixed;
        inset:0;
        z-index:2000;
        display:block;
        background:rgba(10,22,36,0.52);
        opacity:0;
        visibility:hidden;
        transition:opacity .22s ease, visibility .22s ease;
    }

    .mobile-nav-overlay[hidden]{
        display:block;
    }

    .mobile-nav-panel{
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        z-index:2001;
        display:flex;
        width:min(86vw, 360px);
        max-width:360px;
        height:100dvh;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        padding:20px;
        background:linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
        box-shadow:-24px 0 60px rgba(20,34,53,0.24);
        transform:translateX(105%);
        transition:transform .24s ease;
        overflow-y:auto;
        visibility:hidden;
    }

    .mobile-nav-panel__header{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding-bottom:14px;
        margin-bottom:6px;
        border-bottom:1px solid rgba(20,34,53,0.10);
        color:var(--text);
        font-size:1rem;
        font-weight:850;
    }

    .mobile-nav-panel__close{
        width:42px;
        height:42px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border:1px solid rgba(20,34,53,0.12);
        border-radius:14px;
        background:#fff;
        color:var(--text);
        font-size:30px;
        line-height:1;
        cursor:pointer;
    }

    .mobile-nav-panel a{
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        min-height:48px;
        padding:12px 14px;
        border:1px solid rgba(20,34,53,0.08);
        border-radius:16px;
        background:#fff;
        color:#33485f;
        font-weight:700;
    }

    .mobile-nav-panel a:hover,
    .mobile-nav-panel a.is-active{
        background:#edf4fb;
    }

    .mobile-nav-panel .nav__cta{
        justify-content:center !important;
        margin-top:6px;
        border-color:transparent !important;
        color:#fff !important;
        background:linear-gradient(135deg, var(--primary), var(--primary-2));
    }

    body.is-mobile-menu-open .mobile-nav-overlay{
        opacity:1;
        visibility:visible;
    }

    body.is-mobile-menu-open .mobile-nav-panel{
        transform:translateX(0);
        visibility:visible;
    }
}

@media (min-width: 861px){
    .mobile-nav-overlay,
    .mobile-nav-panel{
        display:none !important;
    }
}
/* About page: Outside of Product Work section */
.about-outside {
    overflow: hidden;
}

.about-outside__grid {
    gap: 48px;
    align-items: center;
}

.about-outside__content {
    max-width: 650px;
}

.about-rich-text--soft p {
    color: var(--color-text-muted, #5f6b7a);
}

.about-life-carousel {
    position: relative;
    width: 100%;
    min-width: 0;
}

.about-life-carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(230px, 280px);
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    padding: 8px 4px 18px;
    scrollbar-width: thin;
}

.about-life-carousel__track::-webkit-scrollbar {
    height: 8px;
}

.about-life-carousel__track::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
}

.about-life-carousel__track::-webkit-scrollbar-thumb {
    background: rgba(37, 99, 235, 0.35);
    border-radius: 999px;
}

.about-life-carousel__item {
    position: relative;
    scroll-snap-align: start;
    min-height: 360px;
    margin: 0;
    overflow: hidden;
    border-radius: 26px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
}

.about-life-carousel__item img {
    width: 100%;
    height: 360px;
    display: block;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 0.35s ease;
}

.about-life-carousel__item:hover img {
    transform: scale(1.06);
}

.about-life-carousel__item figcaption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 11px 13px;
    border-radius: 16px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(12px);
}

@media (max-width: 900px) {
    .about-outside__grid {
        gap: 32px;
    }

    .about-life-carousel__track {
        grid-auto-columns: minmax(220px, 76vw);
    }
}

@media (max-width: 600px) {
    .about-life-carousel__item,
    .about-life-carousel__item img {
        min-height: 320px;
        height: 320px;
    }
}

/* =========================================================
   Single Blog Post Page — Cordinant
   Styles for post.php article template
   ========================================================= */

.single-post-page{
    background:
        radial-gradient(circle at top left, rgba(46,106,163,0.08), transparent 34%),
        linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
}

.single-post-hero{
    padding:34px 0 18px;
}

.single-post-hero__card{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.26);
    border-radius:var(--radius-xl);
    background:
        radial-gradient(circle at 88% 12%, rgba(201,144,82,0.18), transparent 30%),
        linear-gradient(135deg, #1f3f63 0%, #295883 100%);
    color:#fff;
    box-shadow:var(--shadow-md);
    padding:clamp(24px, 5vw, 46px);
}

.single-post-hero__card::before{
    content:"";
    position:absolute;
    right:-120px;
    bottom:-160px;
    width:360px;
    height:360px;
    border-radius:999px;
    background:rgba(255,255,255,0.08);
    pointer-events:none;
}

.single-post-hero__inner{
    position:relative;
    z-index:1;
    max-width:920px;
}

.single-post-breadcrumbs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:18px;
    color:rgba(255,255,255,0.76);
    font-size:.92rem;
    font-weight:700;
}

.single-post-breadcrumbs a{
    color:rgba(255,255,255,0.92);
}

.single-post-breadcrumbs a:hover{
    text-decoration:underline;
}

.single-post-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:36px;
    margin-bottom:16px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,0.18);
    border-radius:999px;
    background:rgba(255,255,255,0.10);
    color:rgba(255,255,255,0.92);
    font-size:.82rem;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.single-post-kicker::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:999px;
    background:#ffd7a8;
}

.single-post-title{
    max-width:900px;
    margin:0;
    color:#fff;
    font-size:clamp(2.25rem, 5vw, 4.3rem);
    line-height:1.02;
    letter-spacing:-.055em;
}

.single-post-excerpt{
    max-width:760px;
    margin:20px 0 0;
    color:rgba(255,255,255,0.82);
    font-size:clamp(1.04rem, 1.6vw, 1.22rem);
    line-height:1.68;
}

.single-post-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}

.single-post-meta span,
.single-post-meta time{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,0.16);
    border-radius:999px;
    background:rgba(255,255,255,0.10);
    color:rgba(255,255,255,0.86);
    font-size:.88rem;
    font-weight:750;
}

.single-post-section{
    padding:22px 0;
}

.single-post-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 320px;
    gap:24px;
    align-items:start;
}

.single-post-main{
    min-width:0;
    display:grid;
    gap:22px;
}

.single-post-sidebar{
    position:sticky;
    top:98px;
    min-width:0;
    display:grid;
    gap:16px;
}

.single-post-card,
.single-post-content-card,
.single-post-sidebar-card,
.single-post-author,
.single-post-related-card{
    border:1px solid rgba(20,34,53,0.10);
    border-radius:24px;
    background:#fff;
    box-shadow:0 18px 46px rgba(20,34,53,0.06);
}

.single-post-cover{
    overflow:hidden;
}

.single-post-cover img{
    width:100%;
    max-height:540px;
    object-fit:cover;
}

.single-post-cover figcaption{
    padding:13px 18px;
    border-top:1px solid rgba(20,34,53,0.08);
    color:var(--muted);
    font-size:.9rem;
}

.single-post-content-card{
    padding:clamp(22px, 4vw, 38px);
}

.single-post-content{
    color:#33485f;
    font-size:1.06rem;
    line-height:1.9;
}

.single-post-content h2,
.single-post-content h3,
.single-post-content h4{
    color:var(--text);
    line-height:1.18;
    letter-spacing:-.035em;
}

.single-post-content h2{
    margin:2.1em 0 .65em;
    font-size:clamp(1.7rem, 2.6vw, 2.45rem);
}

.single-post-content h3{
    margin:1.8em 0 .6em;
    font-size:clamp(1.35rem, 2vw, 1.8rem);
}

.single-post-content h4{
    margin:1.5em 0 .55em;
    font-size:1.16rem;
}

.single-post-content p{
    margin:0 0 1.2em;
}

.single-post-content a{
    color:var(--primary-2);
    font-weight:800;
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:4px;
}

.single-post-content ul,
.single-post-content ol{
    margin:0 0 1.3em;
    padding-left:1.25em;
}

.single-post-content li{
    margin:.45em 0;
}

.single-post-content blockquote{
    margin:1.6em 0;
    padding:20px 22px;
    border-left:4px solid var(--primary-2);
    border-radius:18px;
    background:#edf4fb;
    color:#253b54;
    font-size:1.08rem;
    line-height:1.75;
}

.single-post-content img{
    overflow:hidden;
    width:100%;
    margin:1.6em 0;
    border:1px solid rgba(20,34,53,0.10);
    border-radius:20px;
    box-shadow:var(--shadow-sm);
}

.single-post-content table{
    width:100%;
    margin:1.6em 0;
    border-collapse:collapse;
    overflow:hidden;
    border:1px solid rgba(20,34,53,0.10);
    border-radius:18px;
    background:#fff;
}

.single-post-content th,
.single-post-content td{
    padding:14px 16px;
    border-bottom:1px solid rgba(20,34,53,0.08);
    text-align:left;
    vertical-align:top;
}

.single-post-content th{
    background:#f5f8fc;
    color:#33485f;
    font-size:.92rem;
    font-weight:850;
}

.single-post-content tr:last-child td{
    border-bottom:none;
}

.single-post-content pre{
    overflow:auto;
    margin:1.6em 0;
    padding:18px;
    border-radius:18px;
    background:#10223b;
    color:#eef3f8;
    font-size:.92rem;
    line-height:1.65;
}

.single-post-content code{
    padding:.15em .35em;
    border-radius:7px;
    background:#edf4fb;
    color:#1f4b7a;
    font-size:.92em;
}

.single-post-content pre code{
    padding:0;
    background:transparent;
    color:inherit;
}

.single-post-special{
    padding:clamp(22px, 3vw, 30px);
}

.single-post-special h2,
.single-post-special h3{
    margin:0 0 12px;
    color:var(--text);
    letter-spacing:-.03em;
}

.single-post-special p{
    margin:0;
    color:#33485f;
    line-height:1.8;
}

.single-post-insight{
    border-left:5px solid var(--primary-2);
    background:
        radial-gradient(circle at top right, rgba(46,106,163,0.10), transparent 34%),
        #fff;
}

.single-post-takeaways{
    background:linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.single-post-takeaways ul{
    display:grid;
    gap:12px;
    margin:0;
    padding:0;
    list-style:none;
}

.single-post-takeaways li{
    position:relative;
    padding:14px 16px 14px 46px;
    border:1px solid rgba(20,34,53,0.08);
    border-radius:18px;
    background:#fff;
    color:#33485f;
    line-height:1.65;
}

.single-post-takeaways li::before{
    content:"";
    position:absolute;
    left:17px;
    top:19px;
    width:17px;
    height:17px;
    border-radius:999px;
    background:rgba(46,106,163,0.12);
    border:1px solid rgba(46,106,163,0.22);
}

.single-post-takeaways li::after{
    content:"";
    position:absolute;
    left:22px;
    top:25px;
    width:7px;
    height:4px;
    border-left:2px solid var(--primary-2);
    border-bottom:2px solid var(--primary-2);
    transform:rotate(-45deg);
}

.single-post-conclusion{
    background:
        radial-gradient(circle at bottom left, rgba(201,144,82,0.12), transparent 34%),
        #fff;
}

.single-post-author{
    display:flex;
    gap:18px;
    align-items:flex-start;
    padding:22px;
}

.single-post-author__avatar{
    width:64px;
    height:64px;
    flex:0 0 64px;
    display:grid;
    place-items:center;
    border-radius:20px;
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
    color:#fff;
    font-weight:900;
    font-size:1.1rem;
    box-shadow:0 14px 28px rgba(31,75,122,0.18);
}

.single-post-author__content h3{
    margin:0 0 6px;
    color:var(--text);
    letter-spacing:-.02em;
}

.single-post-author__content p{
    margin:0;
    color:var(--muted);
    line-height:1.75;
}

.single-post-sidebar-card{
    padding:18px;
}

.single-post-sidebar-card h3{
    margin:0 0 12px;
    color:var(--text);
    font-size:1.05rem;
    letter-spacing:-.02em;
}

.single-post-sidebar-card p{
    margin:0;
    color:var(--muted);
    font-size:.95rem;
    line-height:1.7;
}

.single-post-sidebar-list{
    display:grid;
    gap:10px;
    margin:0;
    padding:0;
    list-style:none;
}

.single-post-sidebar-list a{
    display:block;
    padding:12px 13px;
    border:1px solid rgba(20,34,53,0.08);
    border-radius:14px;
    background:#f8fbff;
    color:#33485f;
    font-size:.92rem;
    font-weight:750;
    line-height:1.45;
}

.single-post-sidebar-list a:hover{
    border-color:rgba(46,106,163,0.22);
    background:#edf4fb;
    color:var(--primary);
}

.single-post-related{
    padding:28px 0 54px;
}

.single-post-related__head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    margin-bottom:18px;
}

.single-post-related__head h2{
    margin:0;
    color:var(--text);
    font-size:clamp(1.6rem, 2.5vw, 2.35rem);
    line-height:1.1;
    letter-spacing:-.04em;
}

.single-post-related__grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
}

.single-post-related-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-width:0;
    height:100%;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.single-post-related-card:hover{
    transform:translateY(-3px);
    border-color:rgba(46,106,163,0.22);
    box-shadow:0 24px 60px rgba(20,34,53,0.10);
}

.single-post-related-card__image{
    display:block;
    height:150px;
    overflow:hidden;
    background:linear-gradient(135deg, #f8fbff, #edf4fb);
}

.single-post-related-card__image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.single-post-related-card__body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:18px;
}

.single-post-related-card__meta{
    margin-bottom:9px;
    color:var(--primary-2);
    font-size:.76rem;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.single-post-related-card h3{
    margin:0 0 10px;
    color:var(--text);
    font-size:1.08rem;
    line-height:1.28;
    letter-spacing:-.025em;
}

.single-post-related-card p{
    margin:0;
    color:var(--muted);
    font-size:.94rem;
    line-height:1.65;
}

.single-post-related-card__link{
    margin-top:auto;
    padding-top:16px;
    color:var(--primary-2);
    font-weight:850;
}

@media (max-width:1100px){
    .single-post-layout{
        grid-template-columns:1fr;
    }

    .single-post-sidebar{
        position:static;
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .single-post-related__grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:760px){
    .single-post-hero{
        padding-top:22px;
    }

    .single-post-hero__card{
        border-radius:24px;
        padding:22px;
    }

    .single-post-title{
        font-size:clamp(2rem, 11vw, 3.15rem);
    }

    .single-post-section{
        padding:16px 0;
    }

    .single-post-content-card,
    .single-post-special,
    .single-post-author,
    .single-post-sidebar-card{
        border-radius:20px;
    }

    .single-post-content-card{
        padding:20px;
    }

    .single-post-content{
        font-size:1rem;
        line-height:1.82;
    }

    .single-post-author{
        flex-direction:column;
    }

    .single-post-sidebar,
    .single-post-related__grid{
        grid-template-columns:1fr;
    }

    .single-post-related__head{
        display:block;
    }

    .single-post-related__head .btn{
        margin-top:14px;
    }
}

@media (max-width:520px){
    .single-post-meta span,
    .single-post-meta time{
        width:100%;
        justify-content:center;
    }

    .single-post-content table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }
}
/* =========================================================
   Single Product Page — Premium UI
   ========================================================= */

.product-page{
    background:
        radial-gradient(circle at 8% 0%, rgba(46,106,163,.10), transparent 34%),
        linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
}

.product-page .section{
    padding:72px 0;
}

/* HERO */
.product-hero{
    padding:34px 0 30px !important;
    background:transparent !important;
}

.product-hero__grid{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(360px, .95fr);
    gap:44px;
    align-items:center;
    padding:clamp(28px, 5vw, 54px);
    border:1px solid rgba(255,255,255,.26);
    border-radius:34px;
    background:
        radial-gradient(circle at 88% 14%, rgba(201,144,82,.22), transparent 28%),
        radial-gradient(circle at 4% 90%, rgba(46,106,163,.32), transparent 34%),
        linear-gradient(135deg, #10223b 0%, #1f4b7a 52%, #295883 100%);
    color:#fff;
    box-shadow:0 30px 80px rgba(15,38,69,.24);
}

.product-hero__grid::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size:54px 54px;
    opacity:.28;
}

.product-hero__grid::after{
    content:"";
    position:absolute;
    right:-140px;
    bottom:-170px;
    width:420px;
    height:420px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    pointer-events:none;
}

.product-hero__content,
.product-hero__media{
    position:relative;
    z-index:1;
}

.product-hero .eyebrow{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.18);
    color:rgba(255,255,255,.92);
}

.product-hero h1{
    max-width:760px;
    margin:18px 0 18px;
    color:#fff;
    font-size:clamp(2.8rem, 6vw, 5.2rem);
    line-height:.95;
    letter-spacing:-.065em;
}

.product-hero__lead{
    max-width:690px;
    margin:0;
    color:rgba(255,255,255,.80);
    font-size:clamp(1.05rem, 1.5vw, 1.25rem);
    line-height:1.75;
}

.product-hero__badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:28px 0 0;
}

.product-hero__badges span{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:8px 13px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:rgba(255,255,255,.10);
    color:rgba(255,255,255,.90);
    font-size:.88rem;
    font-weight:800;
    backdrop-filter:blur(10px);
}

.product-hero__badges span::before{
    content:"✓";
    margin-right:7px;
    color:#ffd7a8;
    font-weight:900;
}

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

.product-hero .btn--primary{
    background:#ffffff;
    color:#1f4b7a;
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.product-hero .btn--secondary{
    border-color:rgba(255,255,255,.22);
    background:rgba(255,255,255,.10);
    color:#ffffff;
    backdrop-filter:blur(10px);
}

/* Hero image */
.product-hero__media{
    padding:14px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:30px;
    background:rgba(255,255,255,.13);
    box-shadow:0 28px 70px rgba(0,0,0,.22);
    backdrop-filter:blur(14px);
}

.product-hero__media img{
    width:100%;
    min-height:360px;
    max-height:520px;
    object-fit:cover;
    object-position:center;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.18);
}

.product-hero__placeholder{
    min-height:380px;
    display:grid;
    place-items:center;
    padding:30px;
    border-radius:22px;
    background:linear-gradient(135deg, #0f172a, #1f4b7a);
    color:#fff;
    font-size:2rem;
    font-weight:900;
    text-align:center;
}

/* Sections */
.product-section-grid,
.product-two-columns{
    display:grid;
    grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);
    gap:42px;
    align-items:start;
}

.product-section-grid h2,
.section-head h2,
.product-final-cta h2{
    margin:12px 0 0;
    color:var(--text);
    font-size:clamp(2rem, 4vw, 3.2rem);
    line-height:1.04;
    letter-spacing:-.05em;
}

.product-rich-text,
.product-card,
.product-gallery__item,
.product-faq__item{
    border:1px solid rgba(20,34,53,.10);
    border-radius:24px;
    background:#fff;
    box-shadow:0 18px 46px rgba(20,34,53,.07);
}

.product-rich-text{
    padding:28px;
}

.product-rich-text p,
.product-card p,
.product-faq__item p{
    color:#536173;
    line-height:1.82;
}

.product-card{
    padding:28px;
}

.product-card h3{
    margin:0 0 10px;
    color:#10223b;
    font-size:1.25rem;
    letter-spacing:-.025em;
}

.product-feature-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
}

.product-feature-grid .product-card{
    position:relative;
    padding-left:58px;
}

.product-feature-grid .product-card::before{
    content:"✓";
    position:absolute;
    left:24px;
    top:28px;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:rgba(46,106,163,.12);
    color:var(--primary-2);
    font-weight:900;
}

.product-gallery{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:22px;
}

.product-gallery__item{
    overflow:hidden;
    margin:0;
    padding:14px;
}

.product-gallery__item img{
    width:100%;
    border-radius:18px;
}

.product-gallery__item figcaption{
    padding:12px 4px 2px;
    color:var(--muted);
    font-size:.92rem;
}

/* CTA */
.product-final-cta__box{
    position:relative;
    overflow:hidden;
    padding:clamp(34px, 5vw, 58px);
    border-radius:34px;
    background:
        radial-gradient(circle at 88% 12%, rgba(201,144,82,.22), transparent 32%),
        linear-gradient(135deg, #10223b 0%, #1f4b7a 100%);
    color:#fff;
    text-align:center;
    box-shadow:0 28px 70px rgba(15,38,69,.20);
}

.product-final-cta__box h2{
    color:#fff;
}

.product-final-cta__box p{
    max-width:720px;
    margin:18px auto 0;
    color:rgba(255,255,255,.78);
}

.product-final-cta__box .product-hero__actions{
    justify-content:center;
}

/* Responsive */
@media (max-width: 980px){
    .product-hero__grid,
    .product-section-grid,
    .product-two-columns,
    .product-gallery{
        grid-template-columns:1fr;
    }

    .product-hero__media{
        max-width:680px;
    }

    .product-feature-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px){
    .product-page .section{
        padding:48px 0;
    }

    .product-hero{
        padding-top:22px !important;
    }

    .product-hero__grid{
        padding:24px;
        border-radius:26px;
        gap:28px;
    }

    .product-hero h1{
        font-size:clamp(2.35rem, 13vw, 3.4rem);
    }

    .product-hero__lead{
        font-size:1rem;
        line-height:1.68;
    }

    .product-hero__media{
        padding:10px;
        border-radius:22px;
    }

    .product-hero__media img,
    .product-hero__placeholder{
        min-height:260px;
        border-radius:16px;
    }

    .product-feature-grid{
        grid-template-columns:1fr;
    }

    .product-rich-text,
    .product-card{
        padding:22px;
        border-radius:20px;
    }

    .product-final-cta__box{
        border-radius:26px;
    }
}
/* =========================================================
   Product Page — Professional Compact UI
   ========================================================= */

.product-page{
    background:#eef3f8;
}

.product-page .section{
    padding:34px 0 !important;
}

/* Small section labels */
.product-page .eyebrow,
.product-page .eyebrow--light,
.product-section-label,
.section-kicker{
    display:inline-flex !important;
    align-items:center;
    gap:7px;
    margin-bottom:10px;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    color:#526071 !important;
    font-size:.72rem !important;
    font-weight:800 !important;
    letter-spacing:.02em !important;
    text-transform:none !important;
}

.product-page .eyebrow::before,
.product-section-label::before,
.section-kicker::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#c99052;
    flex:0 0 auto;
}

.product-page .eyebrow__dot{
    display:none !important;
}

/* HERO */
.product-hero{
    padding:22px 0 26px !important;
}

.product-hero__grid{
    display:grid;
    grid-template-columns:minmax(0, 1.12fr) minmax(320px, .88fr);
    gap:34px;
    align-items:center;
    padding:34px;
    border-radius:22px;
    background:linear-gradient(135deg, #173653 0%, #245d8d 100%);
    color:#fff;
    box-shadow:0 22px 55px rgba(20,34,53,.18);
    overflow:hidden;
}

.product-hero h1{
    margin:12px 0 10px;
    color:#fff;
    font-size:clamp(2.5rem, 4.8vw, 4.1rem);
    line-height:1;
    letter-spacing:-.055em;
}

.product-hero__lead{
    max-width:620px;
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:1rem;
    line-height:1.65;
}

.product-hero .eyebrow{
    display:inline-flex !important;
    min-height:28px;
    padding:0 11px !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:999px;
    background:rgba(255,255,255,.12) !important;
    color:#fff !important;
    font-size:.72rem !important;
    font-weight:850 !important;
    text-transform:uppercase !important;
    letter-spacing:.06em !important;
}

.product-hero .eyebrow::before{
    width:6px;
    height:6px;
    background:#ffd7a8;
}

.product-hero__badges{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    margin-top:20px;
}

.product-hero__badges span{
    display:block;
    padding:9px 10px;
    border-radius:2px;
    background:#fff;
    color:#10223b;
    font-size:.72rem;
    font-weight:850;
    line-height:1.25;
}

.product-hero__badges span::before{
    content:none !important;
}

.product-hero__actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.product-hero .btn{
    min-height:40px;
    padding:0 16px;
    border-radius:7px;
    font-size:.84rem;
}

.product-hero .btn--primary{
    background:#c62828;
    color:#fff;
    box-shadow:none;
}

.product-hero .btn--secondary{
    background:#0d2237;
    color:#fff;
    border-color:rgba(255,255,255,.16);
}

/* Hero image */
.product-hero__media{
    padding:8px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:0;
    background:#fff;
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.product-hero__media img{
    width:100%;
    min-height:250px;
    max-height:340px;
    object-fit:cover;
    border-radius:0;
}

.product-hero__placeholder{
    min-height:260px;
    display:grid;
    place-items:center;
    background:#f2f6fa;
    color:#173653;
    font-weight:900;
}

/* Main layout with sidebar */
.product-layout,
.product-page-grid,
.product-content-grid{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 290px !important;
    gap:22px !important;
    align-items:start;
}

.product-main,
.product-page-main,
.product-content-main{
    display:grid;
    gap:20px;
    min-width:0;
}

.product-sidebar,
.product-page-sidebar,
.product-content-side{
    position:sticky;
    top:96px;
    min-width:0;
}

/* Cards */
.content-card,
.product-card,
.product-rich-text,
.buy-card,
.note-card,
.metric-card,
.product-faq__item,
.product-gallery__item{
    border:1px solid rgba(20,34,53,.11) !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 12px 34px rgba(20,34,53,.07) !important;
}

.content-card,
.product-card,
.product-rich-text,
.buy-card,
.note-card,
.metric-card{
    padding:22px !important;
}

.content-card h2,
.product-card h2,
.product-rich-text h2{
    margin:0 0 12px;
    color:#10223b;
    font-size:1.45rem;
    line-height:1.18;
    letter-spacing:-.035em;
}

.content-card h3,
.product-card h3{
    margin:0 0 8px;
    color:#10223b;
    font-size:1.05rem;
    line-height:1.25;
}

.content-card p,
.product-card p,
.product-rich-text p,
.note-card p{
    color:#536173;
    font-size:.95rem;
    line-height:1.75;
}

/* Buy sidebar */
.buy-card{
    border-radius:16px !important;
}

.buy-card h3{
    margin:0 0 10px;
    font-size:1.35rem;
    color:#10223b;
}

.product-price-stack strong,
.buy-card strong{
    color:#1f4b7a;
}

.buy-card .btn,
.buy-card-actions .btn{
    width:100%;
    min-height:42px;
    border-radius:8px;
    font-size:.86rem;
}

.buy-card .btn--primary{
    background:#1f4b7a;
    color:#fff;
}

.buy-card-points{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid rgba(20,34,53,.08);
    color:#33485f;
    font-size:.86rem;
    line-height:1.55;
}

/* Section headings */
.section-head{
    display:block;
    margin-bottom:18px;
}

.section-head h2{
    margin:0;
    color:#10223b;
    text-align:left !important;
    font-size:clamp(1.9rem, 3vw, 2.55rem) !important;
    line-height:1.08;
    letter-spacing:-.045em;
}

.section-head p{
    max-width:720px;
    margin:8px 0 0;
    color:#607086;
    font-size:.95rem;
}

/* Package cards */
.values-grid,
.value-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
}

.value-card{
    min-height:138px;
    padding:18px !important;
    border-radius:14px !important;
    background:#fff;
}

.value-number,
.value-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    margin-bottom:14px;
    border-radius:9px;
    background:#1f4b7a;
    color:#fff;
    font-size:.78rem;
    font-weight:900;
}

/* Features */
.product-feature-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}

.product-feature-grid .product-card{
    min-height:92px;
    padding:18px 20px !important;
}

.product-feature-grid .product-card::before{
    content:none !important;
}

/* Screenshots */
.product-gallery{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}

.product-gallery__item{
    overflow:hidden;
    padding:10px !important;
}

.product-gallery__item img{
    width:100%;
    height:210px;
    object-fit:cover;
    border-radius:10px;
    background:#f4f7fb;
}

.product-gallery__item figcaption{
    padding:9px 2px 0;
    color:#33485f;
    font-size:.86rem;
    font-weight:700;
}

/* Details table */
.detail-list{
    display:grid;
    gap:0;
}

.detail-row{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:13px 0;
    border-bottom:1px solid rgba(20,34,53,.08);
    color:#33485f;
    font-size:.9rem;
}

.detail-row:last-child{
    border-bottom:0;
}

.detail-row strong{
    color:#10223b;
}

/* FAQ */
.product-faq{
    display:grid;
    gap:8px;
}

.product-faq__item{
    padding:0 !important;
    border-radius:10px !important;
    box-shadow:none !important;
}

.product-faq__item summary{
    padding:13px 16px;
    color:#10223b;
    font-size:.92rem;
    font-weight:850;
    cursor:pointer;
}

.product-faq__item p{
    margin:0;
    padding:0 16px 15px;
    color:#536173;
    font-size:.92rem;
    line-height:1.65;
}

/* Related products */
.products-grid,
.product-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

/* Bottom CTA */
.product-final-cta__box,
.cta-box{
    border-radius:18px !important;
    background:#fff !important;
    color:#10223b !important;
    box-shadow:0 16px 42px rgba(20,34,53,.08) !important;
    border:1px solid rgba(20,34,53,.10);
}

.product-final-cta__box h2,
.cta-box h2{
    color:#10223b !important;
}

.product-final-cta__box p,
.cta-box p{
    color:#607086 !important;
}

.product-final-cta__box .btn--primary,
.cta-box .btn--primary{
    background:#1f4b7a;
    color:#fff;
}

/* Responsive */
@media (max-width: 1100px){
    .product-layout,
    .product-page-grid,
    .product-content-grid,
    .product-hero__grid{
        grid-template-columns:1fr !important;
    }

    .product-sidebar,
    .product-page-sidebar,
    .product-content-side{
        position:static;
    }

    .values-grid,
    .value-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px){
    .product-page .section{
        padding:28px 0 !important;
    }

    .product-hero__grid{
        padding:24px;
        border-radius:18px;
    }

    .product-hero__badges,
    .product-feature-grid,
    .product-gallery,
    .products-grid,
    .product-grid,
    .values-grid,
    .value-grid{
        grid-template-columns:1fr;
    }

    .product-hero h1{
        font-size:clamp(2.25rem, 12vw, 3.3rem);
    }

    .product-hero__media img{
        min-height:210px;
    }
}

/* =========================================================
   Product Page — Launch Process, Audience, Build With It
   Add at the end of app.css
   ========================================================= */

.product-process-panel{
    position:relative;
    overflow:hidden;
    padding:26px !important;
    border-radius:18px !important;
    background:
        radial-gradient(circle at top right, rgba(46,106,163,.10), transparent 34%),
        #ffffff !important;
}

.product-timeline{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:12px;
    margin-top:18px;
    counter-reset:launch-step;
}

.product-timeline__step{
    position:relative;
    padding:18px 16px 16px;
    border:1px solid rgba(20,34,53,.10);
    border-radius:14px;
    background:#fff;
    box-shadow:0 10px 26px rgba(20,34,53,.06);
    counter-increment:launch-step;
}

.product-timeline__step::before{
    content:counter(launch-step);
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    margin-bottom:12px;
    border-radius:999px;
    background:#1f4b7a;
    color:#fff;
    font-size:.8rem;
    font-weight:900;
}

.product-timeline__step::after{
    content:"→";
    position:absolute;
    top:22px;
    right:-13px;
    z-index:2;
    color:#c99052;
    font-weight:900;
}

.product-timeline__step:last-child::after{
    content:none;
}

.product-timeline__step h3{
    margin:0 0 6px;
    font-size:1rem;
    line-height:1.25;
    color:#10223b;
}

.product-timeline__step p{
    margin:0;
    color:#607086;
    font-size:.88rem;
    line-height:1.55;
}

.product-audience-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.product-audience-card{
    padding:24px !important;
    border-radius:18px !important;
}

.product-audience-card h3{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
    font-size:1.12rem;
}

.product-audience-card:first-child h3::before{
    content:"✓";
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:999px;
    background:rgba(73,140,94,.14);
    color:#3e6d4b;
    font-weight:900;
}

.product-audience-card:last-child h3::before{
    content:"×";
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:999px;
    background:rgba(198,40,40,.10);
    color:#c62828;
    font-weight:900;
}

.product-mini-list{
    display:grid;
    gap:10px;
}

.product-mini-item{
    padding:12px 14px;
    border:1px solid rgba(20,34,53,.08);
    border-radius:12px;
    background:#f8fbff;
}

.product-mini-item strong{
    display:block;
    margin-bottom:4px;
    color:#10223b;
    font-size:.93rem;
    line-height:1.3;
}

.product-mini-item p{
    margin:0;
    color:#607086;
    font-size:.86rem;
    line-height:1.55;
}

.product-build-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
}

.product-build-card{
    position:relative;
    min-height:150px;
    padding:22px !important;
    border-radius:18px !important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.product-build-card::before{
    content:"";
    display:block;
    width:34px;
    height:34px;
    margin-bottom:14px;
    border-radius:11px;
    background:
        linear-gradient(135deg, rgba(31,75,122,.95), rgba(46,106,163,.95));
}

.product-build-card:hover{
    transform:translateY(-3px);
    border-color:rgba(46,106,163,.24) !important;
    box-shadow:0 18px 44px rgba(20,34,53,.10) !important;
}

.product-build-card h3{
    margin:0 0 8px;
    font-size:1.08rem;
    line-height:1.25;
    color:#10223b;
}

.product-build-card p{
    margin:0;
    color:#607086;
    font-size:.9rem;
    line-height:1.65;
}

@media (max-width: 980px){
    .product-timeline{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .product-timeline__step::after{
        content:none;
    }

    .product-build-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px){
    .product-process-panel{
        padding:20px !important;
    }

    .product-timeline,
    .product-audience-grid,
    .product-build-grid{
        grid-template-columns:1fr;
    }

    .product-audience-card,
    .product-build-card{
        padding:20px !important;
    }
}
/* =========================================================
   Product Page — Fix Launch Process + Technical headings
   ========================================================= */

/* 1. Launch Process: remove duplicate number and make compact row */
.product-timeline__step{
    padding:14px 14px 13px !important;
}

.product-timeline__step::before{
    content:none !important;
}

.product-timeline__step::after{
    top:18px !important;
}

.product-timeline__step h3{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 7px !important;
    font-size:.96rem !important;
    line-height:1.2 !important;
}

.product-timeline__step h3 span,
.product-timeline__step h3 .step-number,
.product-timeline__step h3 b:first-child{
    display:inline-grid;
    place-items:center;
    width:24px;
    height:24px;
    flex:0 0 24px;
    border-radius:999px;
    background:#1f4b7a;
    color:#fff;
    font-size:.72rem;
    font-weight:900;
    line-height:1;
}

.product-timeline__step p{
    padding-left:12px;
    font-size:.84rem !important;
    line-height:1.5 !important;
}
.product-timeline__step .product-timeline__step--name {
    display: flex;
    column-gap: 16px;
}

/* 2. Technical section: make card headings visually stronger */
.product-section--technical .product-card h3,
.product-technical .product-card h3,
.product-card h3:has(+ .detail-list),
.product-card h3:has(+ ul){
    display:flex;
    align-items:center;
    gap:9px;
    margin:0 0 14px !important;
    padding-bottom:10px;
    border-bottom:1px solid rgba(20,34,53,.10);
    color:#10223b !important;
    font-size:1.08rem !important;
    font-weight:900 !important;
    letter-spacing:-.025em;
}

.product-section--technical .product-card h3::before,
.product-technical .product-card h3::before,
.product-card h3:has(+ .detail-list)::before,
.product-card h3:has(+ ul)::before{
    content:"";
    width:9px;
    height:9px;
    flex:0 0 9px;
    border-radius:999px;
    background:#c99052;
}

/* =========================================================
   Product Page — CTA Button Visibility Fix
   ========================================================= */

/* Hero buttons: make them visually different from badges */
.product-hero__actions{
    gap:12px !important;
    margin-top:24px !important;
}

.product-hero__actions .btn{
    min-height:46px !important;
    padding:0 20px !important;
    border-radius:10px !important;
    font-size:.88rem !important;
    font-weight:900 !important;
    box-shadow:0 14px 28px rgba(0,0,0,.16) !important;
}

.product-hero__actions .btn--primary{
    background:#c62828 !important;
    border:1px solid rgba(255,255,255,.18) !important;
    color:#fff !important;
}

.product-hero__actions .btn--primary:hover{
    background:#b91c1c !important;
    transform:translateY(-2px);
}

.product-hero__actions .btn--secondary{
    background:#ffffff !important;
    border:1px solid rgba(255,255,255,.26) !important;
    color:#173653 !important;
}

.product-hero__actions .btn--secondary:hover{
    background:#f3f7fb !important;
    transform:translateY(-2px);
}

/* Hero badges: make them clearly smaller than buttons */
.product-hero__badges{
    margin-top:18px !important;
    gap:7px !important;
}

.product-hero__badges span{
    min-height:30px !important;
    padding:7px 9px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.12) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    color:rgba(255,255,255,.88) !important;
    font-size:.72rem !important;
    font-weight:750 !important;
    box-shadow:none !important;
}

/* Final CTA buttons */
.product-final-cta__box .product-hero__actions,
.cta-box .cta-actions{
    justify-content:center !important;
    gap:12px !important;
    margin-top:24px !important;
}

.product-final-cta__box .btn,
.cta-box .btn{
    min-height:44px !important;
    padding:0 20px !important;
    border-radius:10px !important;
    font-size:.88rem !important;
    font-weight:900 !important;
}

.product-final-cta__box .btn--primary,
.cta-box .btn--primary{
    background:#1f4b7a !important;
    border-color:#1f4b7a !important;
    color:#fff !important;
    box-shadow:0 12px 26px rgba(31,75,122,.18) !important;
}

.product-final-cta__box .btn--secondary,
.cta-box .btn--secondary{
    background:#fff !important;
    border:1px solid rgba(31,75,122,.22) !important;
    color:#1f4b7a !important;
    box-shadow:none !important;
}

.product-final-cta__box .btn--secondary:hover,
.cta-box .btn--secondary:hover{
    background:#edf4fb !important;
}

/* Keep CTA buttons stacked nicely on mobile */
@media (max-width:640px){
    .product-hero__actions .btn,
    .product-final-cta__box .btn,
    .cta-box .btn{
        width:100%;
    }
}
/* =========================================================
   Hero CTA Buttons
   ========================================================= */

.product-hero__actions .btn{
    min-height:48px !important;
    padding:0 22px !important;
    border-radius:10px !important;
    font-weight:800 !important;
    transition:all .2s ease;
}

/* Standard */

.product-hero__actions .btn--standard{
    background:#1f4b7a !important;
    border:1px solid #dfdfdf !important;
    color:#ffffff !important;
    box-shadow:0 12px 24px rgba(31,75,122,.22);
}

.product-hero__actions .btn--standard:hover{
    background:#17395d !important;
    border-color:#17395d !important;
    transform:translateY(-2px);
}

/* Extended */

.product-hero__actions .btn--extended{
    background:#b6183d !important;
    border:1px solid #dfdfdf !important;
    color:#ffffff !important;
    box-shadow:0 12px 24px rgba(182,24,61,.25);
}

.product-hero__actions .btn--extended:hover{
    background:#991234 !important;
    border-color:#991234 !important;
    transform:translateY(-2px);
}

/* Demo */

.product-hero__actions .btn--demo{
    background:#ffffff !important;
    border:1px solid #101d2b !important;
    color:#173653 !important;
    box-shadow:0 12px 24px rgba(0,0,0,.08);
}

.product-hero__actions .btn--demo:hover{
    background:#f5f7fa !important;
    transform:translateY(-2px);
}