:root {
  color-scheme: light;
  --paper: #f6f4ee;
  --ink: #20211f;
  --muted: #777970;
  --accent: #ea674e;
  --line: #dcdad2;
  --mono: "DM Mono", monospace;
  --sans: "DM Sans", sans-serif;
  --display: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.section-wrap, .site-header, .site-footer { width: min(1160px, calc(100% - 96px)); margin-inline: auto; }
.site-header { min-height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { font: 800 24px var(--display); letter-spacing: -2px; transition: transform .25s ease; }
.wordmark:hover { transform: rotate(-7deg) scale(1.06); }
.wordmark span, .accent-text, .period { color: var(--accent); }
.navigation { display: flex; align-items: center; gap: 38px; font-size: 13px; font-weight: 600; }
.navigation a:not(.nav-contact) { position: relative; transition: color .2s ease; }
.navigation a:not(.nav-contact)::after { content: ""; position: absolute; right: 0; bottom: -5px; left: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.navigation a:not(.nav-contact):hover::after { transform: scaleX(1); transform-origin: left; }
.navigation a:not(.nav-contact):hover, .text-link:hover { color: var(--accent); }
.nav-contact { border: 1px solid var(--line); padding: 11px 16px; border-radius: 3px; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.nav-contact:hover { color: white; background: var(--ink); border-color: var(--ink); }
.nav-contact span { margin-left: 14px; }
.menu-toggle { display: none; }
.hero { min-height: 670px; padding-top: 100px; padding-bottom: 90px; position: relative; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 38px; }
.hero-copy { animation: intro-rise .8s both; }
.hero-visual { animation: intro-rise .9s .14s both; }
.scroll-cue { animation: intro-rise .7s .35s both; }
.eyebrow { font: 10px var(--mono); letter-spacing: 1px; color: var(--muted); }
.hero .eyebrow { margin: 0 0 23px; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: #8ab393; border-radius: 50%; box-shadow: 0 0 0 4px #8ab39322; animation: status-pulse 2.2s ease-out infinite; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); letter-spacing: -0.065em; }
h1 { font-size: clamp(53px, 6.1vw, 78px); font-weight: 600; line-height: 1.04; margin-bottom: 24px; }
.hero-summary { max-width: 410px; color: #66675f; font-size: 15px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 30px; }
.button { min-height: 48px; padding: 0 18px; display: inline-flex; align-items: center; gap: 24px; font-size: 12px; font-weight: 600; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.button:hover { transform: translateY(-3px); box-shadow: 0 9px 22px #20211f20; }
.button span { transition: transform .25s ease; }
.button:hover span { transform: translate(3px, -2px); }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: var(--accent); }
.text-link { font-size: 12px; font-weight: 600; }
.text-link span { margin-left: 7px; }
.hero-visual { min-height: 410px; position: relative; overflow: hidden; background: #e9e4d9; isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; z-index: -1; width: 330px; height: 330px; border-radius: 50%; top: 45px; left: 50%; transform: translateX(-50%); background: linear-gradient(145deg, #edc6aa 0%, #df8a70 48%, #9e5148 100%); animation: portrait-float 6s ease-in-out infinite; }
.visual-orbit { position: absolute; border: 1px solid #fff9; border-radius: 50%; top: 87px; left: 50%; transform: translateX(-50%) rotate(-27deg); }
.orbit-one { width: 400px; height: 190px; animation: orbit-one 15s linear infinite; }
.orbit-two { width: 440px; height: 260px; transform: translateX(-50%) rotate(38deg); animation: orbit-two 19s linear infinite; }
.visual-star { position: absolute; top: 40px; right: 48px; color: white; font-size: 42px; animation: star-turn 14s linear infinite; }
.visual-caption { position: absolute; right: 18px; bottom: 17px; left: 18px; display: flex; justify-content: space-between; color: #575249; font: 9px var(--mono); letter-spacing: .6px; }
.visual-note { position: absolute; left: 18px; top: 19px; font: 12px/1.4 var(--mono); transform: rotate(-5deg); }
.visual-note span { color: var(--accent); }
.scroll-cue { position: absolute; left: 0; bottom: 32px; display: flex; gap: 12px; align-items: center; color: var(--muted); font: 9px var(--mono); letter-spacing: .8px; }
.scroll-line { height: 1px; width: 34px; background: var(--accent); transform-origin: left; animation: line-breathe 2s ease-in-out infinite; }
.about { border-top: 1px solid var(--line); padding-top: 105px; padding-bottom: 115px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.section-heading .eyebrow { margin-bottom: 22px; }
h2 { font-size: clamp(38px, 4.5vw, 56px); line-height: 1.12; font-weight: 600; margin-bottom: 0; }
.muted-text { color: #9b9b92; }
.about-details { padding-top: 36px; max-width: 475px; }
.about-copy { color: #66675f; font-size: 14px; line-height: 1.85; margin-bottom: 19px; }
.about-meta { border-top: 1px solid var(--line); margin-top: 35px; padding-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.about-meta div { display: flex; flex-direction: column; gap: 9px; font-size: 11px; }
.meta-label { color: var(--muted); font: 9px var(--mono); }
.services { border-top: 1px solid var(--line); padding-top: 100px; padding-bottom: 115px; }
.services-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 38px; }
.services-intro { max-width: 345px; margin: 0 0 4px; color: #777970; font-size: 13px; line-height: 1.8; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-card { position: relative; min-height: 245px; padding: 24px 21px 20px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); background: #0c1520; transition: border-color .25s ease, transform .25s ease, background .25s ease, box-shadow .25s ease; }
.service-card:hover { transform: translateY(-5px); border-color: #55f2cb77; background: #0f1c28; box-shadow: 0 16px 35px #0004, 0 0 25px #55f2cb0b; }
.service-icon { width: 38px; height: 38px; margin-bottom: 19px; display: grid; place-items: center; border: 1px solid #55f2cb55; border-radius: 6px; color: var(--accent); background: #55f2cb0d; font: 12px var(--mono); }
.service-icon-system { font-size: 20px; }
.service-icon-flow { font-size: 20px; }
.service-number { position: absolute; top: 15px; right: 15px; color: #72879a; font: 8px var(--mono); letter-spacing: .6px; }
.service-card h3 { margin-bottom: 9px; color: #eef5fc; font: 600 17px var(--display); letter-spacing: -.4px; }
.service-card p { margin-bottom: 18px; color: #9aabba; font-size: 11px; line-height: 1.75; }
.service-card > a { margin-top: auto; display: inline-flex; gap: 13px; align-items: center; color: var(--accent); font-size: 10px; font-weight: 600; }
.service-card > a span { transition: transform .2s ease; }
.service-card > a:hover span { transform: translate(3px, -2px); }
.work { padding-top: 100px; padding-bottom: 120px; border-top: 1px solid var(--line); }
.work-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 47px; }
.work-intro { max-width: 300px; color: #777970; font-size: 13px; line-height: 1.75; margin-bottom: 4px; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 24px; }
.project-card-large { grid-column: 1 / -1; }
.project-art { height: 310px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.project-art::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 50% 110%, #fff8, transparent 60%); opacity: .55; transition: opacity .35s ease, transform .5s ease; }
.project-link:hover .project-art::after { opacity: .95; transform: scale(1.16); }
.project-card-large .project-art { height: 390px; }
.art-coral { background: #e9a18a; }
.art-lilac { background: #c7bfd7; }
.art-yellow { background: #e7cc7a; }
.project-number { position: absolute; top: 18px; left: 18px; z-index: 2; font: 9px var(--mono); letter-spacing: .8px; }
.art-shape { display: block; width: 210px; height: 210px; border-radius: 50%; position: absolute; transition: transform .55s cubic-bezier(.2,.75,.25,1); }
.project-link:hover .art-shape { transform: translate(-8px, -8px) scale(1.08); }
.shape-coral { background: #f3c2aa; box-shadow: 34px 20px 0 #da745f; }
.shape-lilac { background: #e4dfee; box-shadow: 28px 20px 0 #9e93b5; }
.shape-yellow { background: #f1dfaa; box-shadow: 28px 20px 0 #c39d45; }
.art-type { position: relative; z-index: 1; font: 800 clamp(43px, 6vw, 72px)/.9 var(--display); letter-spacing: -.08em; text-align: center; transform: rotate(-7deg); transition: transform .45s cubic-bezier(.2,.75,.25,1); }
.project-link:hover .art-type { transform: rotate(-3deg) scale(1.04); }
.art-type span { color: var(--accent); }
.art-type-small { font-size: clamp(34px, 4vw, 48px); }
.art-sticker { position: absolute; right: 28px; bottom: 25px; z-index: 1; display: grid; place-content: center; width: 63px; height: 63px; border: 1px solid #292927; border-radius: 50%; font: 8px/1.35 var(--mono); text-align: center; transform: rotate(9deg); }
.project-info { display: flex; align-items: center; justify-content: space-between; padding-top: 17px; }
.project-info h3 { font: 600 18px var(--display); letter-spacing: -.5px; margin-bottom: 5px; }
.project-info p { color: var(--muted); font-size: 12px; margin-bottom: 0; }
.project-arrow { font-size: 20px; transition: transform .2s ease; }
.project-link:hover .project-arrow { transform: translate(3px, -3px); }
.project-tags { display: flex; gap: 8px; padding-top: 13px; }
.project-tags span { border: 1px solid var(--line); padding: 5px 9px; color: var(--muted); font: 9px var(--mono); }
.certificates { border-top: 1px solid var(--line); padding-top: 100px; padding-bottom: 115px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.certificate-list { border-top: 1px solid var(--line); }
.certificate-item { display: grid; grid-template-columns: 120px 1fr 18px; gap: 18px; align-items: start; border-bottom: 1px solid var(--line); padding: 20px 0; transition: padding .25s ease, border-color .25s ease; }
.certificate-item:hover { padding-right: 5px; padding-left: 5px; border-color: var(--accent); }
.certificate-date { padding-top: 4px; color: var(--muted); font: 9px var(--mono); letter-spacing: .35px; }
.certificate-item h3 { font: 600 15px/1.45 var(--display); letter-spacing: -.3px; margin-bottom: 5px; }
.certificate-item p { color: var(--muted); font-size: 11px; line-height: 1.65; margin-bottom: 0; }
.certificate-arrow { color: var(--accent); font-size: 16px; transition: transform .25s ease; }
.certificate-item:hover .certificate-arrow { transform: translate(3px, -3px); }
.certificate-publication { padding-top: 23px; padding-bottom: 23px; }
.contact-details { display: flex; flex-direction: column; gap: 9px; }
.contact-details a { transition: color .2s ease; }
.contact-details a:hover { color: white; }
.contact { max-width: none; width: 100%; padding: 82px max(48px, calc((100% - 1160px) / 2)) 28px; color: #f6f4ee; background: var(--ink); }
.contact > .eyebrow { color: #a4a59d; }
.contact-main { display: flex; justify-content: space-between; align-items: end; padding: 36px 0 74px; }
.contact-main h2 { font-size: clamp(60px, 9vw, 112px); line-height: .98; }
.contact-main .accent-text { color: #ed846a; }
.contact-aside { width: 250px; padding-bottom: 6px; }
.contact-aside p { color: #b5b6ad; font-size: 13px; line-height: 1.8; margin-bottom: 20px; }
.button-light { background: var(--paper); color: var(--ink); }
.button-light:hover { background: #ed846a; }
.contact-bottom { border-top: 1px solid #ffffff30; padding-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 24px; color: #b5b6ad; font: 9px var(--mono); letter-spacing: .5px; }
.social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.social-links a { min-height: 42px; padding: 0 12px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid #ffffff2b; border-radius: 4px; color: #d5e1e9; font: 10px var(--sans); letter-spacing: 0; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.social-links a:hover { color: var(--accent); border-color: var(--accent); background: #55f2cb0c; transform: translateY(-2px); }
.social-icon { width: 16px; height: 16px; flex: 0 0 16px; fill: currentColor; }
.social-links a:nth-child(2) .social-icon { fill: none; stroke: currentColor; stroke-width: 1.8; }
.social-icon-dot { fill: currentColor; stroke: none; }
.social-outbound { color: var(--accent); font-size: 12px; }
.site-footer { min-height: 77px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font: 9px var(--mono); letter-spacing: .4px; }
.site-footer .wordmark { color: var(--ink); font: 800 20px var(--display); letter-spacing: -2px; }
.site-footer > a:last-child { color: var(--ink); }
.site-footer > a:last-child:hover { color: var(--accent); }

@keyframes intro-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 4px #8ab39322; }
  50% { box-shadow: 0 0 0 7px #8ab39312; }
}
@keyframes portrait-float {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50% { transform: translate(-50%, -9px) scale(1.025); }
}
@keyframes orbit-one {
  from { transform: translateX(-50%) rotate(-27deg); }
  to { transform: translateX(-50%) rotate(333deg); }
}
@keyframes orbit-two {
  from { transform: translateX(-50%) rotate(38deg); }
  to { transform: translateX(-50%) rotate(-322deg); }
}
@keyframes star-turn {
  to { transform: rotate(360deg); }
}
@keyframes line-breathe {
  0%, 100% { transform: scaleX(.65); }
  50% { transform: scaleX(1); }
}
.motion-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease var(--reveal-delay, 0ms), transform .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms); }
.motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
  .section-wrap, .site-header, .site-footer { width: calc(100% - 40px); }
  .site-header { min-height: 73px; position: relative; }
  .menu-toggle { display: flex; align-items: center; gap: 10px; border: 0; padding: 12px 0 12px 12px; background: transparent; color: var(--ink); font-size: 12px; cursor: pointer; }
  .menu-icon { display: grid; gap: 5px; width: 18px; }
  .menu-icon span { width: 18px; height: 1px; background: currentColor; transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] .menu-icon span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-icon span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .navigation { display: none; position: absolute; z-index: 3; top: calc(100% + 1px); right: 0; left: 0; padding: 18px 20px 22px; background: var(--paper); border-bottom: 1px solid var(--line); align-items: stretch; flex-direction: column; gap: 18px; }
  .navigation.is-open { display: flex; }
  .nav-contact { align-self: flex-start; }
  .hero { min-height: auto; padding-top: 70px; padding-bottom: 100px; grid-template-columns: 1fr; gap: 45px; }
  h1 { font-size: clamp(51px, 12vw, 74px); }
  .hero-visual { min-height: 360px; }
  .hero-visual::before { width: 290px; height: 290px; top: 40px; }
  .scroll-cue { bottom: 31px; }
  .about { padding-top: 75px; padding-bottom: 78px; grid-template-columns: 1fr; gap: 17px; }
  .about-details { padding-top: 0; }
  .about-meta { margin-top: 25px; }
  .services { padding-top: 75px; padding-bottom: 82px; }
  .services-heading { align-items: start; flex-direction: column; gap: 20px; margin-bottom: 28px; }
  .services-intro { max-width: 440px; }
  .service-grid { grid-template-columns: 1fr; gap: 11px; }
  .service-card { min-height: 0; padding: 19px; }
  .service-icon { margin-bottom: 14px; }
  .service-card p { max-width: 460px; }
  .work { padding-top: 75px; padding-bottom: 82px; }
  .work-heading { align-items: start; flex-direction: column; gap: 20px; margin-bottom: 30px; }
  .work-intro { max-width: 400px; }
  .project-grid { grid-template-columns: 1fr; gap: 36px; }
  .project-card-large { grid-column: auto; }
  .project-card-large .project-art, .project-art { height: 300px; }
  .certificates { padding-top: 75px; padding-bottom: 82px; grid-template-columns: 1fr; gap: 28px; }
  .certificate-item { grid-template-columns: 92px 1fr 14px; gap: 12px; }
  .contact { width: 100%; padding: 65px 20px 24px; }
  .contact-main { align-items: start; flex-direction: column; gap: 30px; padding: 28px 0 54px; }
  .contact-main h2 { font-size: clamp(58px, 13vw, 90px); }
  .contact-aside { width: min(100%, 320px); }
  .contact-bottom { align-items: start; flex-direction: column; gap: 20px; }
  .social-links { flex-wrap: wrap; gap: 8px; }
}

@media (min-width: 761px) and (max-width: 1000px) {
  .service-grid { gap: 10px; }
  .service-card { padding-inline: 16px; }
}

@media (max-width: 380px) {
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
  .about-meta { grid-template-columns: 1fr 1fr; }
  .certificate-item { grid-template-columns: 1fr 14px; }
  .certificate-date { grid-column: 1 / -1; }
}

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

/* Dark technical palette and subtle circuit-grid detailing. */
:root {
  color-scheme: dark;
  --paper: #080d16;
  --ink: #e8f0f8;
  --muted: #8493a7;
  --accent: #55f2cb;
  --line: #1d2a3a;
}
body {
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 50% -20%, #112237 0, transparent 55%);
  color: var(--ink);
  overflow-x: clip;
}
body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .2;
  background-image: linear-gradient(#8294aa14 1px, transparent 1px), linear-gradient(90deg, #8294aa14 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}
.site-header { border-color: var(--line); }
.wordmark { color: #f4f8ff; }
.wordmark span, .accent-text, .period, .art-type span { color: var(--accent); }
.navigation a:not(.nav-contact):hover, .text-link:hover { color: var(--accent); }
.nav-contact { border-color: #2b3b4d; }
.nav-contact:hover, .button-dark { color: #06110f; background: var(--accent); border-color: var(--accent); }
.button-dark:hover { background: #8bffe3; }
.hero { min-height: 690px; }
.hero .eyebrow, .eyebrow { color: #91a4b9; }
.status-dot { background: var(--accent); box-shadow: 0 0 0 4px #55f2cb22; }
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 4px #55f2cb22; }
  50% { box-shadow: 0 0 0 7px #55f2cb12; }
}
.hero-summary, .about-copy, .work-intro, .project-info p { color: #9aabba; }
.text-link { color: #dce7f2; }
.hero-visual {
  border: 1px solid #263a4e;
  background-color: #0d1725;
  background-image: linear-gradient(#76a0c216 1px, transparent 1px), linear-gradient(90deg, #76a0c216 1px, transparent 1px), radial-gradient(ellipse at center, #123b48 0, #0d1725 68%);
  background-size: 24px 24px, 24px 24px, auto;
}
.hero-visual::before {
  width: 260px;
  height: 260px;
  border: 1px solid #55f2cb77;
  background: radial-gradient(circle at 35% 30%, #55f2cb35, #208a9a30 45%, #09121d 72%);
  box-shadow: 0 0 70px #55f2cb18, inset 0 0 45px #55f2cb17;
}
.visual-orbit { border-color: #55f2cb70; }
.visual-note { color: #bbcad9; }
.visual-note span, .scroll-line { color: var(--accent); background-color: var(--accent); }
.visual-caption { color: #91a4b9; }
.about, .work, .certificates { border-color: var(--line); }
.muted-text { color: #73839a; }
.about-meta, .certificate-list, .certificate-item { border-color: var(--line); }
.about-meta div { color: #d2dce7; }
.meta-label, .certificate-date { color: #718399; }
.project-art {
  border: 1px solid #27394b;
  background-color: #0d1724;
  background-image: linear-gradient(#8197ad12 1px, transparent 1px), linear-gradient(90deg, #8197ad12 1px, transparent 1px);
  background-size: 26px 26px;
}
.art-coral { background-color: #151524; }
.art-lilac { background-color: #101b2b; }
.art-yellow { background-color: #10221f; }
.art-shape { width: 235px; height: 235px; border: 1px solid #55f2cb55; }
.shape-coral { background: radial-gradient(circle at 40% 35%, #e8626040, #291d2a 66%, #121624); box-shadow: 34px 20px 0 -1px #a95c6a33; }
.shape-lilac { background: radial-gradient(circle at 40% 35%, #7774e340, #20243a 66%, #121624); box-shadow: 28px 20px 0 -1px #7976ce33; }
.shape-yellow { background: radial-gradient(circle at 40% 35%, #55f2cb40, #183a3a 66%, #121624); box-shadow: 28px 20px 0 -1px #55f2cb33; }
.art-type { color: #e6f0f8; text-shadow: 0 0 28px #55f2cb30; }
.art-sticker { color: var(--accent); border-color: #55f2cb88; background: #0a121dd9; }
.project-info h3, .certificate-item h3 { color: #eef5fc; }
.project-tags span { color: #91a4b9; border-color: #26394d; background: #0e1722; }
.certificate-item:hover { border-color: var(--accent); }
.contact { background: #0c1522; border-top: 1px solid #26394d; }
.contact > .eyebrow { color: #91a4b9; }
.contact-main .accent-text { color: var(--accent); }
.contact-aside p, .contact-bottom { color: #9aabba; }
.button-light { color: #06110f; background: var(--accent); }
.button-light:hover { color: #06110f; background: #8bffe3; }
.contact-bottom { border-color: #26394d; }
.social-links span { color: var(--accent); }
.site-footer { color: #8493a7; }
.site-footer .wordmark { color: #f4f8ff; }
.site-footer > a:last-child { color: #b6c4d2; }
.site-footer > a:last-child:hover, .contact-details a:hover { color: var(--accent); }
.button:hover { box-shadow: 0 0 26px #55f2cb2b; }
.navigation.is-open { background: #0b1320; border-color: var(--line); }

@media (max-width: 760px) {
  .hero-visual { min-height: 360px; }
  .hero-visual::before { width: 235px; height: 235px; }
}

/* Tech-inspired motion: scan lines, data-grid drift, and responsive card tilt. */
.hero-visual {
  background-position: 0 0, 0 0, center;
  animation: grid-drift 18s linear infinite;
}
.hero-visual::after {
  position: absolute;
  z-index: 2;
  top: -25%;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  pointer-events: none;
  opacity: .65;
  background: linear-gradient(90deg, transparent, #55f2cb, #a5fff0, #55f2cb, transparent);
  box-shadow: 0 0 14px #55f2cb99, 0 0 32px #55f2cb55;
  animation: hero-scan 6s ease-in-out infinite;
}
.hero-visual:hover::before { box-shadow: 0 0 85px #55f2cb30, inset 0 0 50px #55f2cb20; }
.hero-copy h1 { transition: text-shadow .35s ease; }
.hero-copy h1:hover { text-shadow: 0 0 32px #55f2cb22; }
.visual-caption span:first-child { animation: data-flicker 5s steps(1, end) infinite; }
.project-art {
  transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transform-style: preserve-3d;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  background-image: linear-gradient(#8197ad12 1px, transparent 1px), linear-gradient(90deg, #8197ad12 1px, transparent 1px), radial-gradient(ellipse at var(--pointer-x, 50%) var(--pointer-y, 50%), #55f2cb16, transparent 42%);
}
.project-link:hover .project-art { border-color: #55f2cb88; box-shadow: 0 12px 40px #0007, 0 0 24px #55f2cb12; }
.project-art::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(transparent 48%, #55f2cb26 50%, transparent 52%);
  background-size: 100% 220%;
  transition: opacity .25s ease;
}
.project-link:hover .project-art::before { opacity: 1; animation: card-scan 2.8s linear infinite; }
.project-number { transition: color .25s ease, letter-spacing .25s ease; }
.project-link:hover .project-number { color: var(--accent); letter-spacing: 1.4px; }
.art-shape { z-index: 0; }
.art-type { z-index: 2; }
.art-sticker, .project-number { z-index: 3; }
.project-link:focus-visible .project-art { outline: 2px solid var(--accent); outline-offset: 4px; }
.navigation.is-open { animation: menu-drop .22s ease-out both; }

@keyframes grid-drift {
  to { background-position: 24px 24px, 24px 24px, center; }
}
@keyframes hero-scan {
  0%, 8% { top: -4%; opacity: 0; }
  15% { opacity: .75; }
  85% { opacity: .55; }
  94%, 100% { top: 104%; opacity: 0; }
}
@keyframes card-scan {
  from { background-position: 0 -100%; }
  to { background-position: 0 100%; }
}
@keyframes data-flicker {
  0%, 88%, 91%, 100% { opacity: 1; }
  89%, 90% { opacity: .45; }
}
@keyframes menu-drop {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual, .hero-visual::after, .visual-caption span:first-child,
  .project-link:hover .project-art::before, .navigation.is-open {
    animation: none !important;
  }
  .project-art { transform: none !important; }
}

/* Project 02 uses a compact school dashboard instead of abstract display type. */
.art-school-dashboard {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 14px;
  background-color: #08121e;
  background-image: radial-gradient(ellipse at 50% 100%, #0a514a35, transparent 65%), linear-gradient(#8197ad0b 1px, transparent 1px), linear-gradient(90deg, #8197ad0b 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
}
.school-ui-mockup {
  width: min(100%, 480px);
  padding: 11px 14px 12px;
  border: 1px solid #294355;
  border-radius: 9px;
  background: linear-gradient(145deg, #111e2c, #0b1521 76%);
  box-shadow: 0 22px 60px #0008, 0 0 35px #55f2cb0d;
  color: #d9e6ee;
  font-family: var(--sans);
  text-align: left;
  transform: translateZ(24px) scale(.9);
}
.school-ui-topbar, .school-ui-brand, .school-ui-greeting, .school-ui-stats, .school-ui-modules, .school-attendance-row, .school-grade-caption { display: flex; }
.school-ui-topbar { align-items: center; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid #26394a; }
.school-ui-brand { align-items: center; gap: 8px; margin-right: auto; color: #eff7fb; font-size: 8px; font-weight: 700; letter-spacing: .45px; }
.school-ui-brand small { display: block; margin-top: 2px; color: #748a9c; font: 6px var(--mono); letter-spacing: .8px; }
.school-ui-brand-icon { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid #55f2cb66; border-radius: 7px; color: #55f2cb; font: 700 13px var(--display); }
.school-ui-top-status { color: #89a0b1; font: 6px var(--mono); letter-spacing: .4px; white-space: nowrap; }
.school-ui-top-status i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #55f2cb; box-shadow: 0 0 7px #55f2cb; }
.school-ui-avatar { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #07120f; background: #55f2cb; font-size: 9px; font-weight: 700; }
.school-ui-greeting { justify-content: space-between; align-items: end; padding: 9px 0 8px; }
.school-ui-greeting small { display: block; margin-bottom: 4px; color: #7791a4; font: 6px var(--mono); letter-spacing: .9px; }
.school-ui-greeting strong { color: #f0f6fa; font: 600 13px var(--display); letter-spacing: -.3px; }
.school-ui-date { color: #7c91a1; font: 6px var(--mono); letter-spacing: .3px; }
.school-ui-stats { gap: 8px; }
.school-ui-stats > div { flex: 1; min-width: 0; padding: 7px 8px 6px; border: 1px solid #26394a; border-radius: 5px; background: #101d2a; }
.school-ui-stats > div > span { display: block; color: #8298a9; font: 6px var(--mono); letter-spacing: .5px; white-space: nowrap; }
.school-ui-stats strong { display: block; margin: 4px 0 2px; color: #eff7fb; font: 600 18px var(--display); letter-spacing: -.8px; }
.school-ui-stats strong small { color: #a2b5c3; font-size: 10px; }
.school-ui-stats > div > i { display: block; color: #7c91a1; font-size: 6px; font-style: normal; white-space: nowrap; }
.school-ui-stats > div > i::before { content: "↗"; margin-right: 3px; color: #55f2cb; }
.school-ui-stats > div > .school-stat-cyan { color: #55f2cb; }
.school-ui-modules { gap: 8px; margin-top: 6px; }
.school-ui-panel { min-width: 0; padding: 7px; border: 1px solid #26394a; border-radius: 5px; background: #0e1a27; }
.school-ui-attendance { flex: 1.15; }
.school-ui-grades { flex: .85; }
.school-panel-heading { display: flex; justify-content: space-between; gap: 4px; margin-bottom: 5px; color: #aebdca; font: 6px var(--mono); letter-spacing: .35px; white-space: nowrap; }
.school-panel-heading b { color: #55f2cb; font-size: 5px; font-weight: 400; }
.school-attendance-row { align-items: center; gap: 5px; padding: 3px 0; border-top: 1px solid #203142; color: #dce6ec; font-size: 7px; }
.school-attendance-row > span { flex: 1; }
.school-attendance-row strong { display: block; margin-top: 1px; color: #71899b; font-size: 6px; font-weight: 400; }
.school-attendance-row em { color: #b9cad5; font: normal 7px var(--mono); }
.attendance-dot { width: 5px; height: 5px; border-radius: 50%; }
.attendance-present { background: #55f2cb; }
.attendance-late { background: #f0c66e; }
.attendance-absent { background: #f17b83; }
.school-grade-chart { height: 32px; display: flex; align-items: end; gap: 4px; padding: 4px 2px 0; border-bottom: 1px solid #324656; background: repeating-linear-gradient(to bottom, transparent 0, transparent 9px, #70889a16 10px); }
.school-grade-chart i { flex: 1; min-width: 3px; height: 40%; border-radius: 2px 2px 0 0; background: linear-gradient(#55f2cb, #278d87); box-shadow: 0 0 7px #55f2cb1a; animation: grade-bars-in .7s both; }
.school-grade-chart i:nth-child(3n) { height: 66%; }
.school-grade-chart i:nth-child(3n + 1) { height: 86%; }
.school-grade-chart i:nth-child(4n) { height: 53%; }
.school-grade-chart i:nth-child(5n) { height: 96%; }
.school-grade-caption { justify-content: space-between; gap: 4px; margin-top: 7px; color: #8298a9; font: 5px var(--mono); letter-spacing: .2px; white-space: nowrap; }
.school-grade-caption b { color: #55f2cb; font-weight: 400; }
.project-link:hover .school-ui-mockup { border-color: #55f2cb88; box-shadow: 0 25px 70px #0009, 0 0 36px #55f2cb15; }
.project-link:hover .school-grade-chart i { animation: grade-bars-in .45s both; }
@keyframes grade-bars-in {
  from { transform: scaleY(.35); transform-origin: bottom; opacity: .45; }
  to { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
}
@media (max-width: 760px) {
  .art-school-dashboard { padding: 40px 12px 12px; }
  .school-ui-mockup { padding-inline: 10px; transform: translateZ(24px) scale(.88); }
  .school-ui-stats { gap: 5px; }
  .school-ui-stats > div { padding-inline: 6px; }
}
@media (max-width: 380px) {
  .school-ui-date { display: none; }
  .school-ui-topbar { gap: 7px; }
  .school-ui-stats > div > span { font-size: 5px; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .school-grade-chart i, .project-link:hover .school-grade-chart i { animation: none !important; }
}

/* Project artwork: distinct interface previews for the remaining systems. */
.art-cyber, .art-parking, .art-hotel {
  background-color: #09131f;
  background-image: radial-gradient(ellipse at 50% 110%, #55f2cb16, transparent 68%), linear-gradient(#8197ad0b 1px, transparent 1px), linear-gradient(90deg, #8197ad0b 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
}
.cyber-ui, .parking-ui, .hotel-ui {
  width: min(100%, 560px);
  border: 1px solid #294355;
  border-radius: 8px;
  background: linear-gradient(145deg, #111e2c, #0a1420 82%);
  box-shadow: 0 20px 55px #0008, 0 0 28px #55f2cb0b;
  color: #d9e6ee;
  font-family: var(--sans);
  text-align: left;
  transition: border-color .3s ease, box-shadow .3s ease;
  transform: translateZ(22px);
}
.project-link:hover .cyber-ui, .project-link:hover .parking-ui, .project-link:hover .hotel-ui {
  border-color: #55f2cb77;
  box-shadow: 0 24px 65px #0009, 0 0 32px #55f2cb16;
}
.cyber-ui { padding: 15px 18px 13px; }
.cyber-topbar, .cyber-brand, .cyber-status, .cyber-level, .cyber-body, .cyber-bottom { display: flex; align-items: center; }
.cyber-topbar { gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #26394a; }
.cyber-brand { gap: 7px; margin-right: auto; color: #eff7fb; font: 600 8px var(--mono); letter-spacing: .6px; }
.cyber-brand i { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #55f2cb77; border-radius: 6px; color: #55f2cb; font: normal 13px var(--sans); }
.cyber-status, .cyber-level { gap: 5px; color: #8da2b4; font: 6px var(--mono); letter-spacing: .45px; white-space: nowrap; }
.cyber-status i, .cyber-bottom > span:first-child i { width: 5px; height: 5px; border-radius: 50%; background: #55f2cb; box-shadow: 0 0 7px #55f2cb; }
.cyber-level { padding: 5px 7px; border: 1px solid #35485a; border-radius: 3px; color: #c7d7e1; }
.cyber-body { align-items: stretch; gap: 18px; padding: 18px 1px 17px; }
.cyber-story { flex: 1; padding: 4px 0; }
.cyber-kicker { display: block; margin-bottom: 10px; color: #55f2cb; font: 7px var(--mono); letter-spacing: .65px; }
.cyber-kicker b { padding: 0 4px; color: #647b8e; }
.cyber-story > strong { display: block; color: #f0f6fa; font: 700 clamp(22px, 3vw, 33px)/1.05 var(--display); letter-spacing: -1.7px; }
.cyber-story > p { max-width: 270px; margin: 8px 0 14px; color: #91a5b5; font-size: 9px; line-height: 1.65; }
.cyber-progress { display: block; height: 3px; max-width: 220px; margin-bottom: 6px; border-radius: 4px; background: #233647; overflow: hidden; }
.cyber-progress i { display: block; width: 42%; height: 100%; background: #55f2cb; box-shadow: 0 0 8px #55f2cb88; }
.cyber-story > small { display: flex; max-width: 220px; justify-content: space-between; color: #758b9d; font: 5px var(--mono); letter-spacing: .4px; }
.cyber-story > small b { color: #aec1cd; font-weight: 400; }
.cyber-chat { width: 48%; min-width: 190px; padding: 10px; border: 1px solid #293d4f; border-radius: 6px; background: #0a1521; }
.cyber-chat-title { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; color: #aebdc8; font: 6px var(--mono); letter-spacing: .35px; white-space: nowrap; }
.cyber-chat-title i { display: grid; width: 16px; height: 16px; place-items: center; border-radius: 5px; color: #06110f; background: #55f2cb; font: 700 7px var(--sans); }
.cyber-chat-title b { margin-left: auto; color: #55f2cb; font-size: 5px; font-weight: 400; }
.chat-bubble, .chat-answer { display: block; padding: 7px 8px; border: 1px solid #293d4d; border-radius: 5px 5px 5px 1px; color: #c4d3dd; background: #122130; font-size: 7px; line-height: 1.5; }
.chat-answer { position: relative; margin-top: 6px; border-color: #3ba99766; border-radius: 4px; color: #dcf5f0; background: #12312f; }
.chat-answer b { float: right; color: #55f2cb; }
.chat-answer-muted { border-color: #293d4d; color: #8395a3; background: #0e1925; }
.cyber-chat-foot { display: block; margin-top: 9px; color: #758b9d; font: 5px var(--mono); letter-spacing: .45px; }
.cyber-bottom { justify-content: space-between; padding-top: 10px; border-top: 1px solid #26394a; color: #8da1b1; font: 6px var(--mono); letter-spacing: .45px; }
.cyber-bottom > span:first-child { display: flex; align-items: center; gap: 5px; }
.cyber-bottom b { color: #55f2cb; font-size: 9px; }

.parking-ui { padding: 12px 14px 10px; }
.parking-topbar, .parking-brand, .parking-live, .parking-main, .parking-receipt { display: flex; align-items: center; }
.parking-topbar { gap: 10px; padding-bottom: 9px; border-bottom: 1px solid #26394a; }
.parking-brand { gap: 6px; margin-right: auto; color: #edf5fa; font: 700 8px var(--display); letter-spacing: 1px; }
.parking-brand i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 5px; color: #07120f; background: #55f2cb; font: 700 11px var(--display); font-style: normal; }
.parking-live, .parking-lot { gap: 4px; color: #8399aa; font: 5px var(--mono); letter-spacing: .3px; white-space: nowrap; }
.parking-live i { width: 4px; height: 4px; border-radius: 50%; background: #55f2cb; box-shadow: 0 0 6px #55f2cb; }
.parking-lot { padding: 5px 6px; border: 1px solid #304456; border-radius: 3px; color: #c1d1dc; }
.parking-main { align-items: stretch; gap: 10px; padding: 10px 0; }
.parking-map, .parking-payment { padding: 9px; border: 1px solid #26394a; border-radius: 5px; background: #0d1925; }
.parking-map { flex: 1; }
.parking-map-title { display: flex; justify-content: space-between; gap: 5px; margin-bottom: 8px; color: #8fa4b4; font: 6px var(--mono); letter-spacing: .45px; }
.parking-map-title b { color: #55f2cb; font-weight: 400; }
.parking-spaces { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; padding: 5px; border: 1px dashed #38505f; border-radius: 4px; }
.parking-spaces i { position: relative; height: 25px; border: 1px solid #55f2cb88; border-radius: 3px; background: #55f2cb18; }
.parking-spaces i::after { position: absolute; inset: 5px 3px; content: ""; border: 1px solid #55f2cb55; border-radius: 2px; }
.parking-spaces i.occupied { border-color: #60738377; background: #6e809018; }
.parking-spaces i.occupied::after { border-color: #74869655; background: #74869625; }
.parking-map-legend { display: flex; align-items: center; gap: 4px; margin-top: 7px; color: #91a4b2; font: 5px var(--mono); letter-spacing: .3px; }
.parking-map-legend i, .parking-map-legend b { width: 5px; height: 5px; margin-left: 3px; border: 1px solid #55f2cb; border-radius: 1px; background: #55f2cb30; }
.parking-map-legend b { border-color: #778a99; background: #778a9930; }
.parking-payment { width: 112px; display: flex; flex-direction: column; align-items: center; }
.parking-payment-label { color: #8197a8; font: 5px var(--mono); letter-spacing: .5px; }
.parking-payment > strong { margin-top: 3px; color: #eff7fb; font: 600 17px var(--display); letter-spacing: -.7px; }
.parking-duration { margin-top: 2px; color: #8a9eac; font: 6px var(--mono); }
.parking-qr { width: 46px; height: 46px; margin: 7px 0 4px; border: 4px solid #eff8f7; background-color: #eff8f7; background-image: conic-gradient(#0a1620 25%, transparent 0 50%, #0a1620 0 75%, transparent 0); background-size: 8px 8px; box-shadow: 0 0 12px #55f2cb20; }
.parking-qr i { display: block; width: 12px; height: 12px; margin: 0; border: 3px solid #0a1620; background: #eff8f7; box-shadow: 24px 0 #eff8f7, 24px 0 0 3px #0a1620, 0 24px #eff8f7, 0 24px 0 3px #0a1620; }
.parking-scan { color: #55f2cb; font: 5px var(--mono); letter-spacing: .6px; }
.parking-receipt { justify-content: space-between; padding-top: 8px; border-top: 1px solid #26394a; color: #9aafbb; font: 5px var(--mono); letter-spacing: .35px; }
.parking-receipt > span { color: #55f2cb; }
.parking-receipt > b { color: #c5d4dc; font-weight: 400; }

.hotel-ui { padding: 11px 14px 12px; }
.hotel-topbar, .hotel-mark, .hotel-greeting, .hotel-summary, .hotel-summary > span, .hotel-room-rate { display: flex; align-items: center; }
.hotel-topbar { gap: 7px; padding-bottom: 9px; border-bottom: 1px solid #29394a; }
.hotel-mark { justify-content: center; width: 23px; height: 23px; border: 1px solid #d9bb83; border-radius: 6px; color: #f0d5a0; font: 600 13px var(--display); }
.hotel-mark span { color: #55f2cb; }
.hotel-brand { margin-right: auto; color: #f2eadc; font: 600 7px var(--display); letter-spacing: 1px; }
.hotel-brand small { display: block; margin-top: 2px; color: #9d927f; font: 5px var(--mono); letter-spacing: .65px; }
.hotel-admin { padding: 5px 7px; border: 1px solid #3b4652; border-radius: 3px; color: #b9c2c8; font: 5px var(--mono); letter-spacing: .25px; white-space: nowrap; }
.hotel-greeting { justify-content: space-between; align-items: end; padding: 10px 0 8px; }
.hotel-greeting small { display: block; margin-bottom: 3px; color: #9f927e; font: 5px var(--mono); letter-spacing: .6px; }
.hotel-greeting strong { color: #f3ecdf; font: 600 13px var(--display); letter-spacing: -.3px; }
.hotel-date-nav { padding: 5px 7px; border: 1px solid #3a4652; border-radius: 3px; color: #bdc7cb; font: 6px var(--mono); }
.hotel-summary { gap: 6px; }
.hotel-summary > span { flex: 1; gap: 4px; min-width: 0; padding: 6px; border: 1px solid #344251; border-radius: 3px; color: #aeb9c1; font: 5px var(--mono); white-space: nowrap; }
.hotel-summary > span i { width: 4px; height: 4px; border-radius: 50%; background: #55f2cb; }
.hotel-summary > span:nth-child(2) i { background: #d7a968; }
.hotel-summary > span:nth-child(3) i { background: #8898b8; }
.hotel-summary > span b { margin-left: auto; color: #f1f4f1; font-size: 7px; font-weight: 500; }
.hotel-rooms { display: grid; grid-template-columns: .55fr 1.2fr 1fr; align-items: center; margin-top: 8px; }
.hotel-room-label { padding: 5px 4px; border-bottom: 1px solid #344251; color: #8d9ba4; font: 5px var(--mono); letter-spacing: .45px; }
.hotel-room-num, .hotel-room-guest, .hotel-room-rate { min-height: 30px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 4px; border-bottom: 1px solid #253442; color: #e2e5e1; font-size: 7px; }
.hotel-room-num { color: #e5c98e; font: 7px var(--mono); }
.hotel-room-guest i { color: #55f2cb; font: 5px var(--mono); font-style: normal; letter-spacing: .25px; }
.hotel-room-guest .room-occupied { color: #d7a968; }
.hotel-room-rate { flex-direction: row; align-items: center; justify-content: space-between; color: #dfe5e7; font: 6px var(--mono); white-space: nowrap; }
.hotel-room-rate b { padding: 3px 4px; border: 1px solid #55f2cb66; border-radius: 2px; color: #55f2cb; font-size: 5px; font-weight: 400; }
.project-link:hover .hotel-room-rate b { background: #55f2cb18; }

@media (max-width: 760px) {
  .cyber-ui { padding: 12px; }
  .cyber-body { gap: 10px; }
  .cyber-chat { min-width: 0; width: 51%; padding: 8px; }
  .parking-ui, .hotel-ui { padding-inline: 9px; }
  .parking-main { gap: 6px; }
  .parking-map, .parking-payment { padding: 6px; }
  .parking-payment { width: 92px; }
  .parking-spaces { gap: 3px; }
  .parking-spaces i { height: 21px; }
  .hotel-summary { gap: 3px; }
  .hotel-summary > span { gap: 3px; padding: 5px 3px; font-size: 4px; }
}
@media (max-width: 380px) {
  .cyber-topbar { gap: 6px; }
  .cyber-level { display: none; }
  .cyber-body { gap: 7px; }
  .cyber-story > strong { font-size: 20px; }
  .cyber-chat { padding: 6px; }
  .parking-live { display: none; }
  .parking-payment { width: 82px; }
  .hotel-admin { font-size: 4px; }
  .hotel-room-rate { font-size: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-link:hover .cyber-ui, .project-link:hover .parking-ui, .project-link:hover .hotel-ui {
    transition: none;
  }
}