/* =============================================
   PRINENT TECHNOLOGIES — Custom CSS
   ============================================= */

:root {
    --site-shadow-soft: 0 12px 40px rgba(15, 23, 42, 0.08);
    --site-shadow-glass: 0 24px 80px rgba(15, 23, 42, 0.12);
    --site-border-soft: rgba(255, 255, 255, 0.66);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ts-row-ltr,
    .ts-row-rtl,
    .float-animation,
    .site-aura,
    .newsletter-aura,
    .footer-glow {
        animation: none !important;
    }
}

/* --- Site Shell --- */
html {
    background: #f7f6f1;
}

body.site-shell {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 30%),
        radial-gradient(circle at 85% 12%, rgba(79, 70, 229, 0.11), transparent 24%),
        radial-gradient(circle at 70% 68%, rgba(13, 148, 136, 0.08), transparent 20%),
        linear-gradient(180deg, #fbfaf7 0%, #f5f3ee 100%);
}

.site-backdrop {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.site-aura,
.newsletter-aura,
.footer-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(72px);
    opacity: 0.55;
    animation: driftGlow 16s ease-in-out infinite;
}

.site-aura-one {
    top: -8rem;
    left: -8rem;
    width: 22rem;
    height: 22rem;
    background: rgba(37, 99, 235, 0.22);
}

.site-aura-two {
    top: 20%;
    right: -6rem;
    width: 24rem;
    height: 24rem;
    background: rgba(79, 70, 229, 0.18);
    animation-delay: -6s;
}

.site-aura-three {
    bottom: 8%;
    left: 32%;
    width: 18rem;
    height: 18rem;
    background: rgba(13, 148, 136, 0.14);
    animation-delay: -11s;
}

.site-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 82%);
}

.site-noise {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image: radial-gradient(circle at 1px 1px, rgba(10, 10, 10, 0.55) 1px, transparent 0);
    background-size: 18px 18px;
}

@keyframes driftGlow {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -18px, 0) scale(1.05); }
}

/* --- Typography --- */
.display-xl { font-size: 4.8rem; line-height: 5.15rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -0.04em; }
.display-l  { font-size: 3.7rem; line-height: 4.1rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; letter-spacing: -0.03em; }
.label-text { font-size: 0.72rem; line-height: 1.125rem; font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; }

@media (max-width: 768px) {
    .display-xl { font-size: 2.8rem; line-height: 3.15rem; }
    .display-l  { font-size: 2.25rem; line-height: 2.7rem; }
}

/* --- Section Shells --- */
.page-hero,
.section-shell,
.page-cta {
    position: relative;
    isolation: isolate;
}

.page-hero::before,
.page-hero::after,
.page-cta::before {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.page-hero::before {
    top: -6rem;
    left: -5rem;
    width: 16rem;
    height: 16rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
    opacity: 0.8;
}

.page-hero::after {
    right: -5rem;
    bottom: -6rem;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
}

.page-hero-dark::before {
    background: radial-gradient(circle, rgba(96, 165, 250, 0.24), rgba(255, 255, 255, 0));
    opacity: 0.9;
}

.page-hero-dark::after {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
}

.page-cta::before {
    inset: auto 10% -30% auto;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0));
}

.section-shell > .max-w-7xl,
.section-shell > .max-w-5xl,
.section-shell > .max-w-4xl,
.section-shell > .max-w-3xl,
.page-hero > .max-w-7xl,
.page-hero > .max-w-5xl,
.page-hero > .max-w-4xl,
.page-cta > .max-w-7xl,
.page-cta > .max-w-3xl {
    position: relative;
    z-index: 1;
}

.filter-ribbon {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(18px);
}

.metric-pill {
    min-width: 8.5rem;
    padding: 0.95rem 1.15rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(14px);
}

.info-tile {
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(14px);
}

