/* ============================================
   Blog HK - Design System (Part 2: Components)
   ============================================ */

/* Cards */
.card { background:var(--color-white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); transition:all var(--transition-base); }
.card:hover { box-shadow:var(--shadow-card-hover); transform:translateY(-4px); }
.card-image { position:relative; overflow:hidden; aspect-ratio:16/10; }
.card-image img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition-slow); }
.card:hover .card-image img { transform:scale(1.05); }
.card-body { padding:var(--space-lg); }
.card-body h3 { font-size:1.2rem; margin-bottom:var(--space-sm); transition:color var(--transition-fast); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card:hover .card-body h3 { color:var(--color-accent); }
.card-body p { color:var(--color-text-light); font-size:0.93rem; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-meta { display:flex; align-items:center; gap:var(--space-md); margin-top:var(--space-md); padding-top:var(--space-md); border-top:1px solid var(--color-border-light); font-size:0.85rem; color:var(--color-text-muted); }
.card-meta span { display:flex; align-items:center; gap:var(--space-xs); }

/* Badges */
.badge { display:inline-block; padding:0.25rem 0.75rem; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; border-radius:50px; line-height:1.4; }
.badge-primary { background:rgba(15,23,42,0.08); color:var(--color-primary); }
.badge-secondary { background:rgba(37,99,235,0.08); color:var(--color-info); }
.badge-accent { background:var(--color-accent-glow); color:var(--color-primary); }
.badge-info { background:rgba(37,99,235,0.08); color:var(--color-info); }
.badge-warning { background:rgba(217,119,6,0.08); color:var(--color-warning); }
.badge-success { background:rgba(5,150,105,0.08); color:var(--color-success); }
.badge-danger { background:rgba(220,38,38,0.08); color:var(--color-error); }
.badge-on-image { position:absolute; top:var(--space-md); left:var(--space-md); z-index:2; background:var(--color-white); box-shadow:var(--shadow-sm); }

/* Hero Section */
.hero { padding:var(--space-4xl) 0; background:linear-gradient(135deg,var(--color-white) 0%,var(--color-bg-alt) 100%); position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-50%; right:-20%; width:600px; height:600px; background:radial-gradient(circle,var(--color-accent-glow) 0%,transparent 70%); border-radius:50%; pointer-events:none; }
.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3xl); align-items:center; position:relative; z-index:1; }
.hero-content { max-width:560px; }
.hero-label { display:inline-flex; align-items:center; gap:var(--space-sm); padding:.55rem .9rem; background:linear-gradient(135deg,#d9b63e,#b8912a); border:1px solid rgba(120,85,10,.45); color:#5c4105; border-radius:50px; font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--space-lg); box-shadow:0 2px 10px rgba(201,162,39,.3),inset 0 1px 0 rgba(255,255,255,.35); }
.hero-label::before { content:'\2696'; font-size:1rem; line-height:1; color:#4d3503; }
.hero h1 { font-size:3.25rem; line-height:1.15; margin-bottom:var(--space-lg); letter-spacing:-0.03em; }
.hero h1 span { color:var(--color-accent); }
.hero-subtitle { font-size:1.15rem; line-height:1.7; color:var(--color-text-light); margin-bottom:var(--space-xl); }
.hero-buttons { display:flex; gap:var(--space-md); flex-wrap:wrap; }
.hero-stats { display:flex; gap:var(--space-2xl); margin-top:var(--space-2xl); padding-top:var(--space-2xl); border-top:1px solid var(--color-border); }
.hero-stat { text-align:center; }
.hero-stat-number { display:block; font-family:var(--font-heading); font-size:1.75rem; font-weight:700; color:var(--color-primary); }
.hero-stat-label { font-size:0.85rem; color:var(--color-text-muted); }
.hero-image { position:relative; }
.hero-image-wrapper { border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-xl); position:relative; }
.hero-image-wrapper img { width:100%; height:480px; object-fit:cover; }
.hero-image-wrapper::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 60%,rgba(15,23,42,0.3)); pointer-events:none; }
.hero-image-badge { position:absolute; bottom:var(--space-xl); left:var(--space-xl); background:rgba(255,255,255,0.95); backdrop-filter:blur(10px); padding:var(--space-md) var(--space-lg); border-radius:var(--radius-md); box-shadow:var(--shadow-md); z-index:2; }
.hero-image-badge strong { display:block; font-family:var(--font-heading); font-size:1.1rem; color:var(--color-primary); }
.hero-image-badge span { font-size:0.85rem; color:var(--color-text-light); }

