/* ===================================================================
   Income Review - Main Stylesheet (Fresh Start)
   Version: Comprehensive Overhaul
   =================================================================== */

/* -------------------------------------------------------------------
   0. CSS Variables (Root Definitions)
------------------------------------------------------------------- */
:root {
    /* --- Color Palette --- */
    /* Primary Colors (Brand Blues) */
    --primary-color: #0d6efd;
    --primary-rgb: 13,110,253; /* For rgba() */
    --primary-darker: #0a58ca;
    --primary-darkest: #084298;
    --primary-light: #cfe2ff;
    --primary-xlight: #e7f3ff;

    /* Secondary Colors (Neutral Greys) */
    --secondary-color: #6c757d;
    --secondary-rgb: 108,117,125;
    --secondary-darker: #545b62;
    --secondary-light: #e2e6ea;
    --secondary-xlight: #f1f3f5;

    /* Accent Color (Highlight Yellow/Gold) */
    --accent-color: #ffc107;
    --accent-rgb: 255,193,7;
    --accent-darker: #d39e00;
    --accent-light: #fff3cd;
    --accent-xlight: #fff9e6; /* Even lighter for subtle backgrounds */

    /* Semantic Colors */
    --success-color: #198754; --success-rgb: 25,135,84;
    --success-darker: #146c43; --success-light: #d1e7dd; --success-xlight: #e8f5e9;
    --info-color: #0dcaf0; --info-rgb: 13,202,240;
    --info-darker: #0aa1bf; --info-light: #cff4fc; --info-xlight: #e0f7fa;
    --warning-color: #ffab00; --warning-rgb: 255,171,0; /* Distinct Orange */
    --warning-darker: #cc8900; --warning-light: #ffe5b3; --warning-xlight: #fff4e0;
    --danger-color: #dc3545; --danger-rgb: 220,53,69;
    --danger-darker: #b02a37; --danger-light: #f8d7da; --danger-xlight: #fdeeee;

    /* --- Typography --- */
    --font-family-sans-serif: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-size-base: 16px;
    --font-size-xs: 0.75rem;  /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-md: 1rem;    /* 16px - Base */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */

    --line-height-base: 1.7;
    --line-height-heading: 1.35;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* --- Spacing & Sizing --- */
    --container-max-width: 1200px;
    --container-padding-x-desktop: 20px;
    --container-padding-x-mobile: 15px;
    --section-padding-y-desktop: 60px;
    --section-padding-y-mobile: 40px;
    --grid-gap: 30px; /* Increased gap */
    --card-padding: 25px; /* Increased padding */

    --desktop-nav-height: 70px; /* Slightly taller */
    --mobile-header-height: 60px;
    --mobile-bottom-nav-height: 60px;

    /* --- Borders & Shadows --- */
    --border-radius-sm: 0.3rem;
    --border-radius: 0.6rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.5rem; /* For larger rounded elements */
    --border-radius-pill: 50rem; /* For pill shapes */
    --border-width: 1px;
    --border-width-lg: 2px;

    --border-color: #ced4da;
    --border-color-light: #e0e5ea; /* Slightly softer */
    --border-color-lighter: #f0f3f6;

    --shadow-xs: 0 1px 2px rgba(44, 62, 80, 0.05);
    --shadow-sm: 0 2px 6px rgba(44, 62, 80, 0.08);
    --shadow-md: 0 5px 15px rgba(44, 62, 80, 0.1);
    --shadow-lg: 0 10px 25px rgba(44, 62, 80, 0.12);
    --shadow-xl: 0 15px 35px rgba(44, 62, 80, 0.15);
    --shadow-inset: inset 0 1px 3px rgba(44, 62, 80, 0.06);
    --shadow-focus: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.2);


    /* --- Transitions & Animations --- */
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --animation-duration: 0.7s; /* For scroll animations */

    /* --- Light Theme Defaults (Primary Theme) --- */
    --body-bg: #f4f7f9; /* Very light grey, almost white */
    --text-color-default: #34495e; /* Dark Slate Blue */
    --text-color-light-default: #7f8c8d; /* Cool Grey */
    --heading-color-default: #2c3e50; /* Midnight Blue */
    --card-bg: #ffffff;
    --card-border-color-default: var(--border-color-light);
    --section-light-bg: #ffffff; /* Pure white for contrast */
    --section-off-white-bg: var(--body-bg); /* Consistent with body */
    --section-dark-bg: var(--heading-color-default); /* Using heading color for dark bg */
    --section-dark-bg-text: #ecf0f1; /* Light Grey for dark bg text */
    --header-bg: rgba(255, 255, 255, 0.85); /* Glassmorphism effect */
    --header-shadow: 0 2px 10px rgba(44, 62, 80, 0.07);
    --bottom-nav-bg: rgba(255, 255, 255, 0.85);
    --bottom-nav-border-default: var(--border-color-light);
    --bottom-nav-text-default: var(--text-color-light-default);
    --bottom-nav-active-text-default: var(--primary-color);
    --link-color-default: var(--primary-color);
    --link-hover-default: var(--primary-darker);
    --input-bg-default: #ffffff;
    --input-border-default: #bdc3c7; /* Grey for input borders */
    --input-text-default: var(--text-color-default);
    --input-focus-border-default: var(--primary-color);
    --input-focus-shadow-default: var(--shadow-focus);

    /* --- Service Theme Specific Colors --- */
    /* (Re-using color definitions from previous, they are good) */
    --itr-color: #198754; --itr-rgb: 25,135,84; --itr-color-dark: #146c43; --itr-color-darker: #0f5132; --itr-color-light: #d1e7dd; --itr-color-xlight: #e8f5e9;
    --gst-color: #0d6efd; --gst-rgb: 13,110,253; --gst-color-dark: #0a58ca; --gst-color-darker: #084298; --gst-color-light: #cfe2ff; --gst-color-xlight: #e7f3ff;
    --reg-color: #0dcaf0; --reg-rgb: 13,202,240; --reg-color-dark: #0aa1bf; --reg-color-darker: #087f8c; --reg-color-light: #cff4fc; --reg-color-xlight: #e0f7fa;
    --acc-color: #ffc107; --acc-rgb: 255,193,7; --acc-color-dark: #d39e00; --acc-color-darker: #b38600; --acc-color-light: #fff3cd; --acc-color-xlight: #fff8e1;
    --ip-color:  #6f42c1; --ip-rgb: 111,66,193; --ip-color-dark: #59359a; --ip-color-darker: #40266f; --ip-color-light: #e0d6ef; --ip-color-xlight: #f2eef7;
    --dsc-color: #fd7e14; --dsc-rgb: 253,126,20; --dsc-color-dark: #d86604; --dsc-color-darker: #a04d03; --dsc-color-light: #ffe7d1; --dsc-color-xlight: #fff0e0;

    /* Themed Hero Backgrounds & CTAs (using softer gradients) */
    --itr-hero-bg-light: linear-gradient(140deg, var(--itr-color-dark) 0%, var(--itr-color) 55%, var(--itr-color-light) 100%);
    --itr-hero-text-light: #ffffff;
    --itr-hero-lead-text-light: rgba(255,255,255,0.85);
    --itr-hero-cta-primary-bg-light: var(--white-color);
    --itr-hero-cta-primary-text-light: var(--itr-color-darker);
    --itr-hero-cta-secondary-border-light: rgba(255,255,255,0.7);
    --itr-hero-cta-secondary-text-light: var(--white-color);

    --gst-hero-bg-light: linear-gradient(140deg, var(--gst-color-dark) 0%, var(--gst-color) 55%, var(--gst-color-light) 100%);
    --gst-hero-text-light: #ffffff;
    --gst-hero-lead-text-light: rgba(255,255,255,0.85);
    --gst-hero-cta-primary-bg-light: var(--white-color);
    --gst-hero-cta-primary-text-light: var(--gst-color-darker);
    --gst-hero-cta-secondary-border-light: rgba(255,255,255,0.7);
    --gst-hero-cta-secondary-text-light: var(--white-color);

    --reg-hero-bg-light: linear-gradient(140deg, var(--reg-color-dark) 0%, var(--reg-color) 55%, var(--reg-color-light) 100%);
    --reg-hero-text-light: var(--heading-color-default);
    --reg-hero-lead-text-light: var(--reg-color-darker);
    --reg-hero-cta-primary-bg-light: var(--reg-color-darker);
    --reg-hero-cta-primary-text-light: var(--white-color);
    --reg-hero-cta-secondary-border-light: var(--reg-color-darker);
    --reg-hero-cta-secondary-text-light: var(--reg-color-darker);

    --acc-hero-bg-light: linear-gradient(140deg, var(--acc-color-dark) 0%, var(--acc-color) 55%, var(--acc-color-light) 100%);
    --acc-hero-text-light: var(--acc-color-darkest, #423200);
    --acc-hero-lead-text-light: var(--acc-color-darker);
    --acc-hero-cta-primary-bg-light: var(--acc-color-darker);
    --acc-hero-cta-primary-text-light: var(--white-color);
    --acc-hero-cta-secondary-border-light: var(--acc-color-darker);
    --acc-hero-cta-secondary-text-light: var(--acc-color-darker);

    --ip-hero-bg-light: linear-gradient(140deg, var(--ip-color-dark) 0%, var(--ip-color) 55%, var(--ip-color-light) 100%);
    --ip-hero-text-light: #ffffff;
    --ip-hero-lead-text-light: rgba(255,255,255,0.85);
    --ip-hero-cta-primary-bg-light: var(--white-color);
    --ip-hero-cta-primary-text-light: var(--ip-color-darker);
    --ip-hero-cta-secondary-border-light: rgba(255,255,255,0.7);
    --ip-hero-cta-secondary-text-light: var(--white-color);

    --dsc-hero-bg-light: linear-gradient(140deg, var(--dsc-color-dark) 0%, var(--dsc-color) 55%, var(--dsc-color-light) 100%);
    --dsc-hero-text-light: #ffffff;
    --dsc-hero-lead-text-light: rgba(255,255,255,0.85);
    --dsc-hero-cta-primary-bg-light: var(--white-color);
    --dsc-hero-cta-primary-text-light: var(--dsc-color-darker);
    --dsc-hero-cta-secondary-border-light: rgba(255,255,255,0.7);
    --dsc-hero-cta-secondary-text-light: var(--white-color);
}

