/* =============================================================
   api-integraties.css
   Paginaspecifieke stijlen voor de API-integraties pagina.
   Gebaseerd op code.html (Tailwind → plain CSS).
   Vereist: app.css voor gedeelde nav, footer, reset en fonts.
   ============================================================= */

/* =====================
   KLEURENPALET
   ===================== */
:root {
    /* Primary teal */
    --ai-primary:              #006574;
    --ai-primary-fixed:        #00e0ff;
    --ai-primary-fixed-dim:    #00d1ee;
    --ai-primary-container:    #00e0ff;
    --ai-on-primary:           #dbf8ff;
    --ai-on-primary-fixed:     #00363f;
    --ai-on-primary-container: #004b57;

    /* Secondary green */
    --ai-secondary:            #256900;
    --ai-secondary-fixed:      #9bfa6e;
    --ai-secondary-container:  #9bfa6e;
    --ai-on-secondary-container: #205e00;

    /* Tertiary mint */
    --ai-tertiary-container:   #6bfcb5;
    --ai-on-tertiary-container:#005e3b;

    /* Lime accent (check section) */
    --ai-lime:                 #a0ff73;
    --ai-lime-dim:             #8eeb62;

    /* Surface */
    --ai-surface:              #f9f6f5;
    --ai-surface-bright:       #f9f6f5;
    --ai-surface-container-lowest: #ffffff;
    --ai-surface-container-low:    #f3f0ef;
    --ai-surface-container:        #ebe7e7;
    --ai-surface-container-high:   #e5e2e1;
    --ai-surface-container-highest:#dfdcdc;

    /* On-surface */
    --ai-on-surface:           #2f2e2e;
    --ai-on-surface-variant:   #5c5b5b;

    /* Outline */
    --ai-outline:              #787676;
    --ai-outline-variant:      #afacac;

    /* Dark panel */
    --ai-dark:                 #2f2e2e;
    --ai-dark-text:            #f9f6f5;

    /* Fonts */
    --ai-font-headline: 'Manrope', sans-serif;
    --ai-font-body:     'Inter', sans-serif;
    --ai-font-label:    'Inter', sans-serif;

    /* Radius */
    --ai-radius:    0.125rem;
    --ai-radius-lg: 0.25rem;
    --ai-radius-xl: 0.5rem;
    --ai-radius-2xl: 1rem;
}

/* =====================
   BODY OVERRIDE
   ===================== */
.ai-body {
    background-color: var(--ai-surface);
    color: var(--ai-on-surface);
    font-family: var(--ai-font-body);
    -webkit-font-smoothing: antialiased;
}

/* Nav overrides */
.ai-body .nav-link:hover    { color: var(--ai-primary-fixed); }
.ai-body .nav-link--active  { color: var(--ai-primary-fixed); border-bottom-color: var(--ai-primary-fixed); }
    
/* =====================
   LAYOUT
   ===================== */
.ai-main { padding-top: 5rem; }

.ai-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 2rem;
}

.ai-section-white  { background-color: var(--ai-surface-bright); padding: 5rem 0; }
.ai-section-tinted { background-color: var(--ai-surface-container-low); padding: 5rem 0; }

/* =====================
   SHARED TYPOGRAPHY
   ===================== */
.ai-section-title {
    font-family: var(--ai-font-headline);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--ai-on-surface);
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}
.ai-section-title--center { text-align: center; margin-bottom: 4rem; }

.ai-body-text {
    font-size: 1.25rem;
    color: var(--ai-on-surface-variant);
    line-height: 1.75;
}
.ai-body-text--dim { opacity: 0.8; }

.ai-badge {
    display: inline-block;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    font-family: var(--ai-font-label);
    background-color: var(--ai-tertiary-container);
    color: var(--ai-on-tertiary-container);
}

.ai-badge--lime {
    background-color: rgba(160, 255, 115, 0.2);
    color: var(--ai-lime);
    border: 1px solid rgba(160, 255, 115, 0.3);
    border-radius: var(--ai-radius);
}

/* =====================
   HERO
   ===================== */
.ai-hero {
    padding: 5rem 0 5rem;
    overflow: hidden;
}

.ai-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 768px) {
    .ai-hero-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.ai-hero-text { position: relative; z-index: 1; }

.ai-hero-title {
    font-family: var(--ai-font-headline);
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 800;
    color: var(--ai-on-surface);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 2rem;
}

.ai-hero-accent { color: var(--ai-primary-fixed); }

.ai-hero-subtitle {
    font-size: 1.25rem;
    color: var(--ai-on-surface-variant);
    max-width: 34rem;
    line-height: 1.75;
    margin-bottom: 2.5rem;
}

.ai-hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; }

.ai-btn-primary {
    display: inline-block;
    background-color: var(--ai-primary-fixed);
    color: var(--ai-on-primary-fixed);
    padding: 1rem 2rem;
    border-radius: 0.375rem;
    font-family: var(--ai-font-headline);
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: background-color 0.2s, box-shadow 0.2s;
}
.ai-btn-primary:hover {
    background-color: var(--ai-primary);
    box-shadow: 0 0 20px rgba(0, 224, 255, 0.4);
}

.ai-hero-image-col {
    position: relative;
    height: 25rem;
    border-radius: var(--ai-radius-xl);
    overflow: hidden;
    background-color: var(--ai-surface-container-low);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2);
}

@media (min-width: 768px) {
    .ai-hero-image-col { height: 37.5rem; }
}

.ai-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
    opacity: 0.8;
    display: block;
}

.ai-hero-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(0, 224, 255, 0.2), transparent);
}

/* =====================
   WAT ZIJN API-INTEGRATIES
   ===================== */
.ai-wat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 768px) {
    .ai-wat-grid { grid-template-columns: 5fr 7fr; gap: 3rem; }
}

.ai-title-bar {
    width: 5rem;
    height: 0.5rem;
    background-color: var(--ai-secondary-fixed);
    margin-top: 2rem;
    border-radius: 9999px;
}

.ai-wat-text-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* =====================
   WAAROM INTEGREREN — BENTO
   ===================== */
.ai-bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .ai-bento-grid { grid-template-columns: repeat(3, 1fr); }
}

.ai-bento-card {
    background-color: var(--ai-surface-container-lowest);
    padding: 2.5rem;
    border-radius: var(--ai-radius-xl);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid rgba(175,172,172,0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: box-shadow 0.2s;
}
.ai-bento-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

.ai-bento-icon-wrap {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    flex-shrink: 0;
}
.ai-bento-icon-wrap--primary   { background-color: var(--ai-primary-container); }
.ai-bento-icon-wrap--secondary { background-color: var(--ai-secondary-container); }
.ai-bento-icon-wrap--tertiary  { background-color: var(--ai-tertiary-container); }

.ai-bento-icon {
    font-size: 1.875rem;
    color: var(--ai-on-primary-container);
}
.ai-bento-icon-wrap--secondary .ai-bento-icon { color: var(--ai-on-secondary-container); }
.ai-bento-icon-wrap--tertiary  .ai-bento-icon { color: var(--ai-on-tertiary-container); }

.ai-bento-title {
    font-family: var(--ai-font-headline);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ai-on-surface);
    margin-bottom: 1rem;
}

.ai-bento-text {
    color: var(--ai-on-surface-variant);
    line-height: 1.65;
    font-size: 0.9375rem;
}

/* =====================
   ONZE AANPAK — PROCESS
   ===================== */
.ai-aanpak-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .ai-aanpak-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.ai-aanpak-title {
    font-family: var(--ai-font-headline);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--ai-on-surface);
    letter-spacing: -0.03em;
}

.ai-aanpak-sub {
    color: var(--ai-primary);
    font-family: var(--ai-font-headline);
    font-weight: 700;
    font-size: 1.125rem;
}

.ai-process-grid {
    display: grid;
    grid-template-columns: 1fr;
    background-color: var(--ai-surface-container-lowest);
    border-radius: var(--ai-radius-xl);
    overflow: hidden;
}

@media (min-width: 768px) {
    .ai-process-grid { grid-template-columns: repeat(3, 1fr); }
}

.ai-process-step {
    padding: 3rem;
}

.ai-process-step--border {
    border-bottom: 1px solid rgba(175,172,172,0.1);
}

@media (min-width: 768px) {
    .ai-process-step--border {
        border-bottom: none;
        border-right: 1px solid rgba(175,172,172,0.1);
    }
}

.ai-process-num {
    display: block;
    font-family: var(--ai-font-headline);
    font-size: 3.75rem;
    font-weight: 900;
    color: rgba(175, 172, 172, 0.2);
    margin-bottom: 1.5rem;
    line-height: 1;
    transition: color 0.2s;
}

.ai-process-step:hover .ai-process-num--hover-primary   { color: var(--ai-primary-container); }
.ai-process-step:hover .ai-process-num--hover-secondary { color: var(--ai-secondary-container); }
.ai-process-step:hover .ai-process-num--hover-tertiary  { color: var(--ai-tertiary-container); }

.ai-process-step-title {
    font-family: var(--ai-font-headline);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ai-on-surface);
    margin-bottom: 1rem;
}

.ai-process-step-text {
    color: var(--ai-on-surface-variant);
    line-height: 1.65;
    font-size: 0.9375rem;
}

/* =====================
   TOOLS / SYSTEM LOGOS
   ===================== */
.ai-tools-header {
    text-align: center;
    margin-bottom: 3rem;
}

.ai-tools-sub {
    color: var(--ai-on-surface-variant);
    font-size: 1rem;
    margin-top: -3rem;
    margin-bottom: 3rem;
    display: block;
}

.ai-tools-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
    opacity: 0.6;
    filter: grayscale(100%);
    transition: opacity 0.5s, filter 0.5s;
}
.ai-tools-grid:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.ai-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.ai-tool-icon {
    font-size: 2.5rem;
    display: block;
}

.ai-tool-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--ai-font-label);
}

/* =====================
   GRATIS KOPPELING CHECK
   ===================== */
.ai-check-wrap { padding-bottom: 6rem; }

.ai-check-shell {
    background-color: var(--ai-surface-container-lowest);
    border-radius: 1rem;
    padding: 0.25rem;
    box-shadow: 0 35px 60px -15px rgba(0,0,0,0.3);
    overflow: hidden;
}

.ai-check-inner {
    background-color: var(--ai-dark);
    border-radius: var(--ai-radius-xl);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .ai-check-inner { padding: 5rem; }
}

/* Gradient overlay on the right */
.ai-check-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 224, 255, 0.1), transparent);
    pointer-events: none;
}

/* Corner accent lines (top-left) */
.ai-corner-h {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
    width: 5rem;
    height: 0.5rem;
    background-color: var(--ai-lime);
    opacity: 0.5;
}

.ai-corner-v {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
    width: 0.5rem;
    height: 5rem;
    background-color: var(--ai-lime);
    opacity: 0.5;
}

.ai-check-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

/* Prevent a wide child (e.g. the reCAPTCHA widget) from forcing
   this grid track wider than the viewport on mobile. */
.ai-check-grid > * {
    min-width: 0;
}

@media (min-width: 768px) {
    .ai-check-grid { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
}

/* Pitch (left) */
.ai-check-pitch { display: flex; flex-direction: column; }

.ai-check-title {
    font-family: var(--ai-font-headline);
    font-size: clamp(1.75rem, 4vw, 3.5rem);
    font-weight: 800;
    color: var(--ai-dark-text);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 2rem;
}

.ai-check-accent { color: var(--ai-lime); }

.ai-check-text {
    font-size: 1.25rem;
    color: rgba(249, 246, 245, 0.8);
    font-family: var(--ai-font-body);
    line-height: 1.75;
    margin-bottom: 2.5rem;
}

.ai-check-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-check-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--ai-dark-text);
    font-size: 0.9375rem;
}

.ai-check-icon {
    color: var(--ai-lime);
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Right column */
.ai-check-right {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* ── Spinning rings visual ── */
.ai-rings-visual {
    display: none;
    position: relative;
    width: 20rem;
    height: 20rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .ai-rings-visual { display: flex; align-items: center; justify-content: center; }
}

.ai-ring {
    position: absolute;
    border-radius: 9999px;
    border-style: solid;
}

.ai-ring--outer {
    inset: 0;
    border-width: 2px;
    border-color: rgba(0, 224, 255, 0.3);
    animation: ai-spin-cw 10s linear infinite;
}

.ai-ring--inner {
    inset: 1.5rem;
    border-width: 2px;
    border-color: rgba(160, 255, 115, 0.2);
    animation: ai-spin-ccw 15s linear infinite;
}

@keyframes ai-spin-cw  { to { transform: rotate(360deg);  } }
@keyframes ai-spin-ccw { to { transform: rotate(-360deg); } }

.ai-ring-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: ai-float 3s ease-in-out infinite;
}

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

.ai-ring-icon {
    font-size: 6rem;
    color: var(--ai-primary-fixed);
}

.ai-ring-label {
    color: var(--ai-primary-fixed);
    font-family: var(--ai-font-headline);
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: -0.04em;
    margin-top: 1rem;
}

/* ── Koppeling Check form ── */
.ai-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background-color: #ffffff;
    padding: 1.25rem;
    border-radius: var(--ai-radius-xl);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
    .ai-form { padding: 2rem; }
}

.ai-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ai-form-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #334155;
    font-family: var(--ai-font-label);
}

.ai-form-input,
.ai-form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ai-outline-variant);
    border-radius: var(--ai-radius-lg);
    font-family: var(--ai-font-body);
    font-size: 0.9375rem;
    color: var(--ai-on-surface);
    background-color: #ffffff;
    outline: none;
    transition: box-shadow 0.2s, border-color 0.2s;
    -webkit-appearance: none;
}

.ai-form-input:focus,
.ai-form-textarea:focus {
    border-color: var(--ai-primary-fixed);
    box-shadow: 0 0 0 2px rgba(0, 224, 255, 0.25);
}

.ai-form-textarea {
    height: 6rem;
    resize: vertical;
}

.ai-form-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    background-color: var(--ai-primary-fixed);
    color: var(--ai-on-primary-fixed);
    padding: 1.25rem 2rem;
    border-radius: 0.375rem;
    font-family: var(--ai-font-headline);
    font-weight: 700;
    font-size: 1.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
    margin-top: 0.5rem;
}

.ai-form-submit:hover {
    background-color: var(--ai-primary-fixed-dim);
    box-shadow: 0 0 30px rgba(0, 224, 255, 0.6);
}

.ai-form-submit:active { transform: scale(0.95); }

.ai-submit-icon {
    font-size: 1.5rem;
    transition: transform 0.2s;
}
.ai-form-submit:hover .ai-submit-icon { transform: translateX(4px); }

.ai-form-submit:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.ai-form-submit:disabled:hover {
    box-shadow: none;
}

.ai-submit-spinner {
    display: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--ai-on-primary-fixed);
    border-radius: 50%;
    animation: ai-spin 0.7s linear infinite;
}

.ai-form-submit--loading .ai-submit-spinner {
    display: inline-block;
}

.ai-form-submit--loading .ai-submit-icon {
    display: none;
}

@keyframes ai-spin {
    to {
        transform: rotate(360deg);
    }
}

.ai-form-disclaimer {
    font-size: 0.8125rem;
    color: #64748b;
    text-align: center;
    font-style: italic;
    font-family: var(--ai-font-label);
}