/* =========================================================
   apple.css — Apple-inspired styling for index2.html
   Keep fully isolated from modern.css. Sandbox only.
   ========================================================= */

:root {
    --apple-black: #1d1d1f;
    --apple-white: #ffffff;
    --apple-cream: #f5f5f7;
    --apple-gray-mid: #86868b;
    --apple-gray-dark: #424245;
    --apple-gray-soft: #d2d2d7;
    --apple-blue: #0066cc;
    --apple-blue-hover: #0077ed;
    --apple-text-dark: #1d1d1f;
    --apple-text-light: #f5f5f7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body.page-apple {
    margin: 0;
    background: var(--apple-white);
    color: var(--apple-text-dark);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -0.022em;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* ---------- Sticky top nav ---------- */
.aa-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 44px;
    background: rgba(29, 29, 31, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.aa-nav__inner {
    max-width: 1024px;
    margin: 0 auto;
    height: 44px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.aa-brand {
    color: var(--apple-text-light);
    text-decoration: none;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.aa-brand .logomark {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    display: inline-block;
    border-radius: 5px;
}
.aa-brand .logomark svg,
svg.logomark { display: block; width: 100%; height: 100%; }
.aa-nav__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 32px;
}
.aa-nav__links a {
    color: rgba(245, 245, 247, 0.8);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: -0.01em;
    transition: color .25s ease;
}
.aa-nav__links a:hover { color: var(--apple-text-light); }
.aa-nav__links a.active { color: var(--apple-text-light); }
.aa-nav__cta {
    color: var(--apple-text-light);
    font-size: 12px;
    text-decoration: none;
    border: 1px solid rgba(245,245,247,0.4);
    padding: 4px 12px;
    border-radius: 980px;
    transition: background .2s ease;
}
.aa-nav__cta:hover { background: rgba(245,245,247,0.1); }

/* ---------- Generic blocks ---------- */
.aa-section { padding: 100px 22px; position: relative; }
.aa-section--dark { background: var(--apple-black); color: var(--apple-text-light); }
.aa-section--gray { background: var(--apple-cream); color: var(--apple-text-dark); }
.aa-section--white { background: var(--apple-white); color: var(--apple-text-dark); }
.aa-container { max-width: 980px; margin: 0 auto; }
.aa-container--wide { max-width: 1200px; }

.aa-eyebrow {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.012em;
    color: var(--apple-blue);
    margin-bottom: 8px;
    text-transform: none;
}
.aa-section--dark .aa-eyebrow { color: #2997ff; }

.aa-display {
    font-size: clamp(42px, 6vw, 80px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0 0 18px;
}
.aa-display--xl {
    font-size: clamp(56px, 8vw, 96px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    font-weight: 600;
}
.aa-subhead {
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.3;
    font-weight: 400;
    color: var(--apple-gray-dark);
    margin: 0 0 32px;
    max-width: 780px;
}
.aa-section--dark .aa-subhead { color: rgba(245,245,247,0.85); }

.aa-section__head { text-align: center; max-width: 880px; margin: 0 auto 70px; }
.aa-section__head .aa-subhead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.aa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 980px;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.022em;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, transform .15s ease;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.1;
}
.aa-btn--primary {
    background: var(--apple-blue);
    color: var(--apple-white);
}
.aa-btn--primary:hover { background: var(--apple-blue-hover); }
.aa-btn--ghost {
    background: transparent;
    color: var(--apple-blue);
    border-color: var(--apple-blue);
}
.aa-btn--ghost:hover { background: var(--apple-blue); color: var(--apple-white); }
.aa-section--dark .aa-btn--ghost {
    color: #2997ff;
    border-color: #2997ff;
}
.aa-section--dark .aa-btn--ghost:hover {
    background: #2997ff;
    color: var(--apple-black);
}

.aa-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--apple-blue);
    text-decoration: none;
    font-size: 17px;
    letter-spacing: -0.022em;
    transition: color .2s ease;
}
.aa-link::after {
    content: "›";
    transition: transform .2s ease;
    font-weight: 400;
}
.aa-link:hover { color: var(--apple-blue-hover); text-decoration: underline; }
.aa-link:hover::after { transform: translateX(3px); }
.aa-section--dark .aa-link { color: #2997ff; }
.aa-section--dark .aa-link:hover { color: #5fb0ff; }

.aa-cta-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* ---------- HERO ---------- */
.aa-hero {
    padding: 80px 22px 120px;
    text-align: center;
    background: var(--apple-black);
    color: var(--apple-text-light);
    position: relative;
    overflow: hidden;
}
.aa-hero__brand {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--apple-gray-mid);
    margin: 0 0 8px;
    text-transform: uppercase;
}
.aa-hero h1 {
    font-size: clamp(56px, 9vw, 112px);
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -0.04em;
    margin: 16px 0 24px;
}
.aa-hero h1 em {
    font-style: italic;
    background: linear-gradient(135deg, #afc7ff 0%, #2997ff 50%, #d68eff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
    /* Prevent italic glyphs (e.g. trailing 'l' in "sell") being clipped on the right.
       background-clip:text uses the glyph's tight bounding box, so we add a small
       inline-block with right-side padding to keep the descender visible. */
    display: inline-block;
    padding-right: 0.08em;
    margin-right: -0.08em;
}
.aa-hero__sub {
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 400;
    color: rgba(245,245,247,0.85);
    max-width: 760px;
    margin: 0 auto 38px;
    line-height: 1.25;
}
.aa-hero .aa-cta-row { margin-bottom: 70px; }

/* Concrete metrics line below hero sub */
.aa-hero__metrics {
    margin: 0 auto 28px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(245, 245, 247, 0.65);
    letter-spacing: -0.01em;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 12px;
    max-width: 720px;
}
.aa-hero__metrics strong { color: rgba(245, 245, 247, 0.95); font-weight: 600; }
.aa-hero__metrics .aa-dot { opacity: 0.4; }

/* "I need..." narrow band — sits below the hero constellation, above About */
.aa-need-band {
    background: var(--apple-cream);
    border-top: 1px solid var(--apple-gray-soft);
    border-bottom: 1px solid var(--apple-gray-soft);
    padding: 22px 22px;
}
.aa-need-band__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}
.aa-need-band__lbl {
    font-size: 15px;
    font-weight: 600;
    color: var(--apple-text-dark);
    letter-spacing: -0.012em;
    margin-right: 4px;
}
.aa-need-band__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}
.aa-need-band__chip {
    background: var(--apple-white);
    color: var(--apple-text-dark);
    font-size: 14px;
    font-weight: 500;
    padding: 9px 18px;
    border-radius: 980px;
    text-decoration: none;
    border: 1px solid var(--apple-gray-soft);
    letter-spacing: -0.01em;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.aa-need-band__chip:hover {
    background: var(--apple-blue);
    color: var(--apple-white);
    border-color: var(--apple-blue);
    transform: translateY(-1px);
}

/* Direct-anchor scroll positioning for individual service cards */
.aa-tile[id^="svc-"] { scroll-margin-top: 70px; }

/* Hero stage — generic centering wrapper (used by Antennascope subpage for the app icon) */
.aa-hero__stage {
    margin: 30px auto 0;
    max-width: 780px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0 20px;
}

/* Hero constellation — actual app icons floating */
.aa-hero__constellation {
    margin: 40px auto 0;
    max-width: 880px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.5vw, 32px);
    flex-wrap: nowrap;
    padding: 30px 0 60px;
    perspective: 1000px;
}
.aa-app-icon {
    flex: 0 0 auto;
    text-align: center;
    text-decoration: none;
    color: rgba(245,245,247,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: transform .4s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: aaFloat 6s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}
.aa-app-icon:hover {
    transform: translateY(-8px) scale(1.05);
    color: var(--apple-text-light);
}
.aa-app-icon img {
    width: clamp(74px, 10vw, 116px);
    height: clamp(74px, 10vw, 116px);
    border-radius: 24%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.45),
                0 0 0 1px rgba(255,255,255,0.06);
}
.aa-app-icon--lg img {
    width: clamp(96px, 13vw, 152px);
    height: clamp(96px, 13vw, 152px);
    box-shadow: 0 30px 70px rgba(41, 151, 255, 0.25),
                0 0 0 1px rgba(255,255,255,0.08);
}
.aa-app-icon__name {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    opacity: 0.7;
    transition: opacity .25s ease;
}
.aa-app-icon:hover .aa-app-icon__name { opacity: 1; }

@keyframes aaFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    .aa-app-icon { animation: none; }
}

@media (max-width: 700px) {
    .aa-hero__constellation {
        gap: 8px;
        padding: 16px 0 30px;
    }
    .aa-app-icon { animation: none; }                  /* drop the bob — visually overlaps at small widths */
    .aa-app-icon__name { display: none; }
    /* On mobile every icon is the same size — five squircles in a tidy row. */
    .aa-app-icon img,
    .aa-app-icon--lg img {
        width: 54px;
        height: 54px;
    }
}
@media (max-width: 380px) {
    .aa-hero__constellation { gap: 6px; }
    .aa-app-icon img,
    .aa-app-icon--lg img {
        width: 46px;
        height: 46px;
    }
}

/* ---------- Highlight strip (services as sleek tiles) ---------- */
.aa-highlights { padding: 100px 22px; background: var(--apple-cream); }
.aa-highlights__grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.aa-tile {
    background: var(--apple-white);
    border-radius: 22px;
    padding: 56px 48px 48px;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform .4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.aa-tile:hover { transform: translateY(-4px); }
.aa-tile--dark { background: var(--apple-black); color: var(--apple-text-light); }
.aa-tile--gradient {
    background: linear-gradient(180deg, #1d1d1f 0%, #2c2c2e 100%);
    color: var(--apple-text-light);
}
.aa-tile__copy h3 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0 0 12px;
}
.aa-tile__copy p {
    font-size: 19px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--apple-gray-dark);
    max-width: 480px;
    margin: 0 0 28px;
}
.aa-tile--dark .aa-tile__copy p,
.aa-tile--gradient .aa-tile__copy p { color: rgba(245,245,247,0.85); }
.aa-tile__copy .aa-eyebrow {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    color: var(--apple-blue);
}
.aa-tile--dark .aa-tile__copy .aa-eyebrow,
.aa-tile--gradient .aa-tile__copy .aa-eyebrow { color: #2997ff; }
.aa-tile__visual {
    align-self: center;
    width: 100%;
    max-width: 240px;
    margin-top: 24px;
}
.aa-tile__visual img {
    width: 100%; height: auto;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.18));
}
.aa-tile--dark .aa-tile__visual img,
.aa-tile--gradient .aa-tile__visual img {
    filter: brightness(0) invert(1) drop-shadow(0 30px 50px rgba(255,255,255,0.05));
}

/* Real-photograph treatment for service-card visuals (overrides the icon-silhouette
   filter above). Cover-cropped to a clean 4:3 frame with a soft drop shadow. */
.aa-tile__visual--photo {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.22);
    margin-top: 24px;
}
.aa-tile__visual--photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    filter: none !important;
}
.aa-tile--span2 .aa-tile__visual--photo {
    max-width: 520px;
    aspect-ratio: 4 / 3;
}
.aa-tile--dark .aa-tile__visual--photo,
.aa-tile--gradient .aa-tile__visual--photo {
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(255, 255, 255, 0.06);
}