/* Modern home hero: the original rules above remain as a safe fallback. */
.hero { padding:clamp(4.5rem,9vw,7rem) 0; background:var(--color-primary); isolation:isolate; }
.hero::before { inset:0; top:auto; right:auto; width:auto; height:auto; border-radius:0; background:radial-gradient(circle at 78% 42%,rgba(201,162,39,.23),transparent 0 25%),radial-gradient(circle at 6% 100%,rgba(37,99,235,.14),transparent 0 28%); }
.hero::after { content:''; position:absolute; inset:0; z-index:0; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to right,transparent,black 45%,transparent); pointer-events:none; }
.hero-inner { grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr); gap:clamp(3rem,7vw,6.5rem); }
.hero-content { max-width:590px; }
.hero .hero-label { padding:.55rem .9rem; background:linear-gradient(135deg,#d9b63e,#b8912a); border:1px solid rgba(120,85,10,.45); color:#5c4105; font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 2px 10px rgba(201,162,39,.3),inset 0 1px 0 rgba(255,255,255,.35); }
.hero .hero-label::before { content:'\2696'; font-size:1rem; line-height:1; color:#4d3503; }
.hero h1 { color:var(--color-white); font-size:clamp(3rem,5.1vw,4.7rem); line-height:1.04; letter-spacing:-.045em; }
.hero h1 span { display:block; color:var(--color-accent-light); }
.hero-subtitle { max-width:540px; font-size:1.08rem; line-height:1.8; color:rgba(255,255,255,.72); }
.hero .btn-primary { background:linear-gradient(135deg,var(--color-accent),var(--color-accent-light)); color:var(--color-primary); box-shadow:0 12px 28px rgba(0,0,0,.22); }
.hero .btn-primary:hover { background:#e0bf4e; color:var(--color-primary); }
.hero .btn-outline { color:var(--color-white); border-color:rgba(255,255,255,.55); }
.hero .btn-outline:hover { background:var(--color-white); border-color:var(--color-white); color:var(--color-primary); }
.hero-stats { gap:clamp(1.5rem,4vw,3.25rem); padding-top:var(--space-xl); border-top-color:rgba(255,255,255,.18); }
.hero-stat { text-align:left; }
.hero-stat-number { font-size:1.85rem; line-height:1.2; color:var(--color-white); }
.hero-stat-label { display:block; margin-top:.15rem; font-size:.78rem; color:rgba(255,255,255,.6); }
.hero-image { padding:1rem 1rem 1.8rem 0; }
.hero-image-wrapper { border:1px solid rgba(255,255,255,.22); box-shadow:22px 24px 0 rgba(201,162,39,.17),var(--shadow-xl); background:var(--color-primary-light); }
.hero-image-wrapper img { height:510px; filter:saturate(.78) contrast(1.04); transition:transform var(--transition-slow); }
.hero-image-wrapper:hover img { transform:scale(1.035); }
.hero-image-wrapper::after { background:linear-gradient(180deg,rgba(15,23,42,.08) 15%,rgba(15,23,42,.88) 100%); }
.hero-image-badge { right:var(--space-xl); bottom:var(--space-xl); left:var(--space-xl); padding:var(--space-md) 0 0; border-top:1px solid rgba(255,255,255,.35); background:transparent; box-shadow:none; border-radius:0; color:var(--color-white); }
.hero-image-badge strong { font-size:1.3rem; color:var(--color-white); }
.hero-image-badge span { color:rgba(255,255,255,.72); }
.hero-image-kicker { position:absolute; top:var(--space-lg); left:var(--space-lg); z-index:2; padding:.45rem .7rem; border:1px solid rgba(255,255,255,.35); background:rgba(15,23,42,.38); backdrop-filter:blur(8px); color:var(--color-white); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.hero-image-orbit { position:absolute; z-index:-1; border:1px solid rgba(201,162,39,.35); border-radius:50%; pointer-events:none; }
.hero-image-orbit-one { width:118px; height:118px; top:-2rem; right:-2.25rem; }
.hero-image-orbit-two { width:58px; height:58px; bottom:-.15rem; left:-1.5rem; background:rgba(201,162,39,.14); }

/* Article Detail */
.article-header { padding:var(--space-3xl) 0; text-align:center; }
.article-header .badge { margin-bottom:var(--space-md); }
.article-header h1 { font-size:2.5rem; max-width:800px; margin:0 auto var(--space-lg); }
.article-meta-header { display:flex; align-items:center; justify-content:center; gap:var(--space-lg); color:var(--color-text-muted); font-size:0.95rem; }
.article-meta-header span { display:flex; align-items:center; gap:var(--space-xs); }
.article-cover { width:100%; max-height:500px; object-fit:cover; border-radius:var(--radius-lg); margin-bottom:var(--space-3xl); }
.article-layout { display:grid; grid-template-columns:1fr var(--sidebar-width); gap:var(--space-3xl); align-items:start; min-width:0; }
.article-layout > * { min-width:0; }
.article-content { max-width:var(--content-width); min-width:0; overflow-wrap:break-word; }
.article-content h2 { font-size:1.6rem; margin:var(--space-2xl) 0 var(--space-md); padding-bottom:var(--space-sm); border-bottom:2px solid var(--color-accent-glow); }
.article-content h3 { font-size:1.3rem; margin:var(--space-xl) 0 var(--space-md); }
.article-content p { font-size:1.05rem; line-height:1.85; margin-bottom:var(--space-lg); }
.article-content ul,.article-content ol { margin:var(--space-md) 0 var(--space-lg) var(--space-xl); list-style:disc; }
.article-content ol { list-style:decimal; }
.article-content li { margin-bottom:var(--space-sm); line-height:1.7; }
.article-content blockquote { border-left:4px solid var(--color-accent); background:var(--color-accent-glow); padding:var(--space-lg) var(--space-xl); margin:var(--space-xl) 0; border-radius:0 var(--radius-md) var(--radius-md) 0; font-family:var(--font-heading); font-style:italic; font-size:1.1rem; line-height:1.6; color:var(--color-primary); }
.article-content a { color:var(--color-accent); border-bottom:1px solid var(--color-accent); }

/* Styles SummerNote - Éléments de formatage */
.article-content strong, .article-content b { 
    font-weight:700 !important; 
    color:var(--color-primary) !important; 
    display: inline;
}
.article-content em, .article-content i { 
    font-style:italic !important; 
    color:var(--color-text) !important;
    display: inline;
}
.article-content u, .article-content .underline { 
    text-decoration:underline !important; 
    color:var(--color-text) !important;
    display: inline;
}
.article-content s, .article-content .strikethrough { 
    text-decoration:line-through !important; 
    color:var(--color-text-muted) !important;
    display: inline;
}
.article-content sup, .article-content .superscript { 
    font-size:0.75em !important; 
    vertical-align:super !important; 
    color:var(--color-text-muted) !important;
    display: inline;
}
.article-content sub, .article-content .subscript { 
    font-size:0.75em !important; 
    vertical-align:sub !important; 
    color:var(--color-text-muted) !important;
    display: inline;
}

/* Styles SummerNote - Paragraphes et espacement CORRIGÉS */
.article-content p { 
    margin-bottom:1.5rem !important; 
    line-height:1.8 !important;
    font-size:1.05rem !important;
    color:var(--color-text) !important;
    display: block !important;
}
.article-content p:last-child { 
    margin-bottom:0 !important; 
}

/* Blocs <div> produits par l'éditeur (pied de page de compatibilité) */
.article-content > div:not(.comments-section) {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

/* Rendu de l'éditeur Quill pour les lecteurs */
.article-content .ql-align-center { text-align: center !important; }
.article-content .ql-align-right { text-align: right !important; }
.article-content .ql-align-justify { text-align: justify !important; }
.article-content .ql-indent-1 { margin-left: 2.5rem; }
.article-content .ql-indent-2 { margin-left: 5rem; }
.article-content .ql-indent-3 { margin-left: 7.5rem; }
.article-content .ql-indent-4 { margin-left: 10rem; }
.article-content .ql-indent-5 { margin-left: 12.5rem; }
.article-content .ql-indent-6 { margin-left: 15rem; }
.article-content .ql-indent-7 { margin-left: 17.5rem; }
.article-content .ql-indent-8 { margin-left: 20rem; }
.article-content pre.ql-syntax {
    background: var(--color-primary);
    color: #e2e8f0;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 1.5rem 0;
}
.article-content iframe.ql-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: var(--radius-md);
    margin: 1.5rem 0;
    box-shadow: var(--shadow-sm);
}
.article-content a { word-break: break-word; }

/* Styles SummerNote - Paragraphes spéciaux (citations, etc.) */
.article-content p.text-center {
    text-align: center !important;
}
.article-content p.text-left {
    text-align: left !important;
}
.article-content p.text-right {
    text-align: right !important;
}
.article-content p.text-justify {
    text-align: justify !important;
}

/* Styles SummerNote - Sauts de ligne et espaces */
.article-content br {
    display: block !important;
    margin: 0.5rem 0 !important;
    content: "" !important;
}

/* Styles SummerNote - Éléments de formatage RENFORCÉS */
.article-content strong, .article-content b { 
    font-weight: 700 !important; 
    color: var(--color-primary) !important; 
    display: inline !important;
}
.article-content em, .article-content i { 
    font-style: italic !important; 
    color: var(--color-text) !important;
    display: inline !important;
}
.article-content u, .article-content .underline { 
    text-decoration: underline !important; 
    color: var(--color-text) !important;
    display: inline !important;
}
.article-content s, .article-content .strikethrough { 
    text-decoration: line-through !important; 
    color: var(--color-text-muted) !important;
    display: inline !important;
}
.article-content sup, .article-content .superscript { 
    font-size: 0.75em !important; 
    vertical-align: super !important; 
    color: var(--color-text-muted) !important;
    display: inline !important;
}
.article-content sub, .article-content .subscript { 
    font-size: 0.75em !important; 
    vertical-align: sub !important; 
    color: var(--color-text-muted) !important;
    display: inline !important;
}

/* Styles SummerNote - Listes AMÉLIORÉES */
.article-content ul, .article-content ol { 
    margin: 1.5rem 0 !important; 
    padding-left: 2rem !important;
}
.article-content ul { 
    list-style-type: disc !important;
}
.article-content ol { 
    list-style-type: decimal !important;
}
.article-content li { 
    margin-bottom: 0.8rem !important; 
    line-height: 1.7 !important;
    color: var(--color-text) !important;
}
.article-content li::marker { 
    color: var(--color-accent) !important; 
    font-weight: bold !important;
}

/* Styles SummerNote - Citations */
.article-content blockquote { 
    border-left: 4px solid var(--color-accent) !important; 
    background: var(--color-accent-glow) !important; 
    padding: 1.5rem 2rem !important; 
    margin: 2rem 0 !important; 
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; 
    font-family: var(--font-heading) !important; 
    font-style: italic !important; 
    font-size: 1.1rem !important; 
    line-height: 1.6 !important; 
    color: var(--color-primary) !important;
}

/* Styles SummerNote - Tableaux */
.article-content table { 
    display: block !important; 
    width: 100% !important; 
    max-width: 100% !important; 
    overflow-x: auto !important; 
    margin: 1.5rem 0 !important; 
    background: var(--color-white) !important; 
    border-radius: var(--radius-md) !important; 
    box-shadow: var(--shadow-sm) !important;
}
.article-content table th, .article-content table td { 
    padding: 1rem 1.5rem !important; 
    text-align: left !important; 
    border-bottom: 1px solid var(--color-border) !important;
}
.article-content table th { 
    background: var(--color-bg-alt) !important; 
    font-family: var(--font-heading) !important; 
    font-weight: 600 !important; 
    color: var(--color-primary) !important;
}
.article-content table tr:last-child td { 
    border-bottom: none !important;
}
.article-content table tr:hover { 
    background: var(--color-bg-alt) !important;
}

/* Styles SummerNote - Images */
.article-content img { 
    max-width: 100% !important; 
    height: auto !important; 
    border-radius: var(--radius-md) !important; 
    margin: 1.5rem 0 !important; 
    box-shadow: var(--shadow-sm) !important;
}
.article-content img.align-left { 
    float: left !important; 
    margin: 0 1.5rem 1.5rem 0 !important; 
    max-width: 50% !important;
}
.article-content img.align-right { 
    float: right !important; 
    margin: 0 0 1.5rem 1.5rem !important; 
    max-width: 50% !important;
}
.article-content img.align-center { 
    display: block !important; 
    margin: 1.5rem auto !important;
}

/* Styles SummerNote - Videos */
.article-content iframe { 
    max-width: 100% !important; 
    height: auto !important; 
    border-radius: var(--radius-md) !important; 
    margin: 1.5rem 0 !important; 
    box-shadow: var(--shadow-sm) !important;
}
.article-content .video-container { 
    position: relative !important; 
    padding-bottom: 56.25% !important; 
    height: 0 !important; 
    overflow: hidden !important; 
    margin: 1.5rem 0 !important;
}
.article-content .video-container iframe { 
    position: absolute !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 100% !important;
}

/* Styles SummerNote - Séparateurs */
.article-content hr { 
    border: none !important; 
    height: 2px !important; 
    background: linear-gradient(90deg, var(--color-accent-glow), var(--color-accent), var(--color-accent-glow)) !important; 
    margin: 3rem 0 !important; 
    border-radius: 1px !important;
}

/* Styles SummerNote - Liens */
.article-content a { 
    color: var(--color-accent) !important; 
    text-decoration: underline !important;
    transition: color 0.3s ease !important;
}
.article-content a:hover { 
    color: var(--color-primary) !important;
}

/* Sidebar */
.sidebar { position:sticky; top:100px; }
.sidebar-widget { background:var(--color-white); border-radius:var(--radius-lg); padding:var(--space-xl); margin-bottom:var(--space-xl); box-shadow:var(--shadow-card); border:1px solid var(--color-border-light); }
.sidebar-widget h4 { font-family:var(--font-heading); font-size:1.1rem; margin-bottom:var(--space-lg); padding-bottom:var(--space-sm); border-bottom:2px solid var(--color-accent-glow); }
.sidebar-author { text-align:center; }
.sidebar-author img { width:80px; height:80px; border-radius:50%; object-fit:cover; margin:0 auto var(--space-md); border:3px solid var(--color-accent-glow); }
.sidebar-author h5 { font-family:var(--font-heading); margin-bottom:var(--space-xs); }
.sidebar-author p { font-size:0.9rem; color:var(--color-text-light); }
.sidebar-popular-item { display:flex; gap:var(--space-md); padding:var(--space-md) 0; border-bottom:1px solid var(--color-border-light); }
.sidebar-popular-item:last-child { border-bottom:none; padding-bottom:0; }
.sidebar-popular-item .number { font-family:var(--font-heading); font-size:1.5rem; font-weight:700; color:var(--color-accent); min-width:30px; }
.sidebar-popular-item h5 { font-size:0.95rem; font-weight:600; line-height:1.4; }
.sidebar-popular-item h5 a { color:var(--color-text); }
.sidebar-popular-item h5 a:hover { color:var(--color-accent); }
.sidebar-popular-item .views { font-size:0.8rem; color:var(--color-text-muted); margin-top:var(--space-xs); }

/* Forms */
.form-group { margin-bottom:var(--space-lg); }
.form-group label { display:block; font-weight:600; font-size:0.9rem; margin-bottom:var(--space-sm); color:var(--color-text); }
.form-control { width:100%; padding:0.8rem 1rem; font-family:var(--font-body); font-size:0.95rem; color:var(--color-text); background:var(--color-white); border:2px solid var(--color-border); border-radius:var(--radius-md); transition:all var(--transition-fast); outline:none; }
.form-control:focus { border-color:var(--color-primary); box-shadow:0 0 0 4px rgba(15,23,42,0.08); }
.form-control::placeholder { color:var(--color-text-muted); }
textarea.form-control { resize:vertical; min-height:120px; }
select.form-control { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; }
.form-inline { display:flex; gap:var(--space-sm); }
.form-inline .form-control { flex:1; }

/* Flash Messages */
.flash-message { display:flex; align-items:center; justify-content:space-between; padding:var(--space-md) var(--space-lg); border-radius:var(--radius-md); margin-bottom:var(--space-xl); font-weight:500; animation:slideDown 0.4s ease; }
.flash-success { background:rgba(5,150,105,0.1); color:var(--color-success); border:1px solid rgba(5,150,105,0.2); }
.flash-error { background:rgba(220,38,38,0.1); color:var(--color-error); border:1px solid rgba(220,38,38,0.2); }
.flash-info { background:rgba(37,99,235,0.1); color:var(--color-info); border:1px solid rgba(37,99,235,0.2); }
.flash-close { background:none; border:none; font-size:1.25rem; cursor:pointer; opacity:0.7; color:inherit; }
.flash-close:hover { opacity:1; }

/* Comments */
.comments-section { margin-top:var(--space-3xl); padding-top:var(--space-3xl); border-top:1px solid var(--color-border); }
.comment { padding:var(--space-lg); background:var(--color-bg-alt); border-radius:var(--radius-md); margin-bottom:var(--space-md); }
.comment-header { display:flex; align-items:center; gap:var(--space-md); margin-bottom:var(--space-md); }
.comment-avatar { width:42px; height:42px; border-radius:50%; background:var(--color-primary); color:var(--color-white); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem; }
.comment-info h5 { font-family:var(--font-body); font-size:0.95rem; font-weight:600; }
.comment-info span { font-size:0.8rem; color:var(--color-text-muted); }
.comment p { font-size:0.95rem; color:var(--color-text); line-height:1.6; margin-bottom:0; }

/* Newsletter */
.newsletter-section { background:var(--color-primary); padding:var(--space-3xl) 0; text-align:center; }
.newsletter-section h2 { color:var(--color-white); margin-bottom:var(--space-sm); }
.newsletter-section p { color:rgba(255,255,255,0.7); margin-bottom:var(--space-xl); max-width:500px; margin-left:auto; margin-right:auto; }
.newsletter-form { max-width:480px; margin:0 auto; }
.newsletter-form .form-inline { background:rgba(255,255,255,0.1); padding:var(--space-xs); border-radius:var(--radius-md); border:1px solid rgba(255,255,255,0.15); }
.newsletter-form .form-control { background:transparent; border:none; color:var(--color-white); }
.newsletter-form .form-control::placeholder { color:rgba(255,255,255,0.5); }
.newsletter-form .form-control:focus { box-shadow:none; }
.newsletter-form .btn { white-space:nowrap; }

/* Unified public interface */
body { background:#f8f8f6; }
main { overflow-x:hidden; }
.navbar { background:rgba(255,255,255,.9); border-bottom-color:rgba(15,23,42,.08); }
.navbar-inner { height:80px; }
.navbar-logo { font-size:1.35rem; letter-spacing:-.03em; }
.navbar-logo-icon { width:42px; height:42px; border-radius:50%; border:1px solid rgba(201,162,39,.42); box-shadow:inset 0 0 0 4px rgba(201,162,39,.1); }
.navbar-nav { gap:.25rem; }
.navbar-nav a { padding:.6rem .8rem; font-size:.9rem; }
.navbar-nav a:hover,.navbar-nav a.nav-active { background:transparent; color:var(--color-accent); }
.navbar-nav a.nav-active::after { bottom:-2px; width:24px; }
.navbar-cta { border:1px solid var(--color-primary); box-shadow:0 6px 16px rgba(15,23,42,.12); }
.section { padding:clamp(4.5rem,8vw,7.5rem) 0; }
.section-alt { background:#f0f2f1; }
.section-header { max-width:700px; margin-right:auto; margin-left:auto; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-header h1,.section-header h2 { font-size:clamp(2.15rem,4vw,3.35rem); line-height:1.12; }
.heading-decorated::after { width:46px; height:2px; }
.page-hero { position:relative; padding-top:clamp(4rem,7vw,6.5rem); padding-bottom:clamp(3.5rem,6vw,5.5rem); background:linear-gradient(120deg,#fff 0%,#f4f1e7 100%); border-bottom:1px solid rgba(15,23,42,.07); }
.page-hero::before { content:''; position:absolute; width:450px; height:450px; top:-240px; right:-100px; border:1px solid rgba(201,162,39,.25); border-radius:50%; box-shadow:0 0 0 60px rgba(201,162,39,.045),0 0 0 120px rgba(201,162,39,.025); pointer-events:none; }
.page-hero .container { position:relative; z-index:1; }
.page-hero .hero-label { color:#5c4105; background:linear-gradient(135deg,#d9b63e,#b8912a); border-color:rgba(120,85,10,.45); box-shadow:0 2px 10px rgba(201,162,39,.3),inset 0 1px 0 rgba(255,255,255,.35); }
.page-hero .hero-label::before { content:'\2696'; color:#4d3503; }
.page-hero .hero-stats { border-top-color:rgba(15,23,42,.12); }
.page-hero .hero-stat-number { color:var(--color-primary); }
.page-hero .hero-stat-label { color:var(--color-text-muted); }
.card { border:1px solid rgba(15,23,42,.08); border-radius:18px; box-shadow:0 8px 24px rgba(15,23,42,.055); }
.card:hover { box-shadow:0 18px 36px rgba(15,23,42,.12); transform:translateY(-6px); }
.card-image { aspect-ratio:16/9; }
.card-image::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(15,23,42,.18)); pointer-events:none; }
.card-body { padding:1.5rem; }
.card-body h3 { font-size:1.28rem; line-height:1.35; }
.badge { padding:.32rem .72rem; font-size:.67rem; letter-spacing:.08em; }
.badge-on-image { top:1rem; left:1rem; }
.card-meta { gap:1rem; color:var(--color-text-muted); }
.about-hero { gap:clamp(2.5rem,6vw,5.5rem); }
.about-photo { position:relative; border-radius:18px; box-shadow:18px 18px 0 var(--color-accent-glow),var(--shadow-xl); }
.about-photo img { height:530px; }
.about-expertise { grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.expertise-card { padding:2rem 1.4rem; border-radius:16px; box-shadow:none; border-color:rgba(15,23,42,.09); }
.expertise-card:hover { border-color:rgba(201,162,39,.55); box-shadow:0 16px 32px rgba(15,23,42,.08); }
.expertise-icon { width:52px; height:52px; border-radius:50%; }
.article-header { text-align:left; background:linear-gradient(120deg,#fff 0%,#f4f1e7 100%); }
.article-header h1 { max-width:900px; margin:1rem 0 1.25rem; font-size:clamp(2.35rem,5vw,4.3rem); line-height:1.08; }
.article-meta-header { justify-content:flex-start; flex-wrap:wrap; gap:.65rem 1.4rem; font-size:.88rem; }
.article-cover { max-height:560px; border-radius:18px; box-shadow:0 20px 42px rgba(15,23,42,.14); }
.article-layout { gap:clamp(2.5rem,5vw,5rem); }
.article-content p { font-size:1.08rem; line-height:1.95; }
.article-content h2 { margin-top:3.5rem; font-size:1.8rem; }
.sidebar-widget,.admin-card { border-radius:16px; border-color:rgba(15,23,42,.08); box-shadow:0 8px 22px rgba(15,23,42,.05); }
.sidebar-widget { padding:1.5rem; }
.category-filter { gap:.6rem; margin-bottom:3rem; }
.category-filter a { padding:.55rem 1rem; background:var(--color-white); border-radius:50px; }
.category-filter a:hover,.category-filter a.active { background:var(--color-primary); box-shadow:0 6px 14px rgba(15,23,42,.13); }
.contact-layout { gap:clamp(2rem,6vw,5rem); }
.contact-info-card { padding:1.35rem; background:var(--color-white); border:1px solid rgba(15,23,42,.08); border-radius:14px; box-shadow:0 5px 15px rgba(15,23,42,.035); }
.contact-info-icon { border-radius:50%; }
.form-control { border-width:1px; border-radius:8px; padding:.9rem 1rem; }
.form-control:focus { border-color:var(--color-accent); box-shadow:0 0 0 4px rgba(201,162,39,.15); }
.comments-section { border-top-color:rgba(15,23,42,.1); }
.comment { border:1px solid rgba(15,23,42,.07); background:var(--color-white); border-radius:12px; }
.footer { position:relative; padding-top:clamp(4rem,7vw,6rem); background:#0b1222; }
.footer::before { content:''; position:absolute; inset:0 0 auto; height:2px; background:linear-gradient(90deg,transparent,var(--color-accent),transparent); }
.footer-grid { gap:3rem; }
.footer h4 { letter-spacing:.04em; text-transform:uppercase; font-size:.72rem; color:var(--color-accent-light); }
.footer-about p { max-width:340px; }
.social-link { border:1px solid rgba(255,255,255,.12); }
.footer-bottom-content { flex-wrap:wrap; gap:.75rem 1.5rem; }
.footer-bottom-contact { color:rgba(255,255,255,.72); font-size:.8rem; }
.footer-bottom-contact span { color:var(--color-accent); margin:0 .35rem; }
.footer-credit { margin:1.5rem 0 0; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.12); text-align:center; }
.footer-credit-made { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.45rem; color:rgba(255,255,255,.55); font-size:.78rem; letter-spacing:.04em; margin:0 0 .45rem; }
.footer-credit-made svg { color:var(--color-accent); }
.footer-credit-made a { color:var(--color-accent-light); font-weight:600; transition:color var(--transition-fast); }
.footer-credit-made a:hover { color:var(--color-accent); }
.footer-credit-contact { color:rgba(255,255,255,.5); font-size:.72rem; margin:0; }
.footer-credit-contact a { color:rgba(255,255,255,.65); transition:color var(--transition-fast); }
.footer-credit-contact a:hover { color:var(--color-accent); }
.footer-credit-sep { color:var(--color-accent); margin:0 .4rem; opacity:.7; }
.footer-developer-contact { display:none; }
@media (max-width:1024px) { .about-expertise { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px) { .navbar-inner { height:70px; } .page-hero::before { width:280px; height:280px; top:-160px; right:-120px; } .article-header h1 { font-size:2.25rem; } .article-meta-header { justify-content:flex-start; } .about-expertise { grid-template-columns:1fr; } .footer-bottom-content { justify-content:center; text-align:center; flex-direction:column; } }

/* Motion and tonal continuity */
.hero { box-shadow:0 22px 45px rgba(15,23,42,.14); }
.section-intro { position:relative; background:linear-gradient(180deg,#dce2db 0%,#f8f8f6 55%); }
.hero + .section:not(.section-intro) { position:relative; background:linear-gradient(180deg,#dce2db 0%,#f5f6f2 55%); }
.section-intro::before { content:''; position:absolute; top:0; right:0; left:0; height:110px; background:linear-gradient(180deg,rgba(15,23,42,.12),transparent); pointer-events:none; }
.hero + .section:not(.section-intro)::before { content:''; position:absolute; top:0; right:0; left:0; height:110px; background:linear-gradient(180deg,rgba(15,23,42,.12),transparent); pointer-events:none; }
.section-intro .container { position:relative; z-index:1; }
.hero + .section:not(.section-intro) .container { position:relative; z-index:1; }
.section-alt { background:linear-gradient(135deg,#edf1ec 0%,#f5f4ee 100%); }
.hero-enter { animation:heroContentIn .8s cubic-bezier(.2,.8,.2,1) both; }
.hero-visual-enter { animation:heroVisualIn 1s .12s cubic-bezier(.2,.8,.2,1) both; }
@keyframes heroContentIn { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes heroVisualIn { from { opacity:0; transform:translate(26px,18px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes revealUp { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
@keyframes revealLeft { from { opacity:0; transform:translateX(-26px); } to { opacity:1; transform:translateX(0); } }
@keyframes revealRight { from { opacity:0; transform:translateX(26px); } to { opacity:1; transform:translateX(0); } }
.animate-on-scroll { transition:none; will-change:transform,opacity; }
.animate-on-scroll.visible { animation:revealUp .7s var(--reveal-delay,0ms) cubic-bezier(.2,.75,.25,1) both; }
.animate-on-scroll.visible.reveal-left { animation-name:revealLeft; }
.animate-on-scroll.visible.reveal-right { animation-name:revealRight; }
.card,.expertise-card,.contact-info-card,.social-link { transition:transform .32s cubic-bezier(.2,.75,.25,1),box-shadow .32s ease,border-color .32s ease,background-color .32s ease; }
.hero-image-orbit-one { animation:orbitPulse 5s ease-in-out infinite; }
.hero-image-orbit-two { animation:orbitPulse 4s 1s ease-in-out infinite reverse; }
@keyframes orbitPulse { 50% { transform:translateY(-10px) scale(1.06); opacity:.55; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }