:root {
    --ink: #f7fbf7;
    --muted: #a9b9b2;
    --deep: #0a0f12;
    --panel: #11191d;
    --panel-2: #172226;
    --line: rgba(247, 251, 247, 0.12);
    --soft: rgba(247, 251, 247, 0.07);
    --paper: #21183a;
    --paper-ink: #f8f4ff;
    --paper-muted: #c9bddf;
    --teal: #36f0c2;
    --amber: #ffb14a;
    --violet: #8e7bff;
    --radius: 8px;
    --shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Inter, "Exo 2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
        linear-gradient(115deg, rgba(54, 240, 194, 0.18) 0%, rgba(10, 15, 18, 0) 34%),
        linear-gradient(245deg, rgba(255, 177, 74, 0.18) 0%, rgba(10, 15, 18, 0) 32%),
        radial-gradient(circle at 72% 12%, rgba(142, 123, 255, 0.22), transparent 34%),
        var(--deep);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 72%);
}

img {
    max-width: 100%;
}

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

.full {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

.mian_hat,
.page_inner,
.footer-content {
    width: min(100%, 1520px);
    margin: 0 auto;
    padding: 0 clamp(18px, 4vw, 64px);
}

.page_inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
}

.page_inner > * {
    grid-column: 1 / -1;
}

.mian_hat {
    position: relative;
    overflow: hidden;
    min-height: auto;
}

.mian_hat::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: min(42vw, 640px);
    height: 100%;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(54, 240, 194, 0.24), rgba(255, 177, 74, 0.12)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent);
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
}

/* Sticky header bar (lifted out of the hero so it sticks on every page). */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Frosted bar background on a pseudo-element. Keeping backdrop-filter off the
   .site-header element itself is deliberate: an element with backdrop-filter
   becomes the containing block for position:fixed descendants, which would
   trap the mobile overlay inside the header instead of filling the screen. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(13, 19, 22, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

[data-theme="light"] .site-header::before {
    background: rgba(244, 247, 245, 0.78);
}

.hats {
    width: min(100%, 1520px);
    margin: 0 auto;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 0 clamp(18px, 4vw, 64px);
}

.hat_name h2 {
    margin: 0;
    font-size: clamp(1.2rem, 0.65vw + 1rem, 1.72rem);
    font-weight: 800;
    letter-spacing: 0;
}

.hat_name h2::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 22px rgba(54, 240, 194, 0.85);
}

.hat_name a {
    display: inline-flex;
    align-items: center;
}

.hat-logo {
    display: block;
    height: 44px;
    width: auto;
    object-fit: contain;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.hat_name a:hover .hat-logo {
    transform: scale(1.04);
    filter: drop-shadow(0 0 14px rgba(168, 85, 247, 0.55));
}

.hat_icon,
.footer-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.icon a,
.hat_icon .icon a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--muted) !important;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 0.98rem;
    font-weight: 700;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.hat_icon .icon a:hover,
.hat_icon .icon a:focus {
    color: var(--ink) !important;
    border-color: var(--line);
    background: var(--soft);
}

.hat_text {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    align-items: center;
    gap: clamp(32px, 6vw, 92px);
    min-height: calc(100vh - 86px);
    padding: clamp(44px, 6vw, 96px) 0 clamp(64px, 7vw, 110px);
}

.hero-copy {
    max-width: 790px;
}

.eyebrow,
.website_label,
.website_label_3 {
    margin: 0 0 18px;
    color: var(--teal);
    font-size: clamp(0.78rem, 0.18vw + 0.74rem, 0.92rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.hat_text_h2,
.philosophy_text_h2 {
    max-width: 1080px;
    margin: 0;
    color: var(--ink);
    font-size: clamp(3.1rem, 6vw, 7.8rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0;
    text-wrap: balance;
}

.hat_text_p,
.philosophy_text_p {
    max-width: 760px;
    margin: 26px 0 0;
    color: var(--muted);
    font-size: clamp(1.18rem, 0.7vw + 1.02rem, 1.7rem);
    line-height: 1.62;
    text-wrap: pretty;
}

.hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.button_ {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 22px;
    color: #071010 !important;
    border: 1px solid rgba(54, 240, 194, 0.5);
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--teal), #b8ffec);
    box-shadow: 0 18px 38px rgba(54, 240, 194, 0.16);
    font-size: 1rem;
    font-weight: 900;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.secondary_button {
    color: var(--ink) !important;
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.button_:hover,
.button_:focus {
    transform: translateY(-2px);
    box-shadow: 0 22px 46px rgba(54, 240, 194, 0.24);
}

.hero-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.hero-stack span,
.hero-stack a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 10px;
    color: #cfe3dc;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.hero-stack a:hover,
.hero-stack a:focus {
    transform: translateY(-1px);
    background: rgba(54, 240, 194, 0.12);
    border-color: var(--teal);
    color: var(--ink);
}

.not-found-code {
    background: linear-gradient(120deg, var(--amber), var(--teal));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 0.85;
    font-size: clamp(7rem, 22vw, 18rem);
    margin: 8px 0 14px;
}

.hero-visual {
    position: relative;
    min-height: clamp(520px, 58vw, 760px);
}

.hero-card {
    position: absolute;
    inset: clamp(10px, 3vw, 42px) 0 clamp(42px, 4vw, 70px) clamp(20px, 4vw, 70px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)),
        var(--panel);
    box-shadow: var(--shadow);
}

.hero-card::before {
    content: "";
    position: absolute;
    inset: 18px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius);
    pointer-events: none;
}

.hero-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.hero-card-info {
    position: absolute;
    right: 28px;
    bottom: 28px;
    left: 28px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    background: rgba(7, 13, 15, 0.42);
    backdrop-filter: blur(18px);
}

.hero-card-info span {
    color: rgba(255, 177, 74, 0.72);
    font-weight: 900;
}

.hero-card-info strong {
    text-align: right;
    color: rgba(247, 251, 247, 0.72);
    font-size: clamp(0.95rem, 0.35vw + 0.9rem, 1.18rem);
}

/* Gentle floating motion for the hero laptop card. Disabled for users who
   prefer reduced motion. */
@keyframes hero-card-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: no-preference) {
    .hero-card {
        animation: hero-card-float 5.5s ease-in-out infinite;
        will-change: transform;
    }
    /* Floating notes bob with a slightly different rhythm and a negative
       delay so each starts mid-cycle - keeps the three pieces from moving
       in lockstep. */
    .floating-note {
        animation: hero-card-float 6.5s ease-in-out infinite;
        will-change: transform;
    }
    .note-top    { animation-delay: -2.1s; }
    .note-bottom { animation-delay: -4.3s; }
}

.floating-note {
    position: absolute;
    z-index: 5;
    width: min(250px, 52vw);
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    background: rgba(238, 244, 239, 0.5);
    color: rgba(248, 244, 255, 0.74);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(16px);
}

.floating-note::after {
    display: none;
}

.floating-note span {
    display: block;
    margin-bottom: 6px;
    color: rgba(54, 240, 194, 0.72);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.floating-note strong {
    display: block;
    color: rgba(247, 251, 247, 0.74);
    line-height: 1.25;
}

.note-top {
    top: 11%;
    left: 0;
}

.note-top::after {
    right: -44px;
    top: 50%;
}

.note-bottom {
    right: 0;
    bottom: 6%;
}

.note-bottom::after {
    left: -44px;
    top: 50%;
}

.mina_home_div {
    position: relative;
    z-index: 1;
    padding: clamp(42px, 7vw, 100px) 0 clamp(70px, 8vw, 120px);
}

.intro-grid {
    display: grid;
    grid-column: 1 / 12;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(280px, auto) minmax(130px, auto);
    align-items: stretch;
    gap: clamp(14px, 2vw, 24px);
    padding-bottom: clamp(34px, 5vw, 76px);
    margin-bottom: clamp(54px, 7vw, 110px);
}

.sheet,
.process-step {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
        var(--panel);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
}

.sheet::before,
.process-step::before,
.sort_sheet_2::before,
.split-showcase::before,
.about-band::before,
.sort_sheet_3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), rgba(54, 240, 194, 0.18));
    z-index: 2;
}

.sheet {
    min-height: 250px;
    padding: clamp(26px, 4vw, 56px);
}

.feature-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.feature-card-large {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
    min-height: 430px;
    background:
        linear-gradient(145deg, rgba(54, 240, 194, 0.16), rgba(255, 255, 255, 0.035)),
        var(--panel);
}

.feature-card:nth-child(2) {
    grid-column: 6 / span 4;
    grid-row: 1;
    min-height: 300px;
    transform: translateY(54px);
}

.feature-card-tall {
    grid-column: 10 / span 3;
    grid-row: 1 / span 2;
    min-height: 500px;
    transform: translateY(-22px);
    background:
        linear-gradient(160deg, rgba(255, 177, 74, 0.16), rgba(142, 123, 255, 0.1)),
        var(--panel);
}

.card-number {
    display: inline-flex;
    margin-bottom: clamp(34px, 6vw, 86px);
    color: var(--amber);
    font-weight: 900;
}

.sheet_h3 {
    margin: 0 0 18px;
    color: var(--ink);
    font-size: clamp(2.45rem, 3.4vw, 5.5rem);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0;
}

.sheet_text {
    max-width: 34ch;
    color: var(--muted);
    font-size: clamp(1rem, 0.36vw + 0.96rem, 1.28rem);
    line-height: 1.58;
}

.sort_sheet_2,
.split-showcase,
.about-band {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: stretch;
    overflow: hidden;
    margin-bottom: clamp(54px, 7vw, 110px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--paper-ink);
    box-shadow: var(--shadow);
}

.case-panel {
    grid-column: 2 / -1;
    background:
        linear-gradient(100deg, var(--paper) 0%, var(--paper) 52%, #130d22 52%, #130d22 100%);
}

.website_text_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 5vw, 76px);
    background: transparent;
}

.website_title {
    max-width: 780px;
    margin: 0 0 24px;
    color: inherit;
    font-size: clamp(2.3rem, 3.4vw, 5.6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-wrap: balance;
}

.website_description {
    max-width: 760px;
    margin: 0 0 28px;
    color: var(--paper-muted);
    font-size: clamp(1.12rem, 0.5vw + 1.02rem, 1.48rem);
    line-height: 1.68;
}

.case-panel .website_label,
.split-showcase .website_label,
.about-band .website_label {
    color: var(--teal);
}

.website_list {
    display: grid;
    gap: 13px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.website_list li {
    position: relative;
    padding-left: 30px;
    color: var(--paper-muted);
    font-size: clamp(0.98rem, 0.28vw + 0.94rem, 1.16rem);
    line-height: 1.45;
    font-weight: 700;
}

.website_list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 14px;
    height: 2px;
    background: var(--teal);
}

.sheet_img_Website_development_2,
.image-panel,
.showcase-image {
    min-height: clamp(360px, 36vw, 620px);
}

.img_Website_development_1,
.showcase-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

.image-panel {
    padding: clamp(14px, 2vw, 28px);
}

.image-panel img {
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.split-showcase {
    grid-column: 1 / 12;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    background: #1a1430;
    color: var(--ink);
}

.split-showcase .website_description {
    color: var(--muted);
}

.split-showcase .showcase-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(34px, 5vw, 76px);
}

.showcase-image {
    padding: clamp(14px, 2vw, 28px);
}

.showcase-image img {
    border-radius: var(--radius);
}

.text-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    color: var(--teal) !important;
    font-weight: 900;
}

.text-link::after {
    content: "";
    width: 52px;
    height: 1px;
    background: currentColor;
}

.process-section {
    grid-column: 2 / 12;
    margin-bottom: clamp(54px, 7vw, 110px);
}

.tech-strip {
    grid-column: 2 / 12;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    padding: clamp(18px, 2vw, 26px) clamp(20px, 2.5vw, 32px);
    margin-bottom: clamp(54px, 7vw, 110px);
    border-radius: var(--radius);
    background: rgba(247, 251, 247, 0.04);
    border: 1px solid rgba(247, 251, 247, 0.08);
}

/* In the hero, the tech-strip replaces the small `hero-stack` chips so it sits
   right after the action buttons - no grid, tighter spacing. */
.hero-tech-strip {
    grid-column: auto;
    margin-top: 28px;
    margin-bottom: 0;
}

.tech-strip-label {
    color: var(--teal);
    font-size: clamp(0.78rem, 0.18vw + 0.74rem, 0.92rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 6px;
}

.tech-strip-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.tech-strip-chips li {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 12px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

[data-theme="light"] .tech-strip {
    background: rgba(18, 32, 27, 0.03);
    border-color: rgba(18, 32, 27, 0.08);
}

[data-theme="light"] .tech-strip-chips li {
    background: rgba(18, 32, 27, 0.04);
}

.home-cases-heading {
    grid-column: 2 / 12;
    margin-bottom: clamp(20px, 3vw, 36px);
}

.home-cases-more {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin: clamp(-30px, -2vw, -10px) 0 clamp(54px, 7vw, 110px);
}

.trust-band {
    grid-column: 2 / 12;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
    margin-bottom: clamp(54px, 7vw, 110px);
}

.trust-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: clamp(20px, 2.4vw, 30px);
    border-radius: var(--radius);
    background: rgba(247, 251, 247, 0.04);
    border: 1px solid rgba(247, 251, 247, 0.08);
}

.trust-item strong {
    color: var(--amber);
    font-size: clamp(1.4rem, 1.6vw, 2.1rem);
    font-weight: 900;
    line-height: 1;
}

.trust-item span {
    color: var(--muted);
    font-size: clamp(0.86rem, 0.25vw + 0.82rem, 1rem);
}

[data-theme="light"] .trust-item {
    background: rgba(18, 32, 27, 0.03);
    border-color: rgba(18, 32, 27, 0.08);
}

@media (max-width: 900px) {
    .trust-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .trust-band { grid-template-columns: 1fr; }
}

.testimonial-section {
    grid-column: 2 / 12;
    margin-bottom: clamp(54px, 7vw, 110px);
}

.testimonial-card {
    margin: 0;
    padding: clamp(28px, 3.4vw, 48px);
    border-radius: var(--radius);
    background: rgba(247, 251, 247, 0.04);
    border: 1px solid rgba(247, 251, 247, 0.08);
    max-width: 880px;
}

.testimonial-stars {
    color: var(--amber);
    font-size: 1.15rem;
    letter-spacing: 0.08em;
    margin-bottom: 18px;
}

.testimonial-quote {
    margin: 0 0 22px;
    color: var(--ink);
    font-size: clamp(1.2rem, 0.7vw + 1.05rem, 1.8rem);
    font-weight: 500;
    line-height: 1.45;
    text-wrap: balance;
}

.testimonial-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.testimonial-meta strong {
    color: var(--ink);
    font-weight: 800;
}

.testimonial-meta span {
    color: var(--muted);
    font-size: 0.92rem;
}

[data-theme="light"] .testimonial-card {
    background: rgba(18, 32, 27, 0.03);
    border-color: rgba(18, 32, 27, 0.08);
}

.section-heading {
    max-width: 920px;
    margin-bottom: clamp(26px, 4vw, 46px);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
}

.process-step {
    min-height: 250px;
    padding: clamp(22px, 3vw, 34px);
}

.process-step span {
    color: var(--amber);
    font-weight: 900;
}

.process-step h3 {
    margin: 42px 0 14px;
    font-size: clamp(1.25rem, 0.7vw + 1rem, 1.75rem);
    font-weight: 900;
}

.process-step p {
    margin: 0;
    color: var(--muted);
    line-height: 1.58;
}

/* ---------------------------------------------------------------------------
   "How it works" horizontal timeline (home). Numbered markers joined by a
   connecting line, with the step title + copy under each. Collapses to a
   vertical timeline on narrow screens.
--------------------------------------------------------------------------- */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
}

.timeline-step {
    position: relative;
    padding: 0 clamp(8px, 1vw, 16px);
    text-align: center;
}

/* Connecting line: runs from this marker's centre back to the previous one,
   so the first step never draws one. Sits behind the markers (z-index 0). */
.timeline-step::before {
    content: "";
    position: absolute;
    top: 31px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: linear-gradient(90deg, rgba(54, 240, 194, 0.25), var(--teal));
    z-index: 0;
}

.timeline-step:first-child::before {
    display: none;
}

.timeline-marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto clamp(18px, 2vw, 26px);
    border: 2px solid var(--line);
    border-radius: 50%;
    background: var(--panel);
}

.timeline-num {
    color: var(--teal);
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
}

/* Last step reads as "done" - filled accent like the site's primary CTAs. */
.timeline-step.is-final .timeline-marker {
    border-color: transparent;
    background: linear-gradient(135deg, var(--teal), #b8ffec);
    box-shadow: 0 0 0 6px rgba(54, 240, 194, 0.12);
}

.timeline-step.is-final .timeline-num {
    color: #071010;
}

.timeline-title {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: clamp(1.02rem, 0.4vw + 0.95rem, 1.25rem);
    font-weight: 900;
    line-height: 1.25;
}

.timeline-desc {
    margin: 0 auto;
    max-width: 30ch;
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.55;
}

/* Stack into a vertical timeline once five columns get too tight. */
@media (max-width: 900px) {
    .timeline {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }

    .timeline-step {
        display: grid;
        grid-template-columns: 62px 1fr;
        column-gap: 20px;
        padding: 0 0 clamp(26px, 6vw, 40px);
        text-align: left;
    }

    .timeline-step:last-child {
        padding-bottom: 0;
    }

    .timeline-marker {
        grid-row: 1 / span 2;
        margin: 0;
    }

    /* Line now runs downward, from below each marker to the next one. */
    .timeline-step::before {
        top: 62px;
        bottom: 0;
        left: 30px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--teal), rgba(54, 240, 194, 0.25));
    }

    .timeline-step:first-child::before {
        display: block;
    }

    .timeline-step:last-child::before {
        display: none;
    }

    .timeline-desc {
        margin: 0;
        max-width: none;
    }
}

.all_sort_sheet_3 {
    grid-column: 1 / -1;
    padding: 0 0 clamp(12px, 3vw, 38px);
}

.about-band {
    grid-template-columns: minmax(340px, 0.52fr) minmax(0, 1fr);
    background: var(--paper);
    margin-bottom: 0;
}

.about-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(420px, 42vw, 620px);
    padding: 0;
    background:
        linear-gradient(160deg, rgba(54, 240, 194, 0.2), rgba(142, 123, 255, 0.28)),
        #150f27;
}

.about-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    object-position: center 22%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.sheet_img_Website_development_3 img {
    display: block;
    width: min(100%, 360px);
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.footer {
    flex-shrink: 0;
    width: 100%;
    padding: 28px 0;
    color: var(--ink);
    border-top: 1px solid var(--line);
    background: rgba(6, 10, 12, 0.94);
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.footer-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footer p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
}

.footer svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.about_me_div_main .hat_text {
    grid-template-columns: 1fr;
    min-height: clamp(520px, 72vh, 760px);
}

.about_me_div_main .page_inner {
    padding-top: clamp(42px, 7vw, 90px);
}

.sort_sheet_3,
.sort_sheet_box_2 {
    display: grid;
    gap: clamp(14px, 2vw, 24px);
}

.sort_sheet_3 {
    position: relative;
    overflow: hidden;
    grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
    align-items: center;
    padding: clamp(28px, 4vw, 56px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--paper-ink);
}

.sort_sheet_box_2,
.sort_sheet_1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);
}

.website_text_box_ebout_my {
    padding: clamp(24px, 4vw, 50px);
}

.centered_label {
    display: block;
    text-align: center;
}

.cta_section {
    grid-template-columns: 1fr !important;
    min-height: clamp(420px, 55vh, 620px) !important;
    text-align: center;
    justify-items: center;
}

.cta_section .hat_text_p {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1080px) {
    .page_inner {
        display: block;
    }

    .hat_text,
    .sort_sheet_2,
    .split-showcase,
    .about-band {
        grid-template-columns: 1fr;
    }

    .mian_hat {
        min-height: auto;
    }

    .mian_hat::after {
        width: 100%;
        opacity: 0.42;
        clip-path: polygon(55% 0, 100% 0, 100% 100%, 28% 100%);
    }

    .hat_text {
        min-height: auto;
        padding-top: 46px;
    }

    .hero-visual {
        min-height: 620px;
    }

    .case-panel {
        background:
            linear-gradient(180deg, var(--paper) 0%, var(--paper) 50%, #130d22 50%, #130d22 100%);
    }

    .process-grid,
    .intro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .feature-card-large,
    .feature-card:nth-child(2),
    .feature-card-tall {
        grid-column: auto;
        grid-row: auto;
        min-height: 300px;
        transform: none;
    }

    .about-photo {
        min-height: clamp(420px, 70vw, 620px);
    }
}

@media (max-width: 720px) {
    /* One consistent edge gutter for every page and the footer, so no text
       sits tight against the screen edge and all blocks line up. */
    .mian_hat,
    .page_inner,
    .footer-inner {
        padding-right: 20px;
        padding-left: 20px;
    }

    .hat_text_h2 {
        font-size: clamp(2.385rem, 11.7vw, 4.14rem);
    }

    .hero-actions,
    .button_ {
        width: 100%;
    }

    .hero-visual {
        min-height: 540px;
    }

    .hero-card {
        inset: 20px 0 74px;
    }

    .floating-note {
        width: calc(50% - 8px);
        padding: 12px;
    }

    .note-top {
        top: auto;
        left: 0;
        bottom: 0;
    }

    .note-bottom {
        right: 0;
        bottom: 0;
    }

    .floating-note::after {
        display: none;
    }

    .intro-grid,
    .process-grid,
    .sort_sheet_1,
    .sort_sheet_box_2,
    .sort_sheet_3 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .feature-card-large,
    .feature-card:nth-child(2),
    .feature-card-tall {
        min-height: 0;
    }

    .sheet,
    .process-step,
    .website_text_box,
    .website_text_box_ebout_my,
    .split-showcase .showcase-content {
        padding: 24px;
    }

    .sheet_h3 {
        font-size: clamp(2.4rem, 13vw, 4rem);
    }

    .website_title {
        font-size: clamp(1.935rem, 9.9vw, 3.195rem);
    }

    .website_description {
        font-size: 1rem;
    }

    .image-panel,
    .showcase-image {
        padding: 12px;
        min-height: 300px;
    }

    .about-photo {
        min-height: 360px;
    }

    .footer-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-links {
        justify-content: flex-start;
    }
}

@media (max-width: 420px) {
    .hat_icon .icon a {
        padding: 5px 7px;
        font-size: 0.86rem;
    }

    .hero-visual {
        min-height: 500px;
    }

    .floating-note {
        font-size: 0.82rem;
    }

    .hero-card-info {
        right: 14px;
        bottom: 14px;
        left: 14px;
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-card-info strong {
        text-align: left;
    }
}

/* ---------------------------------------------------------------------------
   Scroll reveal animations
   Blocks fade and slide in as they enter the viewport. Uses the `translate`
   property (not `transform`) so it never fights the layout/hover transforms
   already used by feature cards, process steps and sheets.
   Gated on `.js-anim` (set in <head>) so content stays visible without JS,
   and disabled entirely for users who prefer reduced motion.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .js-anim :is(
        .hero-copy,
        .hero-visual,
        .feature-card,
        .case-panel,
        .split-showcase,
        .section-heading,
        .process-step,
        .timeline-step,
        .about-band,
        .about_profile,
        .values_section .sheet,
        .sort_sheet_2,
        .final_info_section .sheet,
        .cta_section
    ) {
        opacity: 0;
        translate: 0 34px;
        transition:
            opacity 0.7s cubic-bezier(0.22, 0.7, 0.2, 1),
            translate 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
        will-change: opacity, translate;
    }

    .js-anim :is(
        .hero-copy,
        .hero-visual,
        .feature-card,
        .case-panel,
        .split-showcase,
        .section-heading,
        .process-step,
        .timeline-step,
        .about-band,
        .about_profile,
        .values_section .sheet,
        .sort_sheet_2,
        .final_info_section .sheet,
        .cta_section
    ).in-view {
        opacity: 1;
        translate: none;
    }
}

/* ---------------------------------------------------------------------------
   Services page
   Reuses the shared .sheet / .website_* / .process-* / .cta_section styles and
   adds the service-card grid, dark-card feature lists and the packages block.
--------------------------------------------------------------------------- */
.services_div_main {
    position: relative;
    z-index: 1;
    padding: clamp(42px, 7vw, 100px) 0 clamp(70px, 8vw, 120px);
}

.services-grid,
.packages-section {
    grid-column: 1 / -1;
    margin-bottom: clamp(54px, 7vw, 110px);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);
}

.service-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.service-card.web {
    background:
        linear-gradient(145deg, rgba(54, 240, 194, 0.16), rgba(255, 255, 255, 0.035)),
        var(--panel);
}

.service-card.auto {
    background:
        linear-gradient(160deg, rgba(255, 177, 74, 0.16), rgba(142, 123, 255, 0.1)),
        var(--panel);
}

.services-grid .card-number {
    margin-bottom: 16px;
}

.feature-list {
    display: grid;
    gap: 10px;
    margin: 18px 0 24px;
    padding: 0;
    list-style: none;
}

.feature-list li {
    position: relative;
    padding-left: 26px;
    color: var(--muted);
    font-size: clamp(0.95rem, 0.28vw + 0.9rem, 1.08rem);
    font-weight: 700;
    line-height: 1.45;
}

.feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 13px;
    height: 2px;
    background: var(--teal);
}

.service-card .text-link {
    margin-top: auto;
}

.packages-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);
    margin-top: clamp(26px, 4vw, 46px);
}

.package {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        var(--panel);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
}

.package--featured {
    border: 2px solid var(--teal);
}

.package-tag {
    position: absolute;
    top: -13px;
    left: 28px;
    padding: 5px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--teal), #b8ffec);
    color: #071010;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.package-name {
    margin: 0 0 4px;
    color: var(--ink);
    font-size: 1.4rem;
    font-weight: 900;
}

.package-sub {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.package-price {
    margin: 14px 0 0;
    color: var(--teal);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.package .feature-list {
    flex: 1;
}

.package .button_ {
    width: 100%;
}

@media (max-width: 1080px) {
    .services-grid,
    .packages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .services-grid,
    .packages-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .js-anim :is(.service-card, .package) {
        opacity: 0;
        translate: 0 34px;
        transition:
            opacity 0.7s cubic-bezier(0.22, 0.7, 0.2, 1),
            translate 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
        will-change: opacity, translate;
    }

    .js-anim :is(.service-card, .package).in-view {
        opacity: 1;
        translate: none;
    }
}

/* ---------------------------------------------------------------------------
   About page - editorial intro panel
--------------------------------------------------------------------------- */
.about-intro {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    margin-bottom: clamp(54px, 7vw, 110px);
    padding: clamp(32px, 4.5vw, 60px) clamp(18px, 3vw, 40px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--paper-ink);
    text-align: center;
}

.about-intro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--teal), rgba(54, 240, 194, 0.18));
}

.about-intro .website_title {
    max-width: 1000px;
    margin: 0 auto 24px;
    font-size: clamp(1.9rem, 2.6vw, 3.4rem);
}

.about-intro .website_description {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    color: var(--paper-muted);
}

@media (prefers-reduced-motion: no-preference) {
    .js-anim .about-intro {
        opacity: 0;
        translate: 0 34px;
        transition:
            opacity 0.7s cubic-bezier(0.22, 0.7, 0.2, 1),
            translate 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
        will-change: opacity, translate;
    }

    .js-anim .about-intro.in-view {
        opacity: 1;
        translate: none;
    }
}

