/* ═══════════════════════════════════════
   DIGIMILS — SHARED STYLESHEET
   Used by every page. Page-specific styles
   live in a small <style> block in each file.
═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   TOKENS
═══════════════════════════════════════ */
:root {
  --bg:        #F7F5F2;
  --bg-alt:    #EEEAE4;
  --surface:   #FFFFFF;
  --border:    rgba(18,17,16,.11);
  --text:      #121110;
  --text-2:    rgba(0,0,0,.55);
  --accent:    #1A3A8F;
  --accent-2:  #0F2560;
  --gold:      #C9933A;
  --nav-bg:    #F7F5F2;
  --card-bg:   #FFFFFF;
  --tag-bg:    #E8EEF8;
  --tag-text:  #1A3A8F;
  --radius:    10px;
}
[data-theme="dark"] {
  --bg:        #0E0D0C;
  --bg-alt:    #181614;
  --surface:   #1C1A18;
  --border:    rgba(247,245,242,.09);
  --text:      #F0EDE8;
  --text-2:    rgba(240,237,232,.48);
  --accent:    #5B82E0;
  --accent-2:  #3D61C2;
  --gold:      #D4A44C;
  --nav-bg:    #0E0D0C;
  --card-bg:   #1C1A18;
  --tag-bg:    #1A2340;
  --tag-text:  #7EA4F0;
}

/* ═══════════════════════════════════════
   BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
  transition: background .3s, color .3s;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.container  { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px,5vw,56px); }
.f-display  { font-family: 'DM Serif Display', serif; }
.f-syne     { font-family: 'Syne', sans-serif; }

/* ═══════════════════════════════════════
   REVEAL
═══════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }

/* ═══════════════════════════════════════
   THEME TOGGLE
═══════════════════════════════════════ */
.theme-wrap { display:flex; align-items:center; gap:8px; }
.theme-icon { font-size:.8rem; color:var(--text-2); line-height:1; user-select:none; }
.theme-btn {
  width:44px; height:24px; background:var(--bg-alt);
  border:1.5px solid var(--border); border-radius:9999px; position:relative;
  cursor:pointer; transition:background .25s; flex-shrink:0;
}
.theme-btn::after {
  content:''; position:absolute; left:2px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%; background:var(--accent);
  transition:left .25s, background .25s;
}
[data-theme="dark"] .theme-btn::after { left:calc(100% - 20px); }

/* ═══════════════════════════════════════
   HEADER / NAV
═══════════════════════════════════════ */
.site-header {
  position: sticky; top:0; z-index:100;
  background: var(--nav-bg); border-bottom: 1px solid var(--border);
  transition: background .3s, border-color .3s;
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:64px; max-width:1200px; margin:0 auto;
  padding:0 clamp(20px,5vw,56px);
}
.nav-logo { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:800; letter-spacing:-.02em; color:var(--text); background:none; border:none; }
.nav-logo span { color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:36px; }
.nav-links a { font-size:.8rem; font-weight:500; color:var(--text-2); letter-spacing:.01em; transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--text); }
.nav-right { display:flex; align-items:center; gap:16px; }
.nav-cta {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff;
  font-family:'Syne',sans-serif; font-size:.75rem; font-weight:700;
  letter-spacing:.04em; padding:9px 20px; border-radius:6px;
  border:none; cursor:pointer; transition:background .2s, transform .15s;
}
.nav-cta:hover { background:var(--accent-2); transform:translateY(-1px); }

.menu-btn { display:none; background:none; border:none; cursor:pointer; color:var(--text); padding:4px; }

.mobile-nav {
  display:none; flex-direction:column; gap:4px;
  padding:8px clamp(20px,5vw,56px) 20px;
  background:var(--nav-bg); border-bottom:1px solid var(--border);
}
.mobile-nav.open { display:flex; }
.mobile-nav a { font-size:.95rem; font-weight:500; color:var(--text); padding:10px 0; border-bottom:1px solid var(--border); }
.mobile-nav a:last-child { border-bottom:none; }

@media (max-width:767px) {
  .nav-links { display:none; }
  .menu-btn  { display:block; }
}
@media (max-width:480px) {
  .nav-cta .cta-label { display:none; }
}

/* ═══════════════════════════════════════
   PAGE HEADER (for interior pages)
═══════════════════════════════════════ */
.page-hero { padding: clamp(48px,7vw,80px) 0 clamp(32px,5vw,56px); border-bottom:1px solid var(--border); }
.page-kicker { display:block; margin-bottom:16px; }
.page-title {
  font-family:'DM Serif Display',serif;
  font-size:clamp(2rem,4.5vw,3.6rem);
  font-weight:400; line-height:1.08; letter-spacing:-.02em;
  color:var(--text); max-width:34rem;
}
.page-title em { font-style:italic; color:var(--accent); }
.page-lede { font-size:clamp(.92rem,1.6vw,1.05rem); line-height:1.8; color:var(--text-2); max-width:34rem; margin-top:20px; }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.hero-actions, .actions-row { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--accent); color:#fff;
  font-family:'Syne',sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.04em; padding:13px 26px; border-radius:6px;
  border:none; cursor:pointer; transition:background .2s, transform .15s;
}
.btn-primary:hover { background:var(--accent-2); transform:translateY(-2px); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; color:var(--text);
  font-family:'Syne',sans-serif; font-size:.8rem; font-weight:600;
  padding:12px 24px; border-radius:6px;
  border:1.5px solid var(--border); cursor:pointer;
  transition:border-color .2s, color .2s;
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

/* ═══════════════════════════════════════
   SECTION HEADERS
═══════════════════════════════════════ */
.services-section, .about-section, .tools-section, .contact-section, .blog-section { padding:clamp(56px,8vw,96px) 0; border-bottom:1px solid var(--border); }
.section-header   { margin-bottom:clamp(32px,5vw,56px); }
.section-kicker {
  font-family:'Syne',sans-serif; font-size:.7rem; font-weight:700;
  letter-spacing:.12em; color:var(--accent); margin-bottom:14px; display:block;
}
.section-title {
  font-family:'DM Serif Display',serif;
  font-size:clamp(1.8rem,4vw,3.2rem);
  font-weight:400; line-height:1.1; color:var(--text); max-width:28rem;
}
.section-title em { font-style:italic; color:var(--accent); }

/* ═══════════════════════════════════════
   SERVICES GRID
═══════════════════════════════════════ */
.services-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
@media (max-width:640px) { .services-grid { grid-template-columns:1fr; } }
.service-tile { background:var(--card-bg); padding:clamp(24px,4vw,40px) clamp(20px,3vw,36px); transition:background .2s; position:relative; }
.service-tile:hover { background:var(--bg-alt); }
.service-icon {
  width:44px; height:44px; background:var(--tag-bg); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; color:var(--accent);
}
.service-name { font-family:'DM Serif Display',serif; font-size:clamp(1.15rem,2vw,1.4rem); font-weight:400; color:var(--text); margin-bottom:12px; }
.service-desc { font-size:.87rem; line-height:1.75; color:var(--text-2); }

/* ═══════════════════════════════════════
   ABOUT
═══════════════════════════════════════ */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:start; }
@media (max-width:900px) { .about-grid { grid-template-columns:1fr; gap:40px; } }
.about-photo-frame { position:relative; }
.about-photo-frame img {
  width:100%; height:clamp(320px,40vw,520px); object-fit:contain; object-position:center top;
  border-radius:12px; box-shadow:0 24px 64px rgba(18,17,16,.12);
}
[data-theme="dark"] .about-photo-frame img { box-shadow:0 24px 64px rgba(0,0,0,.4); }
.about-kicker { display:block; margin-bottom:16px; }
.about-title { font-family:'DM Serif Display',serif; font-size:clamp(1.7rem,3.5vw,2.8rem); font-weight:400; line-height:1.15; margin-bottom:28px; color:var(--text); }
.about-title em { font-style:italic; color:var(--accent); }
.about-body { font-size:.93rem; line-height:1.85; color:var(--text-2); margin-bottom:16px; }
.about-sign { display:inline-block; margin-top:16px; font-size:.82rem; font-weight:500; color:var(--accent); border-left:2px solid var(--accent); padding-left:12px; }

/* ═══════════════════════════════════════
   TOOLS
═══════════════════════════════════════ */
.tools-section { background:var(--bg-alt); transition:background .3s; }
.tools-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.5vw,24px); margin-top:clamp(32px,4vw,48px); }
@media (max-width:768px) { .tools-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .tools-grid { grid-template-columns:1fr; } }
.tool-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(20px,3vw,32px) clamp(16px,2.5vw,28px); transition:background .3s, border-color .2s; }
.tool-card:hover { border-color:var(--accent); }
.tool-card-title { font-family:'DM Serif Display',serif; font-size:1.1rem; color:var(--text); margin-bottom:16px; }
.tool-chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { font-size:.7rem; font-weight:500; background:var(--tag-bg); color:var(--tag-text); padding:5px 10px; border-radius:4px; }

/* ═══════════════════════════════════════
   CONTACT
═══════════════════════════════════════ */
.contact-section { border-bottom: none; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:start; }
@media (max-width:768px) { .contact-grid { grid-template-columns:1fr; gap:40px; } }
.contact-title { font-family:'DM Serif Display',serif; font-size:clamp(1.8rem,4vw,3.2rem); font-weight:400; line-height:1.1; color:var(--text); margin-bottom:16px; }
.contact-title em { font-style:italic; color:var(--accent); }
.contact-body { font-size:.93rem; line-height:1.8; color:var(--text-2); max-width:26rem; }
.contact-meta { margin-top:40px; display:flex; flex-direction:column; gap:16px; }
.contact-meta-row { display:flex; align-items:center; gap:12px; font-size:.87rem; color:var(--text-2); }
.contact-meta-icon { width:36px; height:36px; background:var(--tag-bg); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0; }

.contact-form { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:clamp(24px,4vw,40px) clamp(20px,3.5vw,36px); transition:background .3s, border-color .3s; }
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:.75rem; font-weight:600; color:var(--text-2); margin-bottom:8px; letter-spacing:.03em; }
.form-input, .form-select, .form-textarea {
  width:100%; background:var(--bg); border:1.5px solid var(--border); border-radius:6px; padding:11px 14px;
  font-family:'Inter',sans-serif; font-size:.9rem; color:var(--text);
  outline:none; transition:border-color .2s, background .3s; -webkit-appearance:none; appearance:none;
}
.form-textarea { resize:vertical; min-height:120px; font-family:'Inter',sans-serif; }
.form-input::placeholder, .form-textarea::placeholder { color:var(--text-2); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--accent); }
.form-select { cursor:pointer; }
.form-select option { background:var(--card-bg); color:var(--text); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px) { .form-row { grid-template-columns:1fr; } }
.form-submit {
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--accent); color:#fff;
  font-family:'Syne',sans-serif; font-size:.82rem; font-weight:700;
  letter-spacing:.04em; padding:14px 28px; border-radius:6px;
  border:none; cursor:pointer; margin-top:8px; transition:background .2s, transform .15s;
}
.form-submit:hover { background:var(--accent-2); transform:translateY(-1px); }
.form-submit:disabled { opacity:.6; cursor:default; transform:none; }

/* ═══════════════════════════════════════
   BLOG — cards, listing, single post
═══════════════════════════════════════ */
.blog-filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(28px,4vw,40px); }
.blog-filter {
  font-family:'Syne',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.03em;
  padding:8px 16px; border-radius:999px; border:1.5px solid var(--border);
  color:var(--text-2); background:transparent; cursor:pointer; transition:.2s;
}
.blog-filter:hover { border-color:var(--accent); color:var(--text); }
.blog-filter.active { background:var(--accent); border-color:var(--accent); color:#fff; }

.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,28px); }
@media (max-width:960px) { .blog-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .blog-grid { grid-template-columns:1fr; } }

