/**
 * Acois — Front-end Stylesheet
 * ──────────────────────────────────────────────────────────────
 * Custom CSS for the Acois marketing / landing page.
 * Tailwind CDN (via tailwind.config) handles utility classes;
 * this file owns every custom component, animation, and helper.
 *
 * Table of Contents:
 *   01. Base & Typography
 *   02. Gradient Text Helpers
 *   03. Backgrounds
 *   04. Layout  — Bento Grid
 *   05. Component — Bento Cards & Variants
 *   06. Component — Buttons
 *   07. Component — Navigation (glassmorphism)
 *   08. Component — Section Label
 *   09. Component — Pills & Platform Badges
 *   10. Component — Feature Check List
 *   11. Component — Accent List
 *   12. Component — Report Cards
 *   13. Component — Pricing Cards
 *   14. Component — Scroll-to-Top Button
 *   15. Animations & Entrance Effects
 *   16. Dashboard Mockup Utilities
 *   17. AI Section — Decorative Background Orbs
 *   18. Icon Size Utilities
 *   19. Form Styles
 *   20. Contact Section Text
 * ──────────────────────────────────────────────────────────────
 */


/* ══════════════════════════════════════════════════════════════
   01. Base & Typography
   Sets global font, box model, line-height, and heading scale.
══════════════════════════════════════════════════════════════ */

*    { font-family: 'Poppins', sans-serif; box-sizing: border-box; }
html { font-size: 17px; }
body { line-height: 1.7; }

/* Fluid section heading sizes — clamp scales between breakpoints */
.sh1 { font-size: clamp(2.4rem, 5vw, 3.6rem);   font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.sh2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); font-weight: 800; line-height: 1.20; letter-spacing: -0.01em; }
.sh3 { font-size: 1.4rem; font-weight: 700; line-height: 1.3; }

