/* Abidiba Studio — Electric Block design system */

.ab-site,
.ab-site * {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .ab-site *,
    .ab-site *::before,
    .ab-site *::after {
        animation-duration: 0.001s !important;
        transition-duration: 0.001s !important;
    }
}

body.ab-site {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.ab-site img,
.ab-site svg {
    max-width: 100%;
}

.ab-site {
    --violet: #4b32e6;
    --violet-dark: #3a25c4;
    --indigo: #241566;
    --indigo-deep: #1a0f4d;
    --yellow: #ffd23e;
    --pink: #ff6b9d;
    --lilac: #f6f4ff;
    --lilac-line: #e5e0fa;
    --white: #ffffff;
    --text: #3d3a52;
    --muted: #6b678a;
    --sticker-shadow: 3px 3px 0 var(--indigo);
    --sticker-shadow-deep: 3px 3px 0 var(--indigo-deep);
    background: var(--white);
    color: var(--text);
    font-family: Sora, "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.ab-site h1,
.ab-site h2,
.ab-site h3 {
    color: var(--indigo);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
}

.ab-site h1 { font-size: clamp(42px, 5.2vw, 72px); }
.ab-site h2 { font-size: clamp(30px, 4vw, 46px); }
.ab-site h3 { font-size: 20px; letter-spacing: -0.01em; }
.ab-site p { margin: 0 0 18px; }

.ab-site a {
    color: var(--violet);
}

.ab-site :focus-visible {
    outline: 3px solid var(--violet);
    outline-offset: 2px;
    border-radius: 4px;
}

.ab-hero :focus-visible,
.ab-cta :focus-visible,
.ab-footer :focus-visible {
    outline-color: var(--yellow);
}

.ab-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 22px;
}

/* ---------- Buttons ---------- */

.ab-btn {
    display: inline-block;
    background: var(--yellow);
    color: var(--indigo);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    padding: 16px 26px;
    border: 2px solid var(--indigo);
    border-radius: 10px;
    box-shadow: var(--sticker-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ab-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--indigo);
}

.ab-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--indigo);
}

.ab-btn-secondary {
    background: transparent;
    color: var(--indigo);
    box-shadow: none;
}

.ab-btn-secondary:hover {
    background: var(--lilac);
    transform: none;
    box-shadow: none;
}

.ab-hero .ab-btn-secondary,
.ab-page-hero .ab-btn-secondary,
.ab-cta .ab-btn-secondary {
    color: var(--white);
    border-color: var(--white);
}

.ab-hero .ab-btn-secondary:hover,
.ab-page-hero .ab-btn-secondary:hover,
.ab-cta .ab-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
}

.ab-hero .ab-btn:not(.ab-btn-secondary),
.ab-page-hero .ab-btn:not(.ab-btn-secondary),
.ab-cta .ab-btn:not(.ab-btn-secondary) {
    border-color: var(--indigo-deep);
    box-shadow: var(--sticker-shadow-deep);
}

.ab-btn-small {
    padding: 12px 18px;
    font-size: 13px;
}

.ab-btn-wide {
    display: block;
    text-align: center;
    width: 100%;
}

.ab-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 26px 0 0;
}

.ab-actions.ab-center {
    justify-content: center;
}

/* ---------- Eyebrow sticker chips ---------- */

.ab-eyebrow {
    display: inline-block;
    background: var(--yellow);
    color: var(--indigo);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 7px;
    box-shadow: var(--sticker-shadow);
    transform: rotate(-1.2deg);
    margin: 0 0 18px;
}

/* ---------- Header / nav ---------- */

.ab-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--lilac-line);
    backdrop-filter: blur(16px);
}

.ab-nav {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.ab-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.ab-mark {
    display: block;
    width: 42px;
    height: 42px;
    flex: none;
}

.ab-wordmark {
    color: var(--indigo);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.ab-wordmark span {
    font-weight: 400;
}

.ab-menu {
    display: flex;
    align-items: center;
    gap: 28px;
}

.ab-menu a {
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 2px;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.ab-menu a:hover {
    color: var(--violet);
    border-bottom-color: var(--yellow);
}

.ab-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 10px;
    background: var(--white);
    border: 2px solid var(--indigo);
    border-radius: 10px;
    box-shadow: var(--sticker-shadow);
    cursor: pointer;
}

.ab-menu-toggle span {
    display: block;
    height: 2.5px;
    border-radius: 2px;
    background: var(--indigo);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.ab-menu-toggle .ab-menu-toggle-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ab-menu-open .ab-menu-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.ab-menu-open .ab-menu-toggle span:nth-child(2) { opacity: 0; }
.ab-menu-open .ab-menu-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

body.ab-lock-scroll {
    overflow: hidden;
}

/* ---------- Hero ---------- */

.ab-hero {
    position: relative;
    background: var(--violet);
    color: var(--white);
    padding: clamp(64px, 8vw, 110px) 0 120px;
    overflow: hidden;
}

.ab-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: 0.5;
    pointer-events: none;
}

body.ab-cursor-active .ab-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(560px circle at var(--cursor-x, 50%) var(--cursor-y, 30%), rgba(255, 107, 157, 0.28), rgba(255, 210, 62, 0.1) 45%, transparent 70%);
    pointer-events: none;
}

.ab-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.ab-hero h1 {
    color: var(--white);
}

.ab-hl {
    display: inline-block;
    background: var(--yellow);
    color: var(--indigo);
    padding: 0 14px;
    border-radius: 10px;
    transform: rotate(-1deg);
    box-shadow: var(--sticker-shadow-deep);
}

.ab-hero .ab-eyebrow {
    background: var(--white);
    box-shadow: var(--sticker-shadow-deep);
}

.ab-hero-text {
    font-size: 17px;
    max-width: 560px;
    color: rgba(255, 255, 255, 0.88);
}

.ab-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 30px 0 0;
    padding: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.ab-trust li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ab-trust li::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--yellow);
    flex: none;
}

/* Hero design board */

.ab-hero-art {
    position: relative;
    min-height: 380px;
}

.ab-design-board {
    background: var(--white);
    color: var(--indigo);
    border: 2px solid var(--indigo-deep);
    border-radius: 18px;
    box-shadow: 7px 7px 0 var(--indigo-deep);
    padding: 24px;
    max-width: 420px;
    margin: 0 auto;
    transform: rotate(1.4deg);
}

.ab-board-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 2px dashed var(--lilac-line);
    padding-bottom: 14px;
    margin-bottom: 20px;
}

.ab-board-top span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--white);
    background: var(--pink);
    padding: 6px 10px;
    border-radius: 6px;
    transform: rotate(-2deg);
    box-shadow: 2px 2px 0 var(--indigo);
}

.ab-board-top strong {
    font-size: 15px;
    font-weight: 700;
}

.ab-garment {
    position: relative;
    background: var(--lilac);
    border-radius: 14px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ab-shirt-body {
    position: absolute;
    width: 130px;
    height: 150px;
    bottom: -30px;
    border-radius: 26px 26px 0 0;
    background: var(--violet);
}

.ab-shirt-body::before,
.ab-shirt-body::after {
    content: "";
    position: absolute;
    top: 8px;
    width: 34px;
    height: 62px;
    border-radius: 14px;
    background: var(--violet);
}

.ab-shirt-body::before { left: -26px; transform: rotate(18deg); }
.ab-shirt-body::after { right: -26px; transform: rotate(-18deg); }

.ab-shirt-neck {
    position: absolute;
    z-index: 1;
    width: 44px;
    height: 18px;
    bottom: 148px;
    border-radius: 0 0 22px 22px;
    background: var(--lilac);
    border: 3px solid var(--indigo);
    border-top: 0;
}

.ab-garment strong {
    position: relative;
    z-index: 2;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--yellow);
    text-shadow: 2px 2px 0 var(--indigo);
    transform: translateY(16px) rotate(-2deg);
}

.ab-colorways {
    display: flex;
    gap: 10px;
    margin: 18px 0 0;
}

.ab-colorways span {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    border: 2px solid var(--indigo);
}

.ab-colorways span:nth-child(1) { background: var(--violet); }
.ab-colorways span:nth-child(2) { background: var(--yellow); }
.ab-colorways span:nth-child(3) { background: var(--pink); }
.ab-colorways span:nth-child(4) { background: var(--indigo); }

.ab-spec-row {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.ab-spec-row span {
    flex: 1;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--lilac);
    border-radius: 7px;
    padding: 7px 4px;
}

.ab-floating-card {
    position: absolute;
    background: var(--yellow);
    color: var(--indigo);
    border: 2px solid var(--indigo-deep);
    border-radius: 12px;
    box-shadow: 4px 4px 0 var(--indigo-deep);
    padding: 12px 16px;
    display: grid;
    gap: 2px;
    font-size: 12px;
    line-height: 1.4;
}

.ab-floating-card strong {
    font-size: 15px;
    font-weight: 800;
}

.ab-floating-card-one {
    top: 6%;
    left: -4px;
    transform: rotate(-3deg);
}

.ab-floating-card-two {
    bottom: 4%;
    right: -4px;
    background: var(--white);
    transform: rotate(2.4deg);
}

/* ---------- Proof strip (sticker overlap onto hero) ---------- */

.ab-proof {
    position: relative;
    z-index: 2;
    margin-top: -58px;
    padding-bottom: 10px;
}

.ab-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.ab-proof-grid > div {
    background: var(--white);
    border: 2px solid var(--indigo);
    border-radius: 14px;
    box-shadow: var(--sticker-shadow);
    padding: 18px 20px;
    display: grid;
    gap: 4px;
}

.ab-proof-grid strong {
    color: var(--indigo);
    font-size: 15.5px;
    font-weight: 700;
}

.ab-proof-grid span {
    font-size: 13px;
    color: var(--muted);
}

/* ---------- Sections ---------- */

.ab-section {
    padding: clamp(64px, 7vw, 104px) 0;
}

.ab-soft {
    background: var(--lilac);
}

.ab-section-head {
    max-width: 620px;
    margin-bottom: clamp(34px, 4vw, 54px);
}

.ab-section-head p:last-child {
    color: var(--muted);
    margin-bottom: 0;
}

/* ---------- Service cards ---------- */

.ab-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ab-card {
    background: var(--white);
    border: 2px solid var(--lilac-line);
    border-radius: 16px;
    padding: 26px 24px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ab-card:hover {
    border-color: var(--indigo);
    box-shadow: 5px 5px 0 var(--indigo);
    transform: translate(-2px, -2px);
}

.ab-card h3 {
    margin-bottom: 10px;
}

.ab-card p {
    font-size: 14.5px;
    color: var(--muted);
    margin: 0;
}

.ab-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--violet);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: var(--sticker-shadow);
    transform: rotate(-2deg);
}

.ab-card:nth-child(even) .ab-card-icon {
    background: var(--pink);
    transform: rotate(2deg);
}

.ab-card-icon svg {
    width: 30px;
    height: 30px;
    fill: none;
    stroke: var(--white);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Why band + workflow ---------- */

.ab-why-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.ab-workflow-stack {
    display: grid;
    gap: 16px;
    background: var(--indigo);
    border-radius: 20px;
    padding: clamp(24px, 3vw, 38px);
    box-shadow: 7px 7px 0 var(--yellow);
}

.ab-workflow-head {
    display: grid;
    gap: 6px;
    margin-bottom: 8px;
}

.ab-workflow-head span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--yellow);
}

.ab-workflow-head strong {
    color: var(--white);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.ab-workflow-stack article {
    display: flex;
    gap: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    padding: 16px 18px;
}

.ab-workflow-stack article span {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--yellow);
    color: var(--indigo);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 0 var(--indigo-deep);
    transform: rotate(-2deg);
}

.ab-workflow-stack article strong {
    color: var(--white);
    font-size: 15.5px;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

.ab-workflow-stack article p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13.5px;
    margin: 0;
}

.ab-why-copy > p:not(.ab-eyebrow) {
    color: var(--muted);
}

.ab-check {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.ab-check li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--indigo);
}

.ab-check li::before {
    content: "✓";
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--yellow);
    border: 2px solid var(--indigo);
    color: var(--indigo);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

/* ---------- Process ---------- */

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

.ab-process article {
    background: var(--white);
    border: 2px solid var(--lilac-line);
    border-radius: 16px;
    padding: 28px 26px;
}

.ab-process article span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--pink);
    color: var(--white);
    font-size: 17px;
    font-weight: 800;
    box-shadow: var(--sticker-shadow);
    transform: rotate(-2deg);
    margin-bottom: 18px;
}

.ab-process article:nth-child(2) span { background: var(--violet); transform: rotate(1.5deg); }
.ab-process article:nth-child(3) span { background: var(--yellow); color: var(--indigo); transform: rotate(-1deg); }

.ab-process h3 {
    margin-bottom: 8px;
}

.ab-process p {
    font-size: 14.5px;
    color: var(--muted);
    margin: 0;
}

/* ---------- Pricing ---------- */

.ab-pricing-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: clamp(34px, 4vw, 54px);
}

.ab-pricing-head > div:first-child {
    max-width: 620px;
}

.ab-pricing-head p:not(.ab-eyebrow) {
    color: var(--muted);
    margin-bottom: 0;
}

.ab-pricing-summary {
    flex: none;
    display: grid;
    gap: 3px;
    background: var(--yellow);
    border: 2px solid var(--indigo);
    border-radius: 12px;
    box-shadow: var(--sticker-shadow);
    transform: rotate(1.6deg);
    padding: 14px 18px;
    max-width: 250px;
    font-size: 12.5px;
    color: var(--indigo);
    line-height: 1.45;
}

.ab-pricing-summary strong {
    font-size: 15px;
    font-weight: 800;
}

.ab-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.ab-price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 2px solid var(--lilac-line);
    border-radius: 18px;
    padding: 28px 24px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ab-price-card:hover {
    border-color: var(--indigo);
    box-shadow: 5px 5px 0 var(--indigo);
    transform: translate(-2px, -2px);
}

.ab-plan-top p {
    font-size: 13.5px;
    color: var(--muted);
    margin: 0 0 18px;
}

.ab-price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-top: 2px dashed var(--lilac-line);
    padding-top: 18px;
    margin-bottom: 16px;
}

.ab-price {
    font-size: 34px;
    font-weight: 800;
    color: var(--indigo);
    letter-spacing: -0.02em;
}

.ab-site .ab-duration {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

.ab-price-card ul {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    gap: 10px;
    flex: 1;
}

.ab-price-card ul li {
    position: relative;
    padding-left: 24px;
    font-size: 13.5px;
}

.ab-price-card ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--pink);
}

.ab-price-card .ab-btn {
    margin-top: auto;
}

.ab-popular {
    background: var(--violet);
    border-color: var(--indigo-deep);
    box-shadow: 6px 6px 0 var(--indigo-deep);
    color: rgba(255, 255, 255, 0.9);
}

.ab-popular:hover {
    border-color: var(--indigo-deep);
    box-shadow: 8px 8px 0 var(--indigo-deep);
}

.ab-popular h3,
.ab-popular .ab-price {
    color: var(--white);
}

.ab-popular .ab-plan-top p,
.ab-popular .ab-duration {
    color: rgba(255, 255, 255, 0.75);
}

.ab-popular .ab-price-row {
    border-top-color: rgba(255, 255, 255, 0.25);
}

.ab-popular ul li::before {
    background: var(--yellow);
}

.ab-pill {
    position: absolute;
    top: -14px;
    right: 18px;
    background: var(--yellow);
    color: var(--indigo);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 7px 12px;
    border: 2px solid var(--indigo-deep);
    border-radius: 8px;
    box-shadow: 2px 2px 0 var(--indigo-deep);
    transform: rotate(2.5deg);
}

.ab-site .ab-note {
    margin: 0 auto;
    margin-top: 30px;
    font-size: 13px;
    color: var(--muted);
    max-width: 760px;
    text-align: center;
}

/* ---------- FAQ ---------- */

.ab-faq-wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.ab-faq-intro p:not(.ab-eyebrow) {
    color: var(--muted);
}