/* -------------------------------------------------------------------
   1. Basic Reset & Global Styles
------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth !important; font-size: var(--font-size-base); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-family-sans-serif);
    line-height: var(--line-height-base);
    color: var(--text-color-default);
    background-color: var(--body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease;
}
body.login-page { padding-top: 0 !important; padding-bottom: 0 !important; }

img, svg, video { max-width: 100%; height: auto; display: block; vertical-align: middle; }
a { color: var(--link-color-default); text-decoration: none; transition: color var(--transition-fast) ease, opacity var(--transition-fast) ease; }
a:hover { color: var(--link-hover-default); opacity: 0.8; text-decoration: underline; }

:focus-visible {
    outline: 3px solid rgba(var(--primary-color-rgb), 0.6); /* More visible focus */
    outline-offset: 2px;
    box-shadow: none;
    border-radius: var(--border-radius-sm); /* Consistent rounding */
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(var(--primary-color-rgb), 0.6);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}
/* Remove default outline for non-focus-visible states if needed, but be cautious for accessibility */
*:focus:not(:focus-visible) { outline: none; }


#main-content {
    padding-left: var(--container-padding-x-mobile);
    padding-right: var(--container-padding-x-mobile);
}
@media (min-width: 768px) {
    #main-content {
        padding-left: var(--container-padding-x-desktop);
        padding-right: var(--container-padding-x-desktop);
    }
}
#main-content > section:first-child { padding-top: calc(var(--section-padding-y-mobile) / 1.5); }
#main-content > section:last-child { padding-bottom: calc(var(--section-padding-y-mobile) / 1.5); }
@media (min-width: 768px) {
    #main-content > section:first-child { padding-top: var(--section-padding-y-desktop); }
    #main-content > section:last-child { padding-bottom: var(--section-padding-y-desktop); }
}


/* -------------------------------------------------------------------
   2. Layout (Container, Grid, Sections)
------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container-max-width); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
.grid { display: grid; gap: var(--grid-gap); }
section, .content-section, .animated-section {
    padding-top: var(--section-padding-y-mobile);
    padding-bottom: var(--section-padding-y-mobile);
    overflow-x: clip; /* Use clip instead of hidden for modern browsers */
}
@media (min-width: 768px) {
    section, .content-section, .animated-section {
        padding-top: var(--section-padding-y-desktop);
        padding-bottom: var(--section-padding-y-desktop);
    }
}

.light-bg { background-color: var(--section-light-bg); }
.off-white-bg { background-color: var(--section-off-white-bg); }
.dark-bg { background-color: var(--section-dark-bg); color: var(--section-dark-bg-text); }
.dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4 { color: var(--white-color); }
.dark-bg p { color: var(--section-dark-bg-text); }
.dark-bg a { color: var(--accent-light); }
.dark-bg a:hover { color: var(--white-color); opacity: 1; }
.dark-bg .secondary-cta { color: var(--white-color); border-color: var(--accent-color); background-color: transparent;}
.dark-bg .secondary-cta:hover { background-color: var(--accent-color); color: var(--heading-color-default); border-color: var(--accent-color); }

.section-title-bar {
    font-size: clamp(1.5rem, 4vw, 2rem); /* Adjusted responsive size */
    color: var(--heading-color-default);
    border-bottom: 3px solid var(--primary-light);
    padding-bottom: 15px;
    margin-bottom: 2.2em; /* More space after title */
    text-align: left;
}
.text-center .section-title-bar {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}


