/* ============================================================
 *  IbdaaHost — Custom Stylesheet  (child theme of Nexus)
 * ============================================================
 *  This file REPLACES nexus/css/custom.css for the IbdaaHost
 *  theme. It does two jobs:
 *
 *    1. BRAND TOKENS  — the :root block keeps the Nexus design
 *       variables (blue) so the client area + cart are
 *       unchanged. The warm --ibh-* tokens below are used ONLY
 *       by the homepage.
 *
 *    2. HOMEPAGE STYLES — the .ibh-* rules style the custom
 *       homepage.tpl in this folder. Warm, light, human.
 *
 *  Homepage palette: cream canvas, teal action colour, honey
 *  accent (both drawn from the IbdaaHost logo), Fraunces for
 *  headings. Edit the --ibh-* tokens to retune it.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&display=swap');

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50:  #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;
    --neutral-950: #020617;

    /* ---- BRAND RAMP — IbdaaHost blue. Edit these to rebrand. ---- */
    --primary-50:  #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    --primary-950: #172554;

    /* Primary colors (used by buttons, links, accents) */
    --primary:          var(--primary-600);
    --primary-lifted:   var(--primary-700);
    --primary-accented: var(--primary-800);

    /* Secondary colors */
    --secondary:          var(--neutral-500);
    --secondary-lifted:   var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success:          #00a63e;
    --success-lifted:   #008236;
    --success-accented: #016630;

    /* Info colors */
    --info:          #155dfc;
    --info-lifted:   #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice:          #7f22fe;
    --notice-lifted:   #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning:          #f54a00;
    --warning-lifted:   #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error:          #e7000b;
    --error-lifted:   #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale:          var(--neutral-900);
    --grayscale-lifted:   var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral:          var(--neutral-500);
    --neutral-lifted:   var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted:    var(--neutral-400);
    --text-lifted:   var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text:          var(--neutral-900);

    /* Border neutral colors */
    --border-muted:    var(--neutral-200);
    --border:          var(--neutral-300);
    --border-lifted:   var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg:          var(--white);
    --bg-muted:    var(--neutral-50);
    --bg-lifted:   var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200:  #fff085;
    --yellow-300:  #ffdf20;
    --teal-300:    #46edd5;
    --teal-400:    #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400:    #fb64b6;

    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;

    /* ===== IbdaaHost homepage — warm palette (homepage only) ===== */
    --ibh-cream:    #f7f1e4;   /* page canvas */
    --ibh-cream-2:  #efe6d2;   /* alternate section */
    --ibh-paper:    #fffdf8;   /* cards */
    --ibh-ink:      #2c2620;   /* warm near-black text */
    --ibh-ink-soft: #6f655a;   /* warm muted text */
    --ibh-line:     #e6dcc4;   /* warm borders */

    --ibh-teal:     #0f7d70;   /* primary action colour */
    --ibh-teal-dk:  #0a5d53;
    --ibh-teal-50:  #e3f1ee;
    --ibh-honey:    #e3a13a;   /* warm accent */
    --ibh-honey-dk: #c5852a;
    --ibh-honey-50: #faecd1;
    --ibh-deep:     #123b35;   /* deep teal feature band */

    --ibh-radius:    20px;
    --ibh-radius-sm: 14px;
    --ibh-shadow:    0 22px 48px -26px rgba(44, 38, 32, 0.4);
    --ibh-shadow-sm: 0 10px 26px -16px rgba(44, 38, 32, 0.3);
    --ibh-display:   'Fraunces', Georgia, 'Times New Roman', serif;
    --ibh-sans:      'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================
 *  NOTE: the WHMCS header, breadcrumb bar and #main-body padding
 *  sit OUTSIDE this homepage's .ibh wrapper. Blending them into
 *  the warm canvas is handled by the companion hook
 *  /includes/hooks/ibdaahost_homepage.php (homepage-only,
 *  injected inline). Keep --ibh-cream below in sync with it.
 * ============================================================ */

/* ============================================================
 *  HOMEPAGE — IbdaaHost
 * ============================================================ */

/* ---- Root + full-bleed --------------------------------------
   The homepage renders inside WHMCS's .container. We break out
   to the viewport edge so warm sections span the full width. */
.ibh {
    margin-inline: calc(50% - 50vw);
    overflow-x: clip;
    background: var(--ibh-cream);
    color: var(--ibh-ink);
    font-family: var(--ibh-sans);
    font-size: 16px;
    line-height: 1.65;
}
.ibh * { box-sizing: border-box; }
.ibh img { max-width: 100%; }
/* :not(.ibh-btn) so buttons keep their own (white/ink) text colour */
.ibh a:not(.ibh-btn) { color: var(--ibh-teal); }

/* Centered content column inside every full-bleed section */
.ibh-wrap {
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 1.6rem;
}

.ibh-sec { padding-block: 5.5rem; }
.ibh-sec--tight { padding-block: 4rem; }
.ibh-sec--paper { background: var(--ibh-paper); }
.ibh-sec--cream2 { background: var(--ibh-cream-2); }

/* ---- Section heading -------------------------------------- */
.ibh-head { max-width: 660px; margin: 0 auto 3.2rem; text-align: center; }
.ibh-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font: 700 0.73rem/1 var(--ibh-sans);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ibh-teal);
    margin-bottom: 0.9rem;
}
.ibh-kicker::before {
    content: "";
    width: 1.6rem; height: 2px;
    background: var(--ibh-honey);
    border-radius: 2px;
}
.ibh-h2 {
    font: 600 clamp(1.85rem, 3.6vw, 2.8rem)/1.14 var(--ibh-display);
    color: var(--ibh-ink);
    margin: 0 0 0.8rem;
    letter-spacing: -0.01em;
}
.ibh-h2 em {
    font-style: italic;
    font-weight: 500;
    color: var(--ibh-teal);
}
.ibh-sub { font-size: 1.07rem; color: var(--ibh-ink-soft); margin: 0; }

/* Hand-drawn honey underline for a highlighted phrase */
.ibh-squiggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 134 16'%3E%3Cpath d='M2 9 Q 15 2 28 9 T 54 9 T 80 9 T 106 9 T 132 9' fill='none' stroke='%23e3a13a' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 88%;
    background-size: 100% 0.34em;
    padding-bottom: 0.06em;
}

/* ---- Buttons ---------------------------------------------- */
.ibh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font: 700 0.97rem/1 var(--ibh-sans);
    padding: 0.95rem 1.7rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ibh-btn:hover { text-decoration: none; transform: translateY(-2px); }
.ibh-btn--primary {
    background: var(--ibh-teal);
    color: #fff;
    box-shadow: 0 14px 24px -12px rgba(15, 125, 112, 0.65);
}
.ibh-btn--primary:hover { background: var(--ibh-teal-dk); color: #fff; }
.ibh-btn--accent {
    background: var(--ibh-honey);
    color: var(--ibh-ink);
    box-shadow: 0 14px 24px -12px rgba(227, 161, 58, 0.7);
}
.ibh-btn--accent:hover { background: var(--ibh-honey-dk); color: var(--ibh-ink); }
.ibh-btn--outline {
    background: var(--ibh-paper);
    color: var(--ibh-ink);
    border-color: var(--ibh-line);
}
.ibh-btn--outline:hover { color: var(--ibh-teal); border-color: var(--ibh-teal); }
.ibh-btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}
.ibh-btn--ghost:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ibh-btn--lg { padding: 1.1rem 2.1rem; font-size: 1.04rem; }
.ibh-btn--block { width: 100%; }

/* ---- Entrance + scroll-reveal animation ------------------- */
@keyframes ibhRise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}
.ibh-in { animation: ibhRise 0.8s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }

@supports (animation-timeline: view()) {
    .ibh-reveal {
        animation: ibhRise both;
        animation-timeline: view();
        animation-range: entry 0% cover 22%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ibh-in, .ibh-reveal, .ibh-apps__track, .ibh-note { animation: none !important; }
}

/* ---- Shared domain search --------------------------------- */
.ibh-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--ibh-paper);
    border: 1.5px solid var(--ibh-line);
    border-radius: 999px;
    padding: 0.4rem 0.4rem 0.4rem 1.2rem;
    max-width: 540px;
    margin-inline: auto;
    box-shadow: var(--ibh-shadow);
}
.ibh-search__ico { color: var(--ibh-teal); font-size: 1rem; flex: none; }
.ibh-search input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0.8rem 0.5rem;
    font-size: 1rem;
    font-family: var(--ibh-sans);
    color: var(--ibh-ink);
    min-width: 0;
}
.ibh-search input::placeholder { color: #a89c89; }
.ibh-search input:focus { outline: none; }
.ibh-search button {
    flex: none;
    border: 0;
    border-radius: 999px;
    background: var(--ibh-teal);
    color: #fff;
    font: 700 0.95rem/1 var(--ibh-sans);
    padding: 0.85rem 1.6rem;
    cursor: pointer;
    transition: background .15s ease;
}
.ibh-search button:hover { background: var(--ibh-teal-dk); }
.ibh-search--lg { max-width: 580px; }

/* ============================================================
 *  HERO
 * ============================================================ */
.ibh-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(620px 360px at 78% 12%, var(--ibh-honey-50), transparent 70%),
        radial-gradient(560px 380px at 14% 88%, var(--ibh-teal-50), transparent 72%),
        var(--ibh-cream);
    padding-block: 4.5rem 5rem;
}
/* soft organic blob, top-left */
.ibh-hero::before {
    content: "";
    position: absolute;
    width: 360px; height: 360px;
    top: -150px; left: -120px;
    background: var(--ibh-honey);
    opacity: 0.12;
    border-radius: 42% 58% 60% 40% / 48% 42% 58% 52%;
}
.ibh-hero__inner { position: relative; max-width: 980px; }

.ibh-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font: 700 0.74rem/1 var(--ibh-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ibh-ink-soft);
    background: var(--ibh-paper);
    border: 1.5px solid var(--ibh-line);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.7rem;
}
.ibh-hero__eyebrow .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ibh-teal);
}
.ibh-hero h1 {
    font: 500 clamp(2.4rem, 5vw, 3.7rem)/1.1 var(--ibh-display);
    letter-spacing: -0.015em;
    color: var(--ibh-ink);
    margin: 0 0 1.2rem;
}
.ibh-hero h1 .ibh-squiggle { white-space: nowrap; }
.ibh-hero__lead {
    font-size: clamp(1.05rem, 1.5vw, 1.18rem);
    color: var(--ibh-ink-soft);
    max-width: 560px;
    margin: 0 auto 2rem;
}

/* search + hand-drawn doodle */
.ibh-hero__find { position: relative; max-width: 580px; margin-inline: auto; }
.ibh-doodle {
    position: absolute;
    top: -8px;
    inset-inline-end: -118px;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    transform: rotate(-8deg);
    color: var(--ibh-honey-dk);
    font: italic 500 1rem/1.1 var(--ibh-display);
}
.ibh-doodle svg { width: 46px; height: 40px; }

.ibh-hero__meta {
    margin: 1.1rem 0 0;
    font-size: 0.92rem;
    color: var(--ibh-ink-soft);
}
.ibh-hero__meta i { color: var(--ibh-teal); margin-inline-end: 0.15rem; }
.ibh-hero__meta .sep { margin-inline: 0.45rem; opacity: 0.45; }

/* honest "note" cards — lightly rotated, warm paper */
.ibh-notes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 3.4rem;
}
.ibh-note {
    flex: 0 1 248px;
    text-align: start;
    background: var(--ibh-paper);
    border: 1.5px solid var(--ibh-line);
    border-radius: var(--ibh-radius-sm);
    padding: 1.3rem 1.35rem;
    box-shadow: var(--ibh-shadow-sm);
    transition: transform .2s ease;
}
.ibh-note:nth-child(1) { transform: rotate(-2.5deg); }
.ibh-note:nth-child(2) { transform: rotate(1.5deg); }
.ibh-note:nth-child(3) { transform: rotate(-1deg); }
.ibh-note:hover { transform: rotate(0deg) translateY(-3px); }
.ibh-note__ico {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: var(--ibh-teal-50);
    color: var(--ibh-teal);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}
.ibh-note:nth-child(2) .ibh-note__ico { background: var(--ibh-honey-50); color: var(--ibh-honey-dk); }
.ibh-note h3 {
    font: 600 1.05rem/1.2 var(--ibh-display);
    color: var(--ibh-ink);
    margin: 0 0 0.3rem;
}
.ibh-note p { font-size: 0.88rem; color: var(--ibh-ink-soft); margin: 0; }

/* ============================================================
 *  RUNS-ON STRIP
 * ============================================================ */
.ibh-runson {
    border-block: 1.5px solid var(--ibh-line);
    background: var(--ibh-cream);
    padding-block: 1.7rem;
}
.ibh-runson .ibh-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.9rem 2.3rem;
}
.ibh-runson__label {
    font: 700 0.72rem/1 var(--ibh-sans);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ibh-ink-soft);
}
.ibh-runson__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font: 600 0.96rem/1 var(--ibh-sans);
    color: var(--ibh-ink);
}
.ibh-runson__item i { font-size: 1.1rem; color: var(--ibh-teal); }

/* ============================================================
 *  PRICING
 * ============================================================ */
.ibh-plans {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.3rem;
    align-items: start;
}
.ibh-plan {
    position: relative;
    background: var(--ibh-paper);
    border: 1.5px solid var(--ibh-line);
    border-radius: var(--ibh-radius);
    padding: 2rem 1.6rem;
    transition: transform .18s ease, box-shadow .18s ease;
}
.ibh-plan:hover { transform: translateY(-5px); box-shadow: var(--ibh-shadow); }
.ibh-plan--popular {
    border-color: var(--ibh-teal);
    border-width: 2px;
    box-shadow: var(--ibh-shadow);
}
.ibh-plan--popular::before {
    content: "Most popular";
    position: absolute;
    top: -13px;
    inset-inline: 0;
    width: max-content;
    margin-inline: auto;
    background: var(--ibh-honey);
    color: var(--ibh-ink);
    font: 700 0.72rem/1 var(--ibh-sans);
    letter-spacing: 0.04em;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
}
.ibh-plan__name {
    font: 600 1.3rem/1 var(--ibh-display);
    color: var(--ibh-ink);
    margin: 0 0 0.3rem;
}
.ibh-plan__tag { font-size: 0.85rem; color: var(--ibh-ink-soft); margin: 0 0 1.3rem; }
.ibh-plan__price {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
    color: var(--ibh-ink);
    font-family: var(--ibh-display);
}
.ibh-plan__price .cur { font-size: 1.2rem; font-weight: 500; align-self: flex-start; margin-top: 0.5rem; }
.ibh-plan__price .amt { font-size: 3rem; font-weight: 600; letter-spacing: -0.02em; }
.ibh-plan__price .per { font-size: 0.9rem; color: var(--ibh-ink-soft); font-family: var(--ibh-sans); }
.ibh-plan__renew { font-size: 0.78rem; color: var(--ibh-ink-soft); margin: 0.45rem 0 1.4rem; }
.ibh-plan .ibh-btn { margin-bottom: 1.5rem; }
.ibh-plan__features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ibh-plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--ibh-ink-soft);
}
.ibh-plan__features i { color: var(--ibh-teal); font-size: 0.8rem; margin-top: 0.25rem; }
.ibh-plan__features b { color: var(--ibh-ink); font-weight: 700; }

.ibh-allplans {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem 1.5rem;
    margin-top: 2.6rem;
}
.ibh-allplans span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font: 600 0.88rem/1 var(--ibh-sans);
    color: var(--ibh-ink-soft);
}
.ibh-allplans i { color: var(--ibh-teal); }

/* ============================================================
 *  FEATURES
 * ============================================================ */
.ibh-feats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.3rem;
}
.ibh-feat {
    background: var(--ibh-cream);
    border: 1.5px solid var(--ibh-line);
    border-radius: var(--ibh-radius);
    padding: 1.9rem;
    transition: transform .18s ease, box-shadow .18s ease;
}
.ibh-sec--paper .ibh-feat { background: var(--ibh-cream); }
.ibh-feat:hover { transform: translateY(-4px); box-shadow: var(--ibh-shadow-sm); }
.ibh-feat__ico {
    width: 52px; height: 52px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--ibh-teal-50);
    color: var(--ibh-teal);
    font-size: 1.35rem;
    margin-bottom: 1.1rem;
}
.ibh-feat:nth-child(3n+2) .ibh-feat__ico { background: var(--ibh-honey-50); color: var(--ibh-honey-dk); }
.ibh-feat h3 {
    font: 600 1.18rem/1.3 var(--ibh-display);
    color: var(--ibh-ink);
    margin: 0 0 0.45rem;
}
.ibh-feat p { font-size: 0.93rem; color: var(--ibh-ink-soft); margin: 0; }

/* ============================================================
 *  ONE-CLICK APPS
 * ============================================================ */
.ibh-apps { overflow: hidden; }
.ibh-apps__track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: ibhScroll 40s linear infinite;
}
.ibh-apps:hover .ibh-apps__track { animation-play-state: paused; }
@keyframes ibhScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.ibh-app {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--ibh-paper);
    border: 1.5px solid var(--ibh-line);
    border-radius: 999px;
    padding: 0.85rem 1.4rem;
    white-space: nowrap;
}
.ibh-app i { font-size: 1.5rem; color: var(--ibh-teal); }
.ibh-app b { font: 600 0.95rem/1 var(--ibh-sans); color: var(--ibh-ink); }

/* ============================================================
 *  DOMAINS
 * ============================================================ */
.ibh-tlds {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 1.7rem;
}
.ibh-tld {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    background: var(--ibh-paper);
    border: 1.5px solid var(--ibh-line);
    border-radius: 999px;
    padding: 0.6rem 1.1rem;
}
.ibh-tld b { font: 600 1rem/1 var(--ibh-display); color: var(--ibh-ink); }
.ibh-tld span { font-size: 0.82rem; color: var(--ibh-ink-soft); }

/* ============================================================
 *  ADD-ONS
 * ============================================================ */
.ibh-addons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}
.ibh-addon {
    display: flex;
    gap: 1rem;
    background: var(--ibh-paper);
    border: 1.5px solid var(--ibh-line);
    border-radius: var(--ibh-radius-sm);
    padding: 1.5rem;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ibh-addon:hover {
    transform: translateY(-3px);
    box-shadow: var(--ibh-shadow-sm);
    border-color: var(--ibh-teal);
    text-decoration: none;
}
.ibh-addon__ico {
    flex: none;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--ibh-teal-50);
    color: var(--ibh-teal);
    font-size: 1.15rem;
}
.ibh-addon h3 {
    font: 600 1.05rem/1.2 var(--ibh-display);
    color: var(--ibh-ink);
    margin: 0.1rem 0 0.3rem;
}
.ibh-addon p { font-size: 0.85rem; color: var(--ibh-ink-soft); margin: 0; }
.ibh-addon__arrow { margin-inline-start: auto; color: var(--ibh-line); align-self: center; }
.ibh-addon:hover .ibh-addon__arrow { color: var(--ibh-teal); }

/* ============================================================
 *  MIGRATION BAND  (deep teal)
 * ============================================================ */
.ibh-band .ibh-wrap {
    background: var(--ibh-deep);
    border-radius: var(--ibh-radius);
    padding: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.ibh-band .ibh-wrap::after {
    content: "";
    position: absolute;
    width: 280px; height: 280px;
    inset-inline-end: -90px; bottom: -150px;
    background: var(--ibh-honey);
    opacity: 0.14;
    border-radius: 46% 54% 56% 44% / 52% 44% 56% 48%;
}
.ibh-band__txt { position: relative; max-width: 540px; }
.ibh-band h2 {
    font: 500 clamp(1.5rem, 2.8vw, 2rem)/1.2 var(--ibh-display);
    color: #fff;
    margin: 0 0 0.5rem;
}
.ibh-band p { color: #bcd4ce; margin: 0; }
.ibh-band .ibh-btn { position: relative; }

/* ============================================================
 *  FAQ
 * ============================================================ */
.ibh-faq { max-width: 780px; margin-inline: auto; display: grid; gap: 0.8rem; }
.ibh-faq__item {
    background: var(--ibh-paper);
    border: 1.5px solid var(--ibh-line);
    border-radius: var(--ibh-radius-sm);
    padding: 0 1.5rem;
    transition: border-color .15s ease;
}
.ibh-faq__item[open] { border-color: var(--ibh-teal); }
.ibh-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    padding: 1.25rem 0;
    font: 600 1.05rem/1.4 var(--ibh-display);
    color: var(--ibh-ink);
}
.ibh-faq__item summary::-webkit-details-marker { display: none; }
.ibh-faq__item summary::after {
    content: "\f067";
    font: 900 0.8rem/1 "Font Awesome 5 Pro", "Font Awesome 5 Free";
    color: var(--ibh-teal);
    flex: none;
    transition: transform .2s ease;
}
.ibh-faq__item[open] summary::after { transform: rotate(45deg); }
.ibh-faq__item p {
    margin: 0;
    padding: 0 0 1.35rem;
    color: var(--ibh-ink-soft);
    font-size: 0.95rem;
}

/* ============================================================
 *  FINAL CTA
 * ============================================================ */
.ibh-final .ibh-wrap {
    text-align: center;
    background:
        radial-gradient(420px 260px at 50% 0%, var(--ibh-honey-50), transparent 72%),
        var(--ibh-cream-2);
    border: 1.5px solid var(--ibh-line);
    border-radius: var(--ibh-radius);
    padding: 3.6rem 2rem;
}
.ibh-final h2 {
    font: 500 clamp(1.9rem, 3.8vw, 2.8rem)/1.12 var(--ibh-display);
    color: var(--ibh-ink);
    margin: 0 0 0.7rem;
}
.ibh-final p { font-size: 1.07rem; color: var(--ibh-ink-soft); margin: 0 auto 1.9rem; max-width: 500px; }
.ibh-final__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.8rem; }
.ibh-final__note { margin-top: 1.3rem; font-size: 0.86rem; color: var(--ibh-ink-soft); }

/* ============================================================
 *  LOGGED-IN WELCOME STRIP
 * ============================================================ */
.ibh-welcome { background: var(--ibh-teal-50); border-bottom: 1.5px solid var(--ibh-line); }
.ibh-welcome .ibh-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block: 0.85rem;
}
.ibh-welcome p { margin: 0; font: 600 0.95rem/1.3 var(--ibh-sans); color: var(--ibh-teal-dk); }
.ibh-welcome p i { margin-inline-end: 0.3rem; }

/* ============================================================
 *  RESPONSIVE
 * ============================================================ */
@media (max-width: 991px) {
    .ibh-plans { grid-template-columns: repeat(2, 1fr); }
    .ibh-feats { grid-template-columns: repeat(2, 1fr); }
    .ibh-addons { grid-template-columns: repeat(2, 1fr); }
    .ibh-doodle { display: none; }
}
@media (max-width: 640px) {
    .ibh-sec { padding-block: 3.8rem; }
    .ibh-hero { padding-block: 3.2rem 3.8rem; }
    .ibh-plans { grid-template-columns: 1fr; }
    .ibh-feats { grid-template-columns: 1fr; }
    .ibh-addons { grid-template-columns: 1fr; }
    .ibh-note { transform: none !important; flex-basis: 100%; }
    .ibh-search { flex-wrap: wrap; padding: 0.5rem; }
    .ibh-search__ico { display: none; }
    .ibh-search input { flex-basis: 100%; padding-inline: 0.9rem; }
    .ibh-search button { flex: 1 1 100%; padding-block: 0.9rem; }
    .ibh-band .ibh-wrap { padding: 2.1rem 1.5rem; }
}

/* ============================================================
 *  RTL / Arabic — Nexus flips direction automatically.
 * ============================================================ */
[dir="rtl"] .ibh-apps__track { animation-name: ibhScrollRtl; }
@keyframes ibhScrollRtl {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}
[dir="rtl"] .ibh-doodle { transform: rotate(8deg) scaleX(-1); }