/* Body copy size helpers */
.body-lg { font-size: 1.1rem;  line-height: 1.75; color: #64748B; }
.body-md { font-size: 0.95rem; line-height: 1.70; color: #64748B; }


/* ══════════════════════════════════════════════════════════════
   02. Gradient Text Helpers
   Clip a linear-gradient to text for coloured headings.
══════════════════════════════════════════════════════════════ */

/* Full tri-colour brand gradient */
.grad {
    background: linear-gradient(135deg, #4669FA, #6366F1 55%, #FA916B);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Blue-only gradient */
.grad-blue {
    background: linear-gradient(135deg, #4669FA, #6366F1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Coral-orange gradient */
.grad-coral {
    background: linear-gradient(135deg, #FA916B, #F97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ══════════════════════════════════════════════════════════════
   03. Backgrounds
   Decorative radial-gradient tints used for page sections.
══════════════════════════════════════════════════════════════ */

/* Hero and alternating section background tint */
.hero-bg {
    background:
        radial-gradient(ellipse 90% 60% at 50%  -5%, rgba(70,105,250,.13) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 88%  65%, rgba(250,145,107,.07) 0%, transparent 55%),
        #F8FAFF;
}


/* ══════════════════════════════════════════════════════════════
   04. Layout — Bento Grid (12-column)
   Responsive bento-box grid used throughout feature sections.
══════════════════════════════════════════════════════════════ */

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(140px, auto);
    gap: 28px;
}

/* Span two row-tracks inside a .bento-grid */
.row-span-2 { grid-row: span 2; }


/* ══════════════════════════════════════════════════════════════
   05. Component — Bento Cards & Variants
   Base card + colour-theme modifiers applied to .bento children.
══════════════════════════════════════════════════════════════ */

.bento {
    background: #fff;
    border-radius: 28px;
    border: 1px solid #E8EEFF;
    padding: 40px;
    transition: box-shadow .25s ease, border-color .25s ease;
}
.bento:hover {
    box-shadow: 0 20px 56px -12px rgba(70,105,250,.16);
    border-color: #C8D8FF;
}

/* Wider padding variant — contact form card needs extra breathing room */
.bento-lg { padding: 48px; }

/* Primary blue gradient card */
.b-primary { background: linear-gradient(135deg, #4669FA, #6366F1); border: none; }

/* Dark navy card */
.b-dark    { background: #0D1C2E; border: none; }

/* Coral gradient card */
.b-coral   { background: linear-gradient(135deg, #FA916B, #F97316); border: none; }

/* Light surface gradient card */
.b-subtle  { background: linear-gradient(135deg, #F0F4FF, #F8FAFF); }


/* ══════════════════════════════════════════════════════════════
   06. Component — Buttons
   Primary gradient button, outlined button, and lift hover card.
══════════════════════════════════════════════════════════════ */

/* Primary: glowing gradient CTA button */
.btn-glow {
    background: linear-gradient(135deg, #4669FA, #6366F1);
    box-shadow: 0 8px 24px rgba(70,105,250,.35);
    transition: box-shadow .3s, transform .2s;
    color: #fff;
}
.btn-glow:hover {
    box-shadow: 0 12px 32px rgba(70,105,250,.52);
    transform: translateY(-1px);
}

/* Secondary: outlined ghost button */
.btn-outline {
    border: 2px solid #4669FA;
    color: #4669FA;
    transition: background .2s, color .2s;
}
.btn-outline:hover {
    background: #4669FA;
    color: #fff;
}

/* Float-up hover — pricing cards */
.lift { transition: transform .3s ease, box-shadow .3s ease; }
.lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -10px rgba(70,105,250,.2);
}

/* Drop shadow for the hero dashboard mockup */
.float-s {
    box-shadow:
        0 32px 72px -16px rgba(70,105,250,.22),
        0  8px 20px  -4px rgba(0,0,0,.07);
}


/* ══════════════════════════════════════════════════════════════
   07. Component — Navigation (glassmorphism)
   Sticky top nav bar with frosted-glass background effect.
══════════════════════════════════════════════════════════════ */

.nav-glass {
    background: rgba(248,250,255,.88);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(70,105,250,.1);
}


/* ══════════════════════════════════════════════════════════════
   08. Component — Section Label
   Small uppercase pill label used above every section heading.
══════════════════════════════════════════════════════════════ */

.s-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #4669FA;
    display: block;
    margin-bottom: 14px;
}


/* ══════════════════════════════════════════════════════════════
   09. Component — Pills & Platform Badges
══════════════════════════════════════════════════════════════ */

/* Rounded tag / hero pill */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
}

/* Circular social-platform icon badge */
.s-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════
   10. Component — Feature Check List
   Check-mark bullet list used in feature and module cards.
══════════════════════════════════════════════════════════════ */

.fcheck {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 16px;
    color: #475569;
    line-height: 1.65;
    padding: 14px 0;
    border-bottom: 1px solid #F1F5F9;
}
.fcheck:last-child { border-bottom: none; }

.fcheck-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}


/* ══════════════════════════════════════════════════════════════
   11. Component — Accent List
   Left-border indented list (Google Workspace-style).
══════════════════════════════════════════════════════════════ */

.acc-list { border-left: 3px solid #E8EEFF; padding-left: 24px; }

.acc-item {
    font-size: 16px;
    color: #475569;
    line-height: 1.65;
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
}
.acc-item:last-child { border-bottom: none; }
.acc-item strong     { color: #0D1C2E; font-weight: 600; display: block; margin-bottom: 2px; }


/* ══════════════════════════════════════════════════════════════
   12. Component — Report Cards
   Card used in the 15-report grid section.
══════════════════════════════════════════════════════════════ */

.r-card {
    background: #fff;
    border: 1px solid #E8EEFF;
    border-radius: 20px;
    padding: 28px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    transition: box-shadow .2s, border-color .2s;
}
.r-card:hover {
    box-shadow: 0 12px 36px -8px rgba(70,105,250,.14);
    border-color: #C8D8FF;
}
.r-card .r-icon  { font-size: 1.6rem; flex-shrink: 0; }
.r-card .r-title { font-size: 16px;   font-weight: 600; color: #0D1C2E; margin-bottom: 5px; }
.r-card .r-desc  { font-size: 14px;   color: #64748B;   line-height: 1.6; }


/* ══════════════════════════════════════════════════════════════
   13. Component — Pricing Cards
══════════════════════════════════════════════════════════════ */

.price-card {
    background: #fff;
    border-radius: 28px;
    border: 1px solid #E8EEFF;
    padding: 44px;
    position: relative;
    transition: box-shadow .25s, border-color .25s;
}
.price-card:hover {
    box-shadow: 0 24px 56px -12px rgba(70,105,250,.22);
    border-color: #C8D8FF;
}
.price-card.popular { border: 2px solid #4669FA; }


/* ══════════════════════════════════════════════════════════════
   14. Component — Scroll-to-Top Button
   Fixed bottom-right FAB; visibility toggled via JS.
══════════════════════════════════════════════════════════════ */

#scrollTopBtn { font-size: 1.2rem; }


/* ══════════════════════════════════════════════════════════════
   15. Animations & Entrance Effects
══════════════════════════════════════════════════════════════ */

/* Bar-width grow — goal progress bars */
@keyframes grow { from { width: 0; } }
.bar { animation: grow 1.2s ease both; }

/* Fade-up entrance for hero elements */
@keyframes fu {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fu { animation: fu .7s ease both; }

/* Staggered delay helpers */
.d1 { animation-delay: .1s; }
.d2 { animation-delay: .2s; }
.d3 { animation-delay: .3s; }
.d4 { animation-delay: .4s; }


/* ══════════════════════════════════════════════════════════════
   16. Dashboard Mockup Utilities
   Visual helpers for the hero mock-dashboard illustration.
══════════════════════════════════════════════════════════════ */

/* Fixed height for the scrollable dashboard viewport */
.dash-viewport { height: 390px; }

/* Revenue bar chart column — gradient fill */
.dash-bar-fill { background: linear-gradient(180deg, #4669FA, #6366F1); }

/* Tiny "A" label inside the AI chat avatar circle */
.ai-chat-lbl { font-size: 9px; }


/* ══════════════════════════════════════════════════════════════
   17. AI Section — Decorative Background Orbs
   Blurred colour orbs behind the dark AI section card.
══════════════════════════════════════════════════════════════ */

.ai-glow-blue  { background: #4669FA; transform: translate( 30%, -30%); }
.ai-glow-coral { background: #FA916B; transform: translate(-30%,  30%); }


/* ══════════════════════════════════════════════════════════════
   18. Icon Size Utilities
   Apply to the <iconify-icon> wrapper elements throughout the page.
   Dynamic background colours are kept as inline style where needed.
══════════════════════════════════════════════════════════════ */

.icon-xs      { font-size: 0.9rem; }   /* small inline contextual icons        */
.icon-sm      { font-size: 1.1rem; }   /* footer social circle badges           */
.icon-md      { font-size: 1.2rem; }   /* scroll-to-top FAB                     */
.icon-card    { font-size: 1.3rem; }   /* AI feature cards & platform badges    */
.icon-acc     { font-size: 1.4rem; }   /* accounting section card headers       */
.icon-contact { font-size: 1.5rem; }   /* contact info row leading icons        */
.icon-gift    { font-size: 2.0rem; }   /* pricing banner gift icon              */


/* ══════════════════════════════════════════════════════════════
   19. Form Styles
   Contact form label and field typography (font-size kept here
   to avoid scattering repeated inline styles across every field).
══════════════════════════════════════════════════════════════ */

/* Field labels */
.form-label { font-size: 14px; }

/* Inputs, selects, and textarea font — ensures Poppins is applied
   even if the browser applies a system font to form controls.     */
.form-field {
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
}


/* ══════════════════════════════════════════════════════════════
   20. Contact Section Text
   Repeated text-size rules for the contact info block.
══════════════════════════════════════════════════════════════ */

/* Standard body text in contact rows — links and plain values */
.text-contact       { font-size: 15px; }

/* Non-link contact values — muted grey */
.text-contact-muted { font-size: 15px; color: #64748B; }

/* "Average response time" badge label */
.text-response      { font-size: 15px; font-weight: 500; color: #15803D; }


/* ══════════════════════════════════════════════════════════════
   21. Component — Mobile App Phone Mockups
   Three angled phone frames used in the mobile-app section.
══════════════════════════════════════════════════════════════ */

.phone-mockup {
    width: 160px;
    height: 330px;
    background: #0D1C2E;
    border-radius: 32px;
    border: 3px solid rgba(255,255,255,.12);
    box-shadow: 0 24px 56px -8px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px 8px;
    position: relative;
    flex-shrink: 0;
    transition: transform .3s ease, box-shadow .3s ease;
}

.phone-mockup.phone-featured {
    width: 190px;
    height: 390px;
    border-radius: 38px;
    box-shadow: 0 32px 72px -12px rgba(70,105,250,.45), 0 0 0 1px rgba(255,255,255,.10);
    border-color: rgba(70,105,250,.5);
}

.phone-notch {
    width: 56px;
    height: 8px;
    background: #1a2d45;
    border-radius: 999px;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.phone-featured .phone-notch { width: 64px; height: 9px; }

.phone-screen {
    flex: 1;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: #1a2d45;
}
.phone-featured .phone-screen { border-radius: 22px; }

.phone-home-bar {
    width: 44px;
    height: 4px;
    background: rgba(255,255,255,.25);
    border-radius: 999px;
    margin-top: 6px;
    flex-shrink: 0;
}
.phone-featured .phone-home-bar { width: 54px; }