/* -------------------------------------------------------------------
   3. Typography
------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-family-sans-serif); color: var(--heading-color-default); font-weight:var(--font-weight-semibold); line-height:1.35; margin-bottom:0.8em; }
h1 { font-size: clamp(2rem, 5.5vw, 3rem); font-weight: var(--font-weight-bold); letter-spacing: -0.75px; } /* Larger H1 */
h2 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); letter-spacing: -0.3px; }
h3 { font-size: clamp(1.4rem, 3.8vw, 2rem); }
h4 { font-size: clamp(1.15rem, 3.2vw, 1.5rem); }
p { margin-bottom: 1.3em; font-size: var(--font-size-md); }
.lead { font-size: clamp(1.05rem, 2.8vw, 1.25rem); font-weight:var(--font-weight-normal); color:var(--text-color-light-default); margin-bottom:1.8em; max-width: 750px; }
.text-center .lead { margin-left: auto; margin-right: auto; }
.highlight { color: var(--primary-color); font-weight: var(--font-weight-semibold); }
.highlight-success { color: var(--success-darker); font-weight: var(--font-weight-semibold); }
.highlight-itr { color: var(--itr-color-darker); font-weight: var(--font-weight-semibold); }
.text-success { color: var(--success-color) !important; }
.text-center { text-align: center !important; }
.text-primary { color: var(--primary-color) !important; }
.text-danger-alt { color: var(--danger-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.mt-1{margin-top:0.5rem!important;} .mt-2{margin-top:1rem!important;} .mt-3{margin-top:1.5rem!important;}
.mb-1{margin-bottom:0.5rem!important;} .mb-2{margin-bottom:1rem!important;} .mb-3{margin-bottom:1.5rem!important;}
.d-block{display:block!important;}
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
ul.benefit-list-standard { list-style: none; padding-left: 0; }
ul.benefit-list-standard li { display: flex; align-items: flex-start; margin-bottom: 0.8em; font-size: var(--font-size-md); }
ul.benefit-list-standard li i { margin-right: 12px; color: var(--success-color); font-size: 1.3em; margin-top: 2px; flex-shrink: 0; width: 22px; text-align: center;}

/* -------------------------------------------------------------------
   4. Common Components (Buttons, Cards, Forms, 3D Icons)
------------------------------------------------------------------- */
/* Buttons */
.cta-button { display:inline-flex; align-items:center; justify-content:center; font-weight:var(--font-weight-medium);line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:transparent;border:2px solid transparent;padding:0.7rem 1.5rem; font-size:1rem; border-radius:var(--border-radius);transition: var(--transition-base); will-change: transform, box-shadow; }
.cta-button i { margin-right: 0.7em; line-height: 1; }
.cta-button:hover { transform: translateY(-3px) scale(1.03); box-shadow: var(--shadow-lg); } /* Enhanced hover */
.cta-button:active { transform: translateY(-1px) scale(0.98); box-shadow: var(--shadow-md); } /* Softer active */

.cta-button.primary-cta { color:#fff; background-color:var(--primary-color); border-color:var(--primary-color); }
.cta-button.primary-cta:hover { background-color:var(--primary-darker); border-color:var(--primary-darker); box-shadow: 0 7px 18px rgba(var(--primary-color-rgb), 0.38); }

.cta-button.secondary-cta { color:var(--primary-color); background-color:transparent; border-color:var(--primary-color); }
.cta-button.secondary-cta:hover { color:#fff; background-color:var(--primary-color); border-color:var(--primary-color); box-shadow: 0 7px 18px rgba(var(--primary-color-rgb), 0.28); }
.dark-bg .secondary-cta { color: var(--accent-light); border-color: var(--accent-color); }
.dark-bg .secondary-cta:hover { background-color: var(--accent-color); color: var(--heading-color-default); border-color: var(--accent-color); }


.cta-button.small-cta { padding: 0.5rem 1.1rem; font-size: 0.9rem; }
.cta-button.cta-whatsapp { background-color:#25D366;color:white;border-color:#25D366; }
.cta-button.cta-whatsapp:hover { background-color:#1DAE54;border-color:#1DAE54; box-shadow: 0 7px 18px rgba(37, 211, 102, 0.38); }

/* Refined 3D Button Style */
.cta-button-3d {
    box-shadow: 0 6px 0px var(--primary-darkest), 3px 7px 12px rgba(0,0,0,0.25), var(--shadow-inset); /* More depth */
    transition: transform 0.1s cubic-bezier(0, 0, 0.58, 1), box-shadow 0.1s cubic-bezier(0, 0, 0.58, 1), background-color 0.1s ease-out; /* Faster, snappier */
    border-bottom: 2px solid var(--primary-darkest);
    position: relative;
    font-weight: var(--font-weight-semibold);
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.cta-button-3d:hover {
    box-shadow: 0 4px 0px var(--primary-darkest), 2px 5px 10px rgba(0,0,0,0.2), var(--shadow-inset);
    transform: translateY(2px) scale(1.01); /* Subtle pop on hover */
}
.cta-button-3d:active {
    box-shadow: 0 1px 0px var(--primary-darkest), 0px 2px 4px rgba(0,0,0,0.15), var(--shadow-inset);
    transform: translateY(5px) scale(0.98); /* Pronounced press */
    background-color: var(--primary-darker);
}
.cta-button-3d.secondary-cta {
    box-shadow: 0 6px 0px var(--primary-darker), 3px 7px 12px rgba(0,0,0,0.2), var(--shadow-inset);
    border: 2px solid var(--primary-color);
    border-bottom-width: 2px;
}
.cta-button-3d.secondary-cta:hover {
    box-shadow: 0 4px 0px var(--primary-darker), 2px 5px 10px rgba(0,0,0,0.15), var(--shadow-inset);
}
.cta-button-3d.secondary-cta:active {
    box-shadow: 0 1px 0px var(--primary-darker), 0px 2px 4px rgba(0,0,0,0.2), var(--shadow-inset);
    background-color: var(--primary-xlight);
}

/* Cards */
.card { background-color:var(--card-bg); border:1px solid var(--card-border-color-default); border-radius:var(--border-radius); box-shadow:var(--card-shadow); padding:var(--card-padding); display:flex; flex-direction:column; height:100%; transition:var(--transition-base); will-change: transform, box-shadow; }
.card:hover { box-shadow:var(--card-shadow-hover); transform: translateY(-7px) scale(1.035); } /* More pronounced hover */

/* Refined 3D Icon Style (Global) */
.service-icon-3d {
    width: 70px; height: 70px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px auto; /* Increased margin */
    box-shadow: inset 0 -5px 8px rgba(0,0,0,0.12), /* Deeper inner shadow */
                0 7px 0px rgba(0,0,0,0.07), /* Bottom 'thickness' */
                0 12px 18px rgba(0,0,0,0.22); /* Softer, larger outer shadow */
    transition: var(--transition-bounce);
    position: relative;
    background-image: linear-gradient(145deg, #fdfdfd, #dcdcdc); /* Default silver gradient */
    will-change: transform, box-shadow;
}
.service-icon-3d i {
    font-size: 2.5rem;
    color: var(--primary-darker);
    text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Enhanced text shadow */
    transform: translateZ(10px) translateY(-2px); /* More pop */
    display: block;
}
.card:hover .service-icon-3d, .service-hero:hover .service-icon-3d, .service-icon-item:hover .service-icon-3d,
.calculator-steps .step-indicator:hover .service-icon-3d {
    transform: scale(1.2) translateY(-7px) rotateY(15deg) rotateX(7deg) translateZ(5px); /* More dynamic hover */
    box-shadow: inset 0 -4px 7px rgba(0,0,0,0.1),
                0 12px 0px rgba(0,0,0,0.05), /* Adjusted thickness shadow */
                0 20px 35px rgba(0,0,0,0.3);
}
/* Themed 3D Icons (as defined before) */
/* ... (All .itr-theme .service-icon-3d, .gst-theme .service-icon-3d, etc. styles for background and icon color) ... */
/* Make sure these themed versions also have appropriate text-shadow for the icon inside for better 3D feel */
.itr-theme .service-icon-3d, .itr-theme-icon .service-icon-3d, .service-category-compliance .itr-icon .service-icon-3d,
.calculator-steps .step-indicator.active.itr-theme .service-icon-3d, .calculator-steps .step-indicator.completed.itr-theme .service-icon-3d {
    background-image: linear-gradient(145deg, var(--itr-color-light), var(--itr-color));
    box-shadow: inset 0 -5px 8px rgba(0,0,0,0.18), 0 7px 0px var(--itr-color-darker), 0 12px 18px rgba(0,0,0,0.25);
}
.itr-theme .service-icon-3d i, .itr-theme-icon .service-icon-3d i, .service-category-compliance .itr-icon .service-icon-3d i,
.calculator-steps .step-indicator.active.itr-theme .service-icon-3d i, .calculator-steps .step-indicator.completed.itr-theme .service-icon-3d i { color: var(--white-color); text-shadow: 0 1px 2px var(--itr-color-darkest); }

.gst-theme .service-icon-3d, .gst-theme-icon .service-icon-3d, .service-category-gst .service-icon-3d,
.calculator-steps .step-indicator.active.gst-theme .service-icon-3d, .calculator-steps .step-indicator.completed.gst-theme .service-icon-3d {
    background-image: linear-gradient(145deg, var(--gst-color-light), var(--gst-color));
    box-shadow: inset 0 -5px 8px rgba(0,0,0,0.18), 0 7px 0px var(--gst-color-darker), 0 12px 18px rgba(0,0,0,0.25);
}
.gst-theme .service-icon-3d i, .gst-theme-icon .service-icon-3d i, .service-category-gst .service-icon-3d i,
.calculator-steps .step-indicator.active.gst-theme .service-icon-3d i, .calculator-steps .step-indicator.completed.gst-theme .service-icon-3d i { color: var(--white-color); text-shadow: 0 1px 2px var(--gst-color-darkest); }

.reg-theme .service-icon-3d, .reg-theme-icon .service-icon-3d, .service-category-registrations .service-icon-3d,
.calculator-steps .step-indicator.active.reg-theme .service-icon-3d, .calculator-steps .step-indicator.completed.reg-theme .service-icon-3d {
    background-image: linear-gradient(145deg, var(--reg-color-light), var(--reg-color));
    box-shadow: inset 0 -5px 8px rgba(0,0,0,0.18), 0 7px 0px var(--reg-color-darker), 0 12px 18px rgba(0,0,0,0.25);
}
.reg-theme .service-icon-3d i, .reg-theme-icon .service-icon-3d i, .service-category-registrations .service-icon-3d i,
.calculator-steps .step-indicator.active.reg-theme .service-icon-3d i, .calculator-steps .step-indicator.completed.reg-theme .service-icon-3d i { color: var(--reg-color-darkest); text-shadow: 0 1px 2px rgba(255,255,255,0.5); }

.acc-theme .service-icon-3d, .acc-theme-icon .service-icon-3d, .service-category-compliance .acc-icon .service-icon-3d,
.calculator-steps .step-indicator.active.acc-theme .service-icon-3d, .calculator-steps .step-indicator.completed.acc-theme .service-icon-3d {
    background-image: linear-gradient(145deg, var(--acc-color-light), var(--acc-color));
    box-shadow: inset 0 -5px 8px rgba(0,0,0,0.18), 0 7px 0px var(--acc-color-darker), 0 12px 18px rgba(0,0,0,0.25);
}
.acc-theme .service-icon-3d i, .acc-theme-icon .service-icon-3d i, .service-category-compliance .acc-icon .service-icon-3d i,
.calculator-steps .step-indicator.active.acc-theme .service-icon-3d i, .calculator-steps .step-indicator.completed.acc-theme .service-icon-3d i { color: var(--acc-color-darkest); text-shadow: 0 1px 2px rgba(255,255,255,0.5); }

.ip-theme .service-icon-3d, .ip-theme-icon .service-icon-3d, .service-category-compliance .ip-icon .service-icon-3d,
.calculator-steps .step-indicator.active.ip-theme .service-icon-3d, .calculator-steps .step-indicator.completed.ip-theme .service-icon-3d {
    background-image: linear-gradient(145deg, var(--ip-color-light), var(--ip-color));
    box-shadow: inset 0 -5px 8px rgba(0,0,0,0.18), 0 7px 0px var(--ip-color-darker), 0 12px 18px rgba(0,0,0,0.25);
}
.ip-theme .service-icon-3d i, .ip-theme-icon .service-icon-3d i, .service-category-compliance .ip-icon .service-icon-3d i,
.calculator-steps .step-indicator.active.ip-theme .service-icon-3d i, .calculator-steps .step-indicator.completed.ip-theme .service-icon-3d i { color: var(--white-color); text-shadow: 0 1px 2px var(--ip-color-darkest); }

.dsc-theme .service-icon-3d, .dsc-theme-icon .service-icon-3d,
.calculator-steps .step-indicator.active.dsc-theme .service-icon-3d, .calculator-steps .step-indicator.completed.dsc-theme .service-icon-3d {
    background-image: linear-gradient(145deg, var(--dsc-color-light), var(--dsc-color));
    box-shadow: inset 0 -5px 8px rgba(0,0,0,0.18), 0 7px 0px var(--dsc-color-darker), 0 12px 18px rgba(0,0,0,0.25);
}
.dsc-theme .service-icon-3d i, .dsc-theme-icon .service-icon-3d i,
.calculator-steps .step-indicator.active.dsc-theme .service-icon-3d i, .calculator-steps .step-indicator.completed.dsc-theme .service-icon-3d i { color: var(--white-color); text-shadow: 0 1px 2px var(--dsc-color-darkest); }


/* Forms */
.contact-form-container{max-width:650px;margin-left:auto;margin-right:auto; background-color:var(--card-bg); padding:30px; border-radius:var(--border-radius-lg); box-shadow:var(--shadow-lg); }
.form-group{margin-bottom:1.3rem;} /* Increased spacing */
.form-group label{display:block;margin-bottom:0.6rem;font-weight:var(--font-weight-medium);color:var(--heading-color-default);font-size:0.95rem;}
.form-group label i{margin-right:0.6em;color:var(--primary-color); }
.form-control,input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="number"],select,textarea{display:block;width:100%;padding:0.8rem 1.1rem;font-size:1rem;font-weight:var(--font-weight-normal);line-height:1.5;color:var(--input-text-default);background-color:var(--input-bg-default);background-clip:padding-box;border:1px solid var(--input-border-default);appearance:none;-webkit-appearance:none; border-radius:var(--border-radius-sm);transition: var(--transition-fast); box-shadow: var(--shadow-inset);}
input::placeholder,textarea::placeholder{color:#95a5a6;}

select.form-control, select.form-control-lg { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2334495e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right 1.1rem center; background-size:18px 14px; } /* Larger arrow */

select.form-control-lg{padding:0.95rem 1.3rem;font-size:1.05rem;}
textarea.form-control{min-height:130px;resize:vertical;}
.form-control:focus,input:focus,select:focus,textarea:focus{color:var(--input-text-default);background-color:var(--input-bg-default);border-color:var(--input-focus-border-default);outline:0;box-shadow: var(--input-focus-shadow-default), var(--shadow-inset);}
.form-button{width:100%;padding:0.85rem 1.4rem;font-size:1.05rem;} /* Larger buttons */
.form-button.form-button-primary{color:#fff;background-color:var(--primary-color);border-color:var(--primary-color);}
.form-button.form-button-primary:hover{background-color:var(--primary-darker);border-color:var(--primary-darker);}
.form-note{font-size:var(--font-size-sm);color:var(--text-color-light-default);margin-top:1.1rem;}
.form-note i{margin-right:0.5em;}

.checkbox-group label,.radio-group label,.radio-group-column label{display:flex; align-items:center; margin-bottom:12px;font-size:1rem;cursor:pointer;padding:13px 16px;border:1px solid var(--card-border-color-default);border-radius:var(--border-radius);background-color:var(--card-bg);transition:var(--transition-base);line-height:1.45;color:var(--text-color-default);position:relative; box-shadow: var(--shadow-xs);}
.checkbox-group input,.radio-group input,.radio-group-column input{margin-right:13px; vertical-align:middle;width:1.3em;height:1.3em;accent-color:var(--primary-color); flex-shrink:0;}
.checkbox-group label:hover,.radio-group label:hover,.radio-group-column label:hover { border-color: var(--primary-color); background-color: var(--primary-xlight); box-shadow: var(--shadow-sm); transform: scale(1.015); }
.checkbox-group label.checked-label, .radio-group label.checked-label, .radio-group-column label.checked-label,
.checked-label { background-color:var(--primary-xlight); border-color:var(--primary-color); color:var(--primary-darker); font-weight:var(--font-weight-medium); box-shadow: 0 0 0 2px var(--primary-color) inset, var(--shadow-sm); }

/* Form Validation Messages */
.calculator-form-message {
    padding: 12px 18px; margin-top: 12px; margin-bottom: 18px;
    border-radius: var(--border-radius-sm); font-size: 0.9rem; text-align: left;
    border: 1px solid transparent; line-height: 1.5; box-shadow: var(--shadow-xs);
}
.calculator-form-message.error { background-color: var(--danger-xlight); color: var(--danger-darker); border-color: var(--danger-light); }
.calculator-form-message.info { background-color: var(--info-xlight); color: var(--info-darker); border-color: var(--info-light); }
.calculator-form-message i { margin-right: 10px; font-size: 1.1em; }

/* Calculator Step Indicators (with mini 3D icons) */
.calculator-steps { display:flex; flex-wrap: wrap; justify-content:space-around; margin-bottom:2em; padding-bottom:1.2em; border-bottom:1px solid var(--border-color-light); }
.step-indicator { font-size:0.85rem; color:var(--text-color-light-default); padding:10px; border-radius:var(--border-radius-sm); position:relative; text-align:center; flex:1 1 auto; border-bottom:4px solid transparent; /* Thicker indicator line */ margin: 5px; display: flex; flex-direction: column; align-items: center; transition: color 0.3s ease, border-color 0.3s ease; }
.step-indicator .step-indicator-icon-wrapper .service-icon-3d { /* Wrapper for icon to control margin if icon is image or complex */
    width: 35px; height: 35px; margin-bottom: 8px;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.08), 0 3px 0px rgba(0,0,0,0.04), 0 4px 5px rgba(0,0,0,0.08); /* Default mini icon shadow */
}
.step-indicator .step-indicator-icon-wrapper .service-icon-3d i { font-size: 1.2rem; transform: translateZ(2px) translateY(-1px); } /* Slightly adjust icon inside */
.step-indicator.active { color:var(--primary-color); font-weight:var(--font-weight-semibold); border-bottom-color:var(--primary-color); }
.step-indicator.active .service-icon-3d { /* Active step icon theme */
    background-image: linear-gradient(145deg, var(--primary-light), var(--primary-color));
    box-shadow: inset 0 -3px 5px rgba(0,0,0,0.12), 0 4px 0px var(--primary-darker), 0 6px 8px rgba(0,0,0,0.15) !important; /* Stronger active shadow */
}
.step-indicator.active .service-icon-3d i { color: var(--white-color); text-shadow: 0 1px 1px var(--primary-darkest); }
.step-indicator.completed { color:var(--success-darker); border-bottom-color:var(--success-color); }
.step-indicator.completed .service-icon-3d { /* Completed step icon theme */
    background-image: linear-gradient(145deg, var(--success-light), var(--success-color));
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.1), 0 3px 0px var(--success-darker), 0 4px 5px rgba(0,0,0,0.1) !important;
}
.step-indicator.completed .service-icon-3d i { color: var(--white-color); text-shadow: 0 1px 1px var(--success-darker); }
.form-step legend { font-size:1.1rem; font-weight:var(--font-weight-semibold); margin-bottom:1.3em; padding-bottom:0.7em; border-bottom:1px solid var(--border-color-lighter); color:var(--primary-darker); display: flex; align-items: center;}
.form-step legend .service-icon-3d { width: 30px; height: 30px; margin-right: 12px; }
.form-step legend .service-icon-3d i { font-size: 1rem; }

.calculator-navigation { display:flex; justify-content:space-between; margin-top:2em; }
.calculator-navigation .cta-button { flex-basis:calc(50% - 12px); }
.scrollable-options { max-height: 320px; overflow-y: auto; padding: 8px 12px 8px 8px; margin-bottom: 12px; border: 1px solid var(--border-color-lighter); border-radius: var(--border-radius-sm); background: rgba(0,0,0,0.005); /* Very subtle bg */ }


/* -------------------------------------------------------------------
   NAVIGATION & HEADER STYLES (Copied from previous refined version)
------------------------------------------------------------------- */
/* Desktop Top Navigation */
.desktop-top-nav {
    display: none; /* Hidden on mobile by default */
    position: fixed; top: 0; left: 0; width: 100%;
    background-color: var(--header-bg);
    backdrop-filter: blur(8px); /* Enhanced blur */
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--header-shadow);
    z-index: 1030;
    height: var(--desktop-nav-height);
    border-bottom: 1px solid var(--border-color-lighter);
}
.desktop-top-nav .container { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.desktop-top-nav .logo a { font-size:1.8rem; font-weight:var(--font-weight-bold); text-decoration:none; line-height: 1; }
.desktop-top-nav .logo .logo-income { color:var(--primary-color); }
.desktop-top-nav .logo .logo-review { color:var(--success-color); }
.desktop-nav-links { margin: 0 auto; }
.desktop-nav-links ul { list-style: none; display: flex; gap: 2rem; margin:0; padding:0; }
.desktop-nav-links a { color: var(--heading-color-default); font-weight: var(--font-weight-medium); font-size: 1rem; padding: 0.6rem 0.2rem; position: relative; text-decoration: none; }
.desktop-nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0.3rem; width: 0; height: 2.5px; background-color: var(--primary-color); transition: width 0.3s ease; border-radius: 1px; }
.desktop-nav-links a:hover::after, .desktop-nav-links a.active::after { width: 100%; }
.desktop-nav-links a:hover, .desktop-nav-links a.active { color: var(--primary-color); }
.desktop-nav-cta .cta-button { padding: 0.55rem 1.1rem; font-size: 0.9rem; }

/* Mobile Header */
.mobile-header {
    position:fixed; top:0; left:0; width:100%; z-index:1030;
    background-color:var(--header-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow:var(--header-shadow); padding:0 var(--container-padding-x-mobile); display:flex;
    justify-content:space-between; align-items:center; height:var(--mobile-header-height);
    border-bottom: 1px solid var(--border-color-lighter);
}
.mobile-header .hamburger-menu-btn { background: none; border: none; font-size: 1.7rem; color: var(--heading-color-default); cursor: pointer; padding: 0.5rem;  margin-left: -10px; order: -1; transition: color 0.2s ease; }
.mobile-header .hamburger-menu-btn:hover { color: var(--primary-color); }
.mobile-header .logo { flex-grow: 1; text-align: center; }
.mobile-header .logo a { font-size:1.6rem;font-weight:var(--font-weight-bold);text-decoration:none; line-height: 1; }
.mobile-header .logo .logo-income { color:var(--primary-color); }
.mobile-header .logo .logo-review { color:var(--success-color); }
.mobile-header .header-profile-icon { order: 1; }
.mobile-header .header-profile-icon a { font-size: 1.6rem; color: var(--primary-color); text-decoration: none; padding: 0.5rem; margin-right: -10px; }

/* Mobile Hamburger Menu (Slide-in Panel) */
.mobile-slideout-menu {
    position: fixed; top: 0; left: -300px; width: 300px; max-width: 85vw; height: 100vh;
    background-color: var(--card-bg); box-shadow: 3px 0 20px rgba(0,0,0,0.18); z-index: 1040;
    padding-top: calc(var(--mobile-header-height) + 10px); padding-bottom: 20px;
    overflow-y: auto; transition: left 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.mobile-slideout-menu.open { left: 0; }
.mobile-slideout-menu ul { list-style: none; margin:0; padding:0; }
.mobile-slideout-menu li a { display: flex; align-items: center; padding: 15px 25px; text-decoration: none; color: var(--heading-color-default); border-bottom: 1px solid var(--border-color-lighter); font-size: 1.05rem; font-weight: var(--font-weight-medium); transition: background-color 0.2s ease, color 0.2s ease; }
.mobile-slideout-menu li a:hover, .mobile-slideout-menu li a.active-slide-item { background-color: var(--primary-xlight); color: var(--primary-darker); border-left: 3px solid var(--primary-color); padding-left: 22px; }
.mobile-slideout-menu li a i { margin-right: 18px; width: 26px; text-align: center; font-size: 1.3rem; color: var(--primary-color);}
.mobile-slideout-menu li:last-child a { border-bottom: none; }
#hamburger-logout-btn i { color: var(--danger-color) !important; }
#hamburger-logout-btn:hover { background-color: var(--danger-xlight) !important; color: var(--danger-darker) !important; border-left-color: var(--danger-color) !important; }

.menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(44, 62, 80, 0.65); /* Slightly darker overlay */ z-index: 1035;
    opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s 0.35s linear;
}
.menu-overlay.visible { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Mobile Bottom Navigation (Sticky) */
.mobile-bottom-nav {
    position:fixed; bottom:0; left:0; width:100%; height:var(--mobile-bottom-nav-height);
    background-color:var(--bottom-nav-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow:0 -3px 12px rgba(0,0,0,0.12); display:flex; justify-content:space-around; align-items:stretch;
    z-index:1020; border-top:1px solid var(--border-color-lighter);
}
.mobile-bottom-nav a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; color:var(--bottom-nav-text-default); font-size:0.78rem; padding:0.4em 0.2em; height:100%; transition:color 0.2s ease, background-color 0.2s ease; position: relative; }
.mobile-bottom-nav a i { font-size:1.5rem; margin-bottom:0.25em; }
.mobile-bottom-nav a span { display:block; line-height:1.1; }
.mobile-bottom-nav a:hover { color:var(--bottom-nav-active-text-default); background-color: var(--secondary-xlight); }
.mobile-bottom-nav a.active { color:var(--bottom-nav-active-text-default); font-weight:var(--font-weight-semibold); background-color: var(--primary-xlight); }
.mobile-bottom-nav a.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 50%; height: 3.5px; background-color: var(--primary-color); border-radius: 0 0 4px 4px; }

/* Back to Top Button */
.back-to-top {
    position:fixed;bottom: calc(var(--mobile-bottom-nav-height) + 20px); right:20px;width:42px;height:42px;
    background-color:var(--primary-color);color:white; border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;text-decoration:none;box-shadow:var(--shadow-lg);
    opacity:0; visibility: hidden; transform: scale(0.8) translateY(20px);
    transition:opacity .3s ease,visibility .3s ease,transform .3s var(--transition-bounce),background-color .3s ease;z-index:1000;
}
.back-to-top.visible { opacity:1; visibility: visible; transform: scale(1) translateY(0); }
.back-to-top:hover { background-color:var(--primary-darker);transform:scale(1.15) translateY(0) !important; }
@media (min-width: 992px) { .back-to-top { bottom: 25px; right: 25px; width: 45px; height: 45px; font-size: 1.4rem; } }

/* Media Queries for Navigation Visibility */
@media (min-width: 992px) {
    .desktop-top-nav { display: flex !important; }
    .mobile-header, .mobile-bottom-nav, .mobile-slideout-menu, .menu-overlay { display: none !important; }
    body { padding-top: var(--desktop-nav-height) !important; padding-bottom: 0 !important; }
}
@media (max-width: 991.98px) {
    .desktop-top-nav { display: none !important; }
    .mobile-header, .mobile-bottom-nav { display: flex !important; }
    body { padding-top: var(--mobile-header-height) !important; padding-bottom: var(--mobile-bottom-nav-height) !important; }
}

/* -------------------------------------------------------------------
   ANIMATIONS, SECTIONS, AND OTHER COMPONENT STYLES
------------------------------------------------------------------- */

/* Animations */
.animated-section .animated-on-load { opacity:0; transform:translateY(30px); /* Increased initial offset */ transition:opacity var(--animation-duration) cubic-bezier(0.645, 0.045, 0.355, 1), transform var(--animation-duration) cubic-bezier(0.645, 0.045, 0.355, 1); will-change: opacity, transform; }
.animated-section .animated-on-load.in-view { opacity:1; transform:translateY(0); }
.animated-section .animated-delay-1 { transition-delay:0.18s; }
.animated-section .animated-delay-2 { transition-delay:0.36s; }
.animated-section .animated-delay-3 { transition-delay:0.54s; }
.animated-section .animated-delay-4 { transition-delay:0.72s; }
.animated-section .animated-delay-5 { transition-delay:0.9s; }

/* Homepage Specific Sections (Hero, Urgency, Pricing Philosophy, Services Overview, etc.) */
.hero { padding: 50px 0; text-align:center; background:var(--primary-xlight); position:relative; border-bottom: 1px solid var(--border-color-light); }
.hero-illustration img { max-width: 300px; margin:0 auto 1.8em auto; }
@media (min-width: 768px) { .hero-illustration img { max-width: 350px; } }
.hero h1 { font-size: clamp(2rem, 6vw, 3rem); color:var(--primary-darker); }
.hero .lead { font-size:clamp(1rem, 2.8vw, 1.2rem); max-width:600px; margin:0 auto 1.8em auto; color:var(--text-color-default); }
.hero-benefits { list-style:none; padding:0; margin:1.8em auto; display:inline-block; text-align:left; }
.hero-benefits li { display:flex; align-items:center; margin-bottom:0.9em; font-size:var(--font-size-lg); font-weight:var(--font-weight-medium); color:var(--heading-color-default); }
.hero-benefits li i { font-size:1.3em; margin-right:12px; color:var(--success-darker); width:24px; text-align:center;}
.hero-cta-buttons { display:flex; flex-direction:column; gap:15px; align-items:center; margin-top:1.8em; }
.hero-cta-buttons .cta-button { width:100%; max-width:300px; padding:12px 22px; font-size:1.05rem;}
@media (min-width: 550px) { .hero-cta-buttons { flex-direction:row; justify-content:center; } .hero-cta-buttons .cta-button { width:auto; } }

/* ... (Urgency Section, Pricing Philosophy, Services Overview V2 styles from previous complete CSS) ... */
/* These sections were generally well-styled. Key is to ensure they use updated variables and responsive typography. */
/* For brevity, I'll assume these specific section block styles are integrated. */
/* Example for .urgency-section (ensure it uses new variables if they changed) */
.urgency-section { background-color: var(--itr-color-xlight); color: var(--itr-color-darker); padding:30px var(--container-padding-x-mobile); border-bottom:3px solid var(--itr-color-light); }
@media (min-width: 768px) { .urgency-section { padding:40px var(--container-padding-x-desktop); } }
.urgency-icon { color: var(--itr-color); margin-bottom: 10px; } /* Added margin */
.urgency-heading { font-size: clamp(1.5rem, 4vw, 1.9rem); margin-bottom: 0.6em; color:var(--itr-color-darker); }
.urgency-subheading { font-size: clamp(0.9rem, 2.5vw, 1rem); font-weight: 400; display: block; margin-top: 8px; opacity: 0.9; }
.urgency-text { font-size: var(--font-size-md); max-width: 650px; margin: 1em auto; color:var(--text-color-default);}
.urgency-section .cta-buttons { margin-top: 25px; } /* Increased margin */
.urgency-section .cta-button.itr-theme { background-color:var(--itr-color); border-color:var(--itr-color); }
.urgency-section .cta-button.itr-theme:hover { background-color:var(--itr-color-dark); border-color:var(--itr-color-dark); }
.urgency-section .cta-button.urgency-cta-secondary { border-color:var(--itr-color-dark); color:var(--itr-color-dark); }
.urgency-section .cta-button.urgency-cta-secondary:hover { background-color:var(--itr-color-light); color: var(--itr-color-darkest); }

/* --- Service Detail Page Specifics --- */
/* (Hero, Why Important, Calculator, Pricing Table, What's Included, Addons, How We Support, Docs, Testimonials, FAQs, Final CTA) */
/* These sections should use the global component styles (.card, .cta-button, .service-icon-3d, form styles, etc.) */
/* and their specific themed hero variables. */
/* Example: Service Hero (already covered in variables, but basic structure) */
.service-hero { padding: 50px 0; text-align:center; color:var(--white-color); border-bottom: 1px solid rgba(0,0,0,0.1); }
.service-hero .service-icon-3d { margin-bottom: 0.8em; /* Ensure it has space */ }
.service-hero h1 { color:inherit; font-size: clamp(2.2rem, 6vw, 3.2rem); }
.service-hero .lead { color:inherit; opacity:0.9; font-size:clamp(1.05rem, 3vw, 1.25rem); max-width:650px; margin:0 auto 1.8em auto; }
.service-hero .hero-cta-buttons { display:flex; flex-direction:column; gap:15px; align-items:center; margin-top:1.8em; }
.service-hero .hero-cta-buttons .cta-button { width:100%; max-width:320px; padding:14px 28px; font-size:1.1rem;}
@media (min-width: 550px) { .service-hero .hero-cta-buttons { flex-direction:row; justify-content:center; } .service-hero .hero-cta-buttons .cta-button { width:auto; } }
/* ... Styles for .why-important-section, .calculator-section, .service-offerings-section, etc. */
/* are assumed to be well-covered by global component styles and variables. */
/* Specific layout grids like .why-itr-grid, .pricing-table, .included-items-grid, .support-steps, .checklist-grid, .faq-item */
/* should be defined as per previous agreed versions, ensuring they use current variables. */

/* --- Login Page --- */
.login-page { display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:100vh; background-color:var(--section-off-white-bg); padding:25px 0; }
.login-container { background-color:var(--card-bg); padding:30px 25px; border-radius:var(--border-radius-lg); box-shadow:var(--shadow-xl); max-width:420px; width:90%; text-align:center; }
.login-container .logo { margin-bottom:1.8em; }
.login-container h1 { font-size:1.8rem; margin-bottom:1.2em; color:var(--heading-color-default); }
.login-container .form-button { margin-top:0.8rem; }
.login-message { padding: 12px 15px; margin-top: 18px; border-radius: var(--border-radius-sm); text-align: center; font-size: 0.95rem; }
.login-message.success { background-color: var(--success-xlight); color: var(--success-darker); border: 1px solid var(--success-light); }
.login-message.error { background-color: var(--danger-xlight); color: var(--danger-darker); border: 1px solid var(--danger-light); }
.login-message.info { background-color: var(--info-xlight); color: var(--info-darker); border: 1px solid var(--info-light); }
#login-loader { display: flex; align-items: center; justify-content: center; font-size:1rem; color: var(--primary-color); margin-top: 15px;}
#login-loader .fas { font-size: 1.3rem; margin-right: 10px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#recaptcha-container { margin-top: 15px; display: flex; justify-content: center; }
#recaptcha-container > div { margin: 0 auto; } /* Center reCAPTCHA badge if it becomes visible */

/* --- Profile & Order Detail Pages --- */
/* (Using styles from previous refined versions for .profile-page-redesigned, .order-detail-page, .order-item-card, .order-timeline etc.) */
/* Key is to ensure they use current variables and are visually consistent. */
/* Example snippet */
.profile-page-redesigned .profile-header {
    text-align: center; padding: 25px 15px; background-color: var(--primary-xlight);
    border-bottom: 1px solid var(--border-color);
}
.profile-page-redesigned .profile-avatar {
    width: 85px; height: 85px; border-radius: 50%; background-color: var(--primary-color);
    color: white; display: flex; align-items: center; justify-content: center;
    font-size: 2.8rem; margin: 0 auto 12px auto; box-shadow: var(--shadow-md);
}
/* ... other profile & order detail styles ... */

/* --- Floating Video & Audio Player --- */
#floating-promo-video-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 280px;
    max-width: 70vw;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden; /* Important for rounded corners on the video */
    z-index: 1040;
    
    /* Initial Hidden State */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s var(--transition-bounce), visibility 0s 0.4s linear;
    will-change: opacity, transform, visibility;
}

#floating-promo-video-container.in-view {
    /* Visible State (triggered by JS) */
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s, 0s, 0s !important; /* Make sure it becomes visible immediately */
}

#floating-promo-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

#close-floating-video {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color 0.2s ease;
}

#close-floating-video:hover {
    background-color: rgba(220, 53, 69, 0.9); /* Use danger color on hover */
}

/* Adjust position on mobile to be above bottom nav */
@media (max-width: 991.98px) {
    #floating-promo-video-container {
        bottom: calc(var(--mobile-bottom-nav-height) + 15px);
        right: 15px;
    }
}
#global-floating-audio-player {
    display: block; /* Keep it in layout tree, manage with opacity/visibility */
    position: fixed;
    /* Default mobile: above bottom nav and back-to-top */
    /* Calculation: bottom_nav_height + gap + b2t_height + gap_to_player */
    bottom: calc(var(--mobile-bottom-nav-height) + 15px + 42px + 15px);
    right: 15px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 12px;
    box-shadow: var(--shadow-xl);
    z-index: 1045; /* Check this against other overlays */
    max-width: 320px;
    width: calc(100% - 30px);
    transition: opacity 0.3s ease, transform 0.3s var(--transition-bounce), visibility 0s 0.3s linear;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    visibility: hidden; /* Start hidden */
    will-change: opacity, transform, visibility;
}

#global-floating-audio-player.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    transition-delay: 0s, 0s, 0s !important; /* Override visibility transition delay when becoming visible */
}

