:root {
    --polish-ink: #080813;
    --polish-panel: rgba(20, 20, 36, .58);
    --polish-line: rgba(255, 255, 255, .1);
    --polish-text: #f7f7ff;
    --polish-muted: #aaa9bd;
    --polish-violet: #9a8cff;
    --polish-cyan: #69d9ff;
}

html { scroll-behavior: smooth; }

body { background: var(--polish-ink); }

/* The older animation files conflict on .hero-left and can leave the entire
   home panel transparent after their animation ends. This is the final CSS
   layer, so the hero always has a visible resting state. */
.hero-left {
    opacity: 1 !important;
    animation: none !important;
    transform: translateX(0) !important;
}

/* Hero resting state — a composed studio signature after the opening sequence. */
.hero-left {
    max-width: min(620px, calc(100vw - 42px));
}

.hero-left h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 13px !important;
    color: #f8f7ff !important;
    font-size: clamp(4.1rem, 10.5vw, 7rem) !important;
    font-weight: 700 !important;
    line-height: .78 !important;
    letter-spacing: -.095em !important;
    text-shadow: 0 0 48px rgba(129, 109, 255, .25) !important;
}

.hero-logo-shell {
    position: relative;
    overflow: hidden;
    padding: 13px 17px !important;
    border: 1px solid rgba(185, 176, 255, .2) !important;
    border-radius: 18px !important;
    background: linear-gradient(125deg, rgba(124, 107, 255, .16), rgba(7, 8, 18, .3)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 18px 52px rgba(0, 0, 0, .22) !important;
}

.hero-logo-shell::after {
    content: "SD / 01";
    position: absolute;
    top: 11px;
    right: 13px;
    color: rgba(237, 235, 255, .58);
    font: 500 .56rem/1 "Poppins", sans-serif;
    letter-spacing: .15em;
}

.hero-logo {
    width: min(270px, 59vw) !important;
}

.hero-logo-caption {
    margin-top: 6px !important;
    color: #aba6c8 !important;
    font-size: .58rem !important;
    letter-spacing: .16em !important;
}

.hero-signature {
    width: min(500px, 100%);
    margin: 18px auto 0;
    padding: 16px 18px 15px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 17px;
    background: rgba(12, 12, 25, .58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 22px 55px rgba(0, 0, 0, .2);
    backdrop-filter: blur(18px);
    text-align: left;
}

.signature-topline,
.signature-actions,
.signature-services { display: flex; align-items: center; }

.signature-topline {
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    color: #9290a8;
    font: 500 .57rem/1 "Poppins", sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.signature-availability { display: inline-flex; align-items: center; gap: 7px; color: #d9d7e7; }
.signature-availability i { width: 6px; height: 6px; border-radius: 50%; background: #7cf0b4; box-shadow: 0 0 12px rgba(124, 240, 180, .8); }
.signature-role { margin: 15px 0 5px; color: #7edaff; font: 500 .67rem/1 "Poppins", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.signature-copy { max-width: 390px; margin: 0; color: #bbb9cb; font: 400 .82rem/1.55 "Poppins", sans-serif; }
.signature-copy strong { color: #f2f1f8; font-weight: 500; }

.signature-actions { gap: 9px; margin-top: 15px; }
.signature-actions a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid transparent; color: #f6f5ff; font: 500 .65rem/1 "Poppins", sans-serif; letter-spacing: .03em; text-decoration: none; transition: transform .22s ease, border-color .22s ease, background .22s ease; }
.signature-actions a:hover { transform: translateY(-2px); }
.signature-primary { background: #8375ff; box-shadow: 0 8px 22px rgba(112, 94, 255, .22); }
.signature-primary:hover { background: #968aff; }
.signature-secondary { border-color: rgba(255, 255, 255, .15) !important; color: #c8c5d8 !important; }
.signature-secondary:hover { border-color: rgba(127, 218, 255, .55) !important; color: #eefbff !important; }

.signature-services { gap: 9px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .09); color: #858298; font: 500 .56rem/1 "Poppins", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.signature-services span + span::before { content: "·"; margin-right: 9px; color: #6d69a1; }

@media (max-width: 520px) {
    .hero-left { max-width: calc(100vw - 30px); }
    .hero-left h1 { font-size: clamp(3.55rem, 16vw, 5.3rem) !important; }
    .hero-logo-shell { padding: 10px 13px !important; }
    .hero-logo { width: min(220px, 63vw) !important; }
    .hero-signature { margin-top: 13px; padding: 14px; }
    .signature-topline { font-size: .5rem; letter-spacing: .055em; }
    .signature-copy { font-size: .74rem; }
    .signature-actions a { padding: 9px 10px; font-size: .58rem; }
}

::selection { color: #070711; background: var(--polish-cyan); }

:focus-visible {
    outline: 2px solid var(--polish-cyan);
    outline-offset: 4px;
}

.scroll-progress {
    position: fixed;
    z-index: 10001;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    pointer-events: none;
    background: rgba(255, 255, 255, .05);
}

.scroll-progress span {
    display: block;
    width: var(--scroll-progress, 0%);
    height: 100%;
    background: linear-gradient(90deg, var(--polish-violet), var(--polish-cyan));
    box-shadow: 0 0 14px rgba(105, 217, 255, .75);
    transition: width .08s linear;
}

header {
    border-bottom: 1px solid transparent;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

header.scrolled {
    border-color: var(--polish-line);
    box-shadow: 0 12px 38px rgba(0, 0, 0, .24);
}

.nav-links a { position: relative; }

.nav-links a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 1px;
    transform: scaleX(0);
    transform-origin: right;
    background: var(--polish-cyan);
    transition: transform .25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); transform-origin: left; }

.hero::after {
    content: "";
    position: absolute;
    inset: auto 7vw 7vh;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(105, 217, 255, .5), transparent);
    pointer-events: none;
}

.hero-studio-note {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin: 20px 0 24px;
    color: var(--polish-muted);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero-studio-note .availability {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d9d8eb;
}

.hero-studio-note .availability i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #86edb7;
    box-shadow: 0 0 0 5px rgba(134, 237, 183, .1), 0 0 16px rgba(134, 237, 183, .7);
    animation: availability-pulse 2.3s ease-in-out infinite;
}

.hero-left .hero-cta-row {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 !important;
}

.hero-cta-row a { min-width: 132px; }

.hero-left .hero-meta { display: flex !important; margin-top: 24px; }

.hero-left .hero-badges { justify-content: center; }

.section { position: relative; isolation: isolate; }

.section::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 12%;
    left: 5%;
    width: min(24vw, 340px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(126, 112, 255, .11), transparent 68%);
    filter: blur(12px);
    pointer-events: none;
}

.section-title > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--polish-cyan);
    letter-spacing: .15em;
}

.section-title > span::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
}

.services-container, .process-container, .testimonial-container, .about-info {
    gap: clamp(14px, 2vw, 24px);
}

.service-card, .info-box, .step, .testimonial-card, .contact-box, .faq-item {
    border: 1px solid var(--polish-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 16px 38px rgba(0, 0, 0, .16);
}

.service-card, .step, .testimonial-card, .info-box {
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.service-card:hover, .step:hover, .testimonial-card:hover, .info-box:hover {
    transform: translateY(-6px);
    border-color: rgba(105, 217, 255, .36);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 24px 48px rgba(0, 0, 0, .24);
}

.service-card > i {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 22px;
    border: 1px solid rgba(105, 217, 255, .24);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(105, 217, 255, .14), rgba(126, 112, 255, .12));
}

.portfolio-filter { gap: 10px; }

.filter-btn {
    border-radius: 999px;
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}

.filter-btn:hover { transform: translateY(-2px); }

.project-card:focus-visible { outline-offset: 6px; }

.contact-form { border: 1px solid var(--polish-line); box-shadow: 0 28px 68px rgba(0, 0, 0, .23); }

.contact-form input:focus, .contact-form textarea:focus {
    border-color: var(--polish-cyan);
    box-shadow: 0 0 0 4px rgba(105, 217, 255, .09);
}

.footer-social a, .social-icons a { transition: transform .25s ease, color .25s ease, border-color .25s ease; }
.footer-social a:hover, .social-icons a:hover { transform: translateY(-3px); }

@keyframes availability-pulse {
    50% { box-shadow: 0 0 0 8px rgba(134, 237, 183, 0), 0 0 19px rgba(134, 237, 183, .4); }
}

@media (max-width: 600px) {
    .hero-studio-note { margin: 16px 0 20px; font-size: .62rem; }
    .hero-left .hero-cta-row { gap: 9px; }
    .hero-cta-row a { min-width: auto; }
    .section::before { width: 72vw; }
}

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

/* --------------------------------------------------------------------------
   Home redesign
   -------------------------------------------------------------------------- */
.hero {
    min-height: 100svh !important;
    padding: 110px max(6vw, 24px) 56px !important;
    background: #090912 !important;
}

.hero::before { display: none; }
.hero::after { inset: auto 7vw 34px !important; }
.hero-bg { opacity: .52; background: radial-gradient(circle at 72% 42%, rgba(112, 91, 255, .22), transparent 24%), radial-gradient(circle at 19% 78%, rgba(68, 205, 255, .1), transparent 25%) !important; }
.hero-orbit { position: absolute; border: 1px solid rgba(175, 166, 255, .12); border-radius: 50%; pointer-events: none; }
.hero-orbit-one { width: min(66vw, 900px); aspect-ratio: 1; top: -34vw; right: -18vw; }
.hero-orbit-two { width: min(38vw, 540px); aspect-ratio: 1; right: 7vw; bottom: -23vw; border-color: rgba(103, 213, 255, .11); }

.hero-container.home-redesign {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(370px, .68fr) !important;
    align-items: center !important;
    justify-content: normal !important;
    gap: clamp(50px, 9vw, 150px) !important;
    width: min(1240px, 100%) !important;
    min-height: calc(100svh - 166px) !important;
    margin: 0 auto;
}

.hero-left.home-copy {
    display: block !important;
    width: auto !important;
    min-height: auto !important;
    max-width: 650px !important;
    text-align: left !important;
}

.home-eyebrow { display: flex; align-items: center; gap: 10px; color: #a8a2d2; font: 500 .67rem/1 "Poppins", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.home-eyebrow span { width: 25px; height: 1px; background: #8a7cff; box-shadow: 0 0 12px #8a7cff; }
.hero-left.home-copy #homeName { margin: 26px 0 12px !important; padding-bottom: .12em; overflow: visible !important; color: #f7f6fc !important; font-family: "Poppins", sans-serif !important; font-size: clamp(3rem, 6.4vw, 5.4rem) !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: normal !important; font-kerning: normal; text-shadow: none !important; }
.home-title { margin: 20px 0 0; color: #e1dff0; font: 400 clamp(1.7rem, 3.3vw, 3rem)/1.05 "Poppins", sans-serif; letter-spacing: -.065em; }
.home-title em { color: #8edfff; font-style: normal; }
.home-description { max-width: 490px; margin: 28px 0 0; color: #a8a6b8; font: 400 clamp(.9rem, 1.3vw, 1.02rem)/1.75 "Poppins", sans-serif; }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.home-button { display: inline-flex; align-items: center; gap: 10px; padding: 15px 18px; border: 1px solid transparent; font: 500 .74rem/1 "Poppins", sans-serif; letter-spacing: .025em; text-decoration: none; transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.home-button:hover { transform: translateY(-3px); }
.home-button-primary { background: #8b7dff; color: #fff; box-shadow: 0 14px 28px rgba(108, 91, 255, .2); }
.home-button-primary:hover { background: #9a8eff; }
.home-button-quiet { border-color: rgba(255, 255, 255, .16); color: #e8e6f1; }
.home-button-quiet:hover { border-color: rgba(125, 222, 255, .7); background: rgba(125, 222, 255, .06); }
.home-footnote { display: flex; flex-wrap: wrap; gap: 12px 27px; margin-top: 51px; color: #858294; font: 500 .61rem/1 "Poppins", sans-serif; letter-spacing: .075em; text-transform: uppercase; }
.home-footnote b { margin-right: 7px; color: #a299ef; font-weight: 500; }

.hero-right.home-showcase { display: block !important; position: relative; width: auto; opacity: 1 !important; }
.home-showcase { padding: 19px; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(145deg, rgba(27, 24, 49, .73), rgba(8, 9, 16, .64)); box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 35px 85px rgba(0, 0, 0, .28); backdrop-filter: blur(20px); }
.showcase-topline { display: flex; justify-content: space-between; margin-bottom: 15px; color: #a6a3ba; font: 500 .58rem/1 "Poppins", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.showcase-window { overflow: hidden; border: 1px solid rgba(255, 255, 255, .11); background: #10101e; }
.window-chrome { display: flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 11px; border-bottom: 1px solid rgba(255,255,255,.08); color: #77758d; font: 500 .52rem/1 monospace; }
.window-chrome i { width: 6px; height: 6px; border-radius: 50%; background: #f07a73; }.window-chrome i:nth-child(2) { background: #e9bb66; }.window-chrome i:nth-child(3) { background: #80d69d; }.window-chrome span { margin-left: 7px; }
.window-canvas { position: relative; display: flex; align-items: flex-end; min-height: 310px; padding: 25px; overflow: hidden; background: linear-gradient(142deg, #c6bdff 0%, #8575ff 36%, #171335 37%, #10101c 100%); }
.window-canvas::before { content: ""; position: absolute; width: 360px; aspect-ratio: 1; top: -185px; right: -135px; border: 1px solid rgba(255,255,255,.37); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.08), 0 0 0 76px rgba(255,255,255,.05); }
.window-canvas p { position: relative; z-index: 1; margin: 0; color: #fff; font: 500 clamp(1.35rem, 2.5vw, 2rem)/.99 "Poppins", sans-serif; letter-spacing: -.065em; }.window-canvas strong { color: #a6efff; font-weight: 500; }
.canvas-mark { position: absolute; top: 30px; right: 30px; color: rgba(255,255,255,.9); font: 500 7rem/.7 Georgia, serif; letter-spacing: -.14em; }.canvas-caption { position: absolute; right: 25px; bottom: 25px; color: rgba(255,255,255,.66); font: 500 .56rem/1.5 "Poppins", sans-serif; letter-spacing: .09em; text-align: right; text-transform: uppercase; }
.showcase-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }.showcase-bottom > div { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid rgba(255,255,255,.1); }.showcase-bottom b { color: #97e6ff; font: 500 1.4rem/1 "Poppins", sans-serif; letter-spacing: -.07em; }.showcase-bottom span { color: #9693a7; font: 400 .54rem/1.35 "Poppins", sans-serif; }

/* Keep the project-detail control visually consistent after changing it to a real button. */
.project-card { cursor: default; }
.project-links .view-demo {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  background: rgba(108, 99, 255, .2);
  color: var(--text);
  font: 600 13px/1.2 "Poppins", sans-serif;
  cursor: pointer;
  transition: all .3s ease;
}
.project-links .view-demo:hover { background: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(108, 99, 255, .4); }
.project-links .view-demo:focus-visible { outline: 3px solid #97e6ff; outline-offset: 3px; }

@media (max-width: 850px) {
    .hero { padding: 105px 24px 45px !important; }
    .hero-container.home-redesign { grid-template-columns: 1fr !important; min-height: auto !important; gap: 48px !important; }
    .hero-left.home-copy { max-width: 630px !important; }
    .hero-right.home-showcase { width: min(510px, 100%); }
    .window-canvas { min-height: 270px; }
}

@media (max-width: 520px) {
    .hero { padding: 95px 18px 35px !important; }
    .home-eyebrow { font-size: .55rem; letter-spacing: .095em; }.hero-left.home-copy #homeName { margin-top: 22px !important; font-size: clamp(2.7rem, 13vw, 3.9rem) !important; }.home-title { font-size: 1.65rem; }.home-description { margin-top: 20px; font-size: .84rem; }.home-actions { margin-top: 25px; gap: 9px; }.home-button { padding: 13px 12px; font-size: .64rem; }.home-footnote { margin-top: 34px; gap: 10px; font-size: .52rem; }.home-showcase { padding: 12px; }.window-canvas { min-height: 225px; padding: 18px; }.canvas-mark { top: 22px; right: 22px; font-size: 5.5rem; }.canvas-caption { right: 18px; bottom: 18px; }.showcase-bottom { gap: 7px; }.showcase-bottom > div { gap: 7px; }.showcase-bottom b { font-size: 1.15rem; }
}