/* --- Header --- */
.header-shell {
    transition: transform 300ms ease, background-color 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.header-hidden {
    transform: translateY(-120%);
}

.header-scrolled {
    padding-top: 0.75rem !important;
    padding-bottom: 0.55rem !important;
}

.header-scrolled .header-shell {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 70px rgba(15, 23, 42, 0.11);
}

.header-scrolled .header-logo-icon { transform: scale(0.95); }
.header-scrolled .header-logo-text { transform: scale(0.97); }

.nav-link {
    border-radius: 999px;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(79, 70, 229, 0.10));
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 220ms ease, transform 220ms ease;
    z-index: -1;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #2563EB, #4F46E5);
    transition: width 220ms ease, left 220ms ease;
    border-radius: 999px;
}

.nav-link:hover::before,
.nav-link.active::before {
    opacity: 1;
    transform: scale(1);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 60%;
    left: 20%;
}

.megamenu-surface {
    position: relative;
    overflow: hidden;
}

.megamenu-surface::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.4), transparent);
}

/* --- Buttons --- */
.btn-primary,
.btn-ghost {
    position: relative;
    transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease;
    will-change: transform;
}

.btn-primary::before,
.btn-ghost::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
}

.btn-primary:hover,
.btn-ghost:hover {
    transform: translateY(-3px);
}

.btn-primary:hover {
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.28);
}

.btn-ghost:hover {
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.btn-primary:hover::before,
.btn-ghost:hover::before {
    opacity: 1;
}

.btn-primary:active,
.btn-ghost:active {
    transform: translateY(-1px);
}

/* --- Cards --- */
.card-hover,
.service-card,
.product-card,
.course-card,
.testimonial-card,
.milestone-card,
.footer-panel,
.footer-brand-panel,
.form-shell,
.newsletter-shell {
    transform-style: preserve-3d;
}

.card-hover,
.service-card,
.product-card,
.course-card,
.testimonial-card,
.milestone-card,
.footer-panel,
.footer-brand-panel {
    position: relative;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease, border-color 280ms ease, background-color 280ms ease;
    will-change: transform;
}

.card-hover::before,
.service-card::before,
.product-card::before,
.course-card::before,
.testimonial-card::before,
.milestone-card::before,
.footer-panel::before,
.footer-brand-panel::before,
.form-shell::before,
.newsletter-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 250ms ease;
    pointer-events: none;
}

.card-hover:hover,
.service-card:hover,
.product-card:hover,
.course-card:hover,
.testimonial-card:hover,
.milestone-card:hover,
.footer-panel:hover,
.footer-brand-panel:hover {
    transform: translateY(-8px);
    box-shadow: var(--site-shadow-soft);
}

.card-hover:hover::before,
.service-card:hover::before,
.product-card:hover::before,
.course-card:hover::before,
.testimonial-card:hover::before,
.milestone-card:hover::before,
.footer-panel:hover::before,
.footer-brand-panel:hover::before,
.form-shell:hover::before,
.newsletter-shell:hover::before {
    opacity: 1;
}

.service-card {
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 34px rgba(15, 23, 42, 0.06);
}

.service-card .card-link {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 220ms ease, transform 220ms ease;
}

.service-card:hover .card-link {
    opacity: 1;
    transform: translateY(0);
}

.service-card .icon-container,
.product-card .icon-container,
.course-card .icon-container {
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.service-card:hover .icon-container,
.product-card:hover .icon-container,
.course-card:hover .icon-container {
    transform: translateY(-2px) scale(1.05);
}

.product-card,
.course-card,
.testimonial-card {
    border: 1px solid rgba(255, 255, 255, 0.74);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.testimonial-card:hover .quote-text {
    color: #0A0A0A;
}

/* --- Forms --- */
.form-shell {
    position: relative;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow: var(--site-shadow-soft);
    backdrop-filter: blur(22px);
}

/* --- Newsletter & Footer --- */
.newsletter-aura-one {
    top: -4rem;
    left: -2rem;
    width: 14rem;
    height: 14rem;
    background: rgba(37, 99, 235, 0.18);
}

.newsletter-aura-two {
    right: -3rem;
    bottom: -4rem;
    width: 16rem;
    height: 16rem;
    background: rgba(79, 70, 229, 0.16);
    animation-delay: -8s;
}

.footer-shell {
    background:
        radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.16), transparent 24%),
        radial-gradient(circle at 82% 16%, rgba(79, 70, 229, 0.16), transparent 22%),
        linear-gradient(180deg, #101c33 0%, #0f172a 100%);
}

.footer-panel,
.footer-brand-panel {
    padding: 1.5rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px);
}

.footer-brand-panel {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}

.footer-glow-one {
    top: -5rem;
    left: -6rem;
    width: 18rem;
    height: 18rem;
    background: rgba(37, 99, 235, 0.15);
}

.footer-glow-two {
    right: -4rem;
    bottom: -5rem;
    width: 20rem;
    height: 20rem;
    background: rgba(13, 148, 136, 0.13);
    animation-delay: -9s;
}

/* --- Icon Pulse --- */
.icon-container:hover .icon {
    animation: iconPulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iconPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15) rotate(5deg); }
    100% { transform: scale(1); }
}

/* --- Tech Stack Marquee ---
   Layout & animation are fully inline/scoped in the view.
   Only category colour dots are kept here (referenced by the ts-dot-* classes). */
.ts-dot-frontend  { background: #4FC08D }
.ts-dot-css       { background: #06B6D4 }
.ts-dot-language  { background: #F59E0B }
.ts-dot-mobile    { background: #6366F1 }
.ts-dot-platform  { background: #F88400 }
.ts-dot-backend   { background: #7C3AED }
.ts-dot-framework { background: #EF4223 }
.ts-dot-runtime   { background: #339933 }
.ts-dot-database  { background: #2563EB }
.ts-dot-devops    { background: #0891B2 }
.ts-dot-cloud     { background: #FF9900 }
.ts-dot-os        { background: #D4A800 }
.ts-dot-server    { background: #009639 }

/* --- Float Animation --- */
.float-animation {
    animation: gentleFloat 4.5s ease-in-out infinite;
}

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

/* --- Gradient Borders --- */
.gradient-border {
    position: relative;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, #2563EB, #4F46E5, #0D9488);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* --- Gradient Top Border for Cards --- */
.gradient-top-blue    { border-top: 3px solid transparent; border-image: linear-gradient(135deg, #2563EB, #60A5FA) 1; }
.gradient-top-indigo  { border-top: 3px solid transparent; border-image: linear-gradient(135deg, #4F46E5, #818CF8) 1; }
.gradient-top-teal    { border-top: 3px solid transparent; border-image: linear-gradient(135deg, #0D9488, #5EEAD4) 1; }
.gradient-top-amber   { border-top: 3px solid transparent; border-image: linear-gradient(135deg, #F59E0B, #FCD34D) 1; }
.gradient-top-green   { border-top: 3px solid transparent; border-image: linear-gradient(135deg, #059669, #6EE7B7) 1; }
.gradient-top-purple  { border-top: 3px solid transparent; border-image: linear-gradient(135deg, #7C3AED, #C4B5FD) 1; }
.gradient-top-rose    { border-top: 3px solid transparent; border-image: linear-gradient(135deg, #E11D48, #FDA4AF) 1; }
.gradient-top-sky     { border-top: 3px solid transparent; border-image: linear-gradient(135deg, #0284C7, #7DD3FC) 1; }
.gradient-top-orange  { border-top: 3px solid transparent; border-image: linear-gradient(135deg, #EA580C, #FDBA74) 1; }
.gradient-top-cyan    { border-top: 3px solid transparent; border-image: linear-gradient(135deg, #0891B2, #67E8F9) 1; }
.gradient-top-violet  { border-top: 3px solid transparent; border-image: linear-gradient(135deg, #7C3AED, #A78BFA) 1; }
.gradient-top-pink    { border-top: 3px solid transparent; border-image: linear-gradient(135deg, #EC4899, #F9A8D4) 1; }

/* --- Background Patterns --- */
.dot-pattern {
    background-image: radial-gradient(circle, #0A0A0A 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 0.03;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.grid-pattern {
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* --- Stacked Cards (About section) --- */
.stacked-cards:hover .card-back  { transform: rotate(4deg) translateX(-8px); }
.stacked-cards:hover .card-mid   { transform: rotate(-2deg) translateX(6px); }
.stacked-cards:hover .card-front { transform: translateY(-10px); }

.card-back,
.card-mid,
.card-front {
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Process Section SVG Line --- */
.process-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

/* --- Content / Prose --- */
.prose {
    color: #475569;
}

.prose > * + * {
    margin-top: 1.1rem;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    color: #0A0A0A;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-top: 1.75rem;
}

.prose h2 { font-size: 1.8rem; }
.prose h3 { font-size: 1.35rem; }

.prose p,
.prose li {
    font-size: 1rem;
    line-height: 1.8;
}

.prose ul,
.prose ol {
    padding-left: 1.2rem;
}

.prose li + li {
    margin-top: 0.55rem;
}

.prose a {
    color: #2563EB;
    text-decoration: none;
    border-bottom: 1px solid rgba(37, 99, 235, 0.18);
}

.prose strong {
    color: #0A0A0A;
}

.prose img {
    border-radius: 1.2rem;
    box-shadow: var(--site-shadow-soft);
}

/* --- Accordions and Details --- */
details {
    transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

details[open] {
    box-shadow: var(--site-shadow-soft);
    border-color: rgba(37, 99, 235, 0.18);
}

details summary::-webkit-details-marker {
    display: none;
}

/* --- Focus Styles --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
    border-radius: 8px;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FAFAF8; }
::-webkit-scrollbar-thumb { background: #D8D3C9; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #6B7280; }

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE POLISH
   ═══════════════════════════════════════════ */

/* Prevent horizontal overflow from decorative elements */
html, body { overflow-x: hidden; }

/* ── Tablet and below (≤1023px) ── */
@media (max-width: 1023px) {
    /* Reduce section padding */
    .section-shell { padding-top: 3rem; padding-bottom: 3rem; }

    /* Make service card reveal-links always visible on touch */
    .service-card .card-link {
        opacity: 1;
        transform: translateY(0);
    }

    /* Disable card hover lift on touch (prevents sticky hover) */
    .card-hover:hover,
    .service-card:hover,
    .product-card:hover,
    .course-card:hover,
    .testimonial-card:hover,
    .milestone-card:hover,
    .footer-panel:hover,
    .footer-brand-panel:hover {
        transform: none;
    }
}

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {
    /* Tighter section spacing */
    section { padding-left: 1rem; padding-right: 1rem; }

    /* Stack stat/metric pills vertically on small screens */
    .hero-el-5.flex { gap: 0.5rem; }

    /* Ensure buttons hit 44px min tap target */
    .hero-btn-primary,
    .btn-primary,
    .btn-ghost,
    a[class*="btn"] { min-height: 44px; }

    /* Reduce large heading sizes further */
    h1 { font-size: clamp(1.75rem, 7vw, 2.4rem) !important; }
    h2 { font-size: clamp(1.5rem, 5.5vw, 2rem) !important; }

    /* Prose tighter on mobile */
    .prose h2 { font-size: 1.4rem; }
    .prose h3 { font-size: 1.15rem; }
}

/* ── Small phones (≤480px) ── */
@media (max-width: 480px) {
    /* Tighter padding */
    section { padding-left: 0.75rem; padding-right: 0.75rem; }

    /* Scale down footer panels */
    .footer-panel,
    .footer-brand-panel { padding: 1rem; border-radius: 1rem; }

    /* Smaller form shell */
    .form-shell { padding: 1.25rem; }

    /* Newsletter */
    .ins2-input { font-size: 0.8125rem; padding: 12px 14px; }
}

/* ── Reduce animations on mobile for perf / battery ── */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
    /* Slow down large background animations */
    .absolute[style*="animation:orb-drift"],
    .absolute[style*="animation:grid-march"] {
        animation-duration: 30s !important;
    }
}

/* Users who prefer reduced motion — kill all non-essential */
@media (prefers-reduced-motion: reduce) {
    .fa, .fb, .fc, .fa2, .fa3, .fa4,
    .wfa, .wfb, .wfc, .wfa2, .wfa3, .wfb2,
    .float-animation,
    .hero-badge,
    .hero-bar {
        animation: none !important;
    }
}