@font-face {
  font-family: 'Tomorrow';
  src: url('/fonts/Tomorrow-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomorrow';
  src: url('/fonts/Tomorrow-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomorrow';
  src: url('/fonts/Tomorrow-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Tomorrow';
  src: url('/fonts/Tomorrow-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tomorrow';
  src: url('/fonts/Tomorrow-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nova Square';
  src: url('/fonts/NovaSquare-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jockey One';
  src: url('/fonts/JockeyOne-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Orbitron';
  src: url('/fonts/Orbitron-VariableFont_wght.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Share Tech Mono';
  src: url('/fonts/ShareTechMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Paul Bennis';
  src: url('/fonts/Paul Bennis.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Global Styles ---- */
:root {
    --placeholder-color: rgba(255, 255, 255, 0.55);
    --wrap-margin: 40px;
    --font-body: 'Tomorrow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-ui: 'Nova Square', system-ui, sans-serif;
    --font-accent: 'Jockey One', 'Nova Square', sans-serif; /* or swap to Nova Square if you want bolds */
    --font-mono: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html {
    width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    font-family: 'Tomorrow', Arial, Helvetica, sans-serif;
    color: white;
    background-color: black;
    font-family: var(--font-body);
    overflow-x: hidden; /* prevent stray horizontal overflow */
    overflow-y: auto;
}

/* keep images responsive even when width/height attrs are present */
img[width][height] { height: auto; max-width: 100%; }

/* screen-reader only */
.visually-hidden {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

.fade-out {
    opacity: 0;
    transition: opacity 0.45s ease;
}

/* Desktop-friendly services showcase and carousel image */
.services-showcase {
    display: flex;
    gap: 18px;
    justify-content: center;
    margin: 0 auto 32px auto;
    flex-wrap: nowrap;
    max-width: 760px; /* keep the showcase contained on large screens */
    overflow: hidden;
}
#services-carousel-img {
    transition: opacity 0.45s ease;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(17,204,238,0.25);
    background: #111;
    will-change: opacity;
}
#services-carousel-img, .services-img { width: 100%; max-width: 100%; height: auto; display: block; }

.accordion {
    width: 100%;
    max-width: 700px;
    margin: 0 auto 32px auto;
    border-radius: 12px;
    background: rgba(0,0,0,0.5);
    box-shadow: 0 2px 12px rgba(17,204,238,0.12);
}
.accordion-item {
    border-bottom: 1px solid #11ccee33;
}
.accordion-item:last-child { border-bottom: none; }
.accordion-toggle {
    width: 100%;
    background: none;
    color: #11ccee;
    font-family: 'Nova Square', Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    font-weight: 400; /* Jockey One is a single-weight display font */
    padding: 18px 24px;
    text-align: left;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background .2s;
    border-radius: 0; /* default: rectangular; round only on first item */
    display: flex;
    align-items: center;
    gap: 10px;
}
.accordion-item:first-child .accordion-toggle { border-radius: 12px 12px 0 0; }
.accordion-item:last-child .accordion-toggle { border-radius: 0 0 12px 12px; }
.accordion-toggle .accordion-icon {
    font-size: 1.2em;
    margin-right: 10px;
    color: #ffd700;
    font-weight: bold;
    transition: color 0.2s;
}
.accordion-toggle:hover {
    background: rgba(17,204,238,0.08);
}
/* When the last item is open, keep hover rectangular for consistent shape */
.accordion-item:last-child.active .accordion-toggle:hover { border-radius: 0; }
.tier-price {
    margin-left: auto; /* push price to the right inside the flex toggle */
    color: #ffd700;
    font-weight: 400;
    font-size: 1rem;
    align-self: center;
}
.market-price {
    color: #ffd700; /* match tier price color for consistency */
    font-style: italic;
    font-weight: 400;
}
.accordion-content {
    display: none; /* visible only when JS or .active sets it */
    overflow: hidden;
    height: 0;
    opacity: 0;
    padding: 0 24px 0 24px; /* collapse vertical padding when closed */
    color: #c9c9c9;
    font-size: 1rem;
    background: none;
    transition: height .28s ease, opacity .24s ease, padding .24s ease;
}
.accordion-item.active .accordion-content {
    display: block;
    height: auto; /* keep fully open after JS clears inline height */
    opacity: 1;
    padding: 0 24px 18px 24px;
}
/* Services only: extra breathing room below open items, but not the last listed one */
#services .accordion-item.active:not(:last-child) .accordion-content {
    padding-bottom: 28px;
}
.legal-note {
    margin-top: 12px;
    color: #9c9c9c;
    font-size: 0.8rem;
    line-height: 1.5;
    border-top: 1px dashed rgba(17,204,238,0.25);
    padding-top: 10px;
}
/* Website Development configurator */
.wd-form { display: grid; gap: 16px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,1px,1px); white-space: nowrap; border: 0; }
.wd-packages { border: 1px solid rgba(17,204,238,0.25); border-radius: 12px; padding: 12px; }
.wd-package { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 14px; align-items: start; padding: 14px; border-radius: 10px; transition: background .2s ease, box-shadow .2s ease; position: relative; }
.wd-package + .wd-package { border-top: 1px solid rgba(17,204,238,0.15); margin-top: 8px; padding-top: 22px; }
.wd-package input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.wd-radio { width: 18px; height: 18px; border: 2px solid #11ccee; border-radius: 4px; display: inline-block; margin-top: 2px; box-shadow: 0 0 8px rgba(17,204,238,0.2) inset; position: relative; }
/* blue check mark indicator */
.wd-radio::after { content: '\2713'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%) scale(0.6); color: #11ccee; opacity: 0; transition: opacity .12s ease; font-weight: 700; }
/* Show the check mark when the corresponding radio is selected */
.wd-package input[type="radio"]:checked + .wd-radio::after { opacity: 1; }
/* Improve affordance */
.wd-package { cursor: pointer; }
.wd-package-title { font-family: 'Nova Square', Arial, Helvetica, sans-serif; color: #fff; font-weight: 700; }
.wd-package-price { color: #ffd700; font-weight: 400; }
.wd-package:hover { background: rgba(17,204,238,0.06); box-shadow: 0 4px 14px rgba(17,204,238,0.12) inset; }
.wd-package .feature-list { grid-column: 2 / -1; margin-top: -2px; padding-left: 22px; color: #c9c9c9; list-style: none; }
.wd-package .feature-list li { position: relative; margin: 8px 0; padding-left: 18px; }
/* Use a right chevron like the navbar caret */
.wd-package .feature-list li::before {
    content: ">";
    position: absolute;
    left: 0;
    top: 0;
    color: #11ccee;
    font-weight: 800;
}

/* Centered delivery/revision note under each package, reuse .option-meta for styling */
.wd-package-meta { grid-column: 2 / -1; text-align: center; margin-top: 6px; }

.wd-options-wrap { border-top: 1px solid rgba(17,204,238,0.2); padding-top: 16px; }
.wd-options-title { text-align: center; color: #11ccee; font-family: 'Nova Square', Arial, Helvetica, sans-serif; margin: 6px 0 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.wd-options { display: grid; grid-template-columns: 1fr; gap: 10px; }
.option-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 12px; align-items: center; padding: 10px 12px; border: 1px solid rgba(17,204,238,0.15); border-radius: 8px; transition: background .2s ease, border-color .2s ease; }
.option-item:hover { background: rgba(17,204,238,0.05); border-color: rgba(17,204,238,0.3); }
.option-item input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.wd-check { width: 18px; height: 18px; border: 2px solid #11ccee; border-radius: 4px; display: inline-block; position: relative; }
.wd-check::after { content: '\2713'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%) scale(0.6); color: #11ccee; opacity: 0; transition: opacity .12s ease; font-weight: 700; }
.option-item input[type="checkbox"]:checked + .wd-check::after { opacity: 1; }
.option-label { color: #e8e8e8; }
.option-meta { color: #9adff0; font-size: 0.9em; }
.option-price { color: #ffd700; font-weight: 400; }

/* Quantity items */
.option-item-qty { grid-template-columns: auto 1fr auto; }
.option-item-qty .qty-control { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 6px; border: 1px solid rgba(17,204,238,0.35); border-radius: 8px; padding: 4px 6px; background: rgba(0,0,0,0.4); box-shadow: 0 0 8px rgba(17,204,238,0.15) inset; }
.qty-btn { appearance: none; background: rgba(17, 204, 238, 0.85); color: #00141a; border: none; border-radius: 8px; width: 24px; height: 24px; display: grid; place-items: center; font-weight: 800; cursor: pointer; transition: transform .12s ease, filter .2s ease, box-shadow .2s ease; box-shadow: 0 3px 10px rgba(17,204,238,0.18); }
.qty-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.qty-btn:active { transform: translateY(0); filter: brightness(1); }
.qty-input { width: 34px; text-align: center; color: #fff; background: transparent; border: none; outline: none; font: inherit; font-weight: 500; font-size: 0.95em; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input[type=number] { appearance: textfield; -moz-appearance: textfield; }

@media (max-width: 480px) {
    .qty-btn { width: 22px; height: 22px; }
    .qty-input { width: 30px; font-size: 0.9em; }
    .option-item { gap: 8px 10px; }
}

/* Ultra-narrow devices (e.g., Z Fold cover screen): prevent Services accordion overflow */
@media (max-width: 420px) {
    /* Remove extra horizontal padding inside the Services accordion */
    #services .accordion-toggle { padding-left: 12px; padding-right: 12px; flex-wrap: wrap; }
    #services .accordion-content { padding-left: 0; padding-right: 0; }

    /* Ensure grid/flex children can shrink instead of forcing overflow */
    #services .accordion,
    #services .accordion-content,
    #services .wd-form,
    #services .wd-packages,
    #services .wd-package,
    #services .wd-options,
    #services .option-item { min-width: 0; }

    /* Slightly tighten inner paddings to fit comfortably */
    #services .wd-packages { padding-left: 10px; padding-right: 10px; }
    #services .wd-package { padding-left: 10px; padding-right: 10px; }
    #services .option-item { padding-left: 10px; padding-right: 10px; }

    /* Allow long labels to wrap cleanly */
    #services .wd-package-title,
    #services .option-label,
    #services .tier-price { overflow-wrap: anywhere; word-break: normal; }

    /* If wrapping occurs, keep price neatly aligned on its own line */
    #services .tier-price { flex: 1 1 100%; text-align: right; margin-left: 0; }
}

@media (min-width: 1024px) {
    .wd-options { grid-template-columns: 1fr 1fr; }
    /* If the number of options is odd, make the last one span both columns */
    .wd-options > .option-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.wd-estimate { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 14px; }
.wd-estimate-hint { margin-top: 8px; color: #a9dfea; font-size: 0.9rem; text-align: left; }
.wd-estimate-line { color: #e8e8e8; font-weight: 600; margin-top: 24px; }
#wd-estimate-inline { color: #ffd700; font-weight: 600; }
.btn-quote { appearance: none; background: rgba(17, 204, 238, 0.85); color: #000; margin-top: 24px;border: none; border-radius: 12px; padding: 10px 14px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 6px 20px rgba(17,204,238,0.25); transition: transform .12s ease, box-shadow .2s ease, filter .2s ease; }
.btn-quote i { font-size: 1rem; }
.btn-quote:hover { filter: brightness(1.06); box-shadow: 0 8px 26px rgba(17,204,238,0.35); transform: translateY(-1px); }
.btn-quote:active { transform: translateY(0); filter: brightness(1); }
.quote-cta { display: flex; justify-content: center; margin-top: 14px; }

/* Testimonials: review button – black text at rest, white on hover */
#testimonials .quote-cta .btn-quote { color: #000; }
#testimonials .quote-cta .btn-quote:hover { color: #fff; }

.check-list {
    list-style: none;
    padding-left: 0;
}
.check-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    color: #c9c9c9;
    font-size: 1rem;
}
.check-list li:before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: #11ccee;
    font-weight: bold;
    font-size: 1.1em;
}

/* Wrapper-scoped fixed-look background video (parallax-like) */
.wrapper-video,
.wrapper-veil {
    position: absolute; /* fixed-look via JS transform sync */
    left: var(--pad-l, 24px);
    right: var(--pad-r, 24px);
    top: var(--pad-t, 24px);
    height: calc(100vh - var(--pad-t, 24px) - var(--pad-b, 24px)); /* viewport minus bezel */
    border-radius: 16px; /* inner screen curvature */
    overflow: hidden;
}
.wrapper-video {
    z-index: 0;
    opacity: 0;
    animation: fadeIn 1s ease-in forwards;
    animation-delay: 1s;
    pointer-events: none;
    --video-zoom: 1.44; /* ~25% larger than previous desktop default */
}
.wrapper-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* default: keep aspect ratio */
    object-position: left bottom; /* pin to bottom-left */
    transform: scale(var(--video-zoom));
    transform-origin: left bottom; /* overflow goes right/top */
    will-change: transform;
    background: #000; /* bars blend into black */
    pointer-events: none;
}
/* Fallback when autoplay fails */
.no-video-autoplay .wrapper-video { 
  background: #000 url('/img/bg-01-poster.webp') center / cover no-repeat; 
}
.no-video-autoplay .wrapper-video video { display: none !important; }
.wrapper-veil {
    z-index: 1; /* above video, below content */
    /* Tunable veil for readability over video */
    --veil-alpha: 0.8;
    --veil-blur: 2px;
    background: rgba(0, 0, 0, var(--veil-alpha));
    backdrop-filter: blur(var(--veil-blur));
    pointer-events: none;
}

/* Fixed fallback when sticky is unreliable on some browsers */
.site-nav.is-stuck {
    position: fixed;
    top: calc(6px + env(safe-area-inset-top));
    width: auto; /* width will be set via JS to match wrapper inner width */
    left: auto;  /* cleared; set via JS */
    right: auto; /* cleared; set via JS if needed */
    z-index: 30; /* above wrapper pseudo-border */
}

/* Opening border animation — fixed to viewport center */
.frame-anim {
    position: fixed;
    border: 2px solid #11ccee;
    border-radius: 20px;
    box-shadow: 0 0 20px #11ccee;
    background: transparent;
    z-index: 3;
    pointer-events: none;
    animation: openBorders 1.5s ease-in-out forwards;
}

.content-wrapper {
    box-sizing: border-box;
    display: block;
    position: relative;
    border-radius: 20px;
    border: 2px solid transparent; /* revealed after frame anim */
    box-shadow: none;               /* revealed after frame anim */
    /* Define bezel paddings as variables so background panes can inset to exclude them */
    --pad-t: 80px; --pad-r: 24px; --pad-b: 100px; --pad-l: 24px;
    padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
    background: #000; /* bezel painted black */
    /* Respect device safe areas to prevent visual gaps on notched devices */
    margin-left: calc(var(--wrap-margin) + env(safe-area-inset-left));
    margin-right: calc(var(--wrap-margin) + env(safe-area-inset-right));
    margin-top: var(--wrap-margin);
    margin-bottom: 0;
    /* Fill available width minus margins; avoids 100vw quirks on mobile */
    width: auto;
    max-width: calc(100% - (var(--wrap-margin) * 2) - env(safe-area-inset-left) - env(safe-area-inset-right));
    min-width: 0; /* prevent min-content width from forcing shrink */
    z-index: 2; /* base layer for pseudo overlay */
    /* Do not set overflow hidden here; it breaks position: sticky descendants. */
}

/* Larger tap target for chevron: merged into main rule below */

.content-wrapper.revealed-border { /* visual border drawn via ::after */ will-change: opacity; }
.content-wrapper.revealed-border::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #11ccee;
    border-radius: 20px;
    box-shadow: 0 0 20px #11ccee;
    pointer-events: none;
    z-index: 5; /* above dev-tag and content */
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity .4s ease;
    position: relative;
    z-index: 2; /* above wrapper veil */
}

.content.revealed { opacity: 1; }

.content a {
    color: white;
    text-decoration: none;
}

.content a:hover {
    color: #11ccee;
    text-decoration: none;
    text-shadow: 0 0 10px #11ccee;
    transition: all 0.5s ease;
}

.logo {
    margin-top: 0;
    max-height: 25vh;
    max-width: 75vw;
    aspect-ratio: auto 5 / 2; /* preserve original aspect ratio */
    width: auto; /* JS will set explicit width to match typed text */
    pointer-events: none;
    z-index: 14;
    filter: drop-shadow(2 2 2px #000);
    transition: filter .6s ease-in-out; /* smooth glow in/out tied to typed 'wonders' */
    /* Animation toggled via .logo-wonders when typed word is 'wonders' */
}

/* Wonders-only synced glow for the logo */
.logo.logo-wonders {
    /* Hold bright glow while 'wonders' is shown; fade back when class is removed */
    filter: drop-shadow(0 0 12px #eecc11);
    /* Longer fade-in when entering glow; base .logo transition handles faster fade-out */
    transition: filter 1.1s ease-out;
}
/* cool-glow and logo-wonders-glow keyframes moved to keyframes section */

.main-text {
        margin: 0 0 10px 12vw;  /* align with logo left edge */
        display: inline-flex; /* shrink to fit logo width we will apply */
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start; /* left align typed text */
        font-size: clamp(24px, 6vw, 38px);
        text-align: left;
        padding: 10px 20px 0 20px;
        white-space: nowrap;
        z-index: 15;
        width: auto; /* JS will set explicit width equal to .logo width */
        box-sizing: content-box;
        position: relative;
}

/* Bold chevron prompt indicator matching nav caret style */
.prompt-caret {
        font-weight: 800;
        color: white;
        display: inline-block;
        margin-right: 10px;
        filter: drop-shadow(0 0 4px rgba(17,204,238,0.6));
}

/* Allow typed text to wrap inside fixed width if needed on very small screens */
@media (max-width: 480px) {
    .main-text { white-space: normal; }
    .typed-text { display: inline; }
}

.cursor {
    display: inline-block;
    width: 0.05em;
    height: 1em;
    background-color: white;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
}

/* Site navigation and sections */
.site-nav {
    position: -webkit-sticky; /* iOS Safari */
    position: sticky;         /* establishes containing block for .to-top */
    top: calc(6px + env(safe-area-inset-top));
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto auto auto 1fr; /* preserve centered links with side gutters */
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    margin-top: 6px;
    background: rgba(17, 204, 238, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
    z-index: 20;
}
.site-nav .brand {
    grid-column: 1 / 2;
    justify-self: start;
    color: #ffffff; /* brand baseline white */
    font-weight: 500;
    font-variant: small-caps;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .25s ease;
}
.highlight {color: #11ccee;}
/* In the navbar brand, make the name black and bold; the rest remains white */
.site-nav .brand .highlight { color: #000000; text-shadow: none; font-weight: 800; }
.site-nav .links {
    grid-column: 2 / 5;
    justify-self: center;
    display: flex;
    gap: 24px;
    /* merged from later block to reduce duplication */
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    row-gap: 8px;
}

/* Back-to-top icon button — positioned, not part of grid, so links remain perfectly centered */
.site-nav .to-top {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(calc(-50% + 3px)); /* drop ~3px */
    appearance: none;
    background: transparent;
    color: #00141a;
    border: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: opacity .2s ease, transform .12s ease, color .2s ease;
    opacity: 0;            /* hidden by default */
    pointer-events: none;  /* non-interactive when hidden */
    z-index: 2;            /* above nav background */
}
.site-nav .to-top i { font-size: 1rem; line-height: 1; }
.site-nav .to-top:hover { color: #000; transform: translateY(calc(-50% + 2px)); }
.site-nav .to-top:active { transform: translateY(calc(-50% + 3px)); }
.site-nav .to-top.is-visible { opacity: 1; pointer-events: auto; }
/* Overline above the arrow to suggest "to top" */
.site-nav .to-top::after {
    content: "";
    position: absolute;
    top: calc(50% - 14px);
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    opacity: .9;
}
.site-nav a {
    position: relative; /* for the left caret indicator */
    color: #00141a;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 600;
    padding-left: 16px; /* reserve space for caret */
}
/* Submenu container */
.site-nav .nav-item.has-submenu { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.site-nav .nav-item.has-submenu > a.parent { padding-right: 0; }
/* Chevron toggle button matching the nav caret style */
.site-nav .submenu-toggle { appearance: none; background: transparent; border: none; padding: 0 4px; margin: 0; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; font: inherit; color: #000; }
.site-nav .submenu-toggle .chev { display: inline-block; color: #000; transition: transform .15s ease; transform: rotate(90deg); font: inherit; font-size: 1.1rem; }
.site-nav .nav-item.has-submenu.open .submenu-toggle .chev { transform: rotate(270deg); }
.site-nav .submenu {
    position: absolute;
    top: calc(100% + 20px); /* push down further to avoid overlap with navbar */
    left: 0;
    display: none;
    flex-direction: column;
    background: rgba(17, 204, 238, 0.85); /* same as nav background opacity */
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.25);
    padding: 8px 10px;
    min-width: 210px; /* width for FAQs + Testimonials neatly */
    z-index: 30;
}
.site-nav .submenu a { padding: 8px 10px 8px 18px; white-space: nowrap; text-align: left; color: #00141a; }
.site-nav .submenu a:hover { background: rgba(0,0,0,0.07); border-radius: 6px; }
.site-nav .nav-item.has-submenu.open > .submenu { display: flex; }
@media (hover: hover) and (pointer: fine) {
    .site-nav .nav-item.has-submenu:hover > .submenu { display: flex; }
    /* When user explicitly closes via chevron, keep it closed even on hover */
    .site-nav .nav-item.has-submenu.force-close:hover > .submenu { display: none !important; }
    /* Desktop: chevron is informational only (no rotation, no click) */
    .site-nav .submenu-toggle { pointer-events: none; cursor: default; }
    .site-nav .submenu-toggle .chev { transform: rotate(90deg) !important; transition: none; }
}
/* Allow nav links to wrap smartly on narrow screens */
/* removed duplicate .site-nav .links block; merged into main definition above */
.site-nav a::before {
    content: ">";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
    opacity: 0;             /* hidden by default; avoids layout shift */
    transition: opacity .15s ease;
}
.site-nav a:hover { color: #000; text-shadow: none; }
/* Avoid hover-driven caret to prevent sticky indicators on touch */
.site-nav a:hover::before { opacity: 0; }
.site-nav a.active { color: #000; }
.site-nav a.active::before { opacity: 1 !important; }
/* Ensure caret never shows unless the link is active (overrides hover/focus/visited/UA quirks) */
.site-nav a:not(.active)::before { opacity: 0 !important; }

/* If a link gets focus (e.g., after tap), don't show caret unless it's the active link */
.site-nav a:focus:not(.active)::before { opacity: 0; }

/* On touch devices, ignore hover indicator to avoid sticky caret after taps */
@media (hover: none) and (pointer: coarse) {
    .site-nav a:hover::before { opacity: 0; }
}

section { width: 100%; max-width: 1100px; margin: 0 auto; padding: 32px 12px; scroll-margin-top: 80px; }
section + section { margin-top: 8px; }
.section-title {
    font-family: 'Nova Square', Arial, Helvetica, sans-serif;
    font-size: clamp(18px, 2.2vw, 28px);
    color: #11ccee;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 40px;
    text-align: center;
}
.section-subtitle { text-align: center; color: #c9c9c9; margin: -8px 0 40px; font-size: 0.98rem; }

/* About */
.about-wrap {
  display: grid;
  grid-template-columns: clamp(220px, 22vw, 300px) 1fr; /* allow column growth */
  gap: 24px;
  align-items: start;
}
.about-wrap img {
  width: 100%;
  border-radius: 20% / 18%;
  box-shadow: 0 0 12px rgba(17, 204, 238, 0.35);
}
.about-wrap #about-headshot {
  transition: opacity 0.45s ease;
  will-change: opacity;
  background: #111;
  display: block;
  width: clamp(220px, 22vw, 300px); /* clamp now respected */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.about-text { color: #c9c9c9; line-height: 1.7; font-family: 'Nova Square', Arial, Helvetica, sans-serif; font-size: 1.05rem; text-align: justify; hyphens: auto; }
.about-text i { color: #ddd; }
.about-text a {
    text-decoration: none;
    border-bottom: 1px dotted #11ccee;
    transition: border-color 0.2s ease;
}
.about-text a:hover {
    border-color: transparent;
}

/* === About slider enhancements (base styles) === */
.about-slider { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'slides controls'; gap: 16px; align-items: start; }
.about-slider .slides { grid-area: slides; position: relative; min-height: 180px; transition: height .25s ease; }
.about-slider .slide { opacity: 0; transform: translateY(6px); filter: blur(2px); transition: opacity .35s ease, transform .35s ease, filter .35s ease; position: absolute; inset: 0; pointer-events: none; }
.about-slider .slide.active { opacity: 1; transform: none; filter: blur(0); position: relative; pointer-events: auto; z-index: 1; }
.about-slider .slide.leaving { opacity: 0; transform: translateY(6px); filter: blur(4px); position: absolute; pointer-events: none; }
.about-slider .slide.entering { opacity: 0; transform: translateY(-6px); filter: blur(4px); position: absolute; pointer-events: none; }
.about-slider .slide.entering.active { opacity: 1; transform: none; filter: blur(0); }
.about-slider .slide p { margin: 0; }
.about-slider .slide-controls { grid-area: controls; display: grid; grid-auto-rows: min-content; gap: 10px; justify-items: center; z-index: 2; }
.about-slider .dots { display: grid; gap: 8px; }
.about-slider .dot { --angle: 0deg; --progress-color: #0b899f; position: relative; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #dcdcdc; border: 2px solid rgba(17,204,238,0.45); display: grid; place-items: center; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; touch-action: manipulation; overflow: hidden; }
.about-slider .dot::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: conic-gradient(from 0deg, var(--progress-color) var(--angle), rgba(0,0,0,0) var(--angle)); opacity: 0; transition: opacity .15s ease; z-index: 1; }
.about-slider .dot::after { content: ""; position: absolute; width: 4px; height: 14px; background: #00141a; border-radius: 1px; top: 50%; left: 50%; transform: translate(-6px, -7px); box-shadow: 8px 0 0 0 #00141a; opacity: 0; transition: opacity .15s ease; z-index: 3; pointer-events: none; }
.about-slider .dot:focus { outline: none; }
.about-slider .dot span { font-weight: 800; color: inherit; position: relative; z-index: 2; transition: opacity .15s ease; }
.about-slider .dot:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
.about-slider .dot.active { background: rgba(17,204,238,0.85); color: #00141a; border-color: rgba(0,0,0,0.35); box-shadow: 0 6px 18px rgba(17,204,238,0.35); }
.about-slider .dot.active::before { opacity: 1; }
.about-slider[data-paused="true"] .dot.active span { opacity: 0; }
.about-slider[data-paused="true"] .dot.active::after { opacity: 1; }

/* Testimonials content tweaks (reuses .about-slider layout/animation) */
#testimonials {
    position: relative;
    overflow: hidden;
    --parallaxY: 0px;
    /* full-bleed inside wrapper (minus bezel/padding) */
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
#testimonials::before {
    content: "";
    position: absolute;
    inset: -100vh 0 -100vh 0;
    background-image: image-set(
        url('/img/chip-640.webp') 1x,
        url('/img/chip-1280.webp') 2x
    );
    background-repeat: repeat;
    background-size: contain;
    background-position: center;
    filter: blur(2px);
    opacity: 1;
    transform: translate3d(0, var(--parallaxY, 0px), 0);
    will-change: transform;
    backface-visibility: hidden; /* reduce paint artifacts on some GPUs */
    contain: paint; /* isolate paints for smoother scrolling */
    z-index: 0;
    pointer-events: none;
    /* Feather left/right edges similar to quote/title backdrops */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 8%, #000 92%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 8%, #000 92%, rgba(0,0,0,0) 100%);
}
#testimonials > * { position: relative; z-index: 1; }
/* Decorative quotes on the active slide: open (left) and close (right), overflowing top */

#testimonials .about-slider .slide.active::before {
    content: "\201D"; /* closing double quote */
    position: absolute;
    right: 12px;
    top: -0.33em;
    font-family: 'Jockey One', 'Orbitron', 'Share Tech Mono', 'Nova Square', 'Tomorrow', system-ui, Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
    color: white;
    font-size: clamp(120px, 20vw, 320px);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
#testimonials .about-slider .slide.active::after {
    content: "\201C"; /* opening double quote */
    position: absolute;
    left: 12px;
    top: -0.33em;
    font-family: 'Jockey One', 'Orbitron', 'Share Tech Mono', 'Nova Square', 'Tomorrow', system-ui, Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
    color: white;
    font-size: clamp(120px, 20vw, 320px);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* Restrict inner content width back to the standard section width while background spans full width */
#testimonials .section-title,
#testimonials .about-slider,
#testimonials .section-subtitle {
    width: 100%;
    max-width: 1100px; /* matches section default */
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;  /* match default section padding */
    padding-right: 12px; /* match default section padding */
}
#testimonials .about-slider { grid-template-columns: 1fr; grid-template-areas: 'controls' 'slides'; }
#testimonials .about-slider .slide-controls { grid-area: controls; display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
#testimonials .about-slider .dots { display: flex; gap: 8px; }
#testimonials .about-slider .slides { min-height: 160px; }
#testimonials .section-title {
    color: #0b1518;
    text-shadow: 0 0 8px rgba(255,255,255,0.35), 0 0 2px rgba(255,255,255,0.2);
}
#testimonials .slide p {
    font-family: 'Nova Square', Arial, Helvetica, sans-serif;
    text-align: center;
    line-height: 1.7;
    font-style: italic;
    font-weight: 800; /* make testimonials stand out more */
    color: #0b1518;
    max-width: 700px;   /* match accordion width */
    margin-left: auto;
    margin-right: auto;
    /* stronger glow to separate from background */
    text-shadow: 0 0 12px rgba(255,255,255,0.55), 0 0 4px rgba(255,255,255,0.35), 0 0 24px rgba(255,255,255,0.3);
}
#testimonials .slide em {
    font-family: 'Nova Square', Arial, Helvetica, sans-serif;
    display: inline-block;
    margin-top: 8px;
    font-style: normal;
    font-weight: 700; /* bold credit line too */
    color: #23343b;
    max-width: 700px;   /* match accordion width */
    margin-left: auto;
    margin-right: auto;
    text-shadow: none; /* remove white glow; card background provides contrast */
}

/* Testimonials: swap glow for white card backgrounds with subtle blur */
#testimonials .section-title {
    display: block;
    /* Text styling */
    color: #0b1518;
    border-radius: 0; /* no rounded corners */
    padding: 6px 12px; /* a tad larger than the title text */
    text-shadow: none;
    /* Center the title backdrop */
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto; /* center */
    /* Prepare for masked backdrop */
    position: relative;
    isolation: isolate;
    background: transparent; /* backdrop handled by ::before */
}
#testimonials .section-title::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0; /* no rounded corners */
    background: rgba(17, 204, 238, 0.8);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: -1;
    /* Feather only left and right edges */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 15%, #000 85%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 15%, #000 85%, rgba(0,0,0,0) 100%);
}
#testimonials .slide p {
    border-radius: 0; /* no rounded corners */
    padding: 14px 16px;
    text-shadow: none; /* remove glow on the quote text */
    position: relative;
    isolation: isolate;
    background: transparent; /* backdrop handled by ::before */
}
#testimonials .slide p::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Extend horizontally so fade starts beyond text edges */
    left: -14px;
    right: -14px;
    border-radius: 0; /* no rounded corners */
    background: rgba(17, 204, 238, 0.8);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: -1;
    /* Feather only left and right edges, with a tighter fade zone */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 8%, #000 92%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 8%, #000 92%, rgba(0,0,0,0) 100%);
    /* Optional subtle shadow under the blurred card */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Subtle brand-colored text glow for quote readability */
#testimonials .slide p {
    text-shadow:
        0 0 2px rgba(17, 204, 238, 0.6),
        0 0 6px rgba(17, 204, 238, 0.35);
}

/* Portfolio */
.portfolio-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; row-gap: 50px; }
.portfolio-item { text-align: center; }
.portfolio-item a { color: #fff; text-decoration: none; }
.app-icon { width: 100%; aspect-ratio: 1 / 1; border-radius: 24% / 22%; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 14px rgba(17, 204, 238, 0.25); background: #111; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.app-icon img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.portfolio-item:hover .app-icon { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.7), 0 0 18px rgba(17, 204, 238, 0.45); }
.app-title { margin-top: 10px; font-size: 1.05rem; color: #dcdcdc; transition: color .2s ease; }
.portfolio-item:hover .app-title { color: #11ccee; }

/* Contact form */
.contact-form { width: 100%; max-width: 900px; margin: 0 auto 70px auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; position: relative; z-index: 5; }
.contact-form .full { grid-column: 1 / -1; }
.form-field label { display: block; font-size: 0.85rem; color: #9adff0; margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea { width: 100%; background: rgba(0,0,0,0.6); border: 1px solid rgba(17, 204, 238, 0.4); color: #fff; border-radius: 10px; padding: 10px 12px; outline: none; font-family: inherit; }
.form-field input, .form-field select, .form-field textarea { font-size: 15px; line-height: 1.2; }
/* Refined select styling: revert height, add custom caret similar to nav submenu */
.contact-form .form-field select {
        -webkit-appearance: none;
        appearance: none;
        font-size: 15px; /* match other inputs */
        line-height: 1.2;
        background: none;
        padding: 10px 34px 10px 12px; /* mirror input padding (10px 12px) + caret space */
        min-height: 0; /* ensure no enforced extra height */
        /* Force exact pixel height parity with text inputs (content + vertical padding + border) */
        /* Inputs use padding 10px top/bottom + line box; enforce same final box height */
        box-sizing: border-box;
        height: auto; /* allow natural height first */
}
/* Desktop only: sometimes select renders 1px taller due to default internal padding. Reduce slightly. */
@media (hover: hover) and (pointer: fine) {
    .contact-form .form-field select { padding-top: 9px; padding-bottom: 9px; }
}
/* Caret container */
.contact-form .form-field.select-field { position: relative; }
.contact-form .form-field.select-field::after {
    content: '>';
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%) rotate(90deg); /* point down */
    font-weight: 800;
    font-size: 1rem;
    color: #11ccee; /* always blue */
    pointer-events: none;
    transition: transform .18s ease; /* color no longer changes */
}
/* Rotate (up) when focused/open on desktop */
.contact-form .form-field.select-field.open::after {
    transform: translateY(-50%) rotate(270deg); /* point up */
}
/* Dropdown list theming (supported in most Blink/WebKit for option) */
.contact-form .form-field select option { background: #00141a; color: #ffffff; }
.contact-form .form-field select option.gray { color: #999; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--placeholder-color); opacity: 1; }
/* Legacy placeholder fallbacks */
.form-field input::-webkit-input-placeholder, .form-field textarea::-webkit-input-placeholder { color: var(--placeholder-color); }
.form-field input:-ms-input-placeholder, .form-field textarea:-ms-input-placeholder { color: var(--placeholder-color); }
.form-field select.placeholder { color: var(--placeholder-color); }
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #11ccee; box-shadow: 0 0 12px rgba(17, 204, 238, 0.3); }
.form-actions { display: flex; gap: 10px; align-items: center; }
/* Match nav bar background opacity in resting state */
.btn-submit { appearance: none; background: rgba(17, 204, 238, 0.85); color: #000; border: none; border-radius: 12px; padding: 12px 18px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 6px 20px rgba(17,204,238,0.25); transition: transform .12s ease, box-shadow .2s ease, filter .2s ease; }
.btn-submit i { font-size: 0.95rem; }
.btn-submit span { letter-spacing: .02em; font-weight: 700; }
.btn-submit:hover { filter: brightness(1.06); box-shadow: 0 8px 26px rgba(17,204,238,0.35); transform: translateY(-1px); }
.btn-submit:active { transform: translateY(0); filter: brightness(1); }
.form-status { font-size: 0.9rem; }
.form-status.ok { color: #92f0a0; }
.form-status.err { color: #ff8080; }
.gray { color: #999; }

/* Desktop: message + tall send button on same row (improved layout) */
@media (min-width: 769px) {
    /* Desktop grid: message + actions on first row, note and status span full width below */
    .contact-form .message-row {
        display: grid;
        grid-template-columns: 1fr 0.2fr; /* ~80/20 split */
        grid-template-areas:
            "message actions"
            "note note"
            "status status";
        column-gap: 14px; /* match row spacing */
        row-gap: 8px; /* smaller gap under message for note/status */
        align-items: stretch;
    }

    .contact-form .message-row textarea {
        grid-area: message;
        height: 100%;
        min-height: 180px; /* keep a good minimum height */
    }

    /* Let children inside form-actions participate directly in the grid */
    .contact-form .message-row .form-actions { display: contents; }

    .contact-form .message-row .btn-submit {
        grid-area: actions;
        display: grid;
        grid-template-rows: 1fr auto; /* big icon above label */
        justify-items: center;
        align-items: center;
        height: 100%; /* match textarea row height */
        padding: 18px 12px; /* breathing room for tall button */
        gap: 10px;
    }

    .contact-form .message-row .btn-submit i { font-size: 2.2rem; line-height: 1; }
    .contact-form .message-row .btn-submit span { font-size: 0.95rem; }

    /* Status sits under both columns and does not affect first-row heights */
    .contact-form .message-row .form-status { grid-area: status; margin-top: 4px; text-align: left; }

    /* Note spans full width, left-aligned, with tight spacing under message */
    .contact-form .message-row .form-note { grid-area: note; margin: 4px 0 0 0; max-width: none; }

    /* Hide the old full-width actions row if present (back-compat) */
    .contact-form > .form-actions.full { display: none; }
}

.dev-tag {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 25%);
    font-family: 'Tomorrow', Arial, Helvetica, sans-serif;
    font-size: 20rem;
    font-weight: 500 !important;
    color: black;
    text-shadow: 0 0 10px rgba(17, 204, 238, 0.2);
    pointer-events: none;
    z-index: 0; /* keep behind foreground content */
    overflow: hidden !important;
    opacity: 0;
    animation: fadeIn 3s ease-in forwards;
    animation-delay: 1s;
}

.dev-tag b {
    font-weight: 700;
}

.contact {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    z-index: 15;
}

.contact a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
}

.contact-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
}

.contact-item i {
    position: absolute;
    z-index: 1;
    color: rgba(17, 204, 238, 0.2);
    text-shadow: 0 0 10px rgba(17, 204, 238, 0.2);
    font-size: 5rem;
    pointer-events: none;
}

.contact-item.email i {
    left: 10%;
}

.contact-item.phone i {
    right: 10%;
}

.contact-item a {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 10px;
}

/* duplicate .highlight removed; defined earlier */

.glow {
    animation: glow 1s linear infinite;
}

.starpower-text {
    /* Allow the stylized word to wrap naturally when near line ends */
    white-space: normal;
    overflow-wrap: anywhere; /* allow breaks between letters if needed */
    word-break: normal;      /* prefer normal word breaking when space exists */
    hyphens: auto;           /* enable hyphenation where supported */
}

.starpower-text span {
    display: inline; /* inline to preserve natural wrapping/hyphenation */
    animation: starpower 1s linear infinite;
}

.copyright {
    position: static; /* flow at the end of the page */
    padding: 10px 0 0 0;
    margin: 24px 0 20px 0;
    font-size: 0.8rem;
    font-family: Arial, Helvetica, sans-serif;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    animation: fadeIn 1s ease-in forwards;
    animation-delay: 1s;
}

/* Hide reCAPTCHA v3 badge (use disclosure instead) */
.grecaptcha-badge { visibility: hidden; opacity: 0; pointer-events: none; }

.form-note {
    margin: 8px auto 0 auto;
    max-width: 900px;
    color: #9c9c9c;
    font-size: 0.75rem;
    text-align: left;
}
.form-note a { color: #9adff0; text-decoration: none; border-bottom: 1px dotted rgba(154,223,240,0.6); }
.form-note a:hover { border-bottom-color: transparent; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes blink {
    50% { opacity: 0; }
}

@keyframes glow {
    0% { text-shadow: 0 0 10px white; }
    50% { text-shadow: 0 0 20px white; }
    100% { text-shadow: 0 0 10px white; }
}

@keyframes starpower {
    0% { color: #11ccee; }
    20% { color: #ee11ee; }
    40% { color: #ee3311; }
    60% { color: #ffd700; }
    80% { color: #11cc11; }
    100% { color: #11ccee; }
}

/* === Keyframes moved up for consolidation === */
@keyframes cool-glow {
    0% { filter: drop-shadow(2 2 2px #000); }
    3.38% { filter: drop-shadow(0 0 8px #eecc11); }
    16.89% { filter: drop-shadow(0 0 8px #eecc11); }
    20.27% { filter: drop-shadow(2 2 2px #000); }
    100% { filter: drop-shadow(2 2 2px #000); }
}

@keyframes logo-wonders-glow {
    0%, 100% { filter: drop-shadow(2 2 2px #000); }
    50%      { filter: drop-shadow(0 0 12px #eecc11); }
}

@keyframes openBorders {
    0% {
        width: 2px;
        height: 2px;
        top: 50%;
    left: var(--wrap-margin);
        transform: translateY(-50%);
    }
    40% {
    width: calc(100% - (var(--wrap-margin) * 2));
        height: 2px;
        top: 50%;
    left: var(--wrap-margin);
    right: var(--wrap-margin);
        transform: translateY(-50%);
    }
    60% {
    width: calc(100% - (var(--wrap-margin) * 2));
        height: 2px;
        top: 50%;
    left: var(--wrap-margin);
    right: var(--wrap-margin);
        transform: translateY(-50%);
    }
    100% {
    width: calc(100% - (var(--wrap-margin) * 2));
    height: calc(100% - (var(--wrap-margin) * 2));
    left: var(--wrap-margin);
    right: var(--wrap-margin);
    top: var(--wrap-margin);
    bottom: var(--wrap-margin);
        transform: none;
    }
}

@media (max-width: 1100px) {
    .conditional-hide { display: none; }
}

@media (max-width: 768px) {
    /* About: stack image above text/slider on narrow screens */
    .about-wrap {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 16px;
    }
    .about-wrap img { justify-self: center; max-width: 220px; }
    .about-text { text-align: left; }
    .conditional-hide { display: inline; }
    .site-nav {
        display: grid;
        grid-template-columns: 1fr; /* keep links centered; to-top is absolutely positioned */
        gap: 8px;
        text-align: center;
        transition: padding .2s ease;
        top: 6px; /* small offset from very top when sticky */
        margin-top: 6px;
    }
    .site-nav .brand { grid-column: 1 / -1; justify-self: center; }
    /* Collapse brand row when hidden so navbar height fits links only */
    .site-nav.brand-hidden .brand { display: none; }
    /* Balance links 2x2 when wrapping on mobile */
    .site-nav .links {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 8px;
        justify-items: center;
        padding-bottom: 4px;
    }
    /* Keep the button at the far right and vertically centered regardless of nav height */
    .site-nav .to-top { right: 10px; }
    .site-nav .links > * { justify-self: center; }
    /* Mobile: open submenu as an overlay below the navbar (not inside it) */
    .site-nav .nav-item.has-submenu { width: 100%; justify-content: center; position: static; }
    .site-nav .nav-item.has-submenu > .submenu {
        position: absolute;          /* anchor to sticky navbar */
        top: calc(100% + 8px);       /* sit just below nav */
        left: 50%;
        transform: translateX(-50%);
        display: none;
    /* Compact, content-width dropdown like desktop */
    width: auto;
    min-width: 210px;            /* enough for two items comfortably */
    max-width: calc(100% - 24px);/* never exceed viewport inset */
        border: 1px solid rgba(0,0,0,0.15);
        border-radius: 10px;
        box-shadow: 0 10px 22px rgba(0,0,0,0.25);
        padding: 6px 8px;
        background: rgba(17, 204, 238, 0.85);
        z-index: 30;
    }
    .site-nav .nav-item.has-submenu.open > .submenu { display: flex; }
    /* Services section styles */
    .services-showcase {
        display: flex;
        gap: 18px;
        justify-content: center;
        margin-bottom: 32px;
        flex-wrap: wrap;
    }
    .dev-tag {
        font-size: 12rem;
    }
    /* Veil and video adjustments moved here from earlier block */
    .wrapper-veil { --veil-alpha: 0.65; --veil-blur: 3px; }
    .wrapper-video { --video-zoom: 1.75; }
    .wrapper-video video { object-fit: cover; }
    /* About slider mobile layout */
    .about-slider { grid-template-columns: 1fr; grid-template-areas: 'controls' 'slides'; }
    .about-slider .slide-controls { grid-auto-flow: column; justify-content: center; align-items: center; gap: 12px; margin-bottom: 6px; }
    .about-slider .dots { grid-auto-flow: column; }

    /* Testimonials: extra glow on mobile for readability */
    /* Replaced glow with card backgrounds; keep text clean on mobile */
    #testimonials .slide p { text-shadow: none; }
    #testimonials .slide em { text-shadow: none; }

    /* Contact form: mobile layout — place SEND full-width after note */
    .contact-form .message-row {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "message"
            "note"
            "actions"
            "status";
        row-gap: 10px;
        align-items: stretch;
    }
    .contact-form .message-row textarea { grid-area: message; min-height: 160px; }
    .contact-form .message-row .form-note { grid-area: note; margin-top: 0; width: 98%; }
    .contact-form .message-row .form-actions { grid-area: actions; display: block; }
    .contact-form .message-row .btn-submit { width: 100%; justify-content: center; }
    .contact-form .message-row .form-status { grid-area: status; margin-top: 0; }
}

.services-img {
    max-width: 260px;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(17,204,238,0.25);
    background: #111;
}

@media (max-width: 480px) {
    :root { --wrap-margin: 12px; }
    .content-wrapper {
        --pad-t: 30px; --pad-r: 12px; --pad-b: 100px; --pad-l: 12px;
        padding: var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
    }

    /* Align opening frame to 12px wrapper margin on small screens */
    @keyframes openBorders {
        0% { width: 2px; height: 2px; top: 50%; left: 12px; transform: translateY(-50%); }
        40% { width: calc(100% - 24px); height: 2px; top: 50%; left: 12px; right: 12px; transform: translateY(-50%); }
        60% { width: calc(100% - 24px); height: 2px; top: 50%; left: 12px; right: 12px; transform: translateY(-50%); }
        100% { width: calc(100% - 24px); height: calc(100% - 24px); top: 12px; left: 12px; right: 12px; bottom: 12px; transform: none; }
    }

    /* .main-text {
        font-size: 7vw;
    } */

    .site-nav a {
        font-size: 0.9rem;
    }

    .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

    .services-img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }
    .services-showcase { max-width: 100%; padding: 0 6px; }

    .wrapper-veil { --veil-alpha: 0.65; --veil-blur: 2px; }
    .wrapper-video { --video-zoom: 1.5; }
    .wrapper-video video { object-fit: cover; }
}

@media (max-height: 650px) {
    .logo {
        margin-top: 0;
    }
}

/* Phones: stack contact items vertically with a clean gap */
@media (max-width: 600px) {
    .contact { flex-direction: column; align-items: center; gap: 40px; }
    .contact-item { margin: 0; }
}

/* Desktop refinements */
@media (min-width: 1024px) {
    .site-nav a { font-size: 1.1rem; }
    .about-text { font-size: 1.15rem; }
    .app-title { font-size: 1.1rem; }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .services-showcase { max-width: 100%; margin-left: auto; margin-right: auto; }
    .section-title { font-size: clamp(24px, 3.4vw, 36px); }
}

/* @media (min-width: 481px) and (max-width: 1024px) {
    .main-text {
        font-size: 5vw;
    }
} */

@media (min-width: 600px) and (max-width: 1024px) {
    .section-title { font-size: clamp(22px, 3.2vw, 34px); }
}