/* Styles for every page. Tailwind colour classes in the markup are mapped to the palette at the end of this file. */

/* Palette (light theme):
   1 primary   white      #ffffff  page background and cards
   2 secondary blue       #2563eb  buttons, links, accents, active states
   3 tertiary  dark blue  #0a192f  headings and main text, top banner, dark sections, button hover
   4 fourth    grey       #64748b  captions, secondary text, labels */
:root {
    --white: #ffffff;
    --surface: #f8fafc;
    --surface-2: #f1f5f9;
    --blue: #2563eb;
    --blue-soft: #eff6ff;
    --blue-line: #bfdbfe;
    --navy: #0a192f;
    --navy-raised: #112240;
    --grey: #64748b;
    --grey-light: #94a3b8;
    --line: #e2e8f0;
    color-scheme: light;
}

html { background-color: var(--white); }

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--white);
    color: var(--navy);
    overflow-x: hidden;
}

::selection { background: rgba(37, 99, 235, 0.18); color: var(--navy); }

/* Circuit-board grid: fixed, full viewport, never interactive. Content sits above it (z-index >= 2). */
.circuit-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--white);

    /* Major lines every 80px, minor lines every 20px (grey) */
    background-image:
        linear-gradient(to right, rgba(100, 116, 139, 0.12) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(100, 116, 139, 0.12) 1px, transparent 1px),
        linear-gradient(to right, rgba(100, 116, 139, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(100, 116, 139, 0.05) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;

    /* Fade toward the screen edges */
    mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
}

/* Solder points at each 80px intersection (blue) */
.circuit-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(37, 99, 235, 0.22) 2px, transparent 2.5px);
    background-size: 80px 80px;
    background-position: -40px -40px;
}

/* Rising, fading decorative particles (blue) */
.particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.particle {
    position: absolute;
    bottom: -10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.45);
    opacity: 0;
    animation: rise linear infinite;
}
@keyframes rise {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.25; }
    100% { transform: translateY(-110vh) scale(1.2); opacity: 0; }
}

/* Frosted glass (header, form panel) */
.glass {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(10, 25, 47, 0.06);
}

/* Mobile menu: slides in from the right */
.mobile-menu { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

/* Hamburger: three dark blue lines that morph into an X */
.hamburger { width: 24px; height: 18px; position: relative; display: block; }
.hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--navy);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 8px; }
.hamburger span:nth-child(3) { top: 16px; }
.menu-open .hamburger span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.menu-open .hamburger span:nth-child(2) { opacity: 0; }
.menu-open .hamburger span:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* Scrollbar hiding (scroll areas) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Title reveal */
.reveal-blur {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(24px);
    transition: opacity 0.9s ease-out, filter 0.9s ease-out, transform 0.9s ease-out;
}
.reveal-blur.reveal-active {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.5s ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .particles { display: none; }
    .mobile-menu, .hamburger span { transition: none; }
    .reveal-blur { opacity: 1; filter: none; transform: none; transition: none; }
    .animate-fade-in { animation: none; }
}

/* Google Translate (language flags in the header): hide Google's own bar, tooltip and highlight */
body > .skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[style] { background: transparent !important; box-shadow: none !important; }

/* ------------------------------------------------------------------
   Tailwind colour classes, mapped to the palette.
   "html ." raises specificity above the Tailwind CDN's own rules.
   Tailwind's own light colours are used for everything not listed.
   ------------------------------------------------------------------ */

/* 3 · Dark blue: headings and main text, dark sections */
html .text-gray-900, html .text-slate-800, html .text-slate-900, html .text-blue-900 { color: var(--navy); }
html .text-blue-900\/80 { color: rgba(10, 25, 47, 0.8); }
html .bg-slate-900, html .bg-gray-900 { background-color: var(--navy); }
html .bg-slate-900\/40 { background-color: rgba(10, 25, 47, 0.4); }
html .bg-slate-800 { background-color: var(--navy-raised); }
html .bg-slate-800\/60 { background-color: rgba(17, 34, 64, 0.6); }
html .bg-slate-800\/50 { background-color: rgba(17, 34, 64, 0.5); }
html .hover\:bg-slate-800:hover { background-color: var(--navy-raised); }

/* 4 · Grey: captions and secondary text */
html .text-gray-400, html .text-gray-500, html .text-gray-600 { color: var(--grey); }
html .text-gray-700 { color: #334155; }
html input::placeholder, html textarea::placeholder { color: var(--grey-light); }

/* 2 · Blue: links, accents, active states, buttons */
html .text-blue-400, html .text-blue-500, html .text-blue-600, html .text-blue-700, html .text-blue-800 { color: var(--blue); }
html .hover\:text-blue-600:hover, html .group:hover .group-hover\:text-blue-600 { color: var(--blue); }
html .bg-blue-600, html .bg-blue-500 { background-color: var(--blue); }
html .border-blue-500, html .border-blue-600, html .hover\:border-blue-500:hover,
html .focus\:border-blue-500:focus { border-color: var(--blue); }
html .bg-blue-50, html .bg-blue-50\/50 { background-color: var(--blue-soft); }
html .border-blue-100, html .border-blue-200 { border-color: var(--blue-line); }
html .ring-blue-600 { --tw-ring-color: var(--blue); }

/* Button hover: blue -> dark blue */
html .hover\:bg-blue-700:hover, html .hover\:bg-blue-600:hover, html .group:hover .group-hover\:bg-blue-600 {
    background-color: var(--navy);
    color: var(--white);
}

/* 1 · White surfaces and light borders */
html .bg-white { background-color: var(--white); }
html .bg-gray-50, html .bg-slate-50 { background-color: var(--surface); }
html .bg-gray-100, html .bg-slate-100 { background-color: var(--surface-2); }
html .border-gray-100, html .border-gray-200 { border-color: var(--line); }