/* Desktop positioning for audio player (no bottom nav to consider) */
@media (min-width: 992px) {
    #global-floating-audio-player {
        /* Calculation: desktop_b2t_bottom_offset + b2t_height + gap_to_player */
        bottom: calc(25px + 48px + 15px);
        right: 25px; /* Match b2t right offset */
    }
}

/* If PWA prompt banner is visible, audio player needs to be above it */
/* This requires JS to add a class like 'pwa-prompt-visible' to body when prompt shows */
body.pwa-prompt-visible #global-floating-audio-player {
    /* Assuming PWA prompt is about 70px high on mobile when shown at bottom */
    bottom: calc(var(--mobile-bottom-nav-height) + 15px + 42px + 15px + 70px + 10px); /* Add PWA height + extra gap */
}
@media (min-width: 992px) {
    body.pwa-prompt-visible #global-floating-audio-player {
        /* Desktop PWA prompt might be different, adjust if it's also bottom */
        bottom: calc(25px + 48px + 15px + 70px + 10px);
    }
}
/* PWA Install Prompt Banner Styles */
#pwa-install-prompt-container {
    position: fixed;
    bottom: 0; /* Initially at the very bottom */
    left: 0;
    width: 100%;
    background-color: var(--primary-darker); /* Example banner color */
    color: white;
    padding: 12px var(--container-padding-x-mobile);
    box-shadow: 0 -3px 10px rgba(0,0,0,0.15);
    z-index: 1015; /* Above content, potentially below bottom nav if nav is higher */
    display: none; /* JS controls visibility */
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* Adjust bottom position if mobile bottom nav is present */
    /* This will be handled by adding a class via JS when bottom nav is active */
}
body.has-mobile-bottom-nav #pwa-install-prompt-container {
    bottom: var(--mobile-bottom-nav-height);
}