.blog-card {
  display:flex; flex-direction:column; background:var(--card-bg);
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  transition:border-color .2s, transform .2s;
}
.blog-card:hover { border-color:var(--accent); transform:translateY(-3px); }
.blog-card-media { aspect-ratio:16/10; background:var(--bg-alt); overflow:hidden; }
.blog-card-media img { width:100%; height:100%; object-fit:cover; }
.blog-card-body { padding:22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.blog-card-cat { font-family:'Syne',sans-serif; font-size:.68rem; font-weight:700; letter-spacing:.06em; color:var(--accent); }
.blog-card-title { font-family:'DM Serif Display',serif; font-size:1.2rem; line-height:1.3; color:var(--text); }
.blog-card-excerpt { font-size:.84rem; line-height:1.65; color:var(--text-2); flex:1; }
.blog-card-meta { font-size:.72rem; color:var(--text-2); opacity:.8; margin-top:6px; }
.blog-empty { padding:60px 0; text-align:center; color:var(--text-2); font-size:.9rem; }

.pagination { display:flex; justify-content:center; gap:8px; margin-top:clamp(36px,5vw,56px); }
.pagination a, .pagination span {
  min-width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border); border-radius:8px; font-size:.82rem; color:var(--text-2);
}
.pagination a:hover { border-color:var(--accent); color:var(--text); }
.pagination .current { background:var(--accent); border-color:var(--accent); color:#fff; }

/* single post */
.post-header { padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,40px); border-bottom:1px solid var(--border); }
.post-cat { font-family:'Syne',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.08em; color:var(--accent); display:block; margin-bottom:16px; }
.post-title { font-family:'DM Serif Display',serif; font-size:clamp(1.9rem,4.5vw,3rem); line-height:1.12; color:var(--text); max-width:44rem; }
.post-meta { display:flex; gap:16px; flex-wrap:wrap; margin-top:22px; font-size:.8rem; color:var(--text-2); }
.post-cover { margin:clamp(28px,4vw,44px) 0; border-radius:12px; overflow:hidden; box-shadow:0 24px 64px rgba(18,17,16,.1); }
[data-theme="dark"] .post-cover { box-shadow:0 24px 64px rgba(0,0,0,.4); }
.post-cover img { width:100%; max-height:480px; object-fit:cover; }

.post-body {
  max-width:44rem; font-size:1rem; line-height:1.85; color:var(--text-2);
  padding:clamp(8px,2vw,16px) 0 clamp(48px,7vw,80px);
}
.post-body h2 { font-family:'DM Serif Display',serif; font-size:1.5rem; color:var(--text); margin:36px 0 14px; line-height:1.3; }
.post-body h3 { font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700; color:var(--text); margin:28px 0 10px; }
.post-body p { margin-bottom:18px; }
.post-body ul, .post-body ol { margin:0 0 18px 1.4rem; }
.post-body li { margin-bottom:8px; }
.post-body a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.post-body blockquote {
  border-left:3px solid var(--accent); padding:4px 0 4px 20px; margin:24px 0;
  font-family:'DM Serif Display',serif; font-style:italic; font-size:1.1rem; color:var(--text);
}
.post-body img { border-radius:10px; margin:20px 0; }
.post-body strong { color:var(--text); font-weight:600; }

/* listicle numbering — only applied when a post is marked as a listicle */
.post-body.is-listicle ol { list-style:none; margin-left:0; counter-reset:listicle; }
.post-body.is-listicle ol > li {
  counter-increment: listicle; position:relative;
  padding:20px 20px 20px 64px; margin-bottom:14px;
  background:var(--card-bg); border:1px solid var(--border); border-radius:10px;
}
.post-body.is-listicle ol > li::before {
  content: counter(listicle); position:absolute; left:18px; top:18px;
  font-family:'DM Serif Display',serif; font-size:1.3rem; color:var(--accent);
}

.post-back { display:inline-flex; align-items:center; gap:8px; font-size:.82rem; color:var(--text-2); margin-bottom:28px; }
.post-back:hover { color:var(--accent); }

.share-row { display:flex; gap:10px; align-items:center; margin-top:12px; }
.share-row a {
  width:34px; height:34px; border:1px solid var(--border); border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:var(--text-2); transition:.2s;
}
.share-row a:hover { color:var(--accent); border-color:var(--accent); }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.site-footer { background:var(--bg-alt); border-top:1px solid var(--border); padding:clamp(24px,4vw,36px) 0; transition:background .3s; }
.footer-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.footer-logo { font-family:'Syne',sans-serif; font-size:1rem; font-weight:800; color:var(--text); }
.footer-logo span { color:var(--accent); }
.footer-tagline { font-size:.78rem; color:var(--text-2); }
.footer-links { display:flex; gap:20px; flex-wrap:wrap; }
.footer-links a { font-size:.78rem; color:var(--text-2); transition:color .2s; }
.footer-links a:hover { color:var(--accent); }
.footer-socials { display:flex; gap:12px; align-items:center; }
.footer-socials button, .footer-socials a.icon-btn {
  width:36px; height:36px; background:var(--card-bg); border:1px solid var(--border); border-radius:8px;
  display:flex; align-items:center; justify-content:center; color:var(--text-2); cursor:pointer;
  transition:color .2s, border-color .2s;
}
.footer-socials button:hover, .footer-socials a.icon-btn:hover { color:var(--accent); border-color:var(--accent); }
.footer-copy { width:100%; font-size:.7rem; color:var(--text-2); padding-top:4px; }