/* ============================================================
   JCypher - Global Stylesheet
   Modern, corporate, blue-themed design system with
   glassmorphism, gradients, smooth animations and full
   responsiveness (mobile-first).
   ============================================================ */

/* ---------- 1. Design Tokens (CSS variables) ---------- */
:root {
    /* Brand blues */
    --blue-50:  #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;   /* Primary */
    --blue-700: #1d4ed8;
    --navy:     #0b1f3a;    /* Dark navy */
    --navy-800: #0f2547;

    /* Neutrals */
    --white:      #ffffff;
    --light-gray: #f4f7fb;
    --gray-100:   #eef2f7;
    --gray-200:   #e2e8f0;
    --gray-400:   #94a3b8;
    --gray-500:   #64748b;
    --gray-600:   #475569;
    --gray-800:   #1e293b;
    --ink:        #0f172a;

    /* Feedback */
    --success: #16a34a;
    --success-bg: #dcfce7;
    --error: #dc2626;
    --error-bg: #fee2e2;
    --whatsapp: #25D366;
    --whatsapp-dark: #128C7E;

    /* Effects */
    --gradient: linear-gradient(135deg, var(--blue-600), var(--blue-400));
    --gradient-dark: linear-gradient(135deg, var(--navy), var(--blue-700));
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
    --shadow:    0 10px 30px rgba(37, 99, 235, .10);
    --shadow-lg: 0 20px 50px rgba(15, 23, 42, .15);
    --radius:    16px;
    --radius-sm: 10px;
    --container: 1200px;

    /* Type */
    --font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    color: var(--gray-800);
    background: var(--white);
    line-height: 1.65;
    overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.25rem; }

p { color: var(--gray-600); }
a { color: var(--blue-600); text-decoration: none; transition: color .2s ease; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }

.section { padding: 5.5rem 0; }
.section-alt { background: var(--light-gray); }

/* ---------- 3. Reusable bits ---------- */
.eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue-600);
    background: var(--blue-50);
    padding: .4rem .9rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.gradient-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-head { text-align: center; max-width: 680px; margin: 0 auto 3rem; }
.section-head p { font-size: 1.05rem; margin-top: .75rem; }

/* ---------- 4. Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .95rem;
    padding: .8rem 1.6rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: .55rem 1.1rem; font-size: .85rem; }
.btn-lg { padding: .95rem 2rem; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--gradient); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { box-shadow: 0 14px 34px rgba(37, 99, 235, .35); color: #fff; }

.btn-ghost { background: transparent; color: var(--blue-600); border-color: var(--blue-200); }
.btn-ghost:hover { background: var(--blue-50); color: var(--blue-700); }

.btn-light { background: #fff; color: var(--blue-700); }
.btn-light:hover { box-shadow: var(--shadow-lg); }

.btn-ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost-light:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ---------- 5. Navbar ---------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--gray-100);
    transition: box-shadow .3s ease;
}
.navbar.scrolled { box-shadow: var(--shadow-sm); }

.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; color: var(--ink); }
.brand-logo {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--gradient); color: #fff;
    display: grid; place-items: center;
    font-weight: 800; font-size: 1.2rem;
    box-shadow: var(--shadow);
}
.brand-light { color: #fff; }
.brand-light .brand-name { color: #fff; }

.nav-links { display: flex; align-items: center; gap: 1.8rem; }
.nav-links a { color: var(--gray-600); font-weight: 500; font-size: .95rem; position: relative; }
.nav-links a:not(.btn):hover, .nav-links a.active { color: var(--blue-600); }
.nav-links a.active::after {
    content: ""; position: absolute; left: 0; bottom: -6px;
    width: 100%; height: 2px; background: var(--gradient); border-radius: 2px;
}
.nav-cta { color: #fff !important; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5.5 Floating Support Button ---------- */
.support-float {
    position: fixed;
    bottom: 3.5rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background: var(--gradient);
    border-radius: 50%;
    border: none;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    z-index: 99;
    box-shadow: var(--shadow-lg);
    transition: transform .3s ease, box-shadow .3s ease;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

/* Idle "sonar" pulse drawn on a ring BEHIND the button. Keeping the pulse
   off the button itself means it never competes with the hover transform,
   which is what made the icon flicker / jump on mouse-leave. */
.support-float::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--blue-500);
    z-index: -1;
    pointer-events: none;
    animation: pulse-ring 2.2s ease-out infinite;
}

.support-hidden {
    opacity: 0;
    transform: scale(0.3) translateY(30px);
    pointer-events: none;
}

/* Shown / resting state. The entrance plays ONCE (no `forwards`), then the
   button simply holds these values. Nothing re-triggers on mouse-leave, so
   the hover transform can fall back smoothly via `transition`. */
