/* ============================================================================
   Grand Challenge Inkidia — /inkidia_challenge
   Layout, palette and type scale reproduce the client's design mockup.
   Everything is prefixed .ikc- so it cannot collide with the website theme or
   with the other landing pages. Logical properties (margin-inline, inset-inline)
   are used throughout so the Arabic (RTL) block mirrors without a second sheet.
   ========================================================================= */

#ikc-root {
    --ikc-navy-1: #051A3A;
    --ikc-navy-2: #0B3160;
    --ikc-navy-3: #174380;
    --ikc-ink: #1F2746;
    --ikc-heading: #0F2557;
    --ikc-muted: #5B6478;
    --ikc-blue: #1479DB;
    --ikc-blue-deep: #0E5ED8;
    --ikc-blue-brand: #1A4FD6;
    --ikc-blue-sky: #4EA3FF;
    --ikc-blue-pale: #9CC8FF;
    --ikc-green: #109379;
    --ikc-green-deep: #0A7C66;
    --ikc-purple: #6D3BE0;
    --ikc-purple-soft: #7B4FD6;
    --ikc-yellow: #FED325;
    --ikc-red: #E23A6C;
    --ikc-gold: #F5A623;
    --ikc-strip: #EDF4FC;
    --ikc-card-blue: #E2F0FD;
    --ikc-card-green: #DEF8F1;
    --ikc-card-purple: #EDEAFD;
    --ikc-cream: #FDF7E6;
    --ikc-faq-item: #F1F5FB;
    --ikc-faq-help: #EAF1FB;
    --ikc-line: #DDE3EE;
    --ikc-footer: #192635;
    --ikc-footer-soft: #2E3947;
    --ikc-footer-text: #8C96A6;
    --ikc-font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    --ikc-font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --ikc-font-hand: 'Caveat', 'Segoe Script', 'Comic Sans MS', cursive;
}

/* The Arabic block swaps the whole type system; Latin brand names keep theirs. */
.ikc-lang[dir="rtl"] {
    --ikc-font-heading: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --ikc-font-body: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --ikc-font-hand: 'Aref Ruqaa', 'Cairo', serif;
}

/* This stylesheet is only linked on /inkidia_challenge, so scoping smooth-scroll to
   html is safe — it never leaks onto other pages. */
html { scroll-behavior: smooth; }
#ikc-root, #ikc-root * { box-sizing: border-box; }
/* No overflow rule here on purpose: Odoo 14's website scrolls inside #wrapwrap, and
   an overflow value on this root would turn it into its own scroll container and
   stop the sticky nav from sticking. The wide sections clip themselves instead. */
#ikc-root {
    font-family: var(--ikc-font-body);
    color: var(--ikc-ink);
    background: #fff;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.ikc-lang { font-family: var(--ikc-font-body); }
#ikc-root h1, #ikc-root h2, #ikc-root h3, #ikc-root h4 {
    margin: 0; font-weight: 800; font-family: var(--ikc-font-heading); line-height: 1.2;
}
#ikc-root p { margin: 0; }
#ikc-root a { text-decoration: none; color: inherit; }
#ikc-root ul, #ikc-root ol { margin: 0; padding: 0; list-style: none; }
#ikc-root img { max-width: 100%; }
#ikc-root .fa { font-family: FontAwesome; }

.ikc-hidden { display: none !important; }
.ikc-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
/* Writing direction and alignment are both pinned, per language block, instead
   of being left to inherit from the page around them. Odoo compiles Bootstrap
   through rtlcss when the site's language is Arabic — as it is on the live
   site — which turns reboot's `body { text-align: left }` into
   `text-align: right`. That value is inherited, and dir="ltr" on the block
   does not undo it, so the French block came out right-aligned there while
   looking correct on a French-language dev site. */
.ikc-lang[dir="ltr"] { direction: ltr; text-align: left; }
.ikc-lang[dir="rtl"] { direction: rtl; text-align: right; }

/* `aria-hidden="true"` marks something as decoration for screen readers; it is
   not a request to hide it from sight. A stylesheet on the live site — inside
   web.assets_common, next to the jQuery-UI rules — implements it as
   `display: none !important`, and every icon here carries that attribute, as
   do the arrows between the steps and the "|" separators. They all vanished
   there while the dev machine, whose bundle does not carry that rule, looked
   perfect. Hand those elements their display back. The `!important` is here
   only to outrank that one rule, and the two lines after it restore what this
   stylesheet sets on the elements it does not leave at the browser default. */
#ikc-root [aria-hidden="true"] { display: revert !important; }
#ikc-root .fa[aria-hidden="true"] { display: inline-block !important; }
#ikc-root .ikc-lang-go[aria-hidden="true"] { display: grid !important; }

/* Handwritten notes of the design: one line per row of the text. */
.ikc-hand { font-family: var(--ikc-font-hand); white-space: pre-line; }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.ikc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border: 0; cursor: pointer; white-space: nowrap; text-decoration: none;
    font-family: var(--ikc-font-body); font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ikc-btn:hover { transform: translateY(-2px); }
.ikc-btn-cta {
    background: var(--ikc-yellow); color: var(--ikc-ink);
    font-weight: 800; font-size: 15px; padding: 15px 30px; border-radius: 999px;
    box-shadow: 0 12px 24px -10px rgba(254, 211, 37, .75);
}
.ikc-btn-cta:hover { background: #F7C900; color: var(--ikc-ink); }
.ikc-btn-arrow { font-size: 14px; }
/* Odoo's frontend sheet forces `transform: none !important` on img and .fa below
   768px, so every icon flip/rotation in this file is marked !important to survive. */
.ikc-lang[dir="rtl"] .ikc-btn-arrow { transform: scaleX(-1) !important; }
.ikc-btn-primary { background: var(--ikc-blue-deep); color: #fff; border-radius: 999px; padding: 11px 26px; font-size: 14px; }
.ikc-btn-primary:hover { background: #0B4FBA; color: #fff; }
.ikc-btn-nav { background: var(--ikc-blue-brand); color: #fff; border-radius: 999px; padding: 10px 24px; font-size: 14px; }
.ikc-btn-nav:hover { background: var(--ikc-blue-deep); color: #fff; }
.ikc-btn-tour { color: #fff; border-radius: 999px; padding: 11px 26px; font-size: 14px; font-weight: 800; margin-top: 18px; }
.ikc-btn-tour:hover { color: #fff; filter: brightness(1.08); }
.ikc-btn:focus-visible, .ikc-lang-btn:focus-visible, .ikc-faq-question:focus-visible {
    outline: 3px solid var(--ikc-blue-brand); outline-offset: 3px;
}

/* ─── Nav ─────────────────────────────────────────────────────────────── */
.ikc-nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px);
    border-bottom: 1px solid #EDF0F5;
}
.ikc-nav-inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.ikc-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.ikc-brand-name {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-weight: 800; font-size: 27px; letter-spacing: -.035em; line-height: 1;
    color: var(--ikc-blue-brand);
}
.ikc-brand-tagline { font-size: 10.5px; line-height: 1.25; font-weight: 500; color: var(--ikc-muted); max-width: 150px; }
.ikc-nav-links { display: flex; gap: 22px; margin-inline-start: 6px; font-size: 14px; font-weight: 600; }
.ikc-nav-links a { color: var(--ikc-ink); }
.ikc-nav-links a:hover { color: var(--ikc-blue-deep); }
.ikc-nav-right { display: flex; align-items: center; gap: 18px; margin-inline-start: auto; }
.ikc-lang-switch { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ikc-lang-btn { background: none; border: 0; padding: 2px 3px; cursor: pointer; font: inherit; font-weight: 700; color: var(--ikc-muted); }
.ikc-lang-btn.active { color: var(--ikc-blue-brand); }
.ikc-lang-sep { color: #C3CAD6; }
.ikc-lang-go {
    width: 24px; height: 24px; border-radius: 50%; background: #EEF2F8; color: var(--ikc-muted);
    display: grid; place-items: center; font-size: 11px; margin-inline-start: 4px;
}
.ikc-lang[dir="rtl"] .ikc-lang-go .fa { transform: scaleX(-1) !important; }

/* ─── Hero ────────────────────────────────────────────────────────────── */
.ikc-hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(55% 90% at 78% 45%, rgba(64, 140, 230, .45) 0%, rgba(64, 140, 230, 0) 65%),
        linear-gradient(100deg, var(--ikc-navy-1) 0%, var(--ikc-navy-2) 50%, var(--ikc-navy-3) 100%);
}
.ikc-hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 24px; align-items: center; min-height: 400px; }
.ikc-hero-copy { padding: 44px 0 42px; }
.ikc-hero-title { display: grid; line-height: 1.02; letter-spacing: -.01em; }
.ikc-hero-title-l1 {
    font-size: 46px;
    background: linear-gradient(90deg, #FFFFFF 0%, #D6E9FF 45%, #5FAEFF 100%);
    -webkit-background-clip: text; background-clip: text;
    color: #D6E9FF; -webkit-text-fill-color: transparent;
}
.ikc-hero-title-l2 { font-size: 50px; color: var(--ikc-blue-sky); }
.ikc-hero-subtitle { margin-top: 16px; font-family: var(--ikc-font-heading); font-size: 22px; font-weight: 700; color: var(--ikc-blue-pale); line-height: 1.3; }
.ikc-hero-subtitle strong { color: #fff; font-weight: 800; }
.ikc-hero-desc { margin-top: 12px; font-size: 15px; line-height: 1.6; color: #E6EEFF; max-width: 470px; }
.ikc-hero-desc strong { color: #fff; font-weight: 700; }
.ikc-hero-badges { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; }
.ikc-hero-badges li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; }
.ikc-badge-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; font-size: 16px; color: #fff; }
.ikc-badge-ico-check { border-radius: 50%; background: #1D8DF0; font-size: 11px; box-shadow: 0 0 0 3px rgba(29, 141, 240, .3); }
.ikc-hero .ikc-btn-cta { margin-top: 26px; }

/* The photo spans the hero's full height, so its top and bottom edges coincide with
   the section's own edges; only its sides are feathered into the gradient. */
.ikc-hero-visual { position: relative; align-self: stretch; min-height: 320px; }
.ikc-hero-photo {
    position: absolute; bottom: 0; inset-inline-start: 0; height: 100%; width: auto; max-width: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 96%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 96%, transparent 100%);
}
.ikc-hero-decor {
    position: absolute; font-size: 25px; line-height: 1.02; font-weight: 700; color: #fff;
    text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); pointer-events: none;
}
.ikc-hero-decor-1 { top: 5%; inset-inline-end: -2%; width: 24%; transform: rotate(-8deg); }
.ikc-hero-crown { position: absolute; top: 36%; inset-inline-end: -3%; width: 40px; height: auto; transform: rotate(10deg); }
.ikc-hero-decor-2 { top: 56%; inset-inline-end: -5%; width: 22%; font-size: 20px; transform: rotate(-8deg); }
.ikc-hero-chart { position: absolute; bottom: 8%; inset-inline-start: 1%; font-size: 34px; color: rgba(255, 255, 255, .72); }
.ikc-lang[dir="rtl"] .ikc-hero-decor-1 { transform: rotate(8deg); font-size: 22px; }
.ikc-lang[dir="rtl"] .ikc-hero-decor-2 { transform: rotate(8deg); font-size: 20px; width: 26%; }
.ikc-lang[dir="rtl"] .ikc-hero-crown { transform: rotate(-10deg); }

/* Fallback when the hero picture slot is empty. */
.ikc-hero-illustration {
    width: 82%; margin: 30px 0; padding: 40px; text-align: center;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .15); border-radius: 24px;
}
.ikc-hero-emoji { font-size: 64px; display: block; }
.ikc-hero-apps { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
.ikc-app-badge { padding: 10px 18px; border-radius: 14px; font-weight: 800; font-size: 13px; color: #fff; }
.ikc-app-iquiz { background: #2563EB; }
.ikc-app-moalim { background: var(--ikc-green); }

/* ─── Feature strip ───────────────────────────────────────────────────── */
.ikc-features { padding: 14px 0 0; }
.ikc-features-box {
    padding: 22px 28px 20px; background: var(--ikc-strip); border-radius: 18px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.ikc-feature-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.ikc-feature-icon { font-size: 30px; line-height: 1; height: 34px; display: grid; place-items: center; }
.ikc-feature-item:nth-child(1) .ikc-feature-icon { color: var(--ikc-blue); }
.ikc-feature-item:nth-child(2) .ikc-feature-icon { color: var(--ikc-green); }
.ikc-feature-item:nth-child(3) .ikc-feature-icon { color: var(--ikc-blue); }
.ikc-feature-item:nth-child(4) .ikc-feature-icon { color: #8B5CF6; }
.ikc-feature-title { font-size: 13.5px; font-weight: 700; color: var(--ikc-ink); line-height: 1.45; max-width: 200px; }

/* ─── Section head ────────────────────────────────────────────────────── */
.ikc-section-head { margin-bottom: 26px; }
.ikc-section-head h2 { font-size: 27px; color: var(--ikc-heading); letter-spacing: -.01em; }
.ikc-section-head p { margin-top: 6px; font-size: 15px; color: var(--ikc-muted); }

/* ─── How it works ────────────────────────────────────────────────────── */
.ikc-how { padding: 46px 0 22px; }
.ikc-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: start; column-gap: 10px; }
.ikc-step { text-align: center; padding: 0 6px; }
.ikc-step-top { display: flex; align-items: center; justify-content: center; gap: 12px; height: 66px; margin-bottom: 14px; }
.ikc-step-dot {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    background: var(--ikc-blue); color: #fff; font-weight: 800; font-size: 17px;
    display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(20, 121, 219, .6);
}
.ikc-step-2 .ikc-step-dot { background: var(--ikc-green); box-shadow: 0 6px 14px -6px rgba(16, 147, 121, .6); }
.ikc-step-4 .ikc-step-dot { background: var(--ikc-purple); box-shadow: 0 6px 14px -6px rgba(109, 59, 224, .6); }
.ikc-step-icon { display: grid; place-items: center; height: 66px; font-size: 30px; line-height: 1; }
.ikc-step-icon img { height: 62px; width: auto; display: block; }
.ikc-step h3 { font-size: 16px; color: var(--ikc-ink); margin-bottom: 8px; }
.ikc-step p { font-size: 13.5px; color: var(--ikc-muted); line-height: 1.55; max-width: 240px; margin: 0 auto; }
.ikc-step p strong { color: var(--ikc-ink); }
.ikc-step-arrow { align-self: start; margin-top: 22px; font-size: 22px; color: #7FA9E8; }
.ikc-step-arrow-2 { color: #34A38A; }
.ikc-step-arrow-3 { color: #8B62E6; }
.ikc-lang[dir="rtl"] .ikc-step-arrow .fa { transform: scaleX(-1); }

/* ─── Tour cards ──────────────────────────────────────────────────────── */
.ikc-tours { padding: 14px 0 34px; }
.ikc-tours-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ikc-tour-card { position: relative; overflow: hidden; border-radius: 18px; padding: 24px 22px 22px; min-height: 306px; }
/* The picture sits behind the copy; the slogan is positioned against the card. */
.ikc-tour-copy > :not(.ikc-tour-body) { position: relative; z-index: 1; }
.ikc-tour-body .ik-check-list { position: relative; z-index: 1; }
.ikc-tour-card h3 { font-size: 24px; margin-bottom: 4px; }
.ikc-tour-subtitle { font-size: 14px; font-weight: 600; margin-bottom: 18px; line-height: 1.4; }
.ikc-tour-body .ik-check-list li {
    position: relative; padding-inline-start: 30px; margin: 0 0 10px;
    font-size: 13.5px; line-height: 1.45; color: var(--ikc-ink);
}
.ikc-tour-body .ik-check-list li::before {
    content: "\f058"; font-family: FontAwesome; position: absolute; inset-inline-start: 0; top: -2px; font-size: 19px;
}
.ikc-tour-visual { position: absolute; z-index: 0; display: flex; }
.ikc-tour-visual img { display: block; }

.ikc-tour-card-0 { background: var(--ikc-card-blue); }
.ikc-tour-card-0 h3, .ikc-tour-card-0 .ik-check-list li::before { color: #0F63D6; }
.ikc-tour-card-0 .ikc-tour-subtitle { color: #2A78E0; }
.ikc-tour-card-0 .ikc-tour-copy { max-width: 68%; }
.ikc-tour-card-0 .ikc-btn-tour { background: #2A97E4; }
.ikc-tour-card-0 .ikc-tour-visual { inset-inline-end: 10px; top: 20px; bottom: 16px; width: 32%; align-items: center; justify-content: flex-end; }
.ikc-tour-card-0 .ikc-tour-visual img { max-height: 100%; max-width: 100%; width: auto; }

.ikc-tour-card-1 { background: var(--ikc-card-green); }
.ikc-tour-card-1 h3, .ikc-tour-card-1 .ik-check-list li::before { color: var(--ikc-green-deep); }
.ikc-tour-card-1 .ikc-tour-subtitle { color: #12907A; }
.ikc-tour-card-1 .ikc-tour-copy { max-width: 70%; }
.ikc-tour-card-1 .ikc-btn-tour { background: #10837D; margin-top: 26px; }
.ikc-tour-card-1 .ikc-tour-visual { inset-inline-end: 0; bottom: 58px; width: 76%; align-items: flex-end; justify-content: flex-end; }
.ikc-tour-card-1 .ikc-tour-visual img { width: 100%; height: auto; }
/* The laptop's flat left area is what sits under the copy; mirror it in RTL. */
.ikc-lang[dir="rtl"] .ikc-tour-card-1 .ikc-tour-visual img { transform: scaleX(-1) !important; }

.ikc-tour-card-2 { background: var(--ikc-card-purple); }
.ikc-tour-card-2 h3 { color: var(--ikc-purple); }
.ikc-tour-card-2 .ikc-tour-subtitle { color: #8A5CE0; }
.ikc-tour-card-2 .ik-check-list li::before { color: var(--ikc-purple-soft); }
.ikc-tour-card-2 .ikc-tour-copy { max-width: 70%; }
.ikc-tour-card-2 .ikc-tour-visual { inset-inline-end: 18px; top: 22px; width: 24%; }
.ikc-tour-card-2 .ikc-tour-visual img { width: 100%; height: auto; }
.ikc-tour-slogan {
    position: absolute; z-index: 1; inset-inline-end: 22px; bottom: 16px; margin: 0;
    font-family: var(--ikc-font-hand); font-size: 19px; line-height: 1.08; font-weight: 700;
    color: var(--ikc-purple-soft); text-align: center; transform: rotate(-8deg);
}
.ikc-lang[dir="rtl"] .ikc-tour-slogan { transform: rotate(8deg); font-size: 17px; }

.ikc-store-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; width: max-content; max-width: 100%; }
.ikc-store-badge {
    display: inline-flex; align-items: center; gap: 6px; line-height: 1.05;
    background: #0B0B0B; color: #fff; border-radius: 7px; padding: 4px 8px 4px 7px;
}
.ikc-store-badge:hover { background: #222; color: #fff; }
.ikc-store-badge .fa { font-size: 15px; color: #fff; }
.ikc-store-text { display: flex; flex-direction: column; color: #fff; }
.ikc-store-text small { font-size: 7px; text-transform: uppercase; letter-spacing: .03em; color: #D9D9D9; }
.ikc-store-text strong { font-size: 11.5px; font-weight: 700; color: #fff; }

/* ─── Rewards ─────────────────────────────────────────────────────────── */
.ikc-rewards { padding: 12px 0 36px; }
.ikc-rewards-box { background: var(--ikc-cream); border-radius: 22px; padding: 30px 30px 32px; }
.ikc-rewards-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.45fr; gap: 16px; align-items: stretch; padding-top: 22px; }
.ikc-reward-card {
    position: relative; background: #fff; border-radius: 16px; padding: 30px 14px 20px;
    text-align: center; display: flex; flex-direction: column; align-items: center;
}
.ikc-reward-rank-1 { background: linear-gradient(180deg, #FEDD88 0%, #FFF1CF 45%, #FFFFFF 100%); }
.ikc-reward-rank-2 { background: linear-gradient(180deg, #E0E0E1 0%, #F1F2F4 45%, #FFFFFF 100%); }
.ikc-reward-rank-3 { background: linear-gradient(180deg, #F8D9BB 0%, #FCEFE3 45%, #FFFFFF 100%); }
.ikc-medal {
    position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--ikc-font-heading); font-weight: 800; font-size: 20px; color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .75), 0 8px 16px -6px rgba(0, 0, 0, .35);
}
.ikc-medal::after {
    content: ""; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-width: 9px;
}
.ikc-reward-rank-1 .ikc-medal { background: radial-gradient(circle at 35% 30%, #FFE59A, #F0A81F 65%, #D98A0C); }
.ikc-reward-rank-1 .ikc-medal::after { border-top-color: #E39A15; }
.ikc-reward-rank-2 .ikc-medal { background: radial-gradient(circle at 35% 30%, #F4F6F8, #B9BFC8 65%, #98A0AB); }
.ikc-reward-rank-2 .ikc-medal::after { border-top-color: #A9B0BA; }
.ikc-reward-rank-3 .ikc-medal { background: radial-gradient(circle at 35% 30%, #F3C9A4, #CF8A52 65%, #B26D38); }
.ikc-reward-rank-3 .ikc-medal::after { border-top-color: #C27A44; }
.ikc-reward-title { font-size: 21px; color: var(--ikc-ink); margin: 2px 0 8px; }
.ikc-reward-title sup { font-size: .55em; vertical-align: super; }
.ikc-reward-media { width: calc(100% + 28px); margin: 0 -14px 10px; flex: 1; display: grid; place-items: center; font-size: 44px; line-height: 1; }
.ikc-reward-media img {
    width: 100%; height: auto; display: block;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.ikc-reward-subtitle { font-size: 13.5px; font-weight: 800; color: var(--ikc-ink); line-height: 1.5; }
.ikc-reward-subtitle .ikc-accent { color: var(--ikc-blue-brand); }
.ikc-reward-body { margin-top: 8px; font-size: 13px; color: var(--ikc-muted); }
.ikc-reward-more { padding: 26px 20px 22px; justify-content: flex-start; }
.ikc-reward-more .ikc-reward-title { font-size: 18px; margin-bottom: 10px; }
.ikc-reward-more-icon { font-size: 40px; line-height: 1; color: var(--ikc-blue); margin-bottom: 14px; }
.ikc-reward-more-body p { font-size: 13.5px; color: #3B4460; line-height: 1.55; margin: 0 0 12px; }
.ikc-reward-more-body p:last-child { margin-bottom: 0; }
.ikc-reward-more-arrow { font-size: 26px; color: var(--ikc-blue-brand); }
.ikc-reward-more-arrow .fa { display: inline-block; transform: rotate(-35deg) !important; }
.ikc-lang[dir="rtl"] .ikc-reward-more-arrow .fa { transform: scaleX(-1) rotate(-35deg) !important; }

/* ─── Calendar / timeline ─────────────────────────────────────────────── */
.ikc-calendar { padding: 26px 0 40px; }
.ikc-timeline { display: grid; grid-template-columns: repeat(5, 1fr); }
.ikc-timeline-item { position: relative; text-align: center; padding: 0 8px; }
.ikc-timeline-icon { display: grid; place-items: center; height: 46px; font-size: 32px; line-height: 1; margin-bottom: 8px; }
.ikc-timeline-item-1 .ikc-timeline-icon { color: var(--ikc-red); }
.ikc-timeline-item-2 .ikc-timeline-icon { color: var(--ikc-purple); }
.ikc-timeline-item-3 .ikc-timeline-icon { color: var(--ikc-green); }
.ikc-timeline-item-4 .ikc-timeline-icon { color: var(--ikc-gold); }
.ikc-timeline-item-5 .ikc-timeline-icon { color: var(--ikc-purple); }
.ikc-timeline-item h4 {
    position: relative; z-index: 1; display: inline-block; background: #fff; padding: 0 10px;
    font-size: 14.5px; color: var(--ikc-ink); line-height: 1.4;
}
.ikc-timeline-item h4 small { font-size: 12px; font-weight: 600; color: var(--ikc-muted); }
.ikc-timeline-date { display: block; margin-top: 12px; font-size: 13.5px; font-weight: 500; color: #3B4460; }
/* connector to the next milestone, with a coloured dot in the middle of the gap */
.ikc-timeline-item:not(:last-child)::before {
    content: ""; position: absolute; top: 64px; inset-inline-start: 50%; width: 100%; height: 2px; background: var(--ikc-line);
}
.ikc-timeline-item:not(:last-child)::after {
    content: ""; position: absolute; top: 59px; inset-inline-start: calc(100% - 6px);
    width: 12px; height: 12px; border-radius: 50%; background: #5C39B4;
}
.ikc-timeline-item-2::after, .ikc-timeline-item-3::after { background: #10837D; }

/* ─── CTA banner ──────────────────────────────────────────────────────── */
.ikc-cta-banner {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(100deg, #061D41 0%, #12346A 50%, #2C5FA5 100%);
}
.ikc-cta-banner-visual { position: absolute; z-index: 0; top: 0; bottom: 0; inset-inline-end: 0; width: 44%; }
.ikc-cta-banner-visual img {
    width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%);
            mask-image: linear-gradient(to right, transparent 0%, #000 16%);
}
/* Mirrored in RTL so the faded edge stays on the side of the copy. */
.ikc-lang[dir="rtl"] .ikc-cta-banner-visual img { transform: scaleX(-1); }
.ikc-cta-banner-inner {
    position: relative; z-index: 1; min-height: 232px; padding-top: 34px; padding-bottom: 34px;
    display: grid; grid-template-columns: 1.15fr .85fr 1fr; align-items: center; gap: 20px;
}
.ikc-cta-banner-copy h2 { font-size: 29px; letter-spacing: -.01em; }
.ikc-cta-banner-copy p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: #E6EEFF; max-width: 430px; }
.ikc-cta-banner-copy .ikc-btn-cta { margin-top: 22px; }
.ikc-cta-banner-decor {
    justify-self: center; font-size: 23px; line-height: 1.08; font-weight: 700; color: #fff;
    text-align: center; transform: rotate(-9deg); text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.ikc-lang[dir="rtl"] .ikc-cta-banner-decor { transform: rotate(9deg); font-size: 21px; }

/* ─── FAQ ─────────────────────────────────────────────────────────────── */
.ikc-faq { padding: 30px 0 50px; }
.ikc-faq h2 { font-size: 27px; color: var(--ikc-heading); margin-bottom: 22px; }
.ikc-faq-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }
.ikc-faq-item { background: var(--ikc-faq-item); border-radius: 10px; margin-bottom: 10px; }
.ikc-faq-question {
    list-style: none; cursor: pointer; padding: 15px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    font-size: 14.5px; font-weight: 700; color: var(--ikc-ink);
}
.ikc-faq-question::-webkit-details-marker { display: none; }
.ikc-faq-chevron { font-size: 13px; color: var(--ikc-muted); transition: transform .2s ease; }
.ikc-faq-item[open] .ikc-faq-chevron { transform: rotate(180deg) !important; }
.ikc-faq-answer { padding: 0 20px 16px; font-size: 13.5px; color: var(--ikc-muted); line-height: 1.65; }
.ikc-faq-help { background: var(--ikc-faq-help); border-radius: 16px; padding: 26px 24px 24px; }
.ikc-faq-help h4 { font-size: 19px; color: var(--ikc-heading); margin: 0 0 8px; }
.ikc-faq-help p { font-size: 13.5px; color: var(--ikc-muted); line-height: 1.55; margin: 0 0 18px; }
.ikc-faq-help-links { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 26px; }
.ikc-faq-help-links a { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ikc-ink); }
.ikc-help-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; }
.ikc-help-ico-blue { background: #1D6FE5; }
.ikc-help-ico-green { background: #25D366; }
.ikc-help-ico-plain { background: transparent; color: #1D6FE5; font-size: 22px; }

/* ─── Footer ──────────────────────────────────────────────────────────── */
.ikc-footer { background: var(--ikc-footer); color: var(--ikc-footer-text); padding: 34px 0 22px; }
.ikc-footer-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; }
.ikc-footer-logo { font-family: var(--ikc-font-heading); font-weight: 800; font-size: 22px; color: #fff; }
.ikc-footer-tagline { font-size: 12px; margin-top: 2px; }
.ikc-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 26px; font-size: 13px; }
.ikc-footer-links a { color: #E5E9F0; }
.ikc-footer-links a:hover { color: #fff; }
.ikc-footer-social { display: flex; gap: 10px; }
.ikc-footer-social a {
    width: 32px; height: 32px; border-radius: 50%; background: var(--ikc-footer-soft); color: #fff;
    display: grid; place-items: center; font-size: 14px;
}
.ikc-footer-social a:hover { background: #3B4757; }
.ikc-footer-social svg { width: 14px; height: 14px; }
.ikc-footer-bottom {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12px;
}
.ikc-footer-legal a { color: var(--ikc-footer-text); }
.ikc-footer-legal a:hover { color: #fff; }
.ikc-footer-legal-sep { margin: 0 10px; }

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
    .ikc-nav-links { gap: 14px; }
    .ikc-brand-tagline { display: none; }
}
@media (max-width: 900px) {
    .ikc-nav-links { display: none; }
    .ikc-hero-grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
    .ikc-hero-copy { padding: 40px 0 10px; }
    /* Centred with flexbox (not a transform: see the note next to .ikc-btn-arrow). */
    .ikc-hero-visual { min-height: 0; height: 280px; margin-top: 16px; display: flex; justify-content: center; align-items: flex-end; }
    .ikc-hero-photo { position: static; height: 100%; width: auto; max-width: none; flex: none; }
    .ikc-hero-decor-1 { top: 2%; inset-inline-end: 0; width: 30%; }
    .ikc-hero-crown { inset-inline-end: 2%; }
    .ikc-hero-decor-2 { inset-inline-end: 0; width: 26%; }
    .ikc-features-box { grid-template-columns: repeat(2, 1fr); }
    .ikc-steps { grid-template-columns: 1fr; row-gap: 26px; }
    .ikc-step-arrow { display: none; }
    .ikc-tours-grid { grid-template-columns: 1fr; }
    .ikc-rewards-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .ikc-timeline { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
    .ikc-timeline-item::before, .ikc-timeline-item::after { display: none; }
    .ikc-cta-banner-visual { position: relative; width: 100%; height: 200px; inset-inline-end: auto; }
    .ikc-cta-banner-visual img {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
                mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
    }
    .ikc-lang[dir="rtl"] .ikc-cta-banner-visual img { transform: none !important; }
    .ikc-cta-banner-inner { grid-template-columns: 1fr; min-height: 0; padding-top: 22px; }
    .ikc-cta-banner-decor, .ikc-lang[dir="rtl"] .ikc-cta-banner-decor { transform: none; justify-self: start; text-align: start; }
    .ikc-faq-grid { grid-template-columns: 1fr; }
    .ikc-footer-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .ikc-footer-bottom { justify-content: center; text-align: center; }
}
@media (max-width: 600px) {
    .ikc-nav-inner { gap: 10px; }
    .ikc-nav-right { gap: 10px; }
    .ikc-btn-nav { padding: 8px 14px; font-size: 13px; }
    .ikc-hero-title-l1 { font-size: 34px; }
    .ikc-hero-title-l2 { font-size: 38px; }
    .ikc-hero-subtitle { font-size: 19px; }
    .ikc-hero-visual { height: 250px; }
    .ikc-hero-decor { font-size: 20px; }
    /* No room beside the photo on a phone: only the note over the empty sky stays. */
    .ikc-hero-decor-2, .ikc-hero-crown { display: none; }
    .ikc-features-box { grid-template-columns: 1fr; padding: 20px; }
    .ikc-tour-card { min-height: 0; }
    .ikc-tour-card-0 .ikc-tour-copy, .ikc-tour-card-1 .ikc-tour-copy, .ikc-tour-card-2 .ikc-tour-copy { max-width: 100%; }
    .ikc-tour-visual, .ikc-tour-card-0 .ikc-tour-visual, .ikc-tour-card-1 .ikc-tour-visual, .ikc-tour-card-2 .ikc-tour-visual {
        position: static; width: auto; margin-top: 16px; justify-content: center; align-items: center;
    }
    .ikc-tour-visual img, .ikc-tour-card-0 .ikc-tour-visual img, .ikc-tour-card-1 .ikc-tour-visual img, .ikc-tour-card-2 .ikc-tour-visual img {
        max-height: 220px; width: auto; max-width: 100%;
    }
    .ikc-tour-slogan, .ikc-lang[dir="rtl"] .ikc-tour-slogan { position: static; transform: none; margin-top: 14px; text-align: start; }
    .ikc-rewards-box { padding: 22px 16px 24px; }
    .ikc-rewards-grid { grid-template-columns: 1fr; }
    .ikc-timeline { grid-template-columns: 1fr; }
    .ikc-cta-banner-copy h2 { font-size: 24px; }
}