.ab-faq-support {
    display: grid;
    gap: 8px;
    background: var(--white);
    border: 2px solid var(--indigo);
    border-radius: 16px;
    box-shadow: var(--sticker-shadow);
    padding: 22px 24px;
    margin-top: 26px;
    font-size: 14px;
    color: var(--muted);
}

.ab-faq-support strong {
    color: var(--indigo);
    font-size: 16px;
    font-weight: 700;
}

.ab-faq-support a {
    justify-self: start;
    font-weight: 700;
    color: var(--violet);
    text-decoration: none;
    border-bottom: 3px solid var(--yellow);
    padding-bottom: 1px;
}

.ab-faq-list {
    display: grid;
    gap: 12px;
}

.ab-faq-list details {
    background: var(--white);
    border: 2px solid var(--lilac-line);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.ab-faq-list details[open] {
    border-color: var(--indigo);
    box-shadow: 4px 4px 0 var(--indigo);
}

.ab-faq-list summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    padding: 18px 22px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--indigo);
}

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

.ab-faq-list summary::after {
    content: "+";
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--yellow);
    border: 2px solid var(--indigo);
    color: var(--indigo);
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease;
}

.ab-faq-list details[open] summary::after {
    transform: rotate(45deg);
}

.ab-faq-list details p {
    margin: 0;
    padding: 0 22px 20px;
    font-size: 14.5px;
    color: var(--muted);
}

/* ---------- CTA ---------- */

.ab-cta {
    background: var(--violet);
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ab-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: 0.5;
    pointer-events: none;
}

.ab-cta .ab-shell {
    position: relative;
    max-width: 720px;
}

.ab-cta h2 {
    color: var(--white);
}

.ab-cta p {
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- Page hero (inner pages) ---------- */

.ab-page-hero {
    background: var(--violet);
    color: var(--white);
    padding: clamp(56px, 7vw, 92px) 0;
    position: relative;
    overflow: hidden;
}

.ab-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: 0.5;
    pointer-events: none;
}

.ab-page-hero .ab-shell {
    position: relative;
}

.ab-page-hero h1 {
    color: var(--white);
    font-size: clamp(36px, 4.6vw, 60px);
}

.ab-page-hero p:not(.ab-eyebrow) {
    max-width: 640px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
}

.ab-page-hero .ab-eyebrow {
    background: var(--white);
    box-shadow: var(--sticker-shadow-deep);
}

/* ---------- About ---------- */

.ab-about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.ab-about-stats {
    display: grid;
    gap: 14px;
}

.ab-about-stats > div {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 18px 22px;
    display: grid;
    gap: 3px;
}

.ab-about-stats strong {
    font-size: 17px;
    font-weight: 800;
    color: var(--yellow);
}

.ab-about-stats span {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.8);
}

.ab-side-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pink);
    margin-bottom: 14px;
}

.ab-about-story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.ab-about-card {
    background: var(--white);
    border: 2px solid var(--indigo);
    border-radius: 18px;
    box-shadow: 6px 6px 0 var(--indigo);
    padding: clamp(26px, 3vw, 40px);
}

.ab-about-card h2 {
    font-size: clamp(24px, 2.6vw, 32px);
}

.ab-about-card p {
    color: var(--muted);
    font-size: 15px;
}

.ab-about-card p:last-child {
    margin-bottom: 0;
}

.ab-about-method ol {
    list-style: none;
    counter-reset: method;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.ab-about-method ol li {
    counter-increment: method;
    position: relative;
    background: var(--lilac);
    border-radius: 14px;
    padding: 18px 20px 18px 66px;
    display: grid;
    gap: 4px;
}

.ab-about-method ol li::before {
    content: "0" counter(method);
    position: absolute;
    left: 16px;
    top: 18px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--violet);
    color: var(--white);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 0 var(--indigo);
    transform: rotate(-2deg);
}

.ab-about-method ol li strong {
    color: var(--indigo);
    font-size: 15.5px;
    font-weight: 700;
}

.ab-about-method ol li span {
    font-size: 13.5px;
    color: var(--muted);
}

.ab-principles-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ab-principles-grid article {
    background: var(--white);
    border: 2px solid var(--lilac-line);
    border-radius: 16px;
    padding: 26px 24px;
}