#pwa-install-prompt-container.visible { /* JS adds this class */
    display: flex !important; /* Use flex to ensure items align */
}

.pwa-banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    overflow: hidden; /* Prevent text overflow issues */
}
.pwa-banner-icon {
    width: 40px; /* Adjust size */
    height: 40px;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
}
.pwa-banner-text p {
    color: white;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap; /* Could be an issue on very small screens */
    overflow: hidden;
    text-overflow: ellipsis;
}
#pwa-install-prompt-container #pwa-install-button {
    /* The .cta-button-3d will apply general 3D style */
    /* Specific color overrides for banner context */
    background-color: var(--accent-color);
    color: var(--heading-color-default);
    border-color: var(--accent-darker); /* For 3D effect consistency */
    box-shadow: 0 5px 0px var(--accent-darker), 2px 6px 10px rgba(0,0,0,0.2);
    font-size: 0.9rem;
    padding: 8px 15px;
    flex-shrink: 0;
}
#pwa-install-prompt-container #pwa-install-button:hover {
    background-color: var(--accent-darker);
    color: var(--white-color);
}
#pwa-install-prompt-container #pwa-install-button:active {
    background-color: var(--accent-darker);
    box-shadow: 0 1px 0px var(--accent-darker), 0px 2px 3px rgba(0,0,0,0.3);
}


