@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

@layer base {
    html { scroll-behavior: smooth; }
}

@layer components {
    .commercial-body { @apply min-h-screen bg-[#f7f8fa] text-slate-900 antialiased; }
    .commercial-header { @apply sticky top-0 z-50 mx-auto flex max-w-[1400px] items-center justify-between border-b border-slate-200/80 bg-white/90 px-6 py-4 backdrop-blur-xl lg:px-12; }
    .commercial-brand { @apply flex items-center gap-3 text-lg font-bold tracking-tight; }
    .commercial-brand-mark { @apply grid h-10 w-10 place-items-center rounded-xl bg-[#0f60ad] text-sm font-extrabold text-white shadow-lg shadow-blue-900/20; }
    .commercial-nav { @apply flex items-center gap-5 text-sm font-semibold text-slate-600 md:gap-8; }
    .commercial-nav a { @apply transition hover:text-[#0f60ad]; }
    .commercial-login { @apply rounded-xl border border-slate-300 px-4 py-2 text-slate-900; }
    .commercial-hero { @apply relative mx-auto grid max-w-[1400px] overflow-hidden bg-[#071d33] px-6 py-20 text-white lg:grid-cols-[1.05fr_.95fr] lg:items-center lg:gap-20 lg:px-12 lg:py-28; }
    .commercial-hero::before { content:''; @apply absolute -left-24 top-10 h-72 w-72 rounded-full bg-blue-500/20 blur-3xl; }
    .hero-copy { @apply relative z-10 max-w-2xl; }
    .eyebrow { @apply mb-5 inline-flex text-xs font-bold uppercase tracking-[.2em] text-[#3fa9f5]; }
    .hero-copy h1 { @apply text-4xl font-bold leading-[1.08] tracking-[-.04em] md:text-6xl; }
    .hero-copy > p { @apply mt-6 max-w-xl text-lg leading-8 text-slate-300; }
    .hero-actions { @apply mt-9 flex flex-wrap gap-3; }
    .button { @apply inline-flex min-h-12 items-center justify-center rounded-xl px-6 py-3 text-sm font-bold transition duration-200 hover:-translate-y-0.5; }
    .button-primary { @apply bg-[#1686d9] text-white shadow-lg shadow-blue-950/20 hover:bg-[#0f75c2]; }
    .button-secondary { @apply border border-white/25 bg-white/5 text-white hover:bg-white/10; }
    .button-dark { @apply bg-slate-900 text-white hover:bg-slate-800; }
    .button-light { @apply bg-white text-[#071d33] hover:bg-blue-50; }
    .button-full { @apply w-full border-0 cursor-pointer; }
    .hero-trust { @apply mt-8 flex flex-wrap gap-x-6 gap-y-2 text-xs font-semibold text-slate-300; }
    .hero-dashboard { @apply relative z-10 mt-14 rounded-[2rem] border border-white/10 bg-white/[.07] p-5 shadow-2xl backdrop-blur lg:mt-0; }
    .dashboard-top { @apply mb-5 flex items-center justify-between text-sm font-semibold; }
    .status-dot { @apply rounded-full bg-emerald-400/15 px-3 py-1 text-xs text-emerald-300; }
    .metric-grid { @apply grid grid-cols-2 gap-3; }
    .metric-grid div { @apply rounded-2xl bg-white p-4 text-slate-900; }
    .metric-grid small { @apply block text-xs text-slate-500; }
    .metric-grid strong { @apply my-2 block text-2xl tracking-tight; }
    .metric-grid em { @apply text-[11px] not-italic text-emerald-600; }
    .chart-card { @apply mt-3 rounded-2xl bg-[#0b2945] p-5 text-sm; }
    .bars { @apply mt-5 flex h-28 items-end gap-3; }
    .bars i { @apply flex-1 rounded-t-md bg-gradient-to-t from-blue-700 to-sky-400; }
    .commercial-section { @apply mx-auto max-w-[1400px] px-6 py-20 lg:px-12 lg:py-28; }
    .section-soft { @apply bg-[#eef4f8]; }
    .section-heading { @apply mx-auto mb-12 max-w-2xl text-center; }
    .section-heading .eyebrow { @apply mb-3; }
    .section-heading h2 { @apply text-3xl font-bold tracking-[-.03em] md:text-5xl; }
    .section-heading p { @apply mt-4 leading-7 text-slate-600; }
    .module-grid { @apply grid gap-4 sm:grid-cols-2 lg:grid-cols-3; }
    .module-card { @apply rounded-2xl border border-slate-200 bg-white p-7 shadow-sm transition hover:-translate-y-1 hover:shadow-xl; }
    .module-icon { @apply mb-5 grid h-12 w-12 place-items-center rounded-xl bg-blue-50 text-xs font-extrabold text-[#0f60ad]; }
    .module-card h3 { @apply text-xl font-bold; }
    .module-card p { @apply mt-3 text-sm leading-6 text-slate-600; }
    .plan-grid { @apply grid items-stretch gap-5 lg:grid-cols-3; }
    .plan-card { @apply relative flex flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm; }
    .plan-card.featured { @apply border-[#1686d9] shadow-xl shadow-blue-900/10 lg:-translate-y-3; }
    .popular-tag { @apply absolute right-6 top-0 -translate-y-1/2 rounded-full bg-[#1686d9] px-4 py-1.5 text-xs font-bold text-white; }
    .plan-card h3 { @apply text-2xl font-bold; }
    .plan-card > p { @apply mt-3 min-h-12 text-sm leading-6 text-slate-600; }
    .price { @apply mt-7 flex items-end gap-1; }
    .price span { @apply mb-2 text-xl font-bold; }
    .price strong { @apply text-5xl tracking-[-.05em]; }
    .price small { @apply mb-2 text-slate-500; }
    .annual-price { @apply mt-2 text-xs text-slate-500; }
    .plan-card ul { @apply my-7 flex-1 space-y-3 border-t border-slate-100 pt-6 text-sm text-slate-700; }
    .plan-card li::before { content:'✓'; @apply mr-3 font-bold text-emerald-600; }
    .commercial-cta { @apply mx-auto flex max-w-[1400px] flex-col items-start justify-between gap-8 bg-[#0f60ad] px-6 py-16 text-white md:flex-row md:items-center lg:px-12; }
    .commercial-cta .eyebrow { @apply mb-2 text-blue-100; }
    .commercial-cta h2 { @apply text-3xl font-bold tracking-tight md:text-4xl; }
    .commercial-cta p { @apply mt-2 text-blue-100; }
    .commercial-footer { @apply mx-auto flex max-w-[1400px] flex-col justify-between gap-5 border-t border-slate-200 bg-white px-6 py-10 text-sm text-slate-500 md:flex-row lg:px-12; }
    .commercial-footer div { @apply flex flex-col gap-1; }
    .commercial-footer strong { @apply text-slate-900; }
    .checkout-shell { @apply mx-auto grid min-h-[calc(100vh-150px)] max-w-[1200px] gap-12 px-6 py-16 lg:grid-cols-[.8fr_1.2fr] lg:px-12 lg:py-24; }
    .checkout-copy h1 { @apply text-4xl font-bold leading-tight tracking-[-.04em]; }
    .checkout-copy > p { @apply mt-5 leading-7 text-slate-600; }
    .checkout-summary { @apply mt-9 rounded-2xl bg-[#071d33] p-7 text-white; }
    .checkout-summary > span { @apply text-xs uppercase tracking-widest text-sky-300; }
    .checkout-summary h2 { @apply mt-2 text-2xl font-bold; }
    .checkout-summary p { @apply mt-2 text-sm text-slate-300; }
    .checkout-summary strong { @apply mt-6 block text-3xl; }
    .checkout-summary small { @apply text-sm font-normal text-slate-300; }
    .checkout-form { @apply rounded-3xl border border-slate-200 bg-white p-6 shadow-xl shadow-slate-900/5 md:p-10; }
    .form-heading span { @apply text-xs font-bold uppercase tracking-widest text-[#0f60ad]; }
    .form-heading h2 { @apply mt-1 mb-7 text-2xl font-bold; }
    .checkout-form label { @apply mb-5 block text-sm font-semibold text-slate-700; }
    .checkout-form input:not([type=checkbox]), .checkout-form select { @apply mt-2 block w-full rounded-xl border border-slate-300 bg-white px-4 py-3 outline-none transition focus:border-[#1686d9] focus:ring-4 focus:ring-blue-100; }
    .form-row { @apply grid gap-0 md:grid-cols-2 md:gap-4; }
    .check-label { @apply flex items-start gap-3 font-normal! leading-5; }
    .check-label input { @apply mt-1 h-4 w-4 accent-[#1686d9]; }
    .secure-note { @apply mt-4 block text-center text-slate-500; }
    .form-errors { @apply mb-6 rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700; }
    .form-errors ul { @apply mt-2 list-disc pl-5; }
    .confirmation-shell { @apply mx-auto flex min-h-[70vh] max-w-2xl flex-col items-center justify-center px-6 py-20 text-center; }
    .confirmation-icon { @apply mb-6 grid h-20 w-20 place-items-center rounded-full bg-emerald-100 text-3xl font-bold text-emerald-700; }
    .confirmation-shell .eyebrow { @apply mb-3; }
    .confirmation-shell h1 { @apply text-4xl font-bold tracking-tight; }
    .confirmation-shell > p { @apply mt-5 leading-7 text-slate-600; }
    .confirmation-code { @apply my-8 flex w-full flex-col rounded-2xl border border-slate-200 bg-white p-6; }
    .confirmation-code span, .confirmation-code small { @apply text-sm text-slate-500; }
    .confirmation-code strong { @apply my-2 text-2xl; }
    .empty-state { @apply col-span-full rounded-2xl bg-white p-8 text-center text-slate-500; }
}