/* About hero has no visual column, so the copy spans the full width. */
.hat_text:has(.hero-copy--full) {
    grid-template-columns: 1fr;
}

/* ---------------------------------------------------------------------------
   Cases page - portfolio cards with image, tag, result chips
--------------------------------------------------------------------------- */
.cases_div_main {
    position: relative;
    z-index: 1;
    padding: clamp(42px, 7vw, 100px) 0 clamp(70px, 8vw, 120px);
}

.cases-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
    margin-bottom: clamp(54px, 7vw, 110px);
}

.case-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        var(--panel);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.case-card:hover {
    transform: translateY(-4px);
    border-color: rgba(54, 240, 194, 0.4);
}

.case-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}

.case-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(20px, 2.4vw, 30px);
}

.case-tag {
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 5px 12px;
    border: 1px solid rgba(54, 240, 194, 0.4);
    border-radius: 999px;
    background: rgba(54, 240, 194, 0.1);
    color: var(--teal);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.case-title {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: clamp(1.3rem, 1.4vw + 1rem, 1.85rem);
    font-weight: 900;
    line-height: 1.05;
}

.case-text {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
}

.case-results {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.case-results li {
    padding: 6px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.05);
    color: #cfe3dc;
    font-size: 0.85rem;
    font-weight: 800;
}

.case-card .text-link {
    margin-top: auto;
}

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

@media (max-width: 720px) {
    .cases-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .js-anim .case-card {
        opacity: 0;
        translate: 0 34px;
        transition:
            opacity 0.7s cubic-bezier(0.22, 0.7, 0.2, 1),
            translate 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
        will-change: opacity, translate;
    }

    .js-anim .case-card.in-view {
        opacity: 1;
        translate: none;
    }
}

/* ---------------------------------------------------------------------------
   Visual refresh (ui-ux-pro-max pass)
   Brand-consistent polish only - no restructuring:
   - distinctive geometric display type (Exo 2) with tighter tracking
   - visible keyboard focus (was missing - accessibility)
   - press feedback + card hover lift to match interaction states
   - selection + scrollbar styled to the brand
--------------------------------------------------------------------------- */
.hat_name h2,
.hat_text_h2,
.philosophy_text_h2,
.website_title,
.sheet_h3,
.package-name,
.case-title,
.process-step h3,
.section-heading h2 {
    font-family: "Exo 2", "Inter", system-ui, sans-serif;
    letter-spacing: -0.018em;
}

a:focus-visible,
button:focus-visible,
.button_:focus-visible,
.hat_icon .icon a:focus-visible,
.text-link:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
    border-radius: var(--radius);
}

.button_:active {
    transform: translateY(0);
    scale: 0.985;
}

/* Static sheet cards get the same gentle lift the case cards have.
   Excludes the home .feature-card grid, which relies on its own transforms. */
.sheet:not(.feature-card) {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sheet:not(.feature-card):hover {
    transform: translateY(-4px);
    border-color: rgba(54, 240, 194, 0.4);
}

.card-number,
.process-step span {
    font-variant-numeric: tabular-nums;
}

::selection {
    background: rgba(54, 240, 194, 0.28);
    color: var(--ink);
}

html {
    scrollbar-color: rgba(54, 240, 194, 0.45) transparent;
}

*::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(54, 240, 194, 0.32);
    border: 3px solid var(--deep);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: rgba(54, 240, 194, 0.5);
}

/* ---------------------------------------------------------------------------
   Cases showcase - clickable device mockups in a grid that grows with the work
--------------------------------------------------------------------------- */
.cases-showcase {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 560px));
    justify-content: center;
    gap: clamp(20px, 3vw, 40px);
    margin-bottom: clamp(54px, 7vw, 110px);
}

.case-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        var(--panel);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
    color: inherit;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

a.case-tile:hover {
    transform: translateY(-6px);
    border-color: rgba(54, 240, 194, 0.45);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34);
}

.mock-stage {
    position: relative;
    padding: clamp(20px, 3vw, 34px) clamp(20px, 3vw, 34px) 0;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(54, 240, 194, 0.12), transparent 60%),
        #0c1316;
    border-bottom: 1px solid var(--line);
}

.mock-browser {
    overflow: hidden;
    border: 1px solid #2a3a40;
    border-radius: 10px 10px 0 0;
    background: #0c1316;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

.mock-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    background: #16222a;
    border-bottom: 1px solid #243036;
}

.mock-bar .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.mock-url {
    margin-left: 10px;
    padding: 3px 14px;
    border-radius: 999px;
    background: #0c1316;
    color: #8aa39a;
    font-size: 11px;
    letter-spacing: 0.3px;
}

.mock-browser img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
}

.mock-phone {
    position: absolute;
    right: clamp(22px, 4vw, 46px);
    bottom: 0;
    width: 23%;
    min-width: 90px;
    max-width: 124px;
    overflow: hidden;
    border: 4px solid #060b0d;
    border-radius: 16px 16px 0 0;
    background: #060b0d;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
}

.mock-phone img {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 17;
    object-fit: cover;
    object-position: top center;
}

.case-tile-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(22px, 2.6vw, 30px);
}

.case-tile .case-title {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2.1rem);
}

.case-tile .case-role {
    margin: 0 0 16px;
    color: var(--muted);
    font-weight: 700;
}

.visit-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal) !important;
    font-weight: 900;
    transition: gap 0.2s ease;
}

a.case-tile:hover .visit-link {
    gap: 13px;
}

/* List cards stay compact so a whole tile fits comfortably on screen. */
.case-tile .mock-stage {
    padding: clamp(14px, 2vw, 22px) clamp(14px, 2vw, 22px) 0;
}

.case-tile .mock-browser img {
    aspect-ratio: auto;
    height: clamp(160px, 18vw, 220px);
}

.case-tile-meta {
    padding: clamp(18px, 2vw, 24px);
}

/* ---------------------------------------------------------------------------
   Case detail page (e.g. /cases/progressive-house/)
--------------------------------------------------------------------------- */
.case_detail_main {
    position: relative;
    z-index: 1;
    padding: clamp(36px, 6vw, 80px) 0 clamp(70px, 8vw, 120px);
}

.case-detail-stage {
    grid-column: 1 / -1;
    margin: 0 auto clamp(44px, 6vw, 84px);
    padding-top: clamp(8px, 2vw, 20px);
}

/* Multi-device showcase: monitor + phone, full uncropped screenshots. */
.device-showcase {
    position: relative;
    width: min(100%, 1000px);
    margin: 0 auto;
    padding-bottom: clamp(26px, 5vw, 60px);
}

.device-monitor {
    width: min(100%, 860px);
    margin: 0 auto;
}

.device-screen {
    overflow: hidden;
    border: clamp(9px, 1.2vw, 15px) solid #15171a;
    border-radius: 16px;
    background: #000;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}

.browser {
    display: flex;
    flex-direction: column;
    height: clamp(420px, 50vw, 580px);
    background: #202124;
    font-family: "Inter", system-ui, sans-serif;
}

.browser-tabs {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    padding: 8px 10px 0;
    background: #202124;
}

.browser-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    min-width: 140px;
    max-width: 230px;
    padding: 0 12px;
    border-radius: 10px 10px 0 0;
    background: #35363a;
    color: #e8eaed;
    font-size: 12.5px;
    cursor: pointer;
}

.tab-fav {
    width: 14px;
    height: 14px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff9a4d, #ff6a00);
}

.tab-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tab-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: auto;
    border-radius: 50%;
    color: #b9bcc0;
    cursor: pointer;
}

.tab-x:hover {
    background: rgba(255, 255, 255, 0.15);
}

.tab-new {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #cfd2d6;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.tab-new:hover {
    background: rgba(255, 255, 255, 0.1);
}

.browser-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #35363a;
}

.browser-nav,
.browser-ext {
    display: flex;
    align-items: center;
    gap: 1px;
}

.bb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #cfd2d6;
    cursor: pointer;
    transition: background 0.15s ease;
}

.bb:hover {
    background: rgba(255, 255, 255, 0.12);
}

.bb:active {
    background: rgba(255, 255, 255, 0.18);
}

.bb svg {
    width: 18px;
    height: 18px;
}

.omnibox {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 15px;
    border-radius: 999px;
    background: #202124;
}

.omni-lock {
    width: 14px;
    height: 14px;
    flex: none;
    color: #9aa0a6;
}

.omni-url {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #e8eaed;
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    cursor: text;
}

.omni-url:focus {
    color: #fff;
}

.browser-view {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.browser-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    transform-origin: top left;
}

.device-neck {
    width: 76px;
    height: 24px;
    margin: 0 auto;
    background: linear-gradient(180deg, #2b2e33, #15171a);
}

.device-foot {
    width: 190px;
    max-width: 60%;
    height: 12px;
    margin: 0 auto;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, #2b2e33, #131517);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.4);
}

.device-phone {
    position: absolute;
    right: clamp(0px, 4vw, 52px);
    bottom: 0;
    width: clamp(140px, 17vw, 200px);
    overflow: hidden;
    border: clamp(6px, 0.8vw, 9px) solid #0a0a0c;
    border-radius: clamp(20px, 2.2vw, 30px);
    background: #0a0a0c;
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.55);
}

.phone-view {
    height: clamp(320px, 40vw, 430px);
    overflow: hidden;
    background: #fff;
}

.phone-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    transform-origin: top left;
}

/* On phones the monitor + phone overlay can't fit side by side, so stack them:
   monitor on top (full width), phone below it, centred. */
@media (max-width: 600px) {
    .device-showcase {
        padding-bottom: 0;
    }

    .browser {
        height: clamp(360px, 86vw, 440px);
    }

    .device-phone {
        position: static;
        width: clamp(150px, 50vw, 210px);
        margin: 24px auto 0;
    }
}

.case-detail-body {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.9fr);
    gap: clamp(28px, 4vw, 60px);
    margin-bottom: clamp(48px, 7vw, 100px);
}

.case-detail-col .website_title {
    margin-bottom: 18px;
    font-size: clamp(1.7rem, 2.4vw, 2.6rem);
}

.case-subhead {
    margin: clamp(28px, 4vw, 40px) 0 14px;
    color: var(--ink);
    font-size: clamp(1.2rem, 0.8vw + 1rem, 1.5rem);
    font-weight: 900;
}

.case-detail-side {
    align-self: start;
}

.case-facts {
    margin-bottom: 16px;
    padding: clamp(20px, 2.5vw, 28px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.03);
}

.case-fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}

.case-fact:last-child {
    border-bottom: 0;
}

.case-fact span {
    color: var(--muted);
    font-size: 0.92rem;
}

.case-fact strong {
    color: var(--ink);
    font-weight: 800;
    text-align: right;
}

.case-fact a {
    color: var(--teal) !important;
    font-weight: 800;
}

.case-side-btn {
    width: 100%;
}

@media (max-width: 900px) {
    .case-detail-body {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Footer contact form
--------------------------------------------------------------------------- */
.footer {
    padding: 0;
}

.footer-inner {
    width: min(100%, 1520px);
    margin: 0 auto;
    padding: clamp(40px, 6vw, 78px) clamp(18px, 4vw, 64px) clamp(28px, 3vw, 44px);
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

.footer-title {
    margin: 0 0 14px;
    font-family: "Exo 2", "Inter", system-ui, sans-serif;
    font-size: clamp(1.9rem, 3vw, 3rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.018em;
    color: var(--ink);
}

.footer-text {
    margin: 0 0 26px;
    max-width: 460px;
    color: var(--muted);
    line-height: 1.6;
}

.footer .footer-links {
    justify-content: flex-start;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

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

.contact-field label {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.contact-field label .optional {
    color: rgba(169, 185, 178, 0.55);
    font-weight: 600;
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    padding: 12px 14px;
    color: var(--ink);
    font-family: inherit;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.contact-field textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: rgba(169, 185, 178, 0.5);
}

.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--teal);
    background: rgba(54, 240, 194, 0.06);
}

.button_.contact-submit {
    grid-column: 1 / -1;
    justify-content: center;
    cursor: pointer;
}

/* Phone field with a fixed +353 (Ireland) prefix - themed to match the form. */
.phone-group {
    display: flex;
    align-items: stretch;
}

.phone-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    color: var(--muted);
    font-weight: 800;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
}

.phone-group input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

[data-theme="light"] .phone-prefix {
    background: rgba(18, 32, 27, 0.05);
}

/* ---------------------------------------------------------------------------
   Service detail pages: FAQ + related cases
--------------------------------------------------------------------------- */
.faq-section,
.related-cases {
    grid-column: 1 / -1;
    margin-top: clamp(40px, 6vw, 90px);
}

.faq-list {
    display: grid;
    gap: 12px;
    max-width: 860px;
}

.faq-item {
    padding: 0 clamp(16px, 2vw, 24px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.03);
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 0;
    list-style: none;
    cursor: pointer;
    color: var(--ink);
    font-weight: 800;
    font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    color: var(--teal);
    font-weight: 900;
}

.faq-item[open] summary::after {
    content: "\2212";
}

.faq-item p {
    margin: 0;
    padding: 0 0 18px;
    max-width: 70ch;
    color: var(--muted);
    line-height: 1.6;
}

[data-theme="light"] .faq-item {
    background: rgba(18, 32, 27, 0.03);
}

.related-cases-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: clamp(16px, 2vw, 28px);
}

.related-case {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    padding: clamp(22px, 2.6vw, 32px);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

a.related-case:hover {
    transform: translateY(-4px);
    border-color: rgba(54, 240, 194, 0.45);
}

.related-case .case-title {
    margin: 0;
}

.related-case .case-role {
    margin: 0 0 6px;
    color: var(--muted);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Blog
--------------------------------------------------------------------------- */
.blog_div_main {
    position: relative;
    z-index: 1;
    padding: clamp(36px, 6vw, 80px) 0 clamp(70px, 8vw, 120px);
}

.blog-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: clamp(20px, 3vw, 36px);
}

.blog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
        var(--panel);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
    color: inherit;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

a.blog-card:hover {
    transform: translateY(-6px);
    border-color: rgba(54, 240, 194, 0.45);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.34);
}

.blog-card-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: clamp(20px, 2.4vw, 28px);
}

.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.blog-tag {
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.76rem;
}

[data-theme="light"] .blog-tag {
    background: rgba(18, 32, 27, 0.05);
}

.blog-card-title {
    margin: 0;
    font-family: "Exo 2", "Inter", system-ui, sans-serif;
    font-size: clamp(1.3rem, 1vw + 1rem, 1.6rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--ink);
}

.blog-card-excerpt {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.blog-pagination {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: clamp(34px, 5vw, 60px);
}

.blog-page-current {
    color: var(--muted);
    font-weight: 800;
}

.blog-empty {
    grid-column: 1 / -1;
    padding: clamp(40px, 6vw, 80px) 0;
}

/* Blog article */
.blog-article {
    grid-column: 1 / -1;
    max-width: 820px;
    margin: 0 auto;
}

.blog-article-cover {
    display: block;
    width: 100%;
    border-radius: var(--radius);
    margin-bottom: clamp(24px, 3vw, 40px);
}

.blog-prose {
    color: var(--ink);
    font-size: clamp(1.02rem, 0.4vw + 0.96rem, 1.18rem);
    line-height: 1.75;
}

.blog-prose h2 {
    margin: 1.6em 0 0.5em;
    font-family: "Exo 2", "Inter", system-ui, sans-serif;
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 900;
    color: var(--ink);
}

.blog-prose h3 {
    margin: 1.4em 0 0.4em;
    font-size: clamp(1.2rem, 1.4vw, 1.5rem);
    font-weight: 800;
    color: var(--ink);
}

.blog-prose p {
    margin: 0 0 1.1em;
    color: var(--muted);
}

.blog-prose a {
    color: var(--teal) !important;
    text-decoration: underline !important;
}

.blog-prose ul,
.blog-prose ol {
    margin: 0 0 1.1em;
    padding-left: 1.3em;
    color: var(--muted);
}

.blog-prose li {
    margin-bottom: 0.4em;
}

.blog-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.blog-prose code {
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.9em;
}

.blog-prose pre {
    padding: 16px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #0c1316;
}

.blog-prose blockquote {
    margin: 0 0 1.1em;
    padding-left: 16px;
    border-left: 3px solid var(--teal);
    color: var(--muted);
}

[data-theme="light"] .blog-prose code {
    background: rgba(18, 32, 27, 0.06);
}

.blog-back {
    display: inline-block;
    margin-top: clamp(28px, 4vw, 48px);
}

/* ---------------------------------------------------------------------------
   Header navigation: services dropdown + mobile hamburger (Bootstrap collapse)
--------------------------------------------------------------------------- */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.nav-toggle svg {
    width: 24px;
    height: 24px;
}

.hat_icon .icon.dropdown {
    position: relative;
}

.hat_icon .icon a.is-active {
    color: var(--ink) !important;
    box-shadow: inset 0 -2px 0 var(--teal);
}

/* Services dropdown menu (Bootstrap dropdown), themed dark/light. */
.nav-dropdown.dropdown-menu {
    margin-top: 8px;
    padding: 6px;
    min-width: 13rem;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.nav-dropdown .dropdown-item {
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--muted) !important;
    font-weight: 700;
    white-space: nowrap;
}

.nav-dropdown .dropdown-item:hover,
.nav-dropdown .dropdown-item:focus {
    color: var(--ink) !important;
    background: var(--soft);
}

/* Desktop: nav shown inline, pushed to the right. */
@media (min-width: 992px) {
    .nav-collapse {
        display: block;
        margin-left: auto;
    }

    .nav-close {
        display: none;
    }
}

/* Mobile / tablet: hamburger opens a full-screen overlay menu. */
@media (max-width: 991px) {
    .nav-toggle {
        display: inline-flex;
    }

    .nav-collapse {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        padding: 80px 0 48px;
        background: var(--deep);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }

    body.nav-open {
        overflow: hidden;
    }

    body.nav-open .nav-collapse {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav-close {
        position: absolute;
        top: 20px;
        right: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: var(--ink);
        background: transparent;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        cursor: pointer;
    }

    .nav-close svg {
        width: 24px;
        height: 24px;
    }

    /* Category list: left-aligned rows with a divider under each (drawer style). */
    .nav-collapse .hat_icon {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
    }

    .nav-collapse .hat_icon .icon {
        width: 100%;
    }

    .nav-collapse .hat_icon .icon a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 16px 22px;
        font-size: 1.18rem;
        font-weight: 700;
        text-align: left;
        border-bottom: 1px solid var(--line);
    }

    /* Active page + expanded category: teal accent bar on the left. */
    .nav-collapse .icon a.is-active {
        color: var(--teal) !important;
        box-shadow: inset 3px 0 0 var(--teal);
    }

    .nav-collapse .icon.dropdown > .dropdown-toggle[aria-expanded="true"] {
        background: var(--soft);
        box-shadow: inset 3px 0 0 var(--teal);
    }

    .nav-collapse .dropdown-toggle::after {
        transition: transform 0.2s ease;
    }

    .nav-collapse .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

    /* Submenu: indented sub-rows, shown only when the category is expanded. */
    .nav-collapse .nav-dropdown.dropdown-menu {
        position: static !important;
        width: 100%;
        margin: 0;
        padding: 0;
        transform: none !important;
        background: rgba(255, 255, 255, 0.02);
        border: 0;
        box-shadow: none;
        text-align: left;
    }

    [data-theme="light"] .nav-collapse .nav-dropdown.dropdown-menu {
        background: rgba(18, 32, 27, 0.03);
    }

    .nav-collapse .nav-dropdown .dropdown-item {
        padding: 13px 22px 13px 38px;
        font-size: 1.02rem;
        font-weight: 600;
        color: var(--muted) !important;
        border-bottom: 1px solid var(--line);
    }

    .nav-collapse .nav-dropdown li:last-child .dropdown-item {
        border-bottom: 0;
    }

    /* Language switch and theme toggle sit below the list, centered. */
    .nav-collapse .lang-switch {
        margin: 28px auto 0;
    }

    .nav-collapse .theme-toggle {
        margin: 18px auto 0;
    }
}

/* Footer navigation - every page link, including the blog. */
.footer-nav {
    width: min(100%, 1520px);
    margin: 0 auto;
    padding: clamp(20px, 3vw, 32px) clamp(18px, 4vw, 64px);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    border-top: 1px solid var(--line);
}

.footer-nav a {
    color: var(--muted) !important;
    font-weight: 700;
    font-size: 0.95rem;
}

.footer-nav a:hover {
    color: var(--ink) !important;
}

/* ---------------------------------------------------------------------------
   Header geometry (Variant B - aggressive ~25°, matches the home 115° cut):
   sharp left tail, vertical dividers between items, diagonal accent line.
   Desktop only; the mobile hamburger menu stays plain.
--------------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* Vertical dividers between every nav item (first one has none). */
    .hat_icon {
        gap: 0;
    }

    .hat_icon .icon a {
        padding: 8px 13px;
    }

    .hat_icon > * {
        position: relative;
    }

    .hat_icon > *:not(:first-child)::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 64%;
        background: rgba(255, 255, 255, 0.15);
    }

    [data-theme="light"] .hat_icon > *:not(:first-child)::before {
        background: rgba(18, 32, 27, 0.15);
    }

    /* The lang pill and theme button are smaller than nav items and have their
       own visible border, so the default `left: 0` divider sits right against
       them. Push the divider into the gap (13px before each item) and widen
       the margin so the visible content has the same 13px of breathing room
       on both sides of the divider as the regular nav text. */
    .hat_icon .lang-switch {
        margin-left: 13px;
    }
    .hat_icon .lang-switch::before {
        left: -13px;
    }
    .hat_icon .theme-toggle {
        margin-left: 26px;
    }
    .hat_icon .theme-toggle::before {
        left: -13px;
    }
}