.ab-principles-grid article span {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    color: var(--indigo);
    background: var(--yellow);
    border-radius: 7px;
    padding: 5px 9px;
    box-shadow: 2px 2px 0 var(--indigo);
    transform: rotate(-2deg);
    margin-bottom: 16px;
}

.ab-principles-grid h3 {
    font-size: 17px;
    margin-bottom: 8px;
}

.ab-principles-grid p {
    font-size: 14px;
    color: var(--muted);
    margin: 0;
}

.ab-about-business {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.ab-about-business > div p:not(.ab-eyebrow) {
    color: var(--muted);
    margin-bottom: 0;
}

/* ---------- Info / business cards ---------- */

.ab-info {
    background: var(--white);
    border: 2px solid var(--indigo);
    border-radius: 16px;
    box-shadow: var(--sticker-shadow);
    padding: 24px 26px;
}

.ab-info strong {
    display: block;
    color: var(--indigo);
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 10px;
}

.ab-info p {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 12px;
    line-height: 1.75;
}

.ab-info p:last-child {
    margin-bottom: 0;
}

.ab-info a {
    color: var(--violet);
    font-weight: 600;
    text-decoration: none;
}

.ab-info a:hover {
    border-bottom: 2px solid var(--yellow);
}

/* ---------- Contact ---------- */

.ab-contact-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}

.ab-contact-promise {
    display: grid;
    gap: 4px;
    background: var(--yellow);
    color: var(--indigo);
    border: 2px solid var(--indigo-deep);
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--indigo-deep);
    transform: rotate(1.6deg);
    padding: 20px 24px;
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 300px;
    justify-self: end;
}

.ab-contact-promise strong {
    font-size: 16px;
    font-weight: 800;
}

.ab-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.ab-form {
    background: var(--white);
    border: 2px solid var(--indigo);
    border-radius: 18px;
    box-shadow: 6px 6px 0 var(--indigo);
    padding: clamp(26px, 3vw, 40px);
}

.ab-form-head h2 {
    font-size: clamp(24px, 2.6vw, 32px);
}

.ab-form-head p:not(.ab-eyebrow) {
    color: var(--muted);
    font-size: 14.5px;
}

.ab-contact-side {
    display: grid;
    gap: 22px;
}

.ab-contact-steps {
    background: var(--indigo);
    border-radius: 16px;
    padding: 24px 26px;
    box-shadow: 5px 5px 0 var(--yellow);
}

.ab-contact-steps .ab-side-label {
    color: var(--yellow);
}

.ab-contact-steps ol {
    list-style: none;
    counter-reset: steps;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.ab-contact-steps ol li {
    counter-increment: steps;
    position: relative;
    padding-left: 44px;
    display: grid;
    gap: 2px;
}

.ab-contact-steps ol li::before {
    content: counter(steps);
    position: absolute;
    left: 0;
    top: 2px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--yellow);
    color: var(--indigo);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 0 var(--indigo-deep);
    transform: rotate(-2deg);
}

.ab-contact-steps strong {
    color: var(--white);
    font-size: 14.5px;
    font-weight: 700;
}

.ab-contact-steps span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}

/* Contact Form 7 */

.ab-form .wpcf7 label {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--indigo);
    margin-bottom: 16px;
}

.ab-form .wpcf7 input[type="text"],
.ab-form .wpcf7 input[type="email"],
.ab-form .wpcf7 input[type="url"],
.ab-form .wpcf7 select,
.ab-form .wpcf7 textarea {
    display: block;
    width: 100%;
    margin-top: 7px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--text);
    background: var(--lilac);
    border: 2px solid var(--lilac-line);
    border-radius: 10px;
    padding: 13px 15px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ab-form .wpcf7 input:focus,
.ab-form .wpcf7 select:focus,
.ab-form .wpcf7 textarea:focus {
    outline: none;
    border-color: var(--violet);
    background: var(--white);
}

.ab-form .wpcf7 textarea {
    min-height: 150px;
    resize: vertical;
}

.ab-form .wpcf7-submit {
    display: inline-block;
    background: var(--yellow);
    color: var(--indigo);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    padding: 16px 26px;
    border: 2px solid var(--indigo);
    border-radius: 10px;
    box-shadow: var(--sticker-shadow);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ab-form .wpcf7-submit:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--indigo);
}

.ab-form .wpcf7-not-valid-tip {
    font-size: 12.5px;
    color: #d43c68;
    font-weight: 600;
    margin-top: 5px;
}

.ab-form .wpcf7-response-output {
    margin: 18px 0 0;
    padding: 14px 18px;
    border: 2px solid var(--indigo) !important;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--indigo);
    background: var(--lilac);
}

/* ---------- Policy pages ---------- */

.ab-policy {
    max-width: 800px;
}

.ab-policy h2 {
    font-size: clamp(22px, 2.4vw, 28px);
    margin: 38px 0 14px;
}

.ab-policy h2:first-child {
    margin-top: 0;
}

.ab-policy p,
.ab-policy li {
    font-size: 15px;
    color: var(--text);
}

.ab-policy ul {
    padding-left: 22px;
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
}

.ab-policy a {
    color: var(--violet);
    font-weight: 600;
}

/* ---------- Footer ---------- */

.ab-footer {
    background: var(--indigo);
    color: rgba(255, 255, 255, 0.78);
}

.ab-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1fr 1.2fr;
    gap: clamp(28px, 4vw, 56px);
    padding-top: clamp(48px, 5vw, 72px);
    padding-bottom: clamp(36px, 4vw, 54px);
}

.ab-footer-grid h2 {
    color: var(--white);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.ab-footer-grid a {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 0.15s ease;
}

.ab-footer-grid a:hover {
    color: var(--yellow);
}

.ab-footer-grid p {
    font-size: 13.5px;
    line-height: 1.8;
    margin: 0;
}

.ab-footer-brand {
    margin-bottom: 16px;
}

.ab-footer-brand.ab-brand a,
.ab-footer .ab-brand {
    display: inline-flex;
    margin-bottom: 14px;
}

.ab-footer .ab-wordmark {
    color: var(--white);
}

.ab-footer-grid > div:first-child a {
    display: inline-flex;
    margin-bottom: 14px;
}

.ab-footer-grid > div:last-child a {
    display: inline;
    margin: 0;
    color: var(--yellow);
}

.ab-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 22px;
    padding-bottom: 26px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
}

/* ---------- Responsive ---------- */

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

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

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

@media (max-width: 980px) {
    .ab-hero-grid,
    .ab-why-band,
    .ab-faq-wrap,
    .ab-about-hero-grid,
    .ab-about-story,
    .ab-about-business,
    .ab-contact-hero-grid,
    .ab-contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ab-hero {
        padding-bottom: 100px;
    }

    .ab-hero-art {
        min-height: 0;
        margin-top: 10px;
    }

    .ab-floating-card-one { left: 0; }
    .ab-floating-card-two { right: 0; }

    .ab-pricing-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .ab-contact-promise {
        justify-self: start;
    }

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

    .ab-process {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .ab-menu-toggle {
        display: flex;
        position: relative;
    }

    .ab-menu {
        position: fixed;
        top: 78px;
        left: 0;
        right: 0;
        height: calc(100vh - 78px);
        overflow-y: auto;
        z-index: 40;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        background: var(--white);
        border-top: 2px solid var(--indigo);
        padding: 22px;
        transform: translateX(100%);
        transition: transform 0.22s ease;
        visibility: hidden;
    }

    .ab-menu-open .ab-menu {
        transform: translateX(0);
        visibility: visible;
    }

    .ab-menu a {
        display: block;
        width: 100%;
        font-size: 19px;
        font-weight: 700;
        color: var(--indigo);
        padding: 14px 6px;
        border-bottom: 1px solid var(--lilac-line);
    }

    .ab-nav-cta {
        display: none;
    }

    .ab-card-grid,
    .ab-pricing-grid,
    .ab-principles-grid,
    .ab-proof-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ab-proof {
        margin-top: -46px;
    }

    .ab-design-board {
        transform: rotate(0.8deg);
    }

    .ab-footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ab-actions .ab-btn {
        width: 100%;
        text-align: center;
    }

    .ab-pricing-summary {
        transform: none;
    }
}