.aa-tile--span2 { grid-column: span 2; min-height: 540px; flex-direction: row; align-items: center; gap: 60px; padding: 70px; }
.aa-tile--span2 .aa-tile__copy { flex: 1; }
.aa-tile--span2 .aa-tile__visual { flex: 1; max-width: 480px; margin-top: 0; }

/* ---------- Process steps (clean reveal, replaces broken sticky scrollytelling) ---------- */
.aa-process { padding: 130px 22px; }
.aa-process__title {
    background: linear-gradient(135deg, #ffffff 0%, #afc7ff 50%, #2997ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.aa-process__list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 880px;
    counter-reset: step;
}
.aa-process__step {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 32px;
    padding: 40px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    align-items: start;
}
.aa-process__step:first-child { border-top: 0; padding-top: 0; }
.aa-process__num {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    font-size: clamp(48px, 5vw, 80px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    color: rgba(245,245,247,0.25);
    transition: color .4s ease;
}
.aa-process__step.visible .aa-process__num { color: #2997ff; }
.aa-process__tag {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #2997ff;
    margin: 0 0 8px;
}
.aa-process__step h3 {
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 12px;
    color: var(--apple-text-light);
}
.aa-process__step p {
    font-size: 19px;
    line-height: 1.5;
    color: rgba(245,245,247,0.78);
    margin: 0;
    max-width: 640px;
}

/* ---------- Pricing ---------- */
.aa-pricing { background: var(--apple-white); }
.aa-pricing__grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.aa-plan {
    background: var(--apple-cream);
    border-radius: 22px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    transition: transform .4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.aa-plan:hover { transform: translateY(-4px); }
.aa-plan--featured {
    background: var(--apple-black);
    color: var(--apple-text-light);
}
/* Free consultation tier — entry point, visually distinct from paid tiers */
.aa-plan--free {
    background: var(--apple-white);
    border: 1.5px dashed var(--apple-gray-soft);
}
.aa-plan--free:hover {
    border-color: var(--apple-blue);
}
.aa-plan--free .aa-plan__name::after {
    content: " · Free";
    display: none;
}
.aa-plan--free .aa-plan__price {
    color: var(--apple-blue);
}
/* Each "row" of a plan card uses min-height so the same row aligns
   horizontally across all 5 cards regardless of how the copy wraps. */
.aa-plan__name {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--apple-gray-mid);
    margin: 0 0 8px;
    min-height: 18px;            /* one line of 14px@1.2 */
}
.aa-plan--featured .aa-plan__name { color: #2997ff; }
.aa-plan__tagline {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 28px;
    line-height: 1.2;
    /* 4 lines @ 22px × 1.2 = ~106px. Reserves the worst case (Platinum's
       "CMS, e-commerce, booking & payments." wraps to 4 lines at narrow
       widths) so every price sits on the same horizontal line. */
    min-height: 108px;
}
.aa-plan__price {
    font-size: clamp(40px, 4vw, 56px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    margin: 0 0 6px;
    min-height: 56px;            /* matches the largest clamp value */
    display: flex;
    align-items: flex-end;       /* big number sits on the baseline of the row */
}
.aa-plan__price-from {
    font-size: 14px;
    font-weight: 400;
    color: var(--apple-gray-mid);
    margin: 0 0 28px;
    line-height: 1.4;
    /* Diamond's "From · Payment plans available" wraps to 2 lines on narrow
       cards. Reserve 2 lines so the features list below starts at the same
       Y across all 5 cards. 14px × 1.4 × 2 = ~40px. */
    min-height: 40px;
}
.aa-plan--featured .aa-plan__price-from { color: rgba(245,245,247,0.65); }
.aa-plan__features {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
    flex: 1;
}
.aa-plan__features li {
    padding: 10px 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    font-size: 17px;
    color: var(--apple-gray-dark);
}
.aa-plan--featured .aa-plan__features li {
    border-top-color: rgba(255,255,255,0.12);
    color: rgba(245,245,247,0.82);
}
.aa-plan__features li:first-child { border-top: 0; }

/* ---------- Recent works ---------- */
.aa-works { background: var(--apple-cream); }
.aa-works__list {
    max-width: 980px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}
.aa-work {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 24px;
    padding: 22px 0;
    border-top: 1px solid var(--apple-gray-soft);
    align-items: center;
    text-decoration: none;
    color: var(--apple-text-dark);
    transition: padding .2s ease;
}
.aa-work:first-child { border-top: 0; }
.aa-work:hover { padding-left: 8px; }

/* Real-logo column for portfolio entries (replaces the old numeric column) */
.aa-work__logo {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--apple-white);
    border: 1px solid var(--apple-gray-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.aa-work__logo img {
    width: 100%;
    height: 100%;
    display: block;
}
/* iOS app icons render full-bleed (the icon already has padding/squircle) */
.aa-work__logo--app img {
    object-fit: cover;
}
.aa-work__logo--app {
    background: transparent;
    border-color: transparent;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
/* Website favicons render contained with breathing room */
.aa-work__logo--site img {
    object-fit: contain;
    padding: 8px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.aa-work__name {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0 0 4px;
}
.aa-work__desc {
    font-size: 17px;
    color: var(--apple-gray-dark);
    margin: 0;
    line-height: 1.4;
}
.aa-work__cat {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--apple-gray-mid);
}

/* ---------- Contact ---------- */
.aa-contact { background: var(--apple-white); }
.aa-contact__grid {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 80px;
    align-items: start;
}
.aa-form { display: grid; gap: 16px; }
.aa-input,
.aa-textarea {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--apple-gray-soft);
    border-radius: 12px;
    font: inherit;
    font-size: 17px;
    background: var(--apple-white);
    color: var(--apple-text-dark);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.aa-input:focus,
.aa-textarea:focus {
    outline: none;
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0,102,204,0.18);
}
.aa-textarea { min-height: 140px; resize: vertical; }
.aa-form__msg {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    display: none;
}
.aa-form__msg--success { background: #ecf7e9; color: #1d4f1d; }
.aa-form__msg--error { background: #fbe9e7; color: #7a1c1c; }

.aa-contact__details h3 {
    font-size: 21px;
    font-weight: 600;
    margin: 0 0 14px;
    letter-spacing: -0.02em;
}
.aa-contact__details p {
    margin: 0 0 6px;
    font-size: 16px;
    color: var(--apple-gray-dark);
}
.aa-contact__details a { color: var(--apple-blue); text-decoration: none; }
.aa-contact__details a:hover { text-decoration: underline; }

/* ---------- Newsletter strip ---------- */
.aa-newsletter {
    background: var(--apple-cream);
    text-align: center;
    padding: 80px 22px;
}
.aa-newsletter h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0 0 12px;
}
.aa-newsletter p {
    font-size: 19px;
    color: var(--apple-gray-dark);
    margin: 0 0 28px;
}
.aa-newsletter__form {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}
.aa-newsletter__form .aa-input { flex: 1; min-width: 240px; }

/* ---------- Cookie / consent banner ---------- */
.aa-consent {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    margin: 0 auto;
    max-width: 720px;
    z-index: 100;
    background: rgba(29, 29, 31, 0.94);
    color: var(--apple-text-light);
    border-radius: 14px;
    padding: 14px 18px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transform: translateY(150%);
    opacity: 0;
    transition: transform .45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity .3s ease;
}
.aa-consent--visible {
    transform: translateY(0);
    opacity: 1;
}
.aa-consent__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.aa-consent__copy {
    flex: 1;
    min-width: 240px;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(245, 245, 247, 0.85);
    letter-spacing: -0.01em;
}
.aa-consent__copy strong { color: var(--apple-text-light); font-weight: 600; }
.aa-consent__copy a { color: #2997ff; text-decoration: none; }
.aa-consent__copy a:hover { text-decoration: underline; }
.aa-consent__ok {
    padding: 8px 18px !important;
    font-size: 14px !important;
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .aa-consent {
        bottom: 8px;
        left: 8px;
        right: 8px;
        padding: 14px 16px;
    }
    .aa-consent__inner { flex-direction: column; align-items: stretch; }
    .aa-consent__ok { width: 100%; padding: 10px 18px !important; }
}

/* ---------- Footer ---------- */
.aa-footer {
    background: var(--apple-cream);
    padding: 40px 22px 30px;
    border-top: 1px solid var(--apple-gray-soft);
    color: var(--apple-gray-dark);
    font-size: 12px;
    line-height: 1.4;
}
.aa-footer__top {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--apple-gray-soft);
}
.aa-footer__col h4 {
    font-size: 12px;
    font-weight: 600;
    color: var(--apple-text-dark);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}
.aa-footer__col ul { list-style: none; padding: 0; margin: 0; }
.aa-footer__col li { margin-bottom: 8px; }
.aa-footer__col a {
    color: var(--apple-gray-dark);
    text-decoration: none;
    font-size: 12px;
    transition: color .2s ease;
}
.aa-footer__col a:hover { color: var(--apple-text-dark); text-decoration: underline; }
.aa-footer__bottom {
    max-width: 980px;
    margin: 24px auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--apple-gray-mid);
    font-size: 12px;
}

/* ---------- About us ---------- */
.aa-about { padding: 130px 22px; }
.aa-about .aa-display { max-width: 880px; }
.aa-about .aa-subhead { max-width: 760px; }

.aa-about__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin: 60px 0 80px;
    padding: 40px 0;
    border-top: 1px solid var(--apple-gray-soft);
    border-bottom: 1px solid var(--apple-gray-soft);
}
.aa-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.aa-stat__num {
    font-size: clamp(36px, 4.5vw, 64px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--apple-text-dark);
}
.aa-stat__lbl {
    font-size: 14px;
    font-weight: 500;
    color: var(--apple-gray-mid);
    letter-spacing: 0;
}

.aa-about__bio {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: center;
    max-width: 720px;
    padding: 32px;
    background: var(--apple-cream);
    border-radius: 22px;
}
.aa-about__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    /* "Zoom out" controls. Try these in order from least → most aggressive:
       1. object-position: shifts which slice of a covered photo shows
          (no zoom — same crop, different framing).
       2. object-fit: cover  +  bigger width/height: zooms IN at higher res.
       3. object-fit: contain: shows the WHOLE photo (true zoom out).
          Any aspect-ratio gap is filled by the parent background. */
    object-fit: contain;
    background: var(--apple-cream);
}
.aa-about__name {
    font-size: 21px;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -0.022em;
}
.aa-about__role {
    font-size: 14px;
    color: var(--apple-gray-mid);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.aa-about__quote {
    font-size: 19px;
    line-height: 1.4;
    color: var(--apple-gray-dark);
    margin: 0;
    font-style: italic;
}

/* ---------- Portfolio (tech grid) ---------- */
.aa-portfolio { padding: 130px 22px; }
.aa-portfolio__grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.aa-tech {
    background: var(--apple-cream);
    border-radius: 22px;
    padding: 48px 36px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .4s cubic-bezier(0.2, 0.8, 0.2, 1), background .3s ease, color .3s ease;
    position: relative;
    overflow: hidden;
}
.aa-tech:hover {
    transform: translateY(-4px);
    background: var(--apple-black);
    color: var(--apple-text-light);
}
.aa-tech__num {
    font-size: 14px;
    font-weight: 600;
    color: var(--apple-gray-mid);
    letter-spacing: 0.08em;
}
.aa-tech:hover .aa-tech__num { color: rgba(245,245,247,0.6); }
.aa-tech__name {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 4px 0 4px;
    line-height: 1.05;
}
.aa-tech__sub {
    font-size: 17px;
    color: var(--apple-gray-dark);
    margin: 0 0 24px;
    line-height: 1.4;
}
.aa-tech:hover .aa-tech__sub { color: rgba(245,245,247,0.78); }
.aa-tech__list {
    list-style: none;
    padding: 0;
    margin: auto 0 0;
    border-top: 1px solid var(--apple-gray-soft);
    padding-top: 18px;
}
.aa-tech:hover .aa-tech__list { border-top-color: rgba(255,255,255,0.16); }
.aa-tech__list li {
    padding: 8px 0;
    font-size: 15px;
    color: var(--apple-gray-dark);
    border-top: 1px solid rgba(0,0,0,0.04);
}
.aa-tech__list li:first-child { border-top: 0; padding-top: 0; }
.aa-tech:hover .aa-tech__list li {
    color: rgba(245,245,247,0.85);
    border-top-color: rgba(255,255,255,0.06);
}

/* ---------- Blog grid ---------- */
.aa-blog { padding: 130px 22px; }
.aa-blog__grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 14px;
}
.aa-post-card {
    background: var(--apple-cream);
    border-radius: 22px;
    padding: 56px 48px;
    text-decoration: none;
    color: var(--apple-text-dark);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform .4s cubic-bezier(0.2, 0.8, 0.2, 1), background .3s ease;
    min-height: 360px;
}
.aa-post-card:hover {
    transform: translateY(-4px);
    background: var(--apple-black);
    color: var(--apple-text-light);
}
.aa-post-card--feature {
    background: linear-gradient(180deg, #1d1d1f 0%, #2c2c2e 100%);
    color: var(--apple-text-light);
}
.aa-post-card--feature:hover {
    background: linear-gradient(180deg, #1d1d1f 0%, #38383a 100%);
}
.aa-post-card__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--apple-gray-mid);
}
.aa-post-card--feature .aa-post-card__meta { color: rgba(245,245,247,0.65); }
.aa-post-card:hover .aa-post-card__meta { color: rgba(245,245,247,0.65); }
.aa-post-card h3 {
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
}
.aa-post-card p {
    font-size: 17px;
    color: var(--apple-gray-dark);
    line-height: 1.45;
    margin: 0;
    flex: 1;
}
.aa-post-card--feature p { color: rgba(245,245,247,0.78); }
.aa-post-card:hover p { color: rgba(245,245,247,0.78); }
.aa-post-card .aa-link {
    color: var(--apple-blue);
    margin-top: auto;
}
.aa-post-card--feature .aa-link,
.aa-post-card:hover .aa-link {
    color: #2997ff;
}
.aa-post-card--soon { opacity: 0.95; }
.aa-post-card--soon h3 { color: var(--apple-gray-dark); }
.aa-post-card--soon:hover h3 { color: var(--apple-text-light); }

/* ---------- Sandbox subpage hero (small hero, not full marketing) ---------- */
.aa-page-hero {
    padding: 130px 22px 80px;
    text-align: center;
}
.aa-page-hero h1 { margin: 16px 0 18px; }
.aa-page-hero .aa-subhead { margin-left: auto; margin-right: auto; }

/* ---------- Antennascope-specific bits ---------- */
.aa-product-icon {
    width: 200px;
    height: 200px;
    border-radius: 38px;
    box-shadow: 0 30px 80px rgba(41, 151, 255, 0.25);
}
.aa-feature-icon {
    font-size: 120px;
    line-height: 1;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.15));
}
.aa-tile--dark .aa-feature-icon,
.aa-tile--gradient .aa-feature-icon {
    filter: drop-shadow(0 30px 50px rgba(255,255,255,0.05));
}

/* Featured Work card — quality demo for one project */
.aa-featured { padding: 100px 22px; }
.aa-featured__card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1120px;
    margin: 0 auto;
    background: linear-gradient(135deg, #0a2540 0%, #0d3a5c 50%, #134e7a 100%);
    color: var(--apple-text-light);
    border-radius: 28px;
    padding: 60px;
    text-decoration: none;
    transition: transform .4s cubic-bezier(0.2, 0.8, 0.2, 1);
    align-items: center;
    overflow: hidden;
    position: relative;
}
.aa-featured__card:hover { transform: translateY(-4px); }
.aa-featured__card::before {
    content: "";
    position: absolute;
    top: -120px; right: -120px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(41, 151, 255, 0.4) 0%, transparent 70%);
    pointer-events: none;
}
.aa-featured__brand {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2997ff;
    margin: 0 0 14px;
}
.aa-featured__title {
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--apple-text-light);
    margin: 0 0 18px;
}
.aa-featured__desc {
    font-size: 18px;
    line-height: 1.5;
    color: rgba(245, 245, 247, 0.78);
    margin: 0 0 24px;
    max-width: 480px;
}
.aa-featured__meta {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.aa-featured__meta li {
    padding: 12px 0;
    font-size: 14px;
    color: rgba(245, 245, 247, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    letter-spacing: -0.01em;
}
.aa-featured__meta li strong { color: var(--apple-text-light); font-weight: 600; margin-right: 8px; }
.aa-featured__cta { color: #2997ff !important; font-size: 17px; }

/* Mock UI inside the featured card */
.aa-featured__visual { position: relative; z-index: 1; }
.aa-mock {
    background: #1a1d29;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    font-size: 13px;
}
.aa-mock__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.aa-mock__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}
.aa-mock__dot:nth-child(1) { background: #ff5f57; }
.aa-mock__dot:nth-child(2) { background: #febc2e; }
.aa-mock__dot:nth-child(3) { background: #28c840; }
.aa-mock__url {
    margin-left: auto;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.aa-mock__body { padding: 18px 18px 16px; }
.aa-mock__title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 14px;
    font-weight: 600;
}
.aa-mock__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
}
.aa-mock__label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}
.aa-mock__row--alert {
    background: rgba(255, 95, 87, 0.12);
    color: #ff8a83;
}
.aa-mock__row--alert .aa-mock__label { background: #ff5f57; color: #fff; }
.aa-mock__row--warn {
    background: rgba(254, 188, 46, 0.12);
    color: #ffd166;
}
.aa-mock__row--warn .aa-mock__label { background: #febc2e; color: #1a1d29; }
.aa-mock__row--ok {
    background: rgba(40, 200, 64, 0.12);
    color: #6ee685;
}
.aa-mock__row--ok .aa-mock__label { background: #28c840; color: #1a1d29; }
.aa-mock__footer {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.aa-mock__pill {
    font-size: 11px;
    padding: 5px 11px;
    border-radius: 980px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}
.aa-mock__pill--alert { background: rgba(255, 95, 87, 0.18); color: #ff8a83; }

/* App screenshots in clean iPhone-style frames */
.aa-screens__row {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(20px, 4vw, 60px);
    flex-wrap: wrap;
}
.aa-screen {
    margin: 0;
    text-align: center;
    transition: transform .4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.aa-screen:hover { transform: translateY(-6px); }
.aa-screen--lift {
    transform: translateY(-32px);
}
.aa-screen--lift:hover { transform: translateY(-40px); }

.aa-screen__phone {
    width: 220px;
    background: #1d1d1f;
    border-radius: 36px;
    padding: 8px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.18),
                0 0 0 1px rgba(0,0,0,0.06);
    margin: 0 auto 18px;
    overflow: hidden;
}
.aa-screen__phone img {
    width: 100%;
    height: auto;
    border-radius: 28px;
    display: block;
    background: #fff;
}
.aa-screen__phone--tablet {
    width: 280px;
    border-radius: 28px;
    padding: 6px;
}
.aa-screen__phone--tablet img { border-radius: 22px; }

.aa-screen figcaption {
    font-size: 14px;
    font-weight: 500;
    color: var(--apple-gray-dark);
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.aa-screen__num {
    display: inline-flex;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--apple-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
}

@media (max-width: 700px) {
    .aa-screen__phone { width: 180px; }
    .aa-screen__phone--tablet { width: 220px; }
    .aa-screen--lift { transform: translateY(0); }
    .aa-screen--lift:hover { transform: translateY(-6px); }
}

/* Countries */
.aa-countries {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.aa-country {
    background: var(--apple-cream);
    border-radius: 22px;
    padding: 48px 32px;
    text-align: center;
    transition: transform .4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.aa-country:hover { transform: translateY(-4px); }
.aa-country__flag {
    width: 80px; height: 80px;
    border-radius: 50%;
    margin: 0 auto 18px;
    border: 1px solid var(--apple-gray-soft);
    background: #fff;
    overflow: hidden;
    position: relative;
}
.aa-country__flag[data-flag="uk"] {
    background:
        linear-gradient(45deg, transparent 45%, #fff 45% 55%, transparent 55%),
        linear-gradient(135deg, transparent 45%, #fff 45% 55%, transparent 55%),
        linear-gradient(0deg, transparent 42%, #C8102E 42% 58%, transparent 58%),
        linear-gradient(90deg, transparent 42%, #C8102E 42% 58%, transparent 58%),
        #012169;
}
.aa-country__flag[data-flag="ie"] { background: linear-gradient(90deg, #169B62 33.33%, #fff 33.33% 66.66%, #FF883E 66.66%); }
.aa-country__flag[data-flag="fr"] { background: linear-gradient(90deg, #002654 33.33%, #fff 33.33% 66.66%, #ED2939 66.66%); }
.aa-country__flag[data-flag="us"] {
    background: repeating-linear-gradient(180deg, #B22234 0 12.5%, #fff 12.5% 25%);
}
.aa-country__flag[data-flag="us"]::before {
    content: ""; position: absolute;
    top: 0; left: 0;
    width: 50%; height: 50%;
    background: #3C3B6E;
}
.aa-country h3 {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 4px;
    letter-spacing: -0.022em;
}
.aa-country p {
    font-size: 14px;
    margin: 0;
    color: var(--apple-gray-mid);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

/* FAQ */
.aa-faq {
    max-width: 760px;
    margin: 0 auto;
}
.aa-faq__item {
    background: var(--apple-white);
    border-radius: 18px;
    margin-bottom: 12px;
    border: 1px solid var(--apple-gray-soft);
    overflow: hidden;
    transition: background .2s ease;
}
.aa-faq__item[open] { background: var(--apple-white); border-color: rgba(0,102,204,0.25); }
.aa-faq__item summary {
    cursor: pointer;
    list-style: none;
    padding: 22px 56px 22px 26px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.022em;
    color: var(--apple-text-dark);
    position: relative;
}
.aa-faq__item summary::-webkit-details-marker,
.aa-faq__item summary::marker { display: none; content: ""; }
.aa-faq__item summary::after {
    content: "+";
    position: absolute;
    right: 24px; top: 50%;
    transform: translateY(-50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--apple-cream);
    color: var(--apple-text-dark);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, background .25s ease;
}
.aa-faq__item[open] summary::after {
    content: "−";
    background: var(--apple-blue);
    color: var(--apple-white);
}
.aa-faq__item p {
    margin: 0;
    padding: 0 26px 22px;
    color: var(--apple-gray-dark);
    font-size: 17px;
    line-height: 1.5;
    border-top: 1px solid var(--apple-gray-soft);
    padding-top: 18px;
}

/* ---------- Apple-style article (long-form blog post) ---------- */
.page-article { background: var(--apple-white); color: var(--apple-text-dark); }
.aa-article__hero {
    padding: 100px 22px 60px;
    border-bottom: 1px solid var(--apple-gray-soft);
}
.aa-article__head {
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
}
.aa-article__crumbs {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--apple-gray-mid);
    margin-bottom: 18px;
}
.aa-article__crumbs a {
    color: var(--apple-blue);
    text-decoration: none;
}
.aa-article__crumbs a:hover { text-decoration: underline; }
.aa-article__crumbs span[aria-hidden] { margin: 0 8px; }
.aa-article__title {
    font-size: clamp(40px, 6vw, 80px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.035em;
    margin: 12px 0 24px;
    color: var(--apple-text-dark);
}
.aa-article__title em {
    font-style: italic;
    background: linear-gradient(135deg, #0066cc 0%, #af52de 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}
.aa-article__lede {
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.4;
    color: var(--apple-gray-dark);
    font-weight: 400;
    margin: 0 0 28px;
    max-width: 760px;
}
.aa-article__lede strong { color: var(--apple-text-dark); font-weight: 600; }
.aa-article__byline {
    font-size: 14px;
    color: var(--apple-gray-mid);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.aa-article__byline strong { color: var(--apple-text-dark); font-weight: 600; }

.aa-article__body {
    max-width: 720px;
    margin: 0 auto;
    padding: 60px 22px 80px;
    font-size: 19px;
    line-height: 1.6;
    color: var(--apple-gray-dark);
    letter-spacing: -0.01em;
}
.aa-article__intro {
    font-size: 21px;
    color: var(--apple-text-dark);
    line-height: 1.5;
    margin-bottom: 1.4em;
    font-weight: 400;
}
.aa-article__body h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: var(--apple-text-dark);
    margin: 64px 0 18px;
    scroll-margin-top: 60px;
}
.aa-article__body h2:first-of-type { margin-top: 0; }
.aa-article__body p { margin: 0 0 1.2em; }
.aa-article__body p strong,
.aa-article__body li strong { color: var(--apple-text-dark); font-weight: 600; }
.aa-article__body em { font-style: italic; }
.aa-article__body a {
    color: var(--apple-blue);
    text-decoration: none;
    border-bottom: 1px solid rgba(0,102,204,0.3);
    transition: border-color .2s ease, color .2s ease;
}
.aa-article__body a:hover {
    color: var(--apple-blue-hover);
    border-bottom-color: var(--apple-blue-hover);
}
.aa-article__body ul,
.aa-article__body ol {
    margin: 0 0 1.4em 1.4em;
    padding: 0;
}
.aa-article__body li {
    margin-bottom: 12px;
    line-height: 1.55;
}
.aa-article__body code {
    background: var(--apple-cream);
    border-radius: 6px;
    padding: 2px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.92em;
    color: var(--apple-text-dark);
}
.aa-article__body hr {
    border: 0;
    border-top: 1px solid var(--apple-gray-soft);
    margin: 48px 0;
}
.aa-article__checklist li {
    list-style: none;
    padding-left: 32px;
    position: relative;
}
.aa-article__checklist li::before {
    content: "✓";
    position: absolute;
    left: 0; top: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--apple-blue);
    color: #fff;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
    font-weight: 600;
}
.aa-article__checklist {
    margin-left: 0 !important;
}

/* In-article demo block (e.g. embedded mock UI in the Railo case study) */
.aa-article__demo {
    margin: 36px -22px 36px;
    background: linear-gradient(135deg, #0a2540 0%, #134e7a 100%);
    border-radius: 18px;
    padding: 28px;
}
@media (min-width: 720px) {
    .aa-article__demo { margin: 40px 0 40px; padding: 36px; }
}

.aa-article__cta {
    background: var(--apple-cream);
    padding: 80px 22px;
    text-align: center;
}
.aa-article__cta h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0 0 12px;
    color: var(--apple-text-dark);
}
.aa-article__cta p {
    font-size: 19px;
    color: var(--apple-gray-dark);
    margin: 0 0 28px;
}

@media (max-width: 700px) {
    .aa-article__hero { padding: 80px 22px 40px; }
    .aa-article__body { padding: 40px 22px 60px; }
    .aa-article__body h2 { margin-top: 48px; }
    .aa-article__cta { padding: 60px 22px; }
}

/* ---------- Reveal-on-scroll ---------- */
.aa-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .9s cubic-bezier(0.2, 0.8, 0.2, 1), transform .9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.aa-reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .aa-reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .aa-highlights__grid { grid-template-columns: 1fr; }
    .aa-tile--span2 { grid-column: span 1; flex-direction: column; padding: 48px 32px; gap: 24px; }
    .aa-tile--span2 .aa-tile__visual { max-width: 280px; }
    .aa-pricing__grid { grid-template-columns: 1fr; max-width: 480px; }
    .aa-contact__grid { grid-template-columns: 1fr; gap: 50px; }
    .aa-footer__top { grid-template-columns: repeat(2, 1fr); }
    .aa-nav__links { gap: 14px; }
    .aa-nav__links a { font-size: 11px; }

    .aa-portfolio__grid { grid-template-columns: repeat(2, 1fr); }
    .aa-blog__grid { grid-template-columns: 1fr; }
    .aa-countries { grid-template-columns: repeat(2, 1fr); }
    .aa-featured__card { grid-template-columns: 1fr; gap: 40px; padding: 48px 36px; }
    .aa-about__stats { grid-template-columns: 1fr; gap: 24px; }
    .aa-about__bio { grid-template-columns: 1fr; gap: 20px; text-align: center; padding: 28px; }
    .aa-about__avatar { margin: 0 auto; }
}
@media (max-width: 600px) {
    .aa-section { padding: 70px 22px; }
    .aa-hero { padding: 60px 22px 80px; }
    .aa-tile { padding: 40px 28px 36px; min-height: 380px; }
    .aa-work { grid-template-columns: 48px 1fr; gap: 16px; }
    .aa-work__logo { width: 44px; height: 44px; border-radius: 11px; }
    .aa-work__cat { display: none; }
    .aa-footer__top { grid-template-columns: 1fr 1fr; }
    .aa-nav__links { display: none; }

    .aa-portfolio__grid { grid-template-columns: 1fr; }
    .aa-tech { padding: 36px 28px; min-height: auto; }
    .aa-post-card { padding: 40px 28px; min-height: auto; }
    .aa-about, .aa-portfolio, .aa-blog, .aa-process, .aa-featured { padding: 70px 22px; }
    .aa-featured__card { padding: 36px 26px; gap: 32px; }
    .aa-need { gap: 6px; }
    .aa-need__chip { font-size: 13px; padding: 7px 14px; }
    .aa-hero__metrics { font-size: 13px; gap: 0 8px; }
    .aa-countries { grid-template-columns: 1fr 1fr; }
    .aa-process__step { grid-template-columns: 1fr; gap: 8px; }
    .aa-product-icon { width: 140px; height: 140px; }
    .aa-feature-icon { font-size: 80px; }
}

/* Honeypot — visually hidden but present in the DOM. */
.aa-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }