:root {
    /* Apple iOS Color Palette (shared with the résumé) */
    --ios-bg: #F5F5F7;
    --ios-card-bg: rgba(255, 255, 255, 0.72);
    --ios-card-border: rgba(255, 255, 255, 0.6);
    --ios-blue: #007AFF;
    --ios-red: #FF3B30;
    --ios-orange: #FF9500;
    --ios-green: #34C759;
    --ios-teal: #5AC8FA;
    --ios-indigo: #5856D6;
    --ios-pink: #FF2D55;
    --ios-text: #1D1D1F;
    --ios-text-secondary: #6E6E73;
    --ios-hairline: rgba(0, 0, 0, 0.08);

    --dark-bg: #000;
    --dark-card: #1C1C1E;
    --dark-text: #F5F5F7;
    --dark-text-secondary: #A1A1A6;

    --grad-brand: linear-gradient(100deg, #007AFF 0%, #5856D6 45%, #FF2D55 100%);
    --spring: cubic-bezier(0.2, 0.8, 0.2, 1);

    --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--ios-bg);
    color: var(--ios-text);
    font-family: var(--font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
/* Never let anything widen the page sideways (white band on mobile).
   `overflow-x: hidden` on body alone doesn't stop mobile Chrome/Safari from
   growing the layout viewport; `clip` on both html and body does, without
   turning body into a scroll container. Older browsers keep the line above. */
@supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
}

/* Language switcher core */
body.lang-en .fr { display: none !important; }
body.lang-fr .en { display: none !important; }

a { text-decoration: none; }
section { scroll-margin-top: 90px; }
img { max-width: 100%; }

/* ---------- Typography ---------- */
.display-hero {
    font-size: clamp(2.6rem, 7vw, 5.4rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.02;
}
.display-section {
    font-size: clamp(2.1rem, 5vw, 3.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
}
.eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ios-blue);
    margin-bottom: 1rem;
}
.lead-xl {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.5;
    color: var(--ios-text-secondary);
    font-weight: 500;
}
.lead-xl strong { color: var(--ios-text); font-weight: 600; }
.text-grad {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ios-text { color: var(--ios-text) !important; }
.ios-text-secondary { color: var(--ios-text-secondary) !important; }
.ios-blue { color: var(--ios-blue) !important; }
.ios-red { color: var(--ios-red) !important; }
.ios-orange { color: var(--ios-orange) !important; }
.ios-green { color: var(--ios-green) !important; }
.ios-teal { color: var(--ios-teal) !important; }
.ios-indigo { color: var(--ios-indigo) !important; }
.ios-pink { color: var(--ios-pink) !important; }

.section-pad { padding: clamp(5rem, 11vw, 9rem) 0; }
.section-head { max-width: 780px; margin: 0 auto clamp(3rem, 6vw, 4.5rem); text-align: center; }

/* ---------- Glass ---------- */
.ios-glass {
    background: var(--ios-card-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--ios-card-border);
}

/* ---------- Navigation ---------- */
.nav-container { padding: 14px 16px 0; pointer-events: none; }
.nav-container > * { pointer-events: auto; }
.custom-nav {
    border-radius: 30px;
    width: 100%;
    max-width: 960px;
    transition: border-radius 0.3s ease, box-shadow 0.3s ease;
}
.navbar .nav-link {
    color: var(--ios-text-secondary);
    font-size: 0.95rem;
    transition: color 0.2s, background-color 0.2s;
}
.navbar .nav-link:hover, .navbar .nav-link.active {
    color: var(--ios-text);
    background-color: rgba(0, 0, 0, 0.05);
}
.brand-mark { height: 1.3em; width: auto; vertical-align: -0.25em; }
.lang-btn {
    background: transparent;
    border: 1px solid var(--ios-hairline);
    color: var(--ios-text);
    font-size: 0.85rem;
}
.lang-btn:hover { background: rgba(0, 0, 0, 0.05); }
/* Compact (hamburger) menu up to 991px: the French labels don't fit a full bar at 768px */
@media (max-width: 991.98px) {
    .custom-nav { border-radius: 24px; }
    .navbar-collapse { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--ios-hairline); }
}

/* ---------- Buttons ---------- */
.btn-ios-primary {
    background-color: var(--ios-blue);
    color: #fff;
    border: none;
    transition: transform 0.25s var(--spring), background-color 0.2s;
}
.btn-ios-primary:hover, .btn-ios-primary:focus { background-color: #0062CC; color: #fff; transform: scale(1.04); }
.btn-ios-secondary {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--ios-text);
    border: none;
    transition: background-color 0.2s, transform 0.25s var(--spring);
}
.btn-ios-secondary:hover { background-color: rgba(0, 0, 0, 0.1); color: var(--ios-text); }
.btn-lg-pill { padding: 0.85rem 1.8rem; font-size: 1.05rem; font-weight: 600; border-radius: 999px; }
.link-arrow { font-weight: 600; color: var(--ios-blue); }
.link-arrow i { transition: transform 0.25s var(--spring); }
.link-arrow:hover i { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 150px 0 60px; }
/* Soft glows drawn with radial gradients: same look as a blurred circle,
   but no filter for Safari to recompute on every frame. */
.ambient-orb {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    animation: drift 16s infinite alternate ease-in-out;
    pointer-events: none;
}
.orb-1 { width: 760px; height: 760px; background: radial-gradient(closest-side, rgba(203, 221, 255, 0.85), rgba(203, 221, 255, 0)); top: -260px; left: -280px; }
.orb-2 { width: 640px; height: 640px; background: radial-gradient(closest-side, rgba(252, 214, 228, 0.8), rgba(252, 214, 228, 0)); top: 25%; right: -230px; animation-delay: -5s; }
.orb-3 { width: 560px; height: 560px; background: radial-gradient(closest-side, rgba(221, 217, 255, 0.8), rgba(221, 217, 255, 0)); bottom: -220px; left: 30%; animation-delay: -9s; }
@keyframes drift { 100% { transform: translate(40px, 50px) scale(1.12); } }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 1rem 0.45rem 0.8rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ios-text);
}
.status-dot {
    width: 9px; height: 9px;
    background-color: var(--ios-green);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.6);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    70% { box-shadow: 0 0 0 9px rgba(52, 199, 89, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}

/* Phones fan */
.phone-stage {
    position: relative;
    height: clamp(420px, 60vw, 640px);
    margin-top: 4rem;
}
.phone-stage .phone {
    position: absolute;
    left: 50%;
    bottom: 0;
    transition: transform 0.8s var(--spring);
}
.phone-stage .phone-center { width: clamp(200px, 26vw, 300px); transform: translateX(-50%); z-index: 3; }
.phone-stage .phone-left { width: clamp(170px, 22vw, 260px); transform: translateX(-128%) rotate(-7deg) translateY(-4%); z-index: 2; }
.phone-stage .phone-right { width: clamp(170px, 22vw, 260px); transform: translateX(28%) rotate(7deg) translateY(-4%); z-index: 2; }
.phone-stage .phone-label {
    position: absolute;
    bottom: -2.2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ios-text-secondary);
    white-space: nowrap;
}
@media (max-width: 575px) {
    .phone-stage .phone-left { transform: translateX(-112%) rotate(-7deg) translateY(-4%); }
    .phone-stage .phone-right { transform: translateX(12%) rotate(7deg) translateY(-4%); }
    .phone-stage .phone-label { display: none; }
}