.support-visible {
    opacity: 1;
    transform: none;
    animation: popupSupport .6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.support-float:hover {
    transform: scale(1.1) translateY(-4px);
    box-shadow: 0 12px 32px rgba(37, 99, 235, .4);
}

.support-icon { display: block; }

/* ---------- 5.6 Scroll to Top Button (rounded-square, on-brand) ---------- */
.scroll-top-btn {
    position: fixed;
    bottom: 3.5rem;
    left: 2rem;                   /* bottom-LEFT corner of the page */
    width: 54px;
    height: 54px;
    background: var(--gradient);
    border-radius: 18px;              /* squircle: modern rounded-square */
    border: none;
    display: grid;
    place-items: center;
    color: #fff;
    z-index: 99;
    cursor: pointer;
    padding: 0;
    /* Layered shadow + crisp inner edge for depth */
    box-shadow: 0 8px 22px rgba(37, 99, 235, .38),
                inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow .3s ease, border-radius .3s ease;
}

.scroll-top-hidden {
    opacity: 0;
    transform: scale(0.3) translateY(30px);
    pointer-events: none;
}

.scroll-top-visible {
    opacity: 1;
    transform: none;
    animation: popupScroll .6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The vector arrow itself */
.scroll-top-icon {
    width: 22px;
    height: 22px;
    display: block;
    animation: arrowBounce 1.8s ease-in-out infinite;
}

/* Hover: lift the tile, soften corners toward a circle, push glow.
   The arrow keeps its gentle bounce (we no longer kill it on hover, so
   there's no replay/jump when the mouse leaves). */
.scroll-top-btn:hover {
    transform: translateY(-5px);
    border-radius: 50%;
    box-shadow: 0 16px 32px rgba(37, 99, 235, .5),
                inset 0 1px 0 rgba(255, 255, 255, .3);
}

.scroll-top-btn:active {
    transform: translateY(-1px) scale(.96);
}

@keyframes popupScroll {
    0%   { opacity: 0; transform: scale(0.3) translateY(30px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Gentle continuous bounce hints the arrow is interactive */
@keyframes arrowBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

@keyframes popupSupport {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(30px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Expanding ring used by .support-float::before */
@keyframes pulse-ring {
    0%   { transform: scale(1);   opacity: .5; }
    70%  { opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- 6. Flash messages ---------- */
.flash-stack { margin-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.flash {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .85rem 1.1rem; border-radius: var(--radius-sm);
    font-size: .92rem; font-weight: 500;
    animation: slideDown .4s ease;
}
.flash-success { background: var(--success-bg); color: var(--success); border: 1px solid #bbf7d0; }
.flash-error   { background: var(--error-bg);   color: var(--error);   border: 1px solid #fecaca; }
.flash-close { background: none; border: none; font-size: 1.3rem; cursor: pointer; color: inherit; line-height: 1; }

/* ---------- 7. Hero ---------- */
.hero { position: relative; padding: 5rem 0 6rem; overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }

.hero-blob {
    position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; z-index: 0;
    pointer-events: none;
}
.hero-blob-1 { width: 420px; height: 420px; background: var(--blue-200); top: -120px; right: -80px; }
.hero-blob-2 { width: 360px; height: 360px; background: #c7d2fe; bottom: -140px; left: -100px; }

.hero-content, .hero-card { position: relative; z-index: 1; }
.hero-title { margin-bottom: 1.2rem; }
.hero-subtitle { font-size: 1.15rem; max-width: 540px; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-trust { display: flex; align-items: center; gap: .7rem; margin-top: 2rem; color: var(--gray-500); font-size: .9rem; }
.hero-trust span { color: #f59e0b; letter-spacing: 2px; }

/* Glassmorphism preview card */
.glass-card {
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: rotate(1.5deg);
    transition: transform .4s ease;
}
.glass-card:hover { transform: rotate(0) translateY(-6px); }
.glass-card-head { display: flex; gap: .5rem; padding: 1rem 1.2rem; background: rgba(15,23,42,.04); }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot-red { background: #ef4444; } .dot-yellow { background: #f59e0b; } .dot-green { background: #22c55e; }
.glass-card-body { padding: 1.5rem; font-family: 'Courier New', monospace; font-size: .92rem; }
.code-line { padding: .25rem 0; color: var(--gray-800); }
.code-line .kw { color: var(--blue-700); font-weight: 700; }
.code-line .fn { color: #7c3aed; }
.code-line .cm { color: var(--gray-400); }
.mini-stats { display: flex; gap: 1rem; margin-top: 1.5rem; }
.mini-stats div { flex: 1; background: rgba(37,99,235,.08); border-radius: 12px; padding: .8rem; text-align: center; }
.mini-stats strong { display: block; font-size: 1.2rem; color: var(--blue-700); font-family: var(--font-head); }
.mini-stats span { font-size: .72rem; color: var(--gray-500); }

/* ---------- 8. Stats band ---------- */
.stats { background: var(--gradient-dark); padding: 3rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.stat-card { text-align: center; color: #fff; }
.stat-num { font-size: clamp(2rem, 4vw, 3rem); color: #fff; font-family: var(--font-head); }
.stat-card p { color: rgba(255,255,255,.8); font-weight: 500; margin-top: .3rem; }

/* ---------- 9. Card grids ---------- */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cards-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cards-grid-3 { grid-template-columns: repeat(4, 1fr); }

.service-card, .feature-card, .testimonial-card {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius);
    padding: 2rem 1.8rem;
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card:hover, .feature-card:hover, .testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--blue-200);
}
.service-icon, .feature-icon {
    width: 56px; height: 56px; border-radius: 14px;
    display: grid; place-items: center; font-size: 1.6rem;
    background: var(--blue-50); margin-bottom: 1.1rem;
    transition: transform .3s ease;
}
.service-card:hover .service-icon, .feature-card:hover .feature-icon { transform: scale(1.1) rotate(-5deg); }
.service-card h3, .feature-card h3 { margin-bottom: .5rem; }
.service-card p, .feature-card p { font-size: .95rem; }
.card-link { display: inline-block; margin-top: 1rem; font-weight: 600; font-size: .9rem; }
.card-link:hover { color: var(--blue-700); }

/* ---------- 10. Tech stack ---------- */
.tech-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.tech-chip {
    background: #fff; border: 1px solid var(--gray-200);
    padding: .65rem 1.4rem; border-radius: 999px;
    font-weight: 600; color: var(--gray-600);
    box-shadow: var(--shadow-sm);
    transition: .3s ease;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
}
.tech-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.tech-chip:hover { color: var(--blue-600); border-color: var(--blue-400); transform: translateY(-4px); box-shadow: var(--shadow); }
.tech-chip:hover .tech-logo { transform: scale(1.15) rotate(-8deg); }

/* ---------- 11. Process ---------- */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.process-step {
    position: relative; background: #fff; border: 1px solid var(--gray-100);
    border-radius: var(--radius); padding: 2rem 1.8rem; overflow: hidden;
    transition: .3s ease;
}
.process-step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.process-num {
    font-family: var(--font-head); font-weight: 800; font-size: 2.4rem;
    background: var(--gradient); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; margin-bottom: .5rem;
}
.process-step::after {
    content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%;
    background: var(--gradient); transform: scaleY(0); transform-origin: top; transition: transform .3s ease;
}
.process-step:hover::after { transform: scaleY(1); }

/* ---------- 12. Testimonials ---------- */
.testimonial-card { position: relative; }
.quote-mark { font-family: var(--font-head); font-size: 3.5rem; line-height: 1; color: var(--blue-200); margin-bottom: -1rem; }
.testimonial-text { font-size: 1rem; color: var(--gray-800); font-style: italic; margin-bottom: 1.5rem; }
.testimonial-author { display: flex; align-items: center; gap: .9rem; }
.avatar {
    width: 46px; height: 46px; border-radius: 50%; background: var(--gradient);
    color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--font-head);
}
.testimonial-author strong { display: block; color: var(--ink); font-size: .95rem; }
.testimonial-author span { font-size: .82rem; color: var(--gray-500); }

/* ---------- 13. CTA band ---------- */
.cta { background: var(--gradient-dark); padding: 4.5rem 0; position: relative; overflow: hidden; }
.cta-inner { text-align: center; max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
.cta h2 { color: #fff; margin-bottom: .8rem; }
.cta p { color: rgba(255,255,255,.85); font-size: 1.1rem; margin-bottom: 2rem; }
.cta .hero-actions { justify-content: center; }

/* ---------- 14. Footer ---------- */
.footer { background: var(--navy); color: rgba(255,255,255,.75); padding-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer-about p { color: rgba(255,255,255,.6); margin-top: 1rem; font-size: .92rem; max-width: 320px; }
.footer-col h4 { color: #fff; margin-bottom: 1.1rem; font-size: 1rem; }
.footer-col ul li { margin-bottom: .6rem; }
.footer-col a { color: rgba(255,255,255,.65); font-size: .92rem; }
.footer-col a:hover { color: var(--blue-400); }
.footer-contact li { display: flex; gap: .5rem; margin-bottom: .8rem; font-size: .92rem; }

.socials { display: flex; gap: .6rem; margin-top: 1.3rem; }
.socials a {
    width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
    background: rgba(255,255,255,.08); color: #fff; font-weight: 700; font-size: .85rem; transition: .3s;
}
.socials a:hover { background: var(--blue-600); transform: translateY(-3px); }
.socials-dark a { background: var(--blue-50); color: var(--blue-600); }
.socials-dark a:hover { background: var(--blue-600); color: #fff; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1.4rem 0; }
.footer-bottom .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.footer-bottom p { color: rgba(255,255,255,.55); font-size: .85rem; }
.footer-legal a { color: rgba(255,255,255,.55); }
.footer-legal a:hover { color: var(--blue-400); }

/* ---------- 15. Page hero (About/Contact) ---------- */
.page-hero { position: relative; text-align: center; padding: 4.5rem 0 3.5rem; background: var(--light-gray); overflow: hidden; }
.page-hero h1 { margin-bottom: 1rem; }
.page-hero p { max-width: 620px; margin: 0 auto; font-size: 1.1rem; }
.page-hero .container { position: relative; z-index: 1; }

/* ---------- 16. About: two-col + stat panel + timeline ---------- */
.two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.two-col h2 { margin: .5rem 0 1rem; }
.two-col p { margin-bottom: 1rem; }

.stat-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.stat-panel-item { background: var(--gradient); color: #fff; border-radius: var(--radius); padding: 1.8rem; text-align: center; box-shadow: var(--shadow); }
.stat-panel-item strong { display: block; font-family: var(--font-head); font-size: 2rem; }
.stat-panel-item span { font-size: .85rem; opacity: .9; }

.timeline { position: relative; max-width: 820px; margin: 0 auto; padding-left: 2rem; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--blue-200); }
.timeline-item { position: relative; padding: 0 0 2.2rem 2rem; }
.timeline-marker { position: absolute; left: -2rem; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--blue-600); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--blue-200); }
.timeline-content { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1.4rem 1.6rem; box-shadow: var(--shadow-sm); transition: .3s; }
.timeline-content:hover { box-shadow: var(--shadow); transform: translateX(4px); }
.timeline-year { display: inline-block; font-family: var(--font-head); font-weight: 800; color: var(--blue-600); font-size: 1.1rem; }
.timeline-content h3 { margin: .2rem 0 .4rem; }

/* ---------- 16.5 Portfolio ---------- */
.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
.portfolio-card {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    display: flex;
    flex-direction: column;
}
.portfolio-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--blue-200);
}
.portfolio-thumb {
    background: var(--gradient-dark);
    padding: 2.8rem 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}
.portfolio-thumb-icon { font-size: 3rem; line-height: 1; transition: transform .3s ease; }
.portfolio-card:hover .portfolio-thumb-icon { transform: scale(1.15) rotate(-5deg); }
.portfolio-domain {
    color: rgba(255,255,255,.85);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .04em;
}
.portfolio-body { padding: 1.8rem; display: flex; flex-direction: column; flex: 1; }
.portfolio-category {
    color: var(--blue-600);
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .4rem;
}
.portfolio-body h3 { margin-bottom: .5rem; }
.portfolio-body p { font-size: .95rem; margin-bottom: 1.2rem; }
.portfolio-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.portfolio-tag {
    background: var(--blue-50);
    color: var(--blue-700);
    font-size: .78rem;
    font-weight: 600;
    padding: .3rem .8rem;
    border-radius: 999px;
}
.portfolio-visit { margin-top: auto; align-self: flex-start; }

/* ---------- 16.6 Website Templates (concept cards, ported from the demo gallery) ---------- */
.concepts {
    /* Local palette so the cards render exactly like the original gallery */
    --blue: #2563EB; --blue-700: #1D4ED8; --blue-400: #60A5FA;
    --soft: #F4F7FB; --card: #FFFFFF; --line: #E2E8F0; --line-soft: #EEF2F7;
    --muted: #64748B;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.concept {
    position: relative; display: block; text-decoration: none; color: inherit;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s,
                opacity .6s ease;
}
.concept:hover, .concept:focus-visible {
    transform: translateY(-8px);
    border-color: var(--blue-200);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(37,99,235,.10);
}
.concept:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* Keep the hover lift working alongside the site's scroll-reveal */
.concept.reveal.visible:hover, .concept.reveal.visible:focus-visible { transform: translateY(-8px); }

/* mini previews — pure CSS thumbnails of each direction */
.thumb { height: 250px; position: relative; overflow: hidden; background: var(--soft); border-bottom: 1px solid var(--line); }
.thumb-ui { position: absolute; inset: 18px 18px 0; border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: 0 12px 30px rgba(15,23,42,.16); }
.t-nav { height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.t-dot { width: 5px; height: 5px; border-radius: 50%; }
.t-pill { height: 5px; border-radius: 3px; }

/* meridian thumb — light glass */
.t-meridian { background: linear-gradient(160deg,#F5F8FF,#E9F0FF); }
.t-meridian .t-nav { background: rgba(255,255,255,.8); border-bottom: 1px solid #E3EAF7; }
.t-meridian .t-dot { background: #2563EB; }
.t-meridian .t-pill { background: #C7D6F5; }
.t-meridian .t-hero { padding: 20px 14px; display: flex; gap: 12px; }
.t-meridian .t-copy { flex: 1; }
.t-meridian .t-h { height: 11px; border-radius: 5px; background: #12203E; margin-bottom: 7px; }
.t-meridian .t-h.grad { background: linear-gradient(90deg,#2563EB,#38BDF8); width: 72%; }
.t-meridian .t-s { height: 5px; border-radius: 3px; background: #B9C8E6; margin-top: 5px; }
.t-meridian .t-btn { display: inline-block; margin-top: 11px; width: 52px; height: 15px; border-radius: 8px; background: #2563EB; }
.t-meridian .t-glass {
    width: 86px; border-radius: 9px; background: rgba(255,255,255,.65);
    border: 1px solid rgba(255,255,255,.9); backdrop-filter: blur(4px);
    box-shadow: 0 8px 22px rgba(37,99,235,.18); padding: 8px;
}
.t-meridian .t-code { height: 4px; border-radius: 2px; background: #93B4F5; margin-bottom: 5px; }
.t-meridian .t-blob { position: absolute; width: 130px; height: 130px; border-radius: 50%; filter: blur(30px); opacity: .55; }
.t-meridian .t-blob.b1 { background: #60A5FA; top: -40px; right: -30px; }
.t-meridian .t-blob.b2 { background: #38BDF8; bottom: -60px; left: -20px; }

/* cobalt thumb — dark grid */
.t-cobalt { background: #060A16; }
.t-cobalt::after {
    content: ""; position: absolute; inset: 0;
    background:
        linear-gradient(rgba(96,165,250,.09) 1px,transparent 1px),
        linear-gradient(90deg,rgba(96,165,250,.09) 1px,transparent 1px);
    background-size: 22px 22px;
}
.t-cobalt .t-nav { background: rgba(6,10,22,.9); border-bottom: 1px solid rgba(96,165,250,.18); position: relative; z-index: 1; }
.t-cobalt .t-dot { background: #38BDF8; box-shadow: 0 0 6px #38BDF8; }
.t-cobalt .t-pill { background: rgba(148,180,255,.3); }
.t-cobalt .t-hero { position: relative; z-index: 1; padding: 18px 14px; }
.t-cobalt .t-tag { display: inline-block; font-family: 'JetBrains Mono',monospace; font-size: 6px; letter-spacing: .16em; color: #38BDF8; border: 1px solid rgba(56,189,248,.4); border-radius: 3px; padding: 2px 5px; margin-bottom: 8px; }
.t-cobalt .t-h { height: 11px; border-radius: 5px; background: #E4ECFF; margin-bottom: 6px; }
.t-cobalt .t-h.glow { background: linear-gradient(90deg,#3B82F6,#38BDF8); width: 64%; box-shadow: 0 0 14px rgba(59,130,246,.7); }
.t-cobalt .t-s { height: 5px; border-radius: 3px; background: rgba(148,180,255,.28); margin-top: 5px; }
.t-cobalt .t-mods { display: flex; gap: 6px; margin-top: 12px; }
.t-cobalt .t-mod { flex: 1; height: 34px; border: 1px solid rgba(96,165,250,.28); border-radius: 5px; background: rgba(59,130,246,.07); }

/* flux thumb — electric gradient */
.t-flux { background: #0A0E27; }
.t-flux::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(60% 55% at 20% 25%, rgba(79,124,255,.4), transparent 70%),
        radial-gradient(50% 45% at 82% 70%, rgba(34,211,238,.25), transparent 70%);
}
.t-flux .t-nav { background: rgba(10,14,39,.9); border-bottom: 1px solid rgba(155,168,217,.2); position: relative; z-index: 1; }
.t-flux .t-dot { background: #22D3EE; }
.t-flux .t-pill { background: rgba(155,168,217,.35); }
.t-flux .t-hero { position: relative; z-index: 1; padding: 18px 14px; display: flex; gap: 12px; align-items: flex-start; }
.t-flux .t-stack { flex: 1; display: grid; gap: 7px; }
.t-flux .t-big { height: 16px; border-radius: 4px; background: #F2F5FF; width: 78%; }
.t-flux .t-big.hollow { background: transparent; border: 2px solid rgba(155,168,217,.6); width: 64%; }
.t-flux .t-big.grad { background: linear-gradient(90deg,#4F7CFF,#22D3EE,#8B5CF6); width: 88%; }
.t-flux .t-orb {
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; margin-top: 8px;
    background: conic-gradient(from 180deg,#4F7CFF,#22D3EE,#8B5CF6,#4F7CFF);
}

/* mosaic thumb — bento board */
.t-mosaic { background: #EDF1F8; }
.t-mosaic .t-nav { background: #EDF1F8; border-bottom: 1px solid #DFE6F2; }
.t-mosaic .t-dot { background: #2563EB; border-radius: 3px; }
.t-mosaic .t-pill { background: #C9D4E8; }
.t-mosaic .t-hero { padding: 12px; display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 44px 40px; gap: 7px; }
.t-mosaic .t-tile { background: #fff; border: 1px solid #DFE6F2; border-radius: 7px; }
.t-mosaic .t-tile.blue { background: #2563EB; border-color: #2563EB; }
.t-mosaic .t-tile.navy { background: #101E42; border-color: #101E42; }
.t-mosaic .t-tile.tall { grid-row: span 2; }

/* voyage thumb — night to day */
.t-voyage { background: linear-gradient(180deg,#04081A 0%,#12275C 42%,#2563EB 72%,#DCEAFF 100%); }
.t-voyage .t-nav { background: rgba(4,8,26,.85); border-bottom: 1px solid rgba(157,184,255,.25); }
.t-voyage .t-dot { background: #FFD37E; }
.t-voyage .t-pill { background: rgba(157,184,255,.4); }
.t-voyage .t-hero { padding: 16px 14px 0 30px; position: relative; }
.t-voyage .t-rail { position: absolute; left: 15px; top: 18px; bottom: 12px; width: 2px; background: linear-gradient(180deg,#FFD37E,rgba(255,255,255,.25)); }
.t-voyage .t-rail::before, .t-voyage .t-rail::after {
    content: ""; position: absolute; left: -2.5px; width: 7px; height: 7px; border-radius: 50%; background: #FFD37E;
}
.t-voyage .t-rail::after { top: auto; bottom: 0; background: #fff; }
.t-voyage .t-h { height: 12px; border-radius: 5px; background: #EFF4FF; width: 76%; margin-bottom: 7px; }
.t-voyage .t-h.gold { background: #FFD37E; width: 50%; }
.t-voyage .t-s { height: 5px; border-radius: 3px; background: rgba(239,244,255,.5); margin-top: 5px; }
.t-voyage .t-card {
    margin-top: 14px; width: 70%; height: 34px; border-radius: 6px; background: rgba(255,255,255,.85);
    box-shadow: 0 6px 16px rgba(4,8,26,.3); transform: rotate(-1.5deg);
}

/* atlas thumb — editorial paper */
.t-atlas { background: #FBFCFE; }
.t-atlas .t-nav { background: #FBFCFE; border-bottom: 1.5px solid #101B33; }
.t-atlas .t-dot { background: #1E40AF; border-radius: 1px; }
.t-atlas .t-pill { background: #C9D4E8; }
.t-atlas .t-hero { padding: 18px 16px; }
.t-atlas .t-serif { font-family: 'Fraunces',serif; font-weight: 700; color: #101B33; font-size: 17px; line-height: 1.15; letter-spacing: -.01em; margin-bottom: 8px; }
.t-atlas .t-serif em { font-style: italic; color: #1E40AF; }
.t-atlas .t-rule { height: 1px; background: #D8E0EE; margin: 10px 0; }
.t-atlas .t-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #E6ECF6; }
.t-atlas .t-num { font-family: 'JetBrains Mono',monospace; font-size: 6px; color: #1E40AF; }
.t-atlas .t-line { height: 4px; border-radius: 2px; background: #22314F; flex: 1; }
.t-atlas .t-line.short { flex: 0 0 40%; background: #B9C6DE; }

/* summit thumb — friendly corporate + product panel */
.t-summit { background: linear-gradient(180deg,#F7FAFF,#FFFFFF); }
.t-summit .t-nav { background: rgba(255,255,255,.9); border-bottom: 1px solid #E3E8F2; }
.t-summit .t-dot { background: #2563EB; border-radius: 3px; }
.t-summit .t-pill { background: #C9D6F0; }
.t-summit .t-hero { padding: 18px 14px; display: flex; gap: 12px; align-items: center; }
.t-summit .t-copy { flex: 1; }
.t-summit .t-h { height: 10px; border-radius: 5px; background: #111C33; width: 88%; margin-bottom: 6px; }
.t-summit .t-h.two { width: 60%; }
.t-summit .t-s { height: 5px; border-radius: 3px; background: #C7D2E6; margin-top: 4px; }
.t-summit .t-btn { display: inline-block; margin-top: 10px; width: 54px; height: 15px; border-radius: 5px; background: #2563EB; }
.t-summit .t-panel {
    width: 96px; border-radius: 8px; background: #fff; border: 1px solid #E3E8F2;
    box-shadow: 0 8px 20px rgba(17,28,51,.12); padding: 9px;
}
.t-summit .t-prow { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.t-summit .t-track { flex: 1; height: 4px; border-radius: 2px; background: #EEF2F9; overflow: hidden; }
.t-summit .t-track i { display: block; height: 100%; background: #2563EB; }

/* slate thumb — swiss minimal */
.t-slate { background: #FFFFFF; }
.t-slate .t-nav { background: #FFFFFF; border-bottom: 1px solid #E6E8EC; }
.t-slate .t-dot { background: #1E5EF3; }
.t-slate .t-pill { background: #E1E4EA; }
.t-slate .t-hero { padding: 24px 16px; }
.t-slate .t-big { height: 15px; border-radius: 3px; background: #16181D; width: 82%; margin-bottom: 8px; }
.t-slate .t-big.accent { background: #1E5EF3; width: 48%; }
.t-slate .t-s { height: 5px; border-radius: 3px; background: #DCDFE4; margin-top: 6px; width: 70%; }
.t-slate .t-nums { display: flex; gap: 0; margin-top: 18px; border-top: 1px solid #E6E8EC; padding-top: 12px; }
.t-slate .t-nb { flex: 1; padding-right: 8px; }
.t-slate .t-nb + .t-nb { border-left: 1px solid #E6E8EC; padding-left: 8px; }
.t-slate .t-nv { height: 9px; border-radius: 2px; background: #16181D; width: 70%; margin-bottom: 4px; }
.t-slate .t-nc { height: 3px; border-radius: 2px; background: #C9CCD2; width: 90%; }

/* crest thumb — stately navy enterprise */
.t-crest .t-nav { background: #FFFFFF; border-bottom: 1px solid #DCE3F0; }
.t-crest .t-dot { background: #2D5BD7; }
.t-crest .t-pill { background: #C7D0E4; }
.t-crest .t-hero {
    background: #0B2C6F; padding: 20px 14px; display: flex; gap: 14px; align-items: center; position: relative; overflow: hidden;
}
.t-crest .t-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
    background-size: 20px 20px;
}
.t-crest .t-copy { flex: 1; position: relative; z-index: 1; }
.t-crest .t-h { height: 10px; border-radius: 3px; background: #EAF0FB; width: 90%; margin-bottom: 6px; }
.t-crest .t-h.two { width: 64%; }
.t-crest .t-s { height: 5px; border-radius: 2px; background: rgba(215,227,250,.5); margin-top: 4px; }
.t-crest .t-btn { display: inline-block; margin-top: 10px; width: 52px; height: 14px; background: #fff; }
.t-crest .t-frame { width: 60px; height: 60px; position: relative; flex: 0 0 auto; z-index: 1; }
.t-crest .t-frame span { position: absolute; border: 1.5px solid rgba(255,255,255,.4); }
.t-crest .t-frame .f1 { inset: 0; }
.t-crest .t-frame .f2 { inset: 14px; border-color: rgba(122,158,235,.6); }
.t-crest .t-frame .f3 { inset: 28px; background: #2D5BD7; border: 0; }

/* concept meta */
.concept .meta { padding: 22px 24px 26px; }
.concept .meta-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.c-num { font-family: 'JetBrains Mono',monospace; font-size: .7rem; color: var(--blue); letter-spacing: .18em; }
.c-name { font-family: var(--font-head); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; color: var(--ink); }
.concept .meta p { color: var(--gray-600); font-size: .92rem; line-height: 1.6; margin-bottom: 16px; }
.c-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.c-tag {
    font-size: .7rem; font-weight: 600; color: var(--blue);
    background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: 999px; padding: 4px 10px;
}
.c-cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: .92rem; color: var(--ink);
}
.c-cta .arrow { transition: transform .3s; }
.concept:hover .c-cta .arrow { transform: translateX(5px); }
.c-cta u { text-decoration: none; border-bottom: 2px solid var(--blue); padding-bottom: 2px; }

@media (max-width: 1080px) { .concepts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .concepts { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

/* ---------- 17. Contact ---------- */
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.5rem; align-items: start; }
.contact-info { background: var(--gradient-dark); color: #fff; border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow); }
.contact-info h2 { color: #fff; }
.contact-info p { color: rgba(255,255,255,.8); margin: .8rem 0 2rem; }
.contact-list li { display: flex; gap: 1rem; margin-bottom: 1.4rem; align-items: flex-start; }
.contact-ico { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0; }
.contact-list strong { display: block; color: #fff; font-size: .95rem; }
.contact-list a, .contact-list span { color: rgba(255,255,255,.78); font-size: .92rem; }
.contact-list a:hover { color: #fff; }

.contact-form-wrap { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow); }
.contact-form-wrap h2 { margin-bottom: 1.5rem; }

/* ---------- 18. Legal pages (Privacy & Terms) ---------- */
.legal-content { max-width: 920px; margin: 0 auto; }
.last-updated { background: var(--blue-50); border-left: 4px solid var(--blue-600); padding: 1rem 1.2rem; border-radius: var(--radius-sm); margin-bottom: 2rem; font-size: .95rem; color: var(--gray-700); }

.legal-section { margin-bottom: 2.5rem; }
.legal-section h2 { font-size: 1.4rem; margin-bottom: 1rem; color: var(--ink); }
.legal-section h3 { font-size: 1.1rem; margin: 1.2rem 0 .6rem; color: var(--gray-800); font-weight: 600; }
.legal-section p { margin-bottom: .9rem; line-height: 1.75; }
.legal-section a { color: var(--blue-600); font-weight: 500; }
.legal-section a:hover { color: var(--blue-700); text-decoration: underline; }

.legal-list { margin: 1rem 0 1rem 2rem; }
.legal-list li { list-style: disc; margin-bottom: .6rem; color: var(--gray-700); line-height: 1.65; }
.legal-list li strong { color: var(--ink); font-weight: 600; }

.contact-box { background: var(--light-gray); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1.5rem; margin: 1.5rem 0; }
.contact-box p { margin: .5rem 0; color: var(--gray-700); }
.contact-box strong { display: block; color: var(--ink); margin-bottom: .5rem; font-size: 1.05rem; }
.contact-box a { color: var(--blue-600); text-decoration: none; }
.contact-box a:hover { text-decoration: underline; }

/* ---------- 19. Forms ---------- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .45rem; color: var(--gray-800); }
.req { color: var(--error); }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; font-family: var(--font-body); font-size: .95rem;
    padding: .8rem 1rem; border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm); background: var(--white); color: var(--ink);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.form-group textarea { resize: vertical; }
.field-error { display: block; color: var(--error); font-size: .8rem; margin-top: .3rem; min-height: 1rem; }
.form-group.invalid input, .form-group.invalid select, .form-group.invalid textarea { border-color: var(--error); }

/* ---------- 19. Admin auth ---------- */
.admin-auth-body { min-height: 100vh; display: grid; place-items: center; background: var(--light-gray); position: relative; overflow: hidden; }
.auth-wrap { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 1.5rem; }
.auth-card { background: rgba(255,255,255,.85); backdrop-filter: blur(16px); border: 1px solid #fff; border-radius: var(--radius); padding: 2.5rem; box-shadow: var(--shadow-lg); text-align: center; }
.auth-brand { justify-content: center; margin-bottom: 1.2rem; }
.auth-card h1 { font-size: 1.6rem; }
.auth-sub { font-size: .92rem; margin-bottom: 1.5rem; }
.auth-card form { text-align: left; margin-top: 1rem; }
.auth-card .flash { margin-bottom: 1rem; text-align: left; }
.auth-back { display: inline-block; margin-top: 1.2rem; font-size: .88rem; color: var(--gray-500); }
.auth-back:hover { color: var(--blue-600); }
.auth-forgot { display: block; text-align: right; margin-top: .9rem; font-size: .88rem; font-weight: 600; }
.auth-forgot:hover { color: var(--blue-700); }

/* ---------- 20. Admin dashboard ---------- */
.admin-body { background: var(--light-gray); min-height: 100vh; }
.admin-topbar { background: #fff; border-bottom: 1px solid var(--gray-100); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-sm); }
.admin-topbar-inner { max-width: 1280px; margin: 0 auto; padding: .9rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.admin-tag { font-size: .6rem; background: var(--blue-600); color: #fff; padding: .15rem .5rem; border-radius: 6px; vertical-align: middle; font-family: var(--font-body); }
.admin-user { display: flex; align-items: center; gap: .8rem; font-size: .9rem; color: var(--gray-600); }

/* Section navigation (Enquiries / Content / Services / …) */
.admin-nav { border-top: 1px solid var(--gray-100); background: #fff; }
.admin-nav-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 1.5rem;
    display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: thin;
}
.admin-nav-link {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .85rem 1rem; white-space: nowrap;
    font-size: .9rem; font-weight: 600; color: var(--gray-500);
    border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.admin-nav-link:hover { color: var(--blue-600); }
.admin-nav-link.active { color: var(--blue-600); border-bottom-color: var(--blue-600); }

.admin-main { max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.admin-flash-stack { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.5rem; }
.admin-title { font-size: 1.6rem; margin-bottom: 1.5rem; }

/* Page header: title on the left, primary action on the right */
.admin-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.admin-head .admin-title { margin-bottom: .25rem; }
.admin-sub { font-size: .92rem; color: var(--gray-500); }

/* Content Management tab strip */
.admin-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.admin-tab {
    padding: .55rem 1.1rem; border-radius: 999px;
    font-size: .88rem; font-weight: 600; color: var(--gray-600);
    background: #fff; border: 1px solid var(--gray-200); transition: .2s;
}
.admin-tab:hover { border-color: var(--blue-400); color: var(--blue-600); }
.admin-tab.active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }

/* Panels & forms */
.admin-panel {
    background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius);
    padding: 1.8rem; box-shadow: var(--shadow-sm);
}
.admin-panel-title { font-size: 1.1rem; margin-bottom: 1.2rem; }
.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.admin-form .form-group { margin-bottom: 1.1rem; }
.admin-form-actions { display: flex; gap: .8rem; align-items: center; margin-top: 1.5rem; }
.field-hint { display: block; margin-top: .35rem; font-size: .8rem; color: var(--gray-400); }
.admin-note {
    font-size: .85rem; color: var(--gray-600); background: var(--blue-50);
    border-left: 3px solid var(--blue-400); border-radius: var(--radius-sm);
    padding: .8rem 1rem; margin-top: .5rem;
}
.admin-empty { color: var(--gray-500); text-align: center; padding: 2.5rem 1rem; }

/* Show/hide switch */
.admin-switch { display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; font-weight: 500; }
.admin-switch input { width: 18px; height: 18px; accent-color: var(--blue-600); cursor: pointer; }

/* Content tables */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th {
    text-align: left; padding: .8rem .7rem; border-bottom: 2px solid var(--gray-100);
    font-family: var(--font-head); font-size: .78rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--gray-500); white-space: nowrap;
}
.admin-table td { padding: .85rem .7rem; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--light-gray); }
.cell-icon { font-size: 1.3rem; }
.cell-truncate { max-width: 380px; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-actions { display: flex; gap: .4rem; align-items: center; }
.cell-actions form { display: inline; }

.badge { display: inline-block; padding: .25rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.badge-on { background: var(--success-bg); color: var(--success); }
.badge-off { background: var(--gray-100); color: var(--gray-500); }
.btn-danger { background: var(--error-bg); color: var(--error); border-color: transparent; }
.btn-danger:hover { background: var(--error); color: #fff; }

.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.admin-stat-card { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1.6rem; display: flex; align-items: center; gap: 1.2rem; box-shadow: var(--shadow-sm); transition: .3s; }
.admin-stat-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.admin-stat-ico { width: 56px; height: 56px; border-radius: 14px; background: var(--blue-50); display: grid; place-items: center; font-size: 1.5rem; }
.admin-stat-card h3 { font-size: 2rem; color: var(--blue-700); }
.admin-stat-card p { font-size: .88rem; }

.admin-panel { background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-sm); }
.admin-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; flex-wrap: wrap; gap: 1rem; }
.admin-panel-head h2 { font-size: 1.3rem; }

.admin-filters { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--gray-100); }
.admin-filters input[type="search"] { flex: 1; min-width: 220px; padding: .6rem .9rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-family: var(--font-body); }
.admin-filters input[type="date"] { padding: .55rem .7rem; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-family: var(--font-body); }
.admin-filters label { font-size: .85rem; color: var(--gray-500); display: flex; align-items: center; gap: .4rem; }
.admin-filters input:focus { outline: none; border-color: var(--blue-500); }

.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table thead th { text-align: left; padding: .9rem .8rem; background: var(--light-gray); color: var(--gray-600); font-family: var(--font-head); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.admin-table tbody td { padding: .85rem .8rem; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); vertical-align: middle; }
.admin-table tbody tr:hover { background: var(--blue-50); }
.msg-cell { max-width: 220px; color: var(--gray-500); }
.badge { display: inline-block; background: var(--blue-50); color: var(--blue-700); padding: .25rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.empty-row { text-align: center; padding: 2.5rem !important; color: var(--gray-400); }

.actions-cell { white-space: nowrap; }
.btn-icon { background: var(--gray-100); border: none; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: .95rem; transition: .2s; }
.btn-icon:hover { background: var(--blue-100); }
.btn-icon-danger:hover { background: var(--error-bg); }

/* ---------- Follow-up status dropdown ---------- */
.status-cell { white-space: nowrap; }
.status-select {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .78rem;
    padding: .35rem 1.6rem .35rem .7rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    /* Custom chevron */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    transition: box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.status-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, .2); }
.status-select:disabled { opacity: .6; cursor: progress; }

/* Per-status colours (pill background + text) */
.status-new           { background: var(--gray-100);  color: var(--gray-600); }
.status-contacted     { background: #e0f2fe;          color: #0369a1; }   /* sky */
.status-in-discussion { background: #ede9fe;          color: #6d28d9; }   /* violet */
.status-in-progress   { background: #fef3c7;          color: #b45309; }   /* amber */
.status-completed     { background: #dcfce7;          color: #15803d; }   /* green */
.status-closed        { background: #fee2e2;          color: #b91c1c; }   /* red */

/* Brief confirmation pulse after a successful save */
.status-select.status-saved { box-shadow: 0 0 0 3px rgba(22, 163, 74, .35); }

/* Small "last updated" timestamp under the dropdown */
.status-time { display: block; margin-top: .25rem; font-size: .68rem; color: var(--gray-400); }

/* ---------- 21. Modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(4px); display: none; place-items: center; z-index: 200; padding: 1.5rem; }
.modal-overlay.open { display: grid; animation: fadeIn .25s ease; }
/* Flex column so the header stays put and the body scrolls if the
   content is taller than the screen (keeps the Save button reachable). */
.modal {
    background: #fff; border-radius: var(--radius); width: 100%; max-width: 560px;
    box-shadow: var(--shadow-lg); overflow: hidden; animation: slideUp .3s ease;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 3rem);   /* fit within the viewport (overlay has 1.5rem padding) */
}
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 1.3rem 1.6rem; border-bottom: 1px solid var(--gray-100); flex-shrink: 0; }
.modal-head h2 { font-size: 1.2rem; }
.modal-close { background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--gray-400); line-height: 1; }
.modal-close:hover { color: var(--error); }
.modal-body { padding: 1.6rem; overflow-y: auto; }
.detail-row { display: flex; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--gray-100); }
.detail-row:last-child { border-bottom: none; }
.detail-row .label { width: 120px; flex-shrink: 0; font-weight: 600; color: var(--gray-500); font-size: .85rem; }
.detail-row .value { color: var(--ink); font-size: .92rem; word-break: break-word; }

/* Admin comment box inside the detail modal */
.detail-notes { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--gray-100); }
.detail-notes label { display: block; font-weight: 600; color: var(--gray-600); font-size: .85rem; margin-bottom: .5rem; }
.detail-notes textarea {
    width: 100%; font-family: var(--font-body); font-size: .9rem;
    padding: .7rem .9rem; border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm); color: var(--ink); resize: vertical;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.detail-notes textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.notes-actions {
    display: flex; align-items: center; gap: .8rem; margin-top: .8rem;
    /* Keep the Save button visible at the bottom while the modal scrolls */
    position: sticky; bottom: 0; background: #fff; padding: .6rem 0 .2rem;
}
.notes-status { font-size: .82rem; color: var(--gray-500); }
.notes-status.ok { color: var(--success); }
.notes-status.err { color: var(--error); }

/* 📝 marker shown on table rows that have an admin comment */
.note-flag { font-size: .95rem; vertical-align: middle; margin-right: .15rem; }

/* ---------- 22. Scroll-reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .reveal { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}

/* ---------- 23. Responsive ---------- */
@media (max-width: 992px) {
    .hero-inner, .two-col, .contact-grid { grid-template-columns: 1fr; }
    /* Hero collapses to one column — hide the code-preview card so the
       headline gets the full width instead of a stacked image. */
    .hero-card { display: none; }
    .cards-grid, .cards-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .portfolio-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .admin-stats { grid-template-columns: 1fr; }
}

/* Portrait orientation (incl. large tablets/monitors rotated to portrait):
   the headline + card can't sit comfortably in one row, so stack to a
   single column and drop the code-preview card. */
@media (orientation: portrait) {
    .hero-inner { grid-template-columns: 1fr; }
    .hero-card { display: none; }
}

@media (max-width: 720px) {
    /* Mobile nav: slide-in panel */
    .nav-toggle { display: flex; }
    .nav-links {
        position: fixed; top: 72px; right: 0; height: calc(100vh - 72px);
        width: min(80vw, 320px); background: #fff; flex-direction: column;
        align-items: flex-start; gap: 1.2rem; padding: 2rem 1.8rem;
        box-shadow: var(--shadow-lg); transform: translateX(110%); transition: transform .35s ease;
    }
    .nav-links.open { transform: translateX(0); }
    .nav-cta { width: 100%; }

    .section { padding: 3.5rem 0; }
    .cards-grid, .cards-grid-2, .cards-grid-3, .process-grid, .form-row, .stat-panel { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }

    /* Technology Stack: proper 2-column grid (chips fill each column) */
    .tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
    .tech-chip { width: 100%; justify-content: flex-start; padding: .6rem .8rem; gap: .5rem; font-size: .85rem; }
    .tech-logo { width: 28px; height: 28px; font-size: .95rem; }
    .contact-info, .contact-form-wrap { padding: 1.8rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .footer-bottom .container { flex-direction: column; text-align: center; }
    .admin-user span { display: none; }
    .admin-two-col { grid-template-columns: 1fr; }
    .admin-panel { padding: 1.3rem; }
    .admin-head { flex-direction: column; align-items: stretch; }

    /* Mobile Support buttons */
    .support-float { bottom: 2.5rem; right: 1.5rem; width: 52px; height: 52px; font-size: 1.5rem; }
    .scroll-top-btn { bottom: 2.5rem; left: 1.5rem; right: auto; width: 48px; height: 48px; border-radius: 16px; }
    .scroll-top-btn .scroll-top-icon { width: 20px; height: 20px; }
}