#pwa-banner-close-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.8rem;
    line-height: 1;
    padding: 5px;
    cursor: pointer;
    margin-left: 5px; /* Gap from install button */
    flex-shrink: 0;
}
#pwa-banner-close-btn:hover {
    color: white;
}

/* Ensure it's above mobile bottom nav on desktop view if bottom nav is hidden by JS but body padding isn't updated fast enough */
@media (min-width: 992px) {
    body:not(.has-mobile-bottom-nav) #pwa-install-prompt-container, /* If JS removes class on desktop */
    #pwa-install-prompt-container { /* General desktop override if no class */
        bottom: 20px;
        left: 20px;
        width: auto; /* Let content define width */
        max-width: 400px; /* Max width on desktop */
        border-radius: var(--border-radius);
    }
    body.has-mobile-bottom-nav #pwa-install-prompt-container { /* If class somehow persists */
        bottom: 20px;
    }
}
/* --- Toast Notifications --- */
.toast-notification {
    position: fixed;
    bottom: calc(var(--mobile-bottom-nav-height) + 20px); /* Above bottom nav */
    left: 50%;
    transform: translateX(-50%) translateY(120px); /* Start off-screen */
    background-color: var(--success-darker); /* Default success */
    color: white;
    padding: 14px 22px; /* Generous padding */
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-xl);
    z-index: 2000;
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); /* Smooth ease-out-back like */
    will-change: opacity, transform;
    max-width: 90%;
    text-align: center;
}
@media (min-width: 768px) {
    .toast-notification { bottom: 30px; max-width: 400px; }
}
.toast-notification.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.toast-notification.error { background-color: var(--danger-darker); }
.toast-notification.info { background-color: var(--info-darker); }
.toast-notification.warning { background-color: var(--warning-darker); }
.toast-notification i { margin-right: 10px; }