@media (min-width: 1280px) {
    /* At desktop the band (.hats::before) is the visible bar, so the frosted
       wrapper background is hidden - the sharp left tail can then reveal the
       page behind it as you scroll, like the home hero cut. */
    .site-header::before {
        display: none;
    }

    /* Sharp left tail + soft two-zone band behind the nav row, with a gentle
       transition so there is no jagged stair-stepping. */
    .hats {
        position: relative;
    }

    .hats > * {
        position: relative;
        z-index: 1;
    }

    .hats::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: var(--radius);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%, 0 36%);
        background:
            linear-gradient(115deg,
                rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 44%,
                rgba(142, 123, 255, 0.10) 49%, rgba(255, 177, 74, 0.05) 100%),
            var(--panel);
    }

    [data-theme="light"] .hats::before {
        background:
            linear-gradient(115deg,
                rgba(18, 32, 27, 0.03) 0%, rgba(18, 32, 27, 0.03) 44%,
                rgba(111, 91, 224, 0.08) 49%, rgba(198, 120, 26, 0.05) 100%),
            var(--panel);
    }

    /* Crisp, perfectly straight diagonal accent line - a thin rotated bar
       (not a gradient hard-stop), placed in the empty gap so it never sits on
       the menu text. Same ~25° lean as the home hero cut. */
    .hats::after {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        bottom: 0;
        left: 42%;
        width: 2px;
        background: var(--teal);
        opacity: 0.85;
        transform: rotate(25deg);
        transform-origin: center;
    }
}

.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form-messages {
    margin-bottom: 16px;
}

.form-message {
    margin: 0 0 8px;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-weight: 700;
}

.form-message.success {
    color: #bdfce9;
    background: rgba(54, 240, 194, 0.12);
    border: 1px solid rgba(54, 240, 194, 0.4);
}

.form-message.error {
    color: #ffd9b8;
    background: rgba(255, 177, 74, 0.12);
    border: 1px solid rgba(255, 177, 74, 0.4);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    padding: 18px clamp(18px, 4vw, 64px);
    border-top: 1px solid var(--line);
}

.footer-bottom p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
}

@media (max-width: 860px) {
    .footer-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .contact-form {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Language switcher (EN / UA) in the header
--------------------------------------------------------------------------- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
}

.lang-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 4px 11px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted) !important;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.lang-opt:hover {
    color: var(--ink) !important;
}

.lang-opt.is-active {
    color: #071010 !important;
    background: linear-gradient(135deg, var(--teal), #b8ffec);
}

/* ---------------------------------------------------------------------------
   Data parsing case - spreadsheet mockups + client review card
--------------------------------------------------------------------------- */

/* Spreadsheet thumbnail inside a cases-list tile */
.mock-sheet {
    background: #f6f8f6;
    color: #1f2a26;
    height: clamp(160px, 18vw, 220px);
    display: flex;
    flex-direction: column;
}

.mock-sheet table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    table-layout: fixed;
}

.mock-sheet th,
.mock-sheet td {
    padding: 5px 8px;
    text-align: left;
    border: 1px solid #d7ded8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mock-sheet th {
    background: #e7ece8;
    color: #41514a;
    font-weight: 700;
}

.mock-sheet td:first-child,
.mock-sheet th:first-child {
    width: 26px;
    color: #6b7a73;
    text-align: center;
}

.mock-sheet-tabs {
    margin-top: auto;
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: #e3e8e4;
    border-top: 1px solid #cfd6d0;
    font-size: 10px;
    font-weight: 700;
    color: #5a6862;
}

.mock-sheet-tabs span {
    padding: 3px 7px;
    border-radius: 4px 4px 0 0;
    background: #d4dbd5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mock-sheet-tabs .is-active {
    background: #1f8a52;
    color: #fff;
}

/* Real spreadsheet screenshots on the case detail page */
.sheet-shots {
    display: grid;
    gap: clamp(20px, 3vw, 36px);
    width: min(100%, 1000px);
    margin: 0 auto;
}

.shot {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #16222a;
    box-shadow: var(--shadow);
}

.shot-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: #16222a;
    border-bottom: 1px solid #243036;
}

.shot-bar .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.shot-file {
    margin-left: 10px;
    color: #8aa39a;
    font-size: 12px;
    letter-spacing: 0.3px;
}

.shot-scroll {
    overflow: hidden;
}

.shot img {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
}

/* On phones the wide spreadsheet would shrink to an unreadable strip, so let
   it render taller and scroll horizontally with a swipe. */
@media (max-width: 720px) {
    .shot-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .shot-scroll img {
        width: auto;
        height: clamp(320px, 62vh, 470px);
        max-width: none;
    }

    .shot {
        position: relative;
    }

    .shot::after {
        content: "↔";
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(11, 16, 18, 0.72);
        color: var(--teal);
        font-size: 14px;
        font-weight: 900;
        pointer-events: none;
    }
}

/* Client review card */
.case-review {
    grid-column: 1 / -1;
    margin: 0 auto clamp(48px, 7vw, 100px);
    width: min(100%, 760px);
}

.case-review .eyebrow {
    text-align: center;
}

.review-card {
    margin-top: 16px;
    padding: clamp(22px, 3vw, 34px);
    border: 1px solid rgba(54, 240, 194, 0.28);
    border-radius: 14px;
    background:
        linear-gradient(160deg, rgba(54, 240, 194, 0.08), rgba(255, 255, 255, 0.02)),
        var(--panel);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

.review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.review-head-main {
    display: flex;
    align-items: center;
    gap: 11px;
}

.review-thumb {
    display: inline-flex;
    width: 30px;
    height: 30px;
    color: var(--teal);
}

.review-thumb svg {
    width: 100%;
    height: 100%;
}

.review-title {
    margin: 0;
    font-family: "Exo 2", "Inter", system-ui, sans-serif;
    font-size: clamp(1.15rem, 1vw + 0.9rem, 1.5rem);
    font-weight: 900;
    color: var(--ink);
}

.review-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-date,
.review-price {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
}

.review-date {
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
}

.review-price {
    background: rgba(54, 240, 194, 0.14);
    color: var(--teal);
}

.review-ratings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
    margin: 18px 0;
}

.review-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.review-rating > span:first-child {
    color: var(--muted);
    font-size: 0.9rem;
}

.review-rating .stars {
    color: var(--teal);
    font-size: 0.78rem;
    letter-spacing: 1px;
    white-space: nowrap;
}

.review-text {
    margin: 0;
    padding: 6px 0 4px;
    color: var(--ink);
    font-size: clamp(1rem, 0.4vw + 0.95rem, 1.12rem);
    line-height: 1.65;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.review-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal), var(--violet));
    color: #071010;
    font-weight: 900;
    font-size: 0.95rem;
}

.review-author-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.review-author-meta strong {
    color: var(--ink);
    font-weight: 800;
}

.review-author-meta span {
    color: var(--muted);
    font-size: 0.84rem;
}

@media (max-width: 560px) {
    .review-ratings {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Theme toggle button + Light theme
   Dark stays the default (the :root palette). [data-theme="light"] redefines
   the palette and patches the few surfaces that hardcoded a dark/white value.
--------------------------------------------------------------------------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-left: 8px;
    padding: 0;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--teal);
    border-color: var(--teal);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: block; }

/* Keep the language chips readable regardless of the global `a` color rule. */
.lang-opt { color: var(--muted) !important; }
.lang-opt:hover { color: var(--ink) !important; }
.lang-opt.is-active { color: #071010 !important; }

[data-theme="light"] {
    --ink: #14201b;
    --muted: #566963;
    --deep: #f2f5f3;
    --panel: #ffffff;
    --panel-2: #eef2f0;
    --line: rgba(18, 32, 27, 0.12);
    --soft: rgba(18, 32, 27, 0.04);
    --paper: #ece8f7;
    --paper-ink: #241a3d;
    --paper-muted: #5b5180;
    --teal: #0c9b73;
    --amber: #c6781a;
    --violet: #6f5be0;
    --shadow: 0 20px 50px rgba(20, 35, 45, 0.12);
}

[data-theme="light"] .theme-toggle { background: rgba(18, 32, 27, 0.04); }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

[data-theme="light"] body {
    background:
        linear-gradient(115deg, rgba(12, 155, 115, 0.10) 0%, rgba(242, 245, 243, 0) 34%),
        linear-gradient(245deg, rgba(198, 120, 26, 0.08) 0%, rgba(242, 245, 243, 0) 32%),
        radial-gradient(circle at 72% 12%, rgba(111, 91, 224, 0.10), transparent 34%),
        var(--deep);
}

[data-theme="light"] body::before {
    background-image:
        linear-gradient(rgba(18, 32, 27, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 32, 27, 0.045) 1px, transparent 1px);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 72%);
}

/* Surfaces that used a subtle white overlay on dark need a dark tint on light. */
[data-theme="light"] .lang-switch { background: rgba(18, 32, 27, 0.04); }
[data-theme="light"] .secondary_button { background: rgba(18, 32, 27, 0.05); }
[data-theme="light"] .hero-stack span { background: rgba(18, 32, 27, 0.04); color: #2c3a34; }
/* Hero floating notes used a light frosted bg with near-white text - that
   washes out on a light page. Give them an opaque light card with dark text. */
[data-theme="light"] .floating-note {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(18, 32, 27, 0.1);
    box-shadow: 0 18px 44px rgba(20, 35, 45, 0.16);
    color: #2c3a34;
}
[data-theme="light"] .floating-note strong { color: #14201b; }
[data-theme="light"] .floating-note span { color: #0a8c68; }
[data-theme="light"] .case-results li { background: rgba(18, 32, 27, 0.04); color: #2c3a34; }
[data-theme="light"] .case-facts { background: rgba(18, 32, 27, 0.03); }
[data-theme="light"] .review-date { background: rgba(18, 32, 27, 0.05); }
/* The footer keeps its dark slab in light mode (a dark footer under a light
   page). Re-scope the palette to dark values so everything inside it - title,
   text, links, white social icons and the contact form - stays readable. */
[data-theme="light"] .footer {
    --ink: #f7fbf7;
    --muted: #a9b9b2;
    --line: rgba(247, 251, 247, 0.12);
    --soft: rgba(247, 251, 247, 0.07);
    --teal: #36f0c2;
}

/* Panels that hardcoded a dark fill -> light lavender so the (now dark) text
   inside stays readable. */
[data-theme="light"] .split-showcase {
    background: #efeafb;
    color: var(--ink);
}
[data-theme="light"] .split-showcase .website_description { color: #4a4168; }
[data-theme="light"] .case-panel {
    background: linear-gradient(100deg, var(--paper) 0%, var(--paper) 52%, #ddd6ef 52%, #ddd6ef 100%);
}

/* ----------------------------------------------------------------------------
   Mid-page CTA strip (between sections on the home page)
---------------------------------------------------------------------------- */
.mid-cta {
    grid-column: 2 / 12;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 24px;
    padding: clamp(20px, 2.6vw, 32px) clamp(22px, 3vw, 36px);
    margin-bottom: clamp(54px, 7vw, 110px);
    border-radius: var(--radius);
    background: linear-gradient(120deg, rgba(54, 240, 194, 0.10), rgba(255, 177, 74, 0.06));
    border: 1px solid rgba(54, 240, 194, 0.22);
}

.mid-cta-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 640px;
}

.mid-cta-text strong {
    color: var(--ink);
    font-size: clamp(1.1rem, 0.4vw + 1rem, 1.45rem);
    font-weight: 800;
}

.mid-cta-text span {
    color: var(--muted);
    font-size: clamp(0.92rem, 0.2vw + 0.88rem, 1.05rem);
}

.mid-cta-btn {
    flex-shrink: 0;
}

[data-theme="light"] .mid-cta {
    background: linear-gradient(120deg, rgba(12, 155, 115, 0.10), rgba(198, 120, 26, 0.06));
    border-color: rgba(12, 155, 115, 0.22);
}

/* ----------------------------------------------------------------------------
   Pricing page — example "what is included" + "what is NOT included" blocks
---------------------------------------------------------------------------- */
.pricing_div_main {
    position: relative;
    z-index: 1;
}

.pricing-detail,
.pricing-not-included,
.payment-schedule {
    grid-column: 2 / 12;
    margin-bottom: clamp(54px, 7vw, 110px);
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
}

.payment-stage {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: clamp(22px, 2.6vw, 32px);
    border-radius: var(--radius);
    background: rgba(247, 251, 247, 0.04);
    border: 1px solid rgba(247, 251, 247, 0.08);
}

.payment-stage strong {
    color: var(--amber);
    font-size: clamp(2.2rem, 2.8vw, 3.4rem);
    font-weight: 900;
    line-height: 1;
}

.payment-stage .stage-label {
    color: var(--ink);
    font-size: clamp(1rem, 0.18vw + 0.96rem, 1.15rem);
    font-weight: 800;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.payment-stage p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

[data-theme="light"] .payment-stage {
    background: rgba(18, 32, 27, 0.03);
    border-color: rgba(18, 32, 27, 0.08);
}

@media (max-width: 700px) {
    .payment-grid { grid-template-columns: 1fr; }
}

.pricing-detail-list,
.pricing-not-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 12px;
}

.pricing-detail-list li,
.pricing-not-list li {
    position: relative;
    padding: 14px 18px 14px 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.04);
    color: var(--ink);
    font-size: clamp(0.95rem, 0.18vw + 0.92rem, 1.05rem);
    line-height: 1.55;
}

.pricing-detail-list li::before {
    content: "✓";
    position: absolute;
    left: 16px;
    top: 14px;
    color: var(--teal);
    font-weight: 900;
    font-size: 1.1rem;
}

.pricing-not-list li {
    padding-left: 42px;
}

.pricing-not-list li::before {
    content: "—";
    position: absolute;
    left: 16px;
    top: 14px;
    color: var(--amber);
    font-weight: 900;
    font-size: 1.1rem;
}

.pricing-not-list li strong {
    color: var(--ink);
    font-weight: 800;
}

[data-theme="light"] .pricing-detail-list li,
[data-theme="light"] .pricing-not-list li {
    background: rgba(18, 32, 27, 0.03);
}

/* ----------------------------------------------------------------------------
   Contact form — channel selector (Email / Telegram / WhatsApp)
---------------------------------------------------------------------------- */
.contact-label {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.channel-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.channel-option {
    position: relative;
    flex: 1 1 110px;
    cursor: pointer;
}

.channel-option input {
    position: absolute;
    opacity: 0;
    inset: 0;
    pointer-events: none;
}

.channel-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.channel-option input:checked + span {
    background: rgba(54, 240, 194, 0.14);
    border-color: var(--teal);
    color: var(--ink);
}

.channel-option input:focus-visible + span {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

[data-theme="light"] .channel-option span {
    background: rgba(18, 32, 27, 0.04);
}

[data-channel-field][hidden] {
    display: none !important;
}

/* ----------------------------------------------------------------------------
   Floating quick-contact buttons (Telegram + WhatsApp)
---------------------------------------------------------------------------- */
.floating-contact {
    position: fixed;
    right: clamp(14px, 2vw, 24px);
    bottom: clamp(14px, 2vw, 24px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.floating-contact__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.floating-contact__btn:hover,
.floating-contact__btn:focus-visible {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
    color: #fff;
}

.floating-contact__btn--telegram { background: #229ED9; }
.floating-contact__btn--whatsapp { background: #25D366; }

@media (max-width: 520px) {
    .floating-contact__btn { width: 48px; height: 48px; }
}

/* ---------------------------------------------------------------------------
   Themed custom cursor: a soft teal glow pinned to the pointer, a big ring that
   follows it, plus three smaller rings that trail behind with a noticeable
   delay (an echo trail). Decorative only - the native cursor stays for
   usability. Elements are injected by main.js, which gates everything on a fine
   pointer (mouse) and prefers-reduced-motion, so touch / no-JS see none.
--------------------------------------------------------------------------- */
.cursor-glow,
.cursor-ring,
.cursor-trail {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    will-change: transform, opacity;
}

.cursor-glow {
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    background: radial-gradient(circle, rgba(54, 240, 194, 0.9), rgba(54, 240, 194, 0) 70%);
    mix-blend-mode: screen;
}

.cursor-ring {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 1.5px solid rgba(54, 240, 194, 0.6);
    transition:
        opacity 0.3s ease,
        width 0.25s ease,
        height 0.25s ease,
        margin 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}

/* The three rings that follow with a delay (positions driven by main.js):
   smaller and fainter the further they lag behind. */
.cursor-trail {
    border: 1.5px solid rgba(54, 240, 194, 0.5);
}
.cursor-trail-1 { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-color: rgba(54, 240, 194, 0.55); }
.cursor-trail-2 { width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; border-color: rgba(54, 240, 194, 0.4); }
.cursor-trail-3 { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-color: rgba(54, 240, 194, 0.27); }

/* Visible only once the mouse has moved / is inside the window. */
.cursor-visible .cursor-glow,
.cursor-visible .cursor-ring,
.cursor-visible .cursor-trail {
    opacity: 1;
}

/* Over links, buttons and form controls the ring opens up and fills faintly. */
.cursor-active .cursor-ring {
    width: 66px;
    height: 66px;
    margin: -33px 0 0 -33px;
    background-color: rgba(54, 240, 194, 0.08);
    border-color: rgba(54, 240, 194, 0.9);
}

/* Press feedback. */
.cursor-down .cursor-ring {
    background-color: rgba(54, 240, 194, 0.16);
}

/* Light theme: screen-blend washes out on a light page, so use a normal blend
   with the darker light-theme teal (#0c9b73 ~ 12,155,115). */
[data-theme="light"] .cursor-glow {
    mix-blend-mode: normal;
    background: radial-gradient(circle, rgba(12, 155, 115, 0.55), rgba(12, 155, 115, 0) 70%);
}
[data-theme="light"] .cursor-ring {
    border-color: rgba(12, 155, 115, 0.55);
}
[data-theme="light"] .cursor-trail-1 { border-color: rgba(12, 155, 115, 0.5); }
[data-theme="light"] .cursor-trail-2 { border-color: rgba(12, 155, 115, 0.4); }
[data-theme="light"] .cursor-trail-3 { border-color: rgba(12, 155, 115, 0.28); }
[data-theme="light"] .cursor-active .cursor-ring {
    background-color: rgba(12, 155, 115, 0.08);
    border-color: rgba(12, 155, 115, 0.85);
}
[data-theme="light"] .cursor-down .cursor-ring {
    background-color: rgba(12, 155, 115, 0.16);
}

/* ---------------------------------------------------------------------------
   Cookie consent banner (GDPR / ePrivacy). A bottom card in the site's own
   style - NOT a blocking "cookie wall": the page stays usable behind it.
   Toggled via the [hidden] attribute by the consent module in main.js.
--------------------------------------------------------------------------- */
.cookie-consent {
    position: fixed;
    left: 50%;
    bottom: clamp(12px, 2vw, 26px);
    transform: translateX(-50%);
    z-index: 9990;
    width: min(700px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)),
        var(--panel);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
    color: var(--ink);
    animation: cookie-rise 0.35s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.cookie-consent[hidden] { display: none; }

@keyframes cookie-rise {
    from { opacity: 0; transform: translate(-50%, 18px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.cookie-consent-inner { padding: clamp(18px, 2.6vw, 28px); }

.cookie-consent-title {
    margin: 0 0 8px;
    font-size: clamp(1.12rem, 0.5vw + 1rem, 1.4rem);
    font-weight: 900;
    color: var(--ink);
}

.cookie-consent-text {
    margin: 0 0 18px;
    color: var(--muted);
    line-height: 1.55;
    font-size: 0.95rem;
}
.cookie-consent-text a { color: var(--teal); font-weight: 700; }

.cookie-categories {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
    animation: cookie-cats 0.25s ease;
}
/* Author display rules above beat the UA [hidden] style, so restore it. */
.cookie-categories[hidden],
.cookie-btn[hidden] { display: none; }

@keyframes cookie-cats {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.cookie-category {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
}
.cookie-category.is-locked,
.cookie-category:has(input:disabled) { cursor: default; }

.cookie-category-info { display: flex; flex-direction: column; gap: 3px; }
.cookie-category-name { font-weight: 800; color: var(--ink); }
.cookie-category-desc { color: var(--muted); font-size: 0.85rem; line-height: 1.45; }

/* Toggle switch */
.cookie-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.cookie-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.cookie-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid var(--line);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.cookie-switch-track::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}
.cookie-switch input:checked + .cookie-switch-track {
    background: linear-gradient(135deg, var(--teal), #b8ffec);
    border-color: transparent;
}
.cookie-switch input:checked + .cookie-switch-track::before { transform: translateX(20px); }
.cookie-switch input:focus-visible + .cookie-switch-track {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}
.cookie-switch.is-locked { opacity: 0.65; }
.cookie-switch.is-locked input { cursor: not-allowed; }

/* Three equal-weight buttons (EU: "Reject" must be as prominent as "Accept"). */
.cookie-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.cookie-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--teal);
    border-radius: var(--radius);
    background: rgba(54, 240, 194, 0.10);
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.cookie-btn:hover {
    background: rgba(54, 240, 194, 0.18);
    transform: translateY(-1px);
}
.cookie-btn:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

[data-theme="light"] .cookie-btn { background: rgba(12, 155, 115, 0.10); border-color: var(--teal); }
[data-theme="light"] .cookie-btn:hover { background: rgba(12, 155, 115, 0.18); }
[data-theme="light"] .cookie-switch-track { background: rgba(18, 32, 27, 0.12); }
[data-theme="light"] .cookie-category { background: rgba(18, 32, 27, 0.03); }

@media (max-width: 560px) {
    .cookie-actions { grid-template-columns: 1fr; }
    .cookie-consent { bottom: 0; width: 100vw; border-radius: var(--radius) var(--radius) 0 0; }
}

/* Footer legal links (Privacy Policy + Cookie settings). */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
}
.footer-legal a,
.footer-legal-btn {
    color: var(--muted) !important;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}
.footer-legal-btn {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
}
.footer-legal a:hover,
.footer-legal-btn:hover { color: var(--ink) !important; }

/* ---------------------------------------------------------------------------
   Legal / long-form pages (Privacy Policy). Readable measure, clear headings
   and a responsive cookie table.
--------------------------------------------------------------------------- */
.legal-updated {
    margin-top: 18px;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 700;
}

.legal-page {
    grid-column: 1 / -1;
    width: min(860px, 100%);
    margin: 0 auto;
    padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 7vw, 96px);
    counter-reset: legal-section;
}

.legal-section { margin-bottom: clamp(30px, 4vw, 48px); }

/* Sections number themselves, so adding/reordering never desyncs the numbers
   and headings stay number-free for translation. */
.legal-section h2 {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: clamp(1.3rem, 0.8vw + 1.1rem, 1.7rem);
    font-weight: 900;
    line-height: 1.2;
    counter-increment: legal-section;
}
.legal-section h2::before {
    content: counter(legal-section) ". ";
    color: var(--teal);
}

.legal-section p {
    margin: 0 0 14px;
    color: var(--muted);
    line-height: 1.7;
    font-size: 1.02rem;
}

.legal-section ul {
    margin: 0 0 14px;
    padding-left: 1.25em;
    color: var(--muted);
    line-height: 1.7;
    font-size: 1.02rem;
}
.legal-section li { margin-bottom: 8px; }
.legal-section strong { color: var(--ink); }
.legal-section a { color: var(--teal); font-weight: 700; }

.legal-note {
    padding: 14px 16px;
    border-left: 3px solid var(--teal);
    background: rgba(54, 240, 194, 0.06);
    border-radius: var(--radius);
}

.legal-table-wrap { overflow-x: auto; margin: 0 0 14px; }

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    min-width: 560px;
}
.legal-table th,
.legal-table td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    color: var(--muted);
    line-height: 1.5;
}
.legal-table th {
    color: var(--ink);
    font-weight: 800;
    background: rgba(255, 255, 255, 0.04);
}
.legal-table code {
    color: var(--ink);
    font-size: 0.88em;
    word-break: break-word;
}
[data-theme="light"] .legal-table th { background: rgba(18, 32, 27, 0.04); }
[data-theme="light"] .legal-note { background: rgba(12, 155, 115, 0.07); }