/* Framed screenshots: Apple bezel + soft shadow baked into the image.
   Each image is the 700x1431 phone plus transparent padding for the shadow
   (56px left/right, 40px top, 80px bottom => 812x1551). The width/margins
   below cancel that padding, so the phone itself fills its slot exactly.
   Percentage margins resolve against the parent's width (the phone slot). */
.device-raw {
    display: block;
    width: 116%;              /* 812 / 700 */
    max-width: none;
    margin: -5.714% -8% -11.429%;  /* 40/700, 56/700, 80/700 */
}

/* ---------- Stats strip ---------- */
.stats { border-top: 1px solid var(--ios-hairline); border-bottom: 1px solid var(--ios-hairline); }
.stat-value {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}
.stat-label { color: var(--ios-text-secondary); font-weight: 500; font-size: 0.95rem; margin-top: 0.5rem; }

/* ---------- Cards ---------- */
.ios-card {
    border-radius: 28px;
    transition: transform 0.45s var(--spring), box-shadow 0.45s ease;
    overflow: hidden;
    position: relative;
}
.ios-card.lift:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.08) !important; }

.service-card { padding: 2rem; height: 100%; }
.service-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 18px -6px currentColor;
}
.service-icon i { color: #fff; }
.bg-swift { background: linear-gradient(135deg, #FD9426, #F05138); color: #F05138; }
.bg-android { background: linear-gradient(135deg, #3DDC84, #20A35A); color: #20A35A; }
.bg-web { background: linear-gradient(135deg, #5AC8FA, #007AFF); color: #007AFF; }
.bg-server { background: linear-gradient(135deg, #7D7AFF, #5856D6); color: #5856D6; }
.bg-health { background: linear-gradient(135deg, #FF6B81, #FF2D55); color: #FF2D55; }
.bg-lead { background: linear-gradient(135deg, #FFCC00, #FF9500); color: #FF9500; }
.service-card h3 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.service-card p { color: var(--ios-text-secondary); margin-bottom: 1.25rem; line-height: 1.55; }
.partner-badge {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #20A35A;
    background: rgba(52, 199, 89, 0.12);
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 0.4rem;
}

.chip {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--ios-hairline);
    color: var(--ios-text);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.82rem;
    margin: 0 0.3rem 0.4rem 0;
}

/* ---------- Dark AI section ---------- */
.dark-section {
    background: var(--dark-bg);
    color: var(--dark-text);
    position: relative;
    overflow: hidden;
}
.dark-section .eyebrow { color: #64D2FF; }
.dark-section .lead-xl { color: var(--dark-text-secondary); }
.dark-section .lead-xl strong { color: var(--dark-text); }
.dark-glow {
    position: absolute;
    width: 900px; height: 900px;
    left: 50%; top: -420px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(88, 86, 214, 0.35), rgba(0, 122, 255, 0.12) 50%, transparent 75%);
    pointer-events: none;
}
.text-grad-dark {
    background: linear-gradient(100deg, #64D2FF 0%, #7D7AFF 50%, #FF6B9A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pipeline { position: relative; }
.pipeline-step {
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 1.6rem;
    height: 100%;
    transition: transform 0.45s var(--spring), border-color 0.3s;
}
.pipeline-step:hover { transform: translateY(-4px); border-color: rgba(100, 210, 255, 0.35); }
.step-num {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64D2FF;
    letter-spacing: 0.1em;
}
.pipeline-step h3 { font-size: 1.3rem; font-weight: 700; margin: 0.4rem 0 0.6rem; letter-spacing: -0.02em; }
.pipeline-step p { color: var(--dark-text-secondary); font-size: 0.93rem; line-height: 1.5; margin-bottom: 1rem; }
.ai-tag {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #D6D6FF;
    background: rgba(125, 122, 255, 0.12);
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
}
.ai-tag i { color: #A5A3FF; margin-top: 0.15rem; }

.benefit {
    border-radius: 24px;
    padding: 2rem;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.benefit .big {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 0.75rem;
}
.benefit p { color: var(--dark-text-secondary); margin: 0; line-height: 1.55; }

.split-compare {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.split-compare .col-side { padding: 1.75rem; }
.split-compare .side-ai { background: rgba(125, 122, 255, 0.1); }
.split-compare .side-me { background: rgba(100, 210, 255, 0.06); }
.split-compare h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; }
.split-compare ul { list-style: none; padding: 0; margin: 0; color: var(--dark-text-secondary); }
.split-compare li { padding: 0.35rem 0 0.35rem 1.6rem; position: relative; }
.split-compare li i { position: absolute; left: 0; top: 0.6rem; font-size: 0.85rem; }

/* ---------- Work ---------- */
.case {
    border-radius: 36px;
    overflow: hidden;
    position: relative;
    margin-bottom: 2rem;
}
.case-body { padding: clamp(2rem, 5vw, 4rem); }
.case-icon { width: 64px; height: 64px; border-radius: 22.5%; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }
.case h3 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
.case .case-sub { font-size: 1.15rem; line-height: 1.55; }
.case-meta {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    display: inline-block;
}
.case-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.case-list li { padding: 0.45rem 0 0.45rem 1.9rem; position: relative; line-height: 1.5; }
.case-list li i { position: absolute; left: 0; top: 0.72rem; font-size: 0.95rem; }
.case-phones { display: flex; justify-content: center; align-items: flex-end; gap: 4%; padding: 0 1rem; }
.case-phones > * { width: 42%; max-width: 250px; }
.case-phones > .offset { transform: translateY(-8%); }

/* Andaman7: deep blue */
.case-a7 {
    background: radial-gradient(120% 120% at 100% 0%, #1b6fe0 0%, #0b3a8c 45%, #061a44 100%);
    color: #fff;
}
.case-a7 .case-sub, .case-a7 .case-list { color: rgba(255, 255, 255, 0.78); }
.case-a7 .case-list i { color: #7FD0FF; }
.case-a7 .case-meta { background: rgba(255, 255, 255, 0.14); color: #fff; }
.case-a7 .chip { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.case-a7 .link-arrow { color: #7FD0FF; }
.a7-kpis { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.a7-kpis .v { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; }
.a7-kpis .l { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); }

/* Cheese: warm cream */
.case-cheese { background: linear-gradient(160deg, #FFF8EC 0%, #F6E7CF 100%); }
.case-cheese .case-meta { background: rgba(176, 112, 64, 0.14); color: #8a5530; }
.case-cheese .case-list i { color: #C07A45; }
.case-cheese .case-sub, .case-cheese .case-list { color: #6b5a4b; }
.case-cheese .link-arrow { color: #A8612F; }

/* Circuit Court: civic green */
.case-circuit { background: linear-gradient(160deg, #EEF7EC 0%, #D7ECD4 100%); }
.case-circuit .case-meta { background: rgba(30, 110, 60, 0.12); color: #1d6a3c; }
.case-circuit .case-list i { color: #2A8A4E; }
.case-circuit .case-sub, .case-circuit .case-list { color: #4b5f50; }
.case-circuit .link-arrow { color: #1d7a42; }

/* ---------- Android partner band ---------- */
.partner-band {
    border-radius: 36px;
    padding: clamp(2rem, 5vw, 3.5rem);
    background: linear-gradient(120deg, #ffffff 0%, #f0faf3 100%);
    border: 1px solid var(--ios-hairline);
}
.platform-duo { display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
.platform-tile {
    width: 96px; height: 96px;
    border-radius: 26px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem;
    color: #fff;
    box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.35);
}
.platform-tile.apple { background: linear-gradient(135deg, #3a3a3c, #000); }
.platform-tile.droid { background: linear-gradient(135deg, #3DDC84, #1f9d57); }
.platform-plus { font-size: 1.6rem; color: var(--ios-text-secondary); font-weight: 300; }

/* ---------- Engagement ---------- */
.plan { padding: 2.25rem; height: 100%; display: flex; flex-direction: column; }
.plan h3 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; }
.plan .plan-tag { font-size: 0.85rem; font-weight: 600; color: var(--ios-text-secondary); }
.plan ul { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; flex-grow: 1; }
.plan li { padding: 0.45rem 0 0.45rem 1.75rem; position: relative; color: var(--ios-text-secondary); line-height: 1.45; }
.plan li i { position: absolute; left: 0; top: 0.7rem; color: var(--ios-blue); font-size: 0.9rem; }
.plan.featured { outline: 2px solid var(--ios-blue); outline-offset: -2px; }
.plan .ribbon {
    align-self: flex-start;
    margin-bottom: 0.75rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    background: var(--ios-blue); color: #fff; padding: 0.3rem 0.7rem; border-radius: 999px;
}

/* ---------- About ---------- */
.profile-squircle {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 25%;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.3);
}
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
    content: "";
    position: absolute;
    left: 7px; top: 8px; bottom: 8px;
    width: 2px;
    background: linear-gradient(var(--ios-blue), var(--ios-indigo), var(--ios-pink));
    opacity: 0.35;
    border-radius: 2px;
}
.timeline li { position: relative; padding: 0 0 1.4rem 2.2rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
    content: "";
    position: absolute;
    left: 0; top: 5px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--ios-blue);
}
.timeline li.now::before { border-color: var(--ios-green); box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.2); }
.timeline .when { font-size: 0.8rem; font-weight: 700; color: var(--ios-blue); letter-spacing: 0.04em; }
.timeline li.now .when { color: #248A3D; }
.timeline .what { font-weight: 600; }
.timeline .where { color: var(--ios-text-secondary); font-size: 0.92rem; }

/* ---------- FAQ ---------- */
.faq .accordion-item {
    border: none;
    background: transparent;
    border-bottom: 1px solid var(--ios-hairline);
}
.faq .accordion-button {
    background: transparent;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--ios-text);
    padding: 1.4rem 0;
    box-shadow: none;
}
.faq .accordion-button:not(.collapsed) { color: var(--ios-blue); }
.faq .accordion-body { padding: 0 0 1.4rem; color: var(--ios-text-secondary); line-height: 1.6; }

/* ---------- Contact / brief builder ---------- */
.contact-card { border-radius: 36px; padding: clamp(1.75rem, 5vw, 3.5rem); }
.brief-label { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.7rem; display: block; }
.toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--ios-hairline);
    background: #fff;
    color: var(--ios-text);
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-weight: 500;
    font-size: 0.92rem;
    margin: 0 0.4rem 0.5rem 0;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s var(--spring);
}
.toggle-chip:hover { border-color: rgba(0, 122, 255, 0.4); }
.btn-check:checked + .toggle-chip {
    background: var(--ios-blue);
    border-color: var(--ios-blue);
    color: #fff;
    transform: scale(1.03);
}
.btn-check:focus-visible + .toggle-chip { outline: 3px solid rgba(0, 122, 255, 0.35); outline-offset: 2px; }
.ios-input {
    border-radius: 16px;
    border: 1px solid var(--ios-hairline);
    background: #fff;
    padding: 0.85rem 1rem;
    font-size: 1rem;
}
.ios-input:focus { border-color: var(--ios-blue); box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15); }
.direct-link {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 0;
    color: var(--ios-text);
    font-weight: 500;
    border-bottom: 1px solid var(--ios-hairline);
}
.direct-link:last-child { border-bottom: none; }
.direct-link:hover { color: var(--ios-blue); }
.direct-link .ico {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(0, 122, 255, 0.1);
    color: var(--ios-blue);
    display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--ios-hairline); }
footer a { color: var(--ios-text-secondary); }
footer a:hover { color: var(--ios-text); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ---------- Framed screenshots ---------- */
.case-phones.three > * { width: 31%; }
.case-phones.three > .offset { transform: translateY(-6%); }

/* ---------- Process ---------- */
.process-card { padding: 1.5rem; border-radius: 24px; }
.process-card h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--ios-text); }
.process-card p { color: var(--ios-text-secondary); font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.9rem; }
.process-card .chip { font-size: 0.75rem; padding: 0.25rem 0.65rem; }
.step-badge {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem;
    color: #fff;
    background: var(--c);
    box-shadow: 0 8px 16px -8px var(--c);
}
/* ---------- Scroll effects ---------- */
.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100;
    background: var(--grad-brand);
    transform-origin: 0 50%;
    transform: scaleX(0);
    pointer-events: none;
}
[data-speed], .phone-stage .phone { will-change: translate; }
.text-grad, .text-grad-dark { background-size: 200% auto; animation: shimmer 8s ease-in-out infinite alternate; }
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
/* Phones and tablets: skip effects that are costly in mobile Safari.
   - the shimmer repaints large text every frame
   - backdrop blur on cards over a flat background is invisible but still
     computed live; only the menu bar (over moving content) keeps its glass */
@media (hover: none) {
    .text-grad, .text-grad-dark { animation: none; }
    .ios-glass:not(.custom-nav) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(255, 255, 255, 0.86);
    }
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* ---------- Mobile ---------- */
.swipe-hint { display: none; }
@media (max-width: 767px) {
    .section-pad { padding: 3.75rem 0; }
    .section-head { margin-bottom: 2rem; }
    .hero { padding-top: 120px; }

    /* Horizontal swipe rows (App Store style) instead of long stacks.
       Full-bleed: the row runs edge to edge of the screen whatever the
       container width (fluid below 576px, 540px wide in landscape), while
       the first card stays aligned with the text above it.
       --bleed = distance from the screen edge to the container's content:
       12px when the container is fluid (< 576px), (100vw - 516px) / 2 from
       576px, where Bootstrap's container becomes 540px wide. */
    .snap-row {
        --bleed: 12px;
        display: flex;
        flex-wrap: nowrap;
        gap: 1rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--bleed);
        margin-inline: calc(-1 * var(--bleed));
        padding: 0.5rem var(--bleed) 1.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .snap-row::-webkit-scrollbar { display: none; }
    @media (min-width: 576px) { .snap-row { --bleed: calc(50vw - 258px); } }
    .snap-row > * {
        flex: 0 0 min(84%, 360px);
        scroll-snap-align: start;
        transform: translateZ(0); /* pre-render off-screen cards: no blank tiles while swiping */
    }
    .snap-row .ios-card.lift:hover { transform: none; }
    .swipe-hint {
        display: block;
        text-align: right;
        font-size: 0.85rem; font-weight: 600;
        color: var(--ios-blue);
        margin: -1rem 0 0.25rem;
    }
    .swipe-hint i { font-size: 0.75rem; animation: nudge 1.6s ease-in-out infinite; }
    @keyframes nudge { 50% { transform: translateX(4px); } }

    .service-card { padding: 1.5rem; }
    .plan { padding: 1.75rem; }

    /* Andaman7 key figures fit on one line */
    .a7-kpis .v { font-size: 1.35rem; }
    .a7-kpis .l { font-size: 0.78rem; }

    .profile-squircle { max-width: 220px; }

    /* Comfortable tap targets */
    .link-arrow { display: inline-block; padding: 0.7rem 0; }
    footer { text-align: center; }
    footer .d-flex.gap-3 { flex-wrap: wrap; justify-content: center; }
    footer a { display: inline-block; padding: 0.6rem 0.2rem; }
}

/* ---------- Hero entrance: pure CSS, plays on first paint (no JS needed) ---------- */
.hero-anim { animation: heroIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--hero-delay, 0ms) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .hero-anim { animation: none; } }

/* ---------- Reveal on scroll (replaces AOS) ---------- */
/* Hidden only when JS runs, so content never stays invisible */
.js [data-aos] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.6s ease var(--reveal-delay, 0ms),
        transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-delay, 0ms);
}
.js [data-aos="zoom-in"] { transform: scale(0.94); }
.js [data-aos].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js [data-aos] { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   Bento grids: Services, Process, Offers
   Patchwork of tiles of different sizes that always interlocks without
   holes. Below 768px the same containers become swipe rows (.snap-row).
   ========================================================================= */
/* Grid from 768px up; below that .snap-row turns the same container into a swipe row */
@media (min-width: 768px) {
    .bento { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
}
.bento > * > .ios-card { height: 100%; }

/* ---- Services ----
   tablet (2 cols)            desktop (3 cols)
   [ SaaS ········· ]         [ SaaS ········· ][ iOS ]
   [ iOS ][ Backend ]         [ Backend ][ Web ][ iOS ]
   [ iOS ][ Web     ]         [ Health ][ Existing ···· ]
   [ Health ][ Existing ]                                  */
@media (min-width: 768px) {
    .bento-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento-services > .b-wide { grid-column: span 2; }
    .bento-services > .b-tall { grid-row: span 2; }
}
@media (min-width: 992px) {
    .bento-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bento-services > .b-wide-lg { grid-column: span 2; }
    .bento-services > .b-wide-lg p { max-width: 58ch; }
}

/* Tile styles: a few tinted / dark tiles give the patchwork its rhythm */
.service-card.card-warm,
.service-card.card-rose,
.service-card.card-dark { display: flex; flex-direction: column; }
.bento .card-warm { background: linear-gradient(165deg, #FFF1E6 0%, rgba(255, 255, 255, 0.92) 62%); }
.bento .card-rose { background: linear-gradient(165deg, #FFEAF0 0%, rgba(255, 255, 255, 0.92) 62%); }
.bento .card-dark {
    background: radial-gradient(120% 100% at 100% 0%, #3A3A3C 0%, #1C1C1E 55%, #0F0F10 100%);
    border-color: rgba(255, 255, 255, 0.08);
}
.card-dark .ios-text { color: #F5F5F7 !important; }
.card-dark p { color: rgba(245, 245, 247, 0.72); }
.card-dark .chip { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); color: #F5F5F7; }
.card-watermark {
    position: absolute; right: -1.75rem; bottom: -2.75rem;
    font-size: 7.5rem; line-height: 1;
    color: #fff; opacity: 0.06;
    transform: rotate(-12deg);
    pointer-events: none;
}
.card-dark > :not(.card-watermark) { position: relative; z-index: 1; }

/* Tall iOS tile: a phone peeks from the bottom and fills whatever height
   the grid gives the tile (it adds no height of its own beyond a minimum) */
.tile-peek { display: none; }
@media (min-width: 768px) {
    .tile-peek {
        display: block;
        position: relative;
        flex: 1 1 auto;
        min-height: 190px;
        margin: 1.5rem -2rem -2rem;
        overflow: hidden;
    }
    .tile-peek .shot {
        position: absolute;
        top: 0; left: 50%;
        width: min(62%, 240px);
        transform: translateX(-50%);
    }
}

/* ---- Process ----
   The 9 steps are identical tiles (no step looks more important); the
   patchwork comes from the "Always included" tile, which isn't a step.
   4 cols:  [01][02][03][INC]      3 cols:  [01][02][INC]      2 cols:  [01][02]
            [04][05][06][INC]               [03][04][INC]               ...
            [07][08][09][INC]               [05][06][INC]               [09][INC]
                                            [07][08][09]
   On phones the steps are a swipe row and the tile sits below it.
   From 768px the swipe-row wrapper uses display: contents, so the steps
   and the tile share one grid. */
.bento-process { gap: 1rem; }
.bento-process .process-card::after {
    content: attr(data-num);
    position: absolute;
    right: 1rem; bottom: -1.7rem;
    font-size: 6.5rem; font-weight: 800; letter-spacing: -0.06em; line-height: 1;
    color: var(--c);
    opacity: 0.09;
    pointer-events: none;
}
.bento-process .process-card > * { position: relative; z-index: 1; }

.included-tile {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-top: 1.25rem;
    padding: 2rem;
    border-radius: 28px;
    color: #F5F5F7;
    background: radial-gradient(120% 90% at 100% 0%, #3A3A3C 0%, #1C1C1E 55%, #0F0F10 100%);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.45);
}
.included-tile > :not(.included-watermark) { position: relative; z-index: 1; }
.included-tile .eyebrow { color: #64D2FF; margin-bottom: 0.6rem; }
.included-tile h3 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; color: #F5F5F7; margin-bottom: 0.5rem; }
.included-tile p { color: rgba(245, 245, 247, 0.7); line-height: 1.5; margin-bottom: 1.4rem; }
.inc-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem;
    font-weight: 600; font-size: 0.95rem;
}
.inc-list i { width: 1.3em; margin-right: 0.45rem; text-align: center; }
/* iOS dark-mode system colours: readable on the dark tile */
.inc-blue { color: #0A84FF; } .inc-indigo { color: #7D7AFF; } .inc-green { color: #30D158; }
.inc-red { color: #FF453A; } .inc-teal { color: #64D2FF; }
.included-watermark {
    position: absolute; right: -1.5rem; top: 38%;
    font-size: 9rem; line-height: 1;
    color: #fff; opacity: 0.05;
    transform: rotate(-20deg);
    pointer-events: none;
}

@media (min-width: 768px) {
    .process-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .process-grid > .bento-process { display: contents; }
    .included-tile { margin-top: 0; }
}
@media (min-width: 992px) {
    .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .included-tile { grid-column: 3; grid-row: 1 / span 3; }
    .inc-list { flex-direction: column; flex-wrap: nowrap; gap: 0.95rem; margin-top: auto; }
}
@media (min-width: 1200px) {
    .process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .included-tile { grid-column: 4; }
}

/* ---- Offers ----
   tablet: the recommended offer spans the row on top, the two others below */
@media (min-width: 768px) {
    .bento-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bento-plans > .b-featured { grid-column: span 2; order: -1; }
    .bento-plans > .b-featured ul { columns: 2; column-gap: 2.5rem; }
    .bento-plans > .b-featured li { break-inside: avoid; }
}
@media (min-width: 992px) {
    .bento-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bento-plans > .b-featured { grid-column: auto; order: 0; }
    .bento-plans > .b-featured ul { columns: 1; }
}