/* Ensure all individual section styles from previous versions are incorporated and use these variables. */
/* This includes: why-itr-grid, pricing-pillars-grid, service-card-v2-grid, advantage-grid, */
/* comparison-table-v2, process-step-v2-grid, testimonials-grid, client-focus-grid, */
/* free-review-form-section, service page specific layouts (.why-important-section, .calculator-section, etc.) */
/* blog page styles (.blog-hero, .blog-search-filter, .featured-post-card, .article-card, .blog-pagination) */
/* contact page styles, about page styles, etc. */

/* Placeholder for sections like 'service-icon-grid' if its styles were very specific and not covered by global .grid or .card */
.service-icon-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); /* Slightly larger minmax */
    gap: var(--grid-gap);
}
.service-icon-item.card {
    padding: var(--card-padding);
    align-items: center; /* Already centered by text-center */
    transition: var(--transition-base);
}
.service-icon-item.card:hover {
    transform: translateY(-7px) scale(1.04); /* Enhanced hover */
    box-shadow: var(--shadow-lg);
}
/* .service-icon-3d defined globally */
.service-icon-item h4 {
    font-size: 1.05rem; /* Slightly larger */
    margin-bottom: 8px;
    color: var(--heading-color-default);
}
.service-icon-item p {
    font-size: 0.85rem;
    color: var(--text-color-light-default);
    margin-bottom: 12px;
    flex-grow: 1;
}
.service-icon-item .add-to-cart-btn {
    margin-top: auto;
    padding: 7px 14px; /* Adjusted padding */
    font-size: 0.85rem;
}
/* Themed category icons (from before) */
.service-category-registrations .service-icon-3d { /* ... */ }
.service-category-gst .service-icon-3d { /* ... */ }
.service-category-compliance .service-icon-3d { /* ... */ }


/* Add final styles for miscellaneous elements like blog post styling, admin dashboard conceptual styles etc. */
/* For example, the admin dashboard specific styling was in its HTML, that should be moved here under an .admin-page class or similar */

