/**
 * Kodimy Agency Design Layer (v1.2.0)
 * Professional marketing-agency look: deep navy + brand gradient, strong type scale,
 * calm spacing, flat cards with fine borders. Loaded LAST so it overrides older rules.
 */
:root {
  --k-navy: #0A1224;
  --k-navy-2: #101B33;
  --k-surface: #F5F7FB;
  --k-line: #E3E8F0;
  --k-muted: #5B6679;
  --k-ink: #0B1220;
  --k-radius: 16px;
}

body { color: var(--k-muted); font-size: 16.5px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--k-ink); font-family: var(--kodimy-font-headings); letter-spacing: -0.025em; }

/* ---------- Header ---------- */
#kodimy-header { background: rgba(255,255,255,.92) !important; backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--k-line); box-shadow: none !important; }
#kodimy-header .kodimy-header-inner { height: 76px; }
#kodimy-header nav a { font-size: 15px; font-weight: 500; color: var(--k-ink); }
#kodimy-header nav a:hover { color: #0E9F9A; }

/* ---------- Buttons ---------- */
body .btn-primary { border-radius: 999px !important; font-weight: 600 !important; letter-spacing: 0; box-shadow: 0 10px 26px -10px rgba(20,206,202,.65) !important; color: #06201E !important; }
body .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(20,206,202,.8) !important; }
body .btn-secondary { border-radius: 999px !important; font-weight: 600 !important; border: 1.5px solid var(--k-line) !important; background: #fff !important; color: var(--k-ink) !important; }
body .btn-secondary:hover { border-color: var(--kodimy-teal) !important; }

/* ---------- Section rhythm & headings ---------- */
.kodimy-homepage section { padding-top: 104px !important; padding-bottom: 104px !important; }
.kodimy-section-header { max-width: 760px; margin: 0 auto 56px !important; }
.kodimy-section-header h2 { font-size: clamp(2rem, 3.6vw, 2.9rem) !important; line-height: 1.12; font-weight: 700 !important; margin: 14px 0 16px !important; }
.kodimy-section-subhead { font-size: 1.1rem !important; color: var(--k-muted) !important; max-width: 640px; margin-left: auto; margin-right: auto; }
.kodimy-tag { background: transparent !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; font-size: .78rem !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase; color: #0E9F9A !important; box-shadow: none !important; }
.kodimy-tag::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--kodimy-gradient); margin-right: 10px; vertical-align: middle; border-radius: 2px; }
.kodimy-tag svg { display: none !important; }
.text-center .kodimy-tag::after { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--kodimy-gradient); margin-left: 10px; vertical-align: middle; border-radius: 2px; }

/* ---------- Hero (dark) ---------- */
.kodimy-hero-section { background: radial-gradient(900px 500px at 85% -10%, rgba(20,206,202,.28), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(104,154,232,.22), transparent 60%), var(--k-navy) !important; padding-top: 96px !important; padding-bottom: 110px !important; }
.kodimy-hero-section .kodimy-tag { color: #5EEAD4 !important; }
.kodimy-hero-title, .kodimy-hero-title * { color: #fff; }
.kodimy-hero-title { font-size: clamp(2.5rem, 5vw, 4.1rem) !important; line-height: 1.05 !important; font-weight: 700 !important; letter-spacing: -0.035em !important; }
.kodimy-hero-title .gradient-text { background: var(--kodimy-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kodimy-hero-subhead { color: #E7ECF5 !important; font-size: 1.25rem !important; font-weight: 500; }
.kodimy-hero-body, .kodimy-hero-body p { color: #AEB9CC !important; font-size: 1.05rem; }
.kodimy-hero-section .btn-secondary, .kodimy-hero-secondary-link { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.28) !important; }
.proof-label, .proof-score { color: #AEB9CC !important; }
.kodimy-hero-image-card { border-radius: 20px !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(94,234,212,.08) !important; }
.hero-floating-pill { background: rgba(10,18,36,.85) !important; color: #E7ECF5 !important; border: 1px solid rgba(255,255,255,.12) !important; }

/* ---------- Trust / marquee ---------- */
.kodimy-marquee-section { background: #fff; border-bottom: 1px solid var(--k-line); padding-top: 40px !important; padding-bottom: 40px !important; }
.marquee-header-label span { font-size: .75rem !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--k-muted) !important; font-weight: 600; }
.marquee-logo-card { background: transparent !important; border: 0 !important; box-shadow: none !important; filter: grayscale(1); opacity: .7; }
.marquee-logo-card:hover { filter: none; opacity: 1; }

/* ---------- Problem ---------- */
.kodimy-problem-section { background: #fff; }
.kodimy-problem-card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.problem-visual-wrapper img { border-radius: var(--k-radius); border: 1px solid var(--k-line); box-shadow: 0 30px 60px -40px rgba(10,18,36,.35); }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.problem-item { background: var(--k-surface) !important; border: 1px solid var(--k-line) !important; border-radius: var(--k-radius) !important; padding: 28px !important; box-shadow: none !important; }
.problem-item strong { display: block; color: var(--k-ink); font-size: 1.12rem; margin: 14px 0 6px; font-family: var(--kodimy-font-headings); }
.problem-item p { margin: 0; font-size: .98rem; }

/* ---------- Solution ---------- */
.kodimy-solution-section { background: var(--k-surface) !important; }
.kodimy-solution-bullets-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.kodimy-solution-bullet-card { background: #fff !important; border: 1px solid var(--k-line) !important; border-radius: var(--k-radius) !important; padding: 32px !important; display: flex; gap: 22px; box-shadow: none !important; transition: .25s; }
.kodimy-solution-bullet-card:hover { border-color: var(--kodimy-teal) !important; transform: translateY(-3px); box-shadow: 0 24px 48px -30px rgba(10,18,36,.3) !important; }
.bullet-number { font-family: var(--kodimy-font-headings); font-weight: 700; font-size: 2.2rem; line-height: 1; background: var(--kodimy-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; min-width: 52px; }
.bullet-content h3 { font-size: 1.2rem; margin: 0 0 8px; }

/* ---------- Pillars ---------- */
.kodimy-pillars-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.kodimy-pillar-card { background: #fff !important; border: 1px solid var(--k-line) !important; border-radius: 20px !important; overflow: hidden; box-shadow: none !important; transition: .25s; display: flex; flex-direction: column; }
.kodimy-pillar-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(10,18,36,.4) !important; border-color: rgba(20,206,202,.6) !important; }
.pillar-card-image-wrap { aspect-ratio: 16/9; overflow: hidden; }
.pillar-card-img { width: 100%; height: 100%; object-fit: cover; }
.pillar-card-top { padding: 28px 30px 8px !important; }
.pillar-card-top h3 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 12px; }
.pillar-card-bottom { padding: 8px 30px 28px !important; margin-top: auto; }
.pillar-link { font-weight: 600; color: #0E9F9A !important; }

/* ---------- Process ---------- */
.kodimy-process-section { background: var(--k-navy) !important; }
.kodimy-process-section .kodimy-section-header h2 { color: #fff !important; }
.kodimy-process-section .kodimy-section-subhead { color: #AEB9CC !important; }
.kodimy-process-grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.kodimy-process-card { background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: var(--k-radius) !important; padding: 30px 26px !important; box-shadow: none !important; }
.kodimy-process-card h3 { color: #fff !important; font-size: 1.2rem; }
.kodimy-process-card .step-body, .kodimy-process-card p { color: #AEB9CC !important; }
.step-num { font-family: var(--kodimy-font-headings); font-size: 2.6rem; font-weight: 700; background: var(--kodimy-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.process-step-indicator { background: transparent !important; border: 0 !important; box-shadow: none !important; width: auto !important; height: auto !important; margin-bottom: 14px; justify-content: flex-start !important; }

/* ---------- Directory ---------- */
.kodimy-directory-section { background: #fff; }

/* ---------- Results / FAQ ---------- */
.kodimy-results-section { background: var(--k-surface) !important; }
.project-card { border: 1px solid var(--k-line) !important; border-radius: 20px !important; background: #fff !important; box-shadow: none !important; overflow: hidden; transition: .25s; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(10,18,36,.4) !important; }
.kodimy-faq-section { background: #fff; }
.kodimy-faq-accordion { max-width: 860px; margin: 0 auto; }
.kodimy-faq-item { border: 1px solid var(--k-line) !important; border-radius: 14px !important; background: #fff !important; margin-bottom: 14px; box-shadow: none !important; }
.kodimy-faq-item[open] { border-color: rgba(20,206,202,.6) !important; }
.kodimy-faq-question { font-weight: 600; color: var(--k-ink); padding: 22px 26px !important; }
.kodimy-faq-answer { padding: 0 26px 24px !important; }

/* ---------- Final CTA ---------- */
.kodimy-final-cta-section { background: #fff; }
.kodimy-final-cta-card { background: radial-gradient(600px 300px at 90% 0%, rgba(20,206,202,.35), transparent 60%), var(--k-navy) !important; border-radius: 28px !important; padding: 72px 64px !important; box-shadow: none !important; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.kodimy-final-cta-card h2 { color: #fff !important; font-size: clamp(2rem, 3.6vw, 2.8rem); }
.kodimy-final-cta-card .final-cta-desc, .kodimy-final-cta-card p { color: #AEB9CC !important; }
.kodimy-final-cta-card .kodimy-tag { color: #5EEAD4 !important; }

/* ---------- Footer ---------- */
#kodimy-footer { background: var(--k-navy) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .kodimy-process-grid { grid-template-columns: repeat(2, 1fr); }
  .problem-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .kodimy-homepage section { padding-top: 64px !important; padding-bottom: 64px !important; }
  .kodimy-hero-section { padding-top: 56px !important; }
  .kodimy-solution-bullets-grid, .kodimy-pillars-grid, .kodimy-process-grid { grid-template-columns: 1fr; }
  .kodimy-final-cta-card { padding: 44px 26px !important; }
  .kodimy-solution-bullet-card { padding: 24px !important; }
}

/* ==========================================================================
   Inner pages: service, pillar, about, pricing, contact, portfolio, blog
   ========================================================================== */
.service-hero-section, .about-hero-section, .pillar-hero-section, .contact-hero-section, .pricing-hero-section, .portfolio-hero-section, .team-hero-section, .category-hero-section, .blog-hero-section {
  background: radial-gradient(800px 420px at 90% -10%, rgba(20,206,202,.25), transparent 60%), radial-gradient(600px 420px at 0% 100%, rgba(104,154,232,.2), transparent 60%), var(--k-navy) !important;
  padding-top: 88px !important; padding-bottom: 96px !important;
}
.service-hero-title, .about-hero-title, .pillar-hero-title, .service-hero-title *, .about-hero-title * { color: #fff !important; font-size: clamp(2.2rem, 4.4vw, 3.5rem) !important; line-height: 1.08 !important; font-weight: 700 !important; letter-spacing: -0.03em !important; }
.service-hero-intro, .service-hero-intro p, .about-hero-subhead, .about-hero-body, .about-hero-body p { color: #C3CCDB !important; font-size: 1.12rem; }
.service-hero-badge, .about-hero-badge { background: transparent !important; border: 0 !important; color: #5EEAD4 !important; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; font-weight: 700; }
.service-secondary-link, .about-secondary-link { color: #fff !important; }
.contact-hero-section .kodimy-section-header h1 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.4rem) !important; }
.contact-hero-section .kodimy-section-subhead { color: #C3CCDB !important; }
.contact-hero-section .kodimy-tag { color: #5EEAD4 !important; }
.contact-card, .contact-form-card { background: #fff !important; border: 1px solid var(--k-line) !important; border-radius: 18px !important; box-shadow: 0 30px 60px -40px rgba(0,0,0,.5) !important; }
.service-problem-section, .service-deliverables-section, .service-why-section, .service-faq-section { padding-top: 88px; padding-bottom: 88px; }
.service-problem-card, .service-why-card, .service-deliverable-card, .about-stat-card, .about-value-card { border: 1px solid var(--k-line) !important; border-radius: 16px !important; box-shadow: none !important; }
.service-problem-card:hover, .service-deliverable-card:hover { border-color: rgba(20,206,202,.6) !important; }

/* Breadcrumbs */
.kodimy-breadcrumb, .kodimy-breadcrumbs { font-size: .85rem; color: var(--k-muted); }

/* Blog / archive cards */
.blog-card, .team-card, .pricing-card { border: 1px solid var(--k-line) !important; border-radius: 18px !important; box-shadow: none !important; }
.blog-card:hover, .team-card:hover, .pricing-card:hover { border-color: rgba(20,206,202,.6) !important; transform: translateY(-3px); }

/* Footer polish */
#kodimy-footer, #kodimy-footer a { color: #AEB9CC; }
#kodimy-footer h4, #kodimy-footer h4 a { color: #fff !important; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
#kodimy-footer a:hover { color: #5EEAD4; }
.kodimy-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }

/* ==========================================================================
   v1.3 HOMEPAGE LAYOUT (editorial agency layout)
   ========================================================================== */
.kodimy-container { max-width: 1200px; }

/* --- Hero: copy + live service panel --- */
.kh-hero { padding-top: 84px !important; padding-bottom: 96px !important; }
.kh-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; align-items: center; }
.kh-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #CFE9E6; font-size: .8rem; font-weight: 600; letter-spacing: .04em; background: rgba(255,255,255,.04); margin-bottom: 26px; }
.kh-dot { width: 8px; height: 8px; border-radius: 50%; background: #3CEEBF; box-shadow: 0 0 0 4px rgba(60,238,191,.18); }
.kh-hero .kodimy-hero-title { font-size: clamp(2.3rem, 4.2vw, 3.6rem) !important; margin: 0 0 18px; }
.kh-hero .kodimy-hero-tagline { -webkit-text-fill-color: initial; background: none; color: #5EEAD4; font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; margin: 0 0 18px; }
.kh-hero .kodimy-hero-subhead { font-size: 1.15rem !important; max-width: 560px; margin: 0 0 14px; }
.kh-hero .kodimy-hero-body { max-width: 560px; margin-bottom: 32px; }
.kh-hero .kodimy-hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.kh-ghost-link { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid rgba(255,255,255,.35); padding-bottom: 2px; }
.kh-ghost-link:hover { border-color: #5EEAD4; color: #5EEAD4; }

.kh-panel { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; padding: 26px 26px 20px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); backdrop-filter: blur(6px); }
.kh-panel-head { display: flex; justify-content: space-between; align-items: baseline; color: #fff; font-family: var(--kodimy-font-headings); font-weight: 600; font-size: 1.05rem; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.kh-panel-sub { font-family: var(--kodimy-font-body); font-size: .78rem; font-weight: 500; color: #8E9BB2; }
.kh-panel-list { list-style: none; margin: 0; padding: 0; }
.kh-panel-list li { border-bottom: 1px solid rgba(255,255,255,.08); }
.kh-panel-list li:last-child { border-bottom: 0; }
.kh-panel-list a { display: flex; align-items: center; gap: 16px; padding: 18px 4px; text-decoration: none; color: #fff; transition: .2s; }
.kh-num { font-family: var(--kodimy-font-headings); font-weight: 600; font-size: .85rem; color: #5EEAD4; min-width: 26px; }
.kh-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.kh-body strong { font-family: var(--kodimy-font-headings); font-size: 1.05rem; font-weight: 600; color: #fff; }
.kh-body em { font-style: normal; font-size: .8rem; color: #8E9BB2; }
.kh-arrow { color: #5EEAD4; opacity: .5; transition: .2s; }
.kh-panel-list a:hover { padding-left: 10px; }
.kh-panel-list a:hover .kh-arrow { opacity: 1; transform: translateX(4px); }
.kh-panel-foot { margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; color: #8E9BB2; }

/* --- Marquee: single quiet line --- */
.kodimy-marquee-section { padding-top: 28px !important; padding-bottom: 28px !important; }
.kodimy-marquee-section .kodimy-container > * { margin-bottom: 8px; }

/* --- Problem: text left, items right, image below --- */
.kodimy-problem-card { display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "head grid" "body grid" "visual visual"; column-gap: 64px; row-gap: 18px; align-items: start; }
.problem-card-header { grid-area: head; }
.problem-card-header h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem) !important; line-height: 1.12; margin: 14px 0 0 !important; text-align: left; }
.problem-card-body { grid-area: body; font-size: 1.08rem; margin: 0; }
.kodimy-problem-card .problem-grid { grid-area: grid; grid-template-columns: 1fr !important; margin-top: 0 !important; gap: 16px; }
.kodimy-problem-card .problem-item { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; padding: 22px 24px !important; }
.kodimy-problem-card .problem-item .problem-icon-wrapper { grid-row: 1 / span 2; }
.kodimy-problem-card .problem-item strong { margin: 0 0 4px; }
.problem-visual-wrapper { grid-area: visual; margin-top: 56px; }
.problem-visual-wrapper img { width: 100%; max-width: 980px; display: block; margin: 0 auto; }

/* --- Solution: sticky heading left, stacked points right --- */
.kodimy-solution-section > .kodimy-container { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.kodimy-solution-section .kodimy-section-header { text-align: left !important; margin: 0 !important; position: sticky; top: 110px; }
.kodimy-solution-section .kodimy-section-subhead { margin-left: 0; margin-right: 0; }
.kodimy-solution-section .kodimy-tag::after { display: none; }
.kodimy-solution-bullets-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

/* --- Pillars: bento grid --- */
.kodimy-pillars-grid { grid-template-columns: repeat(12, 1fr) !important; gap: 24px !important; }
.kodimy-pillars-grid .kodimy-pillar-card:nth-child(4n+1), .kodimy-pillars-grid .kodimy-pillar-card:nth-child(4n+4) { grid-column: span 7; }
.kodimy-pillars-grid .kodimy-pillar-card:nth-child(4n+2), .kodimy-pillars-grid .kodimy-pillar-card:nth-child(4n+3) { grid-column: span 5; }
.pillar-card-image-wrap { aspect-ratio: 21/9 !important; position: relative; }
.pillar-card-image-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,36,.05), rgba(10,18,36,.55)); }
.pillar-floating-metric { display: none !important; }
.pillar-floating-badge { background: rgba(10,18,36,.7) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.2) !important; backdrop-filter: blur(6px); z-index: 2; }

/* --- Process: connected steps --- */
.kodimy-process-grid { position: relative; }
.kodimy-process-card { position: relative; }
.kodimy-process-card:not(:last-child)::after { content: ""; position: absolute; top: 56px; right: -24px; width: 24px; height: 2px; background: linear-gradient(90deg, rgba(60,238,191,.8), transparent); }

/* --- FAQ: heading left, accordion right --- */
.kodimy-faq-section > .kodimy-container { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.kodimy-faq-section .kodimy-section-header { text-align: left !important; margin: 0 !important; position: sticky; top: 110px; }
.kodimy-faq-section .kodimy-section-subhead { margin-left: 0; }
.kodimy-faq-section .kodimy-tag::after { display: none; }
.kodimy-faq-accordion { max-width: none; margin: 0; }

/* --- Final CTA --- */
.kodimy-final-cta-card { text-align: left; }

@media (max-width: 1024px) {
  .kh-hero-grid, .kodimy-solution-section > .kodimy-container, .kodimy-faq-section > .kodimy-container { grid-template-columns: 1fr; gap: 40px; }
  .kodimy-solution-section .kodimy-section-header, .kodimy-faq-section .kodimy-section-header { position: static; }
  .kodimy-problem-card { grid-template-columns: 1fr; grid-template-areas: "head" "body" "grid" "visual"; }
  .kodimy-pillars-grid { grid-template-columns: 1fr !important; }
  .kodimy-pillars-grid .kodimy-pillar-card { grid-column: auto !important; }
  .kodimy-process-card::after { display: none; }
}
@media (max-width: 600px) {
  .kh-hero { padding-top: 48px !important; padding-bottom: 56px !important; }
  .kh-panel { padding: 20px 18px 14px; }
  .kodimy-final-cta-card { text-align: left; }
}