/* Admin Dashboard Conceptual Styles (if body gets class="admin-page") */
.admin-page body { /* Assuming admin dashboard has its own HTML/body tag or a wrapper with this class */
    display: flex; min-height: 100vh; flex-direction: column; padding:0;
    background-color: var(--section-off-white-bg) !important; /* Override body-bg */
}
.admin-header { background-color: var(--heading-color-default); color: white; padding: 1rem; text-align: center; }
.admin-header h1 { color: white; margin:0; font-size: 1.6rem; }
.admin-container { display: flex; flex-grow: 1; }
.admin-sidebar {
    width: 240px; background-color: var(--card-bg); padding: 1.5rem;
    border-right: 1px solid var(--border-color);
}
.admin-sidebar ul { list-style: none; padding: 0; }
.admin-sidebar li a {
    display: block; padding: 0.8rem 1.2rem; text-decoration: none;
    color: var(--text-color-default); border-radius: var(--border-radius-sm); margin-bottom: 8px;
    transition: var(--transition-fast);
}
.admin-sidebar li a:hover, .admin-sidebar li a.active {
    background-color: var(--primary-color); color: var(--white-color);
    box-shadow: var(--shadow-sm); transform: translateX(5px);
}
.admin-sidebar li a i { margin-right: 10px; }

.admin-main-content { flex-grow: 1; padding: 2rem; overflow-y: auto; }
.admin-main-content h2 { margin-top: 0; font-size: 1.8rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.8rem; margin-bottom: 1.5rem;}
.admin-card { background: var(--white-color); padding: 1.5rem; border-radius: var(--border-radius); box-shadow: var(--shadow-md); margin-bottom: 1.5rem; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { border: 1px solid var(--border-color); padding: 0.8rem; text-align: left; font-size:0.95rem;}
.admin-table thead { background-color: var(--section-light-bg); }
.admin-table .actions a { margin-right: 10px; font-size:0.9rem; }
.admin-order-status-select { padding: 0.5rem; font-size: 0.9rem; border-radius: var(--border-radius-sm); border: 1px solid var(--border-color); width: 100%; background-color: var(--input-bg-default); color: var(--input-text-default); }

.filter-bar { margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 15px; align-items: center; padding: 1rem; background-color: var(--card-bg); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); }
.filter-bar select, .filter-bar input { padding: 0.6rem; font-size: 0.95rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); flex-grow: 1; min-width: 150px; }
.filter-bar .cta-button { font-size: 0.95rem; padding: 0.6rem 1rem; flex-shrink: 0;}

.stat-card { text-align: center; padding: 1.5rem; background-color: var(--card-bg); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); }
.stat-card .count { font-size: 2.5rem; font-weight: var(--font-weight-bold); color: var(--primary-darker); margin-bottom: 0.2em; }
.stat-card .label { font-size: 1rem; color: var(--text-color-light-default); }


/* Blog Page Specifics (Index & Post) - Ensure these are robust */
/* .blog-hero, .blog-search-filter, .featured-post-card, .article-card, .blog-pagination, */
/* .blog-post-hero, .blog-post-content-area, .article-content, .post-navigation etc. */
/* These styles from previous refined versions should be included and checked against new variables. */

/* Contact Page Specifics */
/* Styles for .contact-hero-section, .contact-methods-grid, .direct-contact-card, .map-section etc. */
/* should be robust and use current variables. */

/* About Page Specifics */
/* Styles for .about-hero, .mission-vision-container, .team-member-card-v2, .values-grid etc. */
/* should be robust and use current variables. */

/* Offline & Thank You Page Centering Styles */
body.thankyou-page, body.offline-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--container-padding-x-mobile);
    background-color: var(--section-off-white-bg);
}
.thankyou-container, .offline-container {
    background-color: var(--white-color);
    padding: clamp(25px, 5vw, 40px) clamp(20px, 4vw, 35px); /* Responsive padding */
    border-radius: var(--border-radius-lg); /* Larger radius */
    box-shadow: var(--shadow-xl); /* More prominent shadow */
    max-width: 550px; /* Slightly wider */
    width: 95%;
}
.thankyou-container { border-top: 5px solid var(--success-color); }
.offline-container { border-top: 5px solid var(--warning-darker); }
/* ... other specific styles for thankyou/offline page elements ... */
/* Add to your main style.css */

.service-calculator-link-card {
    text-align: center;
    padding: var(--card-padding);
    border-left-width: 5px; /* Themed border */
    border-left-style: solid;
}

/* Theming for these specific cards */
.service-calculator-link-card.itr-theme { border-left-color: var(--itr-color); }
.service-calculator-link-card.itr-theme .cta-button-3d {
    background-color: var(--itr-color); border-color: var(--itr-color);
    box-shadow: 0 6px 0px var(--itr-color-darker), 3px 7px 12px rgba(0,0,0,0.25), var(--shadow-inset);
}
.service-calculator-link-card.itr-theme .cta-button-3d:hover { background-color: var(--itr-color-dark); border-color: var(--itr-color-dark); }
.service-calculator-link-card.itr-theme .cta-button-3d:active { background-color: var(--itr-color-darker); }


.service-calculator-link-card.gst-theme { border-left-color: var(--gst-color); }
.service-calculator-link-card.gst-theme .cta-button-3d {
    background-color: var(--gst-color); border-color: var(--gst-color);
    box-shadow: 0 6px 0px var(--gst-color-darker), 3px 7px 12px rgba(0,0,0,0.25), var(--shadow-inset);
}
.service-calculator-link-card.gst-theme .cta-button-3d:hover { background-color: var(--gst-color-dark); border-color: var(--gst-color-dark); }
.service-calculator-link-card.gst-theme .cta-button-3d:active { background-color: var(--gst-color-darker); }

.service-calculator-link-card.reg-theme { border-left-color: var(--reg-color); }
.service-calculator-link-card.reg-theme .cta-button-3d {
    background-color: var(--reg-color); border-color: var(--reg-color); color: var(--heading-color-default);
    box-shadow: 0 6px 0px var(--reg-color-darker), 3px 7px 12px rgba(0,0,0,0.25), var(--shadow-inset);
}
.service-calculator-link-card.reg-theme .cta-button-3d:hover { background-color: var(--reg-color-dark); border-color: var(--reg-color-dark); color: white; }
.service-calculator-link-card.reg-theme .cta-button-3d:active { background-color: var(--reg-color-darker); }


.service-calculator-link-card.acc-theme { border-left-color: var(--acc-color); }
.service-calculator-link-card.acc-theme .cta-button-3d {
    background-color: var(--acc-color); border-color: var(--acc-color); color: var(--acc-color-darkest);
    box-shadow: 0 6px 0px var(--acc-color-darker), 3px 7px 12px rgba(0,0,0,0.25), var(--shadow-inset);
}
.service-calculator-link-card.acc-theme .cta-button-3d:hover { background-color: var(--acc-color-dark); border-color: var(--acc-color-dark); color: white;}
.service-calculator-link-card.acc-theme .cta-button-3d:active { background-color: var(--acc-color-darker); }


.service-calculator-link-card.ip-theme { border-left-color: var(--ip-color); }
.service-calculator-link-card.ip-theme .cta-button-3d {
    background-color: var(--ip-color); border-color: var(--ip-color);
    box-shadow: 0 6px 0px var(--ip-color-darker), 3px 7px 12px rgba(0,0,0,0.25), var(--shadow-inset);
}
.service-calculator-link-card.ip-theme .cta-button-3d:hover { background-color: var(--ip-color-dark); border-color: var(--ip-color-dark); }
.service-calculator-link-card.ip-theme .cta-button-3d:active { background-color: var(--ip-color-darker); }


.service-calculator-link-card.dsc-theme { border-left-color: var(--dsc-color); }
.service-calculator-link-card.dsc-theme .cta-button-3d {
    background-color: var(--dsc-color); border-color: var(--dsc-color);
    box-shadow: 0 6px 0px var(--dsc-color-darker), 3px 7px 12px rgba(0,0,0,0.25), var(--shadow-inset);
}
.service-calculator-link-card.dsc-theme .cta-button-3d:hover { background-color: var(--dsc-color-dark); border-color: var(--dsc-color-dark); }
.service-calculator-link-card.dsc-theme .cta-button-3d:active { background-color: var(--dsc-color-darker); }


.service-calculator-link-card h3 {
    font-size: var(--font-size-xl);
    margin-top: 0;
    margin-bottom: 10px;
}
.service-calculator-link-card p {
    font-size: var(--font-size-sm);
    color: var(--text-color-light-default);
    margin-bottom: 15px;
    min-height: 40px; /* Ensure cards have similar height */
    flex-grow: 1;
}
.service-calculator-link-card .cta-button-3d {
    font-size: 0.9rem;
    padding: 8px 18px;
    width: auto; /* Fit content */
    display: inline-flex; /* To keep it from stretching full width like block */
    margin-top: auto; /* Push to bottom of card */
}