:root {
  --ink: #202821;
  --muted: #59645d;
  --accent: #285448;
  --accent-light: #e8eee6;
  --line: #dedfd5;
  --soft: #f1f3eb;
  --canvas: #faf8f3;
  --card: #fdfcf9;
  --accent-hover: #1d4036;
  --orange: #e8590c;
  --orange-hover: #c2410c;
  --orange-light: #fff7ed;
  --orange-line: #fdba74;
  --max: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "Segoe UI", Arial, sans-serif; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
a, button, summary { outline-offset: 4px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); }
[hidden] { display: none !important; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.icon { display: block; width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-inline { display: inline-block; width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
::selection { background: #fed7aa; }
h1, h2, h3, h4, p { margin-top: 0; }
.container { width: min(var(--max), calc(100% - 88px)); margin-inline: auto; }
.skip-link:not(:focus), .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link:focus { position: fixed; z-index: 100; top: 10px; left: 10px; background: var(--canvas); padding: 12px; }
.site-header { background: var(--canvas); position: sticky; top: 0; z-index: 30; border-bottom: 1px solid transparent; }
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 5px 20px #00000005; }
.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-weight: 850; font-size: 29px; line-height: 1; letter-spacing: -.09em; }
.brand span { color: var(--orange); }
.brand-logo { display: block; width: 124px; height: 54px; object-fit: contain; mix-blend-mode: multiply; transform: translateX(-34px); }
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); font-size: 12px; font-weight: 650; margin-left: auto; }
.nav-links>a { position: relative; padding: 15px 0; }
.nav-links>a:not(.nav-cta):after { content: ""; position: absolute; bottom: 7px; left: 0; width: 0; height: 2.5px; border-radius: 2px; background: var(--orange); transition: width .2s; }
.nav-links>a:hover:after, .nav-links>a[aria-current]:after { width: 100%; }
.nav-links>a:hover { color: var(--orange); }
.nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--accent); color: #fff; border-radius: 10px; box-shadow: 0 4px 9px #0000001a; transition: background .18s ease, transform .18s ease; flex-shrink: 0; font-size: 12px; font-weight: 650; }
.nav-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
.nav-cta .icon-inline { width: 14px; height: 14px; color: #d3e1ce; stroke-width: 2.2; transition: transform .18s ease; }
.nav-cta:hover .icon-inline { transform: translateX(3px); }
.menu-toggle { display: none; border: 0; background: transparent; font-size: 19px; line-height: 1; letter-spacing: 2px; font-weight: 800; padding: 8px 6px; }
.language-switch { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.language-switch button { min-width: 32px; min-height: 28px; padding: 3px 7px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; transition: all .18s ease; }
.language-switch button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.language-switch button[data-language="id"][aria-pressed="true"] { background: var(--orange); color: #fff; }
.language-switch button:hover:not([aria-pressed="true"]) { background: var(--accent-light); color: var(--accent); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; min-height: 440px; padding-block: 28px 34px; }
.hero-copy { min-width: 0; }
.hello { width: max-content; font-size: 15px; font-weight: 650; margin-bottom: 14px; }
.section-heading h2:after, .about-copy h2:after { content: ""; position: absolute; left: 0; bottom: -10px; width: 80px; height: 3.5px; border-radius: 3px; background: var(--orange); }
.hero h1 { font-size: clamp(46px, 4.8vw, 64px); font-weight: 750; letter-spacing: -.055em; line-height: 1.08; margin-bottom: 12px; white-space: nowrap; }
.hero h1 span { color: var(--orange); }
.hero-role { font-size: 15px; font-weight: 600; color: var(--muted); margin-bottom: 17px; }
.hero-description { max-width: 390px; font-size: 14px; line-height: 1.8; margin-bottom: 22px; }
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 22px; border-radius: 10px; font-size: 13px; font-weight: 700; transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-2px); }
.primary { color: #fff; background: var(--orange); box-shadow: 0 4px 14px rgba(232, 89, 12, 0.28); }
.primary:hover { background: var(--orange-hover); box-shadow: 0 6px 18px rgba(232, 89, 12, 0.38); }
.outline { border: 1.5px solid #262626; background: transparent; color: var(--ink); }
.outline:hover { background: var(--orange-light); border-color: var(--orange); color: var(--orange); }
.btn-icon { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.button:hover .btn-icon { transform: translateY(-1px); }
.button .icon-inline { width: 16px; height: 16px; stroke-width: 2.2; transition: transform .18s ease; }
.button:hover .icon-inline { transform: translateX(3px); }
.hero-art { display: flex; align-items: center; justify-content: center; }
.hero-art img { display: block; width: min(100%, 600px); height: auto; }
.about { border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, .6fr); align-items: center; gap: 40px; padding-block: 36px 42px; }
.about-art img { display: block; width: min(100%, 500px); height: auto; margin-inline: auto; }
.about-copy { min-width: 0; }
.section-kicker { font-size: 11px; color: var(--orange); text-transform: uppercase; letter-spacing: .14em; font-weight: 750; margin-bottom: 5px; }
.about-copy h2, .section-heading h2 { font-size: 28px; letter-spacing: -.035em; line-height: 1.2; font-weight: 700; margin-bottom: 22px; position: relative; }
.about-copy p:not(.section-kicker) { font-size: 14px; line-height: 1.7; color: #3d3d3d; margin-bottom: 10px; }
.about-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 20px; margin: 19px 0 17px; font-size: 11px; font-weight: 650; }
.about-points>span { display: flex; align-items: center; gap: 11px; transition: color .18s ease; }
.about-points>span:hover { color: var(--orange); }
.about-points .icon { width: 25px; height: 25px; color: var(--accent); transition: transform .18s ease, color .18s ease; }
.about-points>span:hover .icon { color: var(--orange); transform: translateY(-1px); }
.about-details { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.about-details+ .about-details { margin-top: 4px; }
.about-details summary { display: flex; justify-content: space-between; cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; }
.about-details summary::-webkit-details-marker { display: none; }
.about-details summary span { color: var(--accent); font-size: 19px; line-height: 1; }
.about-details[open] summary span { transform: rotate(45deg); }
.about-details ul { margin: 10px 0 6px; padding-left: 17px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.skills-band { border-top: 1px solid var(--line); padding-block: 34px 42px; }
.section-heading { margin-bottom: 24px; }
.skills-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.skill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  flex: 0 0 auto;
  width: clamp(88px, 10vw, 110px);
  cursor: default;
}
.skill-tile {
  width: clamp(66px, 6.2vw, 76px);
  height: clamp(66px, 6.2vw, 76px);
  border-radius: 18px;
  background: #f4f5f0;
  border: 1px solid #dedfd5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.skill-item:hover .skill-tile { transform: translateY(-4px); }
.skill-tile-icon {
  width: clamp(28px, 2.7vw, 34px);
  height: clamp(28px, 2.7vw, 34px);
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s ease;
}
.skill-label {
  font-size: 12px;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.35;
  text-align: center;
  transition: color .2s ease;
}

/* Distinctive hover colors per skill */
.skill-item.skill-account:hover .skill-tile { background: #e8eee6; border-color: #285448; box-shadow: 0 8px 22px rgba(40, 84, 72, 0.22); }
.skill-item.skill-account:hover .skill-tile-icon { stroke: #285448; }
.skill-item.skill-account:hover .skill-label { color: #285448; }

.skill-item.skill-customer:hover .skill-tile { background: #ffedd5; border-color: #ea580c; box-shadow: 0 8px 22px rgba(234, 88, 12, 0.24); }
.skill-item.skill-customer:hover .skill-tile-icon { stroke: #ea580c; }
.skill-item.skill-customer:hover .skill-label { color: #ea580c; }

.skill-item.skill-implement:hover .skill-tile { background: #dbeafe; border-color: #2563eb; box-shadow: 0 8px 22px rgba(37, 99, 235, 0.24); }
.skill-item.skill-implement:hover .skill-tile-icon { stroke: #2563eb; }
.skill-item.skill-implement:hover .skill-label { color: #2563eb; }

.skill-item.skill-support:hover .skill-tile { background: #ccfbf1; border-color: #0d9488; box-shadow: 0 8px 22px rgba(13, 148, 136, 0.24); }
.skill-item.skill-support:hover .skill-tile-icon { stroke: #0d9488; }
.skill-item.skill-support:hover .skill-label { color: #0d9488; }

.skill-item.skill-training:hover .skill-tile { background: #fef3c7; border-color: #d97706; box-shadow: 0 8px 22px rgba(217, 119, 6, 0.24); }
.skill-item.skill-training:hover .skill-tile-icon { stroke: #d97706; }
.skill-item.skill-training:hover .skill-label { color: #d97706; }

.skill-item.skill-jira:hover .skill-tile { background: #e0e7ff; border-color: #4f46e5; box-shadow: 0 8px 22px rgba(79, 70, 229, 0.24); }
.skill-item.skill-jira:hover .skill-tile-icon { stroke: #4f46e5; }
.skill-item.skill-jira:hover .skill-label { color: #4f46e5; }

.skill-item.skill-ai:hover .skill-tile { background: #f3e8ff; border-color: #9333ea; box-shadow: 0 8px 22px rgba(147, 51, 234, 0.24); }
.skill-item.skill-ai:hover .skill-tile-icon { stroke: #9333ea; }
.skill-item.skill-ai:hover .skill-label { color: #9333ea; }
.work { border-top: 1px solid var(--line); padding-block: 34px 40px; }
.work-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 20px; }
.slider-nav { display: flex; gap: 8px; flex-shrink: 0; }
.slider-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; font-size: 16px; line-height: 1; transition: all .18s ease; cursor: pointer; }
.slider-arrow:hover:not(:disabled) { background: var(--orange); color: #fff; border-color: var(--orange); transform: translateY(-1px); }
.slider-arrow:disabled { opacity: .3; cursor: not-allowed; }
.project-grid { display: flex; flex-direction: row; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-block: 6px 18px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.project-grid::-webkit-scrollbar { height: 6px; }
.project-grid::-webkit-scrollbar-track { background: transparent; }
.project-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.project-grid::-webkit-scrollbar-thumb:hover { background: var(--orange); }
.project-card { flex: 0 0 clamp(290px, calc((100% - 48px) / 3), 344px); scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.project-card:hover { transform: translateY(-4px); border-color: #b8cabc; box-shadow: 0 14px 32px rgba(0,0,0,0.07); }
.project-art { height: 200px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 18px; }
.notulens-art { background: #fdf5ef; }
.textflow-art { background: #f4f3f8; }
.jagaduit-art { background: #fdf5ef; }
.workspace-art { background: #f1f5f2; }
/* Product demos loop at a relaxed pace, with a short hold and a soft reset. */
.project-art { --demo-time: 10s; }
.textflow-art { --demo-time: 10.5s; }
.jagaduit-art { --demo-time: 11s; }
.workspace-art { --demo-time: 12s; }
.app-window { width: min(100%, 230px); height: 144px; border: 1.5px solid #343a35; border-radius: 9px; background: #fff; box-shadow: 0 9px 20px #27352b12; overflow: hidden; position: relative; z-index: 2; }
.window-top { height: 23px; border-bottom: 1px solid #eaece8; display: flex; align-items: center; gap: 7px; padding: 0 9px; font-size: 7px; color: #729781; background: #fafbf9; }
.window-top small { color: #7a817b; font-size: 6.5px; white-space: nowrap; }
.window-content { padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 9px; }
.window-content strong { font-size: 10px; line-height: 1.3; }
.project-art::before { content: ''; position: absolute; inset: 14px; opacity: .45; background-image: radial-gradient(currentColor .8px, transparent 1px); background-size: 17px 17px; color: #c7d5c8; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); pointer-events: none; }
.textflow-art::before { color: #cfc9de; }
.jagaduit-art::before { color: #d9cfb9; }
.workspace-art::before { color: #bbd2c5; }
.demo-cursor { position: absolute; width: 14px; height: 17px; z-index: 4; fill: #263b31; stroke: white; stroke-width: 1.6; filter: drop-shadow(0 2px 2px #0002); opacity: 0; pointer-events: none; }
.project-art .app-window, .project-art .phone-mockup { transition: box-shadow .3s; }
.project-card:hover .app-window, .project-card:hover .phone-mockup { box-shadow: 0 12px 25px #1f372123; }

.notes-body { position: relative; height: 56px; border: 1px solid #e4e9e1; border-radius: 5px; overflow: hidden; background: #fcfdfb; }
.notes-draft, .notes-summary { position: absolute; inset: 0; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.notes-draft { opacity: 0; color: #85877c; font-size: 8px; font-family: Georgia, serif; }
.notes-draft span:nth-child(2) { transform: rotate(-2deg); }
.notes-draft span:nth-child(3) { transform: rotate(1deg); }
.notes-summary { font-size: 7.5px; color: #425349; }
.notes-summary small { font-size: 6px; font-weight: 750; letter-spacing: .08em; color: #7d8e78; }
.notes-summary div { display: flex; align-items: center; gap: 5px; }
.notes-summary i { font-style: normal; color: #477758; }
.notes-map { position: absolute; inset: 0; padding: 5px 8px; color: #56705e; opacity: 0; }
.notes-map small { font-size: 6px; font-weight: 750; letter-spacing: .08em; }
.map-lines { display: flex; align-items: center; justify-content: space-around; margin-top: 10px; position: relative; }
.map-lines::before { content: ''; position: absolute; left: 16%; right: 16%; top: 50%; border-top: 1px dashed #a6bba6; }
.map-lines span { position: relative; z-index: 1; padding: 3px 5px; background: #fff; border: 1px solid #b5cbb6; border-radius: 12px; font-size: 6px; }
.map-lines span:nth-child(2) { border-color: #dfbd91; }
.notes-scan { position: absolute; inset: 0 auto 0 0; width: 2px; background: #83ae86; box-shadow: -8px 0 16px 5px #a8c7a855; opacity: 0; }
.mini-check { display: flex; align-items: center; gap: 4px; color: #367b55; font-weight: 600; font-size: 7px; }

.text-window { border-color: #59516b; }
.text-window .window-content { gap: 9px; }
.template-stage { position: relative; height: 39px; }
.template-row { min-height: 39px; padding: 8px; background: #f6f4fa; border: 1px solid #eae4f3; border-radius: 5px; font-size: 8px; line-height: 1.7; color: #555065; }
.template-stage .template-row { position: absolute; inset: 0; }
.template-row-alt { opacity: 0; }
.template-name { display: inline-grid; grid-template-columns: minmax(0, 1fr); width: 24px; vertical-align: bottom; overflow: hidden; white-space: nowrap; background: #e9e1fb; color: #6d4dad; border-radius: 3px; padding: 0 3px; }
.template-name>span { grid-area: 1 / 1; }
.template-product { display: inline-grid; grid-template-columns: minmax(0, 1fr); width: 40px; vertical-align: bottom; overflow: hidden; white-space: nowrap; background: #e9e1fb; color: #6d4dad; border-radius: 3px; padding: 0 3px; }
.template-product>span { grid-area: 1 / 1; }
.product-filled { opacity: 0; font-weight: 700; }
.template-placeholder { opacity: 0; }
.template-filled { font-weight: 700; }
.template-actions { display: flex; align-items: center; gap: 8px; }
.template-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; background: #e5ddff; color: #5637b9; border-radius: 4px; font-weight: 650; font-size: 7px; }
.template-chip .icon-inline { width: 10px; height: 10px; }
.copy-feedback { color: #6a5486; font-size: 7px; font-weight: 650; }
.text-cursor { left: 48%; top: 65px; }

.phone-mockup { width: 106px; height: 152px; padding: 9px 7px 6px; border: 4px solid #303631; border-radius: 17px; background: #fff; box-shadow: 0 9px 20px #27352b18; display: flex; flex-direction: column; position: relative; z-index: 2; }
.phone-top { color: #165841; font-size: 8px; font-weight: 750; display: flex; justify-content: space-between; margin-bottom: 7px; }
.phone-mockup small { font-size: 6px; color: #888; }
.phone-mockup strong { font-size: 10px; color: #202020; white-space: nowrap; }
.budget-bars { height: 28px; display: flex; align-items: end; gap: 4px; padding: 5px 1px 0; }
.budget-bars i { display: block; flex: 1; background: #a7c1aa; height: 40%; border-radius: 2px 2px 0 0; transform-origin: bottom; }
.budget-bars i:nth-child(2) { height: 83%; background: var(--accent); }
.budget-bars i:nth-child(3) { height: 56%; }
.budget-bars i:nth-child(4) { height: 71%; }
.budget-bars i:nth-child(5) { height: 40%; }
.phone-bottom { border-top: 1px solid #eee; margin-top: auto; padding-top: 4px; font-size: 5px; color: #777; white-space: nowrap; }
.transaction-row { display: flex; align-items: center; gap: 4px; margin-top: 7px; padding-top: 5px; border-top: 1px solid #eff1ec; }
.transaction-row>span { width: 14px; height: 14px; display: grid; place-items: center; background: #edf3e9; color: #487653; border-radius: 4px; font-size: 8px; }
.transaction-row b { display: block; font-size: 5.5px; font-weight: 600; }
.transaction-row i { display: block; width: 26px; height: 2px; margin-top: 3px; background: #e2e9de; border-radius: 2px; }
.scene-receipt { position: absolute; left: calc(50% - 100px); top: 40px; width: 49px; height: 67px; padding: 8px; display: flex; flex-direction: column; gap: 4px; border: 1px solid #d8c8b1; background: #fffdf8; border-radius: 4px; box-shadow: 0 4px 0 #eee5d8; transform: rotate(-9deg); z-index: 3; overflow: hidden; }
.scene-receipt small { font-size: 6px; letter-spacing: .08em; color: #9d8c70; }
.scene-receipt i { height: 2px; background: #d1c9b8; }
.scene-receipt i:nth-of-type(2) { width: 75%; }
.scene-receipt i:nth-of-type(3) { width: 55%; }
.receipt-total { margin-top: auto; font-size: 7px; color: #988568; font-weight: 700; }
.receipt-scan { position: absolute; inset: 0 0 auto; height: 2px; background: #84ac8c; box-shadow: 0 -6px 12px 3px #a6c3a788; opacity: 0; }
.transaction-toast { position: absolute; z-index: 3; bottom: 30px; left: calc(50% + 18px); padding: 5px 8px; color: #386347; font-size: 7px; font-weight: 650; background: #fcfff9; border: 1px solid #c4d7bd; border-radius: 6px; box-shadow: 0 4px 8px #2c452918; white-space: nowrap; }
.voice-input { position: absolute; z-index: 3; left: calc(50% - 100px); top: 78px; display: flex; align-items: center; gap: 3px; width: 66px; height: 27px; padding: 5px; border: 1px solid #b7cfbc; border-radius: 7px; background: #fff; box-shadow: 0 4px 8px #2c452918; color: #406950; font-size: 7px; font-weight: 650; opacity: 0; }
.voice-input span { margin-right: auto; }
.voice-input i { width: 2px; height: 7px; background: #5c9369; border-radius: 3px; }

.workspace-window .window-content { padding: 8px; gap: 7px; }
.board-toolbar { display: flex; justify-content: space-between; align-items: center; }
.board-toolbar strong { font-size: 9px; }
.board-members { display: flex; padding-right: 2px; }
.board-members i { width: 10px; height: 10px; margin-right: -2px; border-radius: 50%; border: 1px solid white; background: #739282; }
.board-members i:nth-child(2) { background: #c3b192; }
.board-members i:nth-child(3) { background: #b1c7b8; }
.kanban-board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; height: 84px; }
.kanban-column { padding: 4px; border-radius: 4px; background: #f3f4f0; min-width: 0; }
.kanban-column:nth-child(2) { background: #fbf3e8; }
.kanban-column:nth-child(3) { background: #edf4ed; }
.kanban-column>small { display: block; white-space: nowrap; font-size: 6.5px; color: #758078; font-weight: 650; }
.kanban-column:nth-child(2)>small { color: #9f7b47; }
.kanban-column:nth-child(3)>small { color: #527d5b; }
.kanban-placeholder { margin-top: 39px; padding: 4px; border: 1px solid #e3e7df; border-radius: 3px; background: #fff; }
.kanban-placeholder i { display: block; height: 2px; border-radius: 2px; background: #e1e6df; margin-bottom: 3px; }
.kanban-placeholder i:nth-child(2) { width: 65%; }
.kanban-placeholder b { display: block; width: 10px; height: 3px; border-radius: 2px; background: #cfdbca; }
.kanban-moving { position: absolute; z-index: 2; top: 20px; left: 0; width: calc((100% - 12px) / 3); height: 34px; padding: 5px; background: #fff; border: 1px solid #8daf90; border-radius: 4px; box-shadow: 0 2px 4px #2f493518; transform: translateX(calc(200% + 12px)); }
.kanban-task-title { display: block; font-size: 6.5px; color: #425349; white-space: nowrap; }
.kanban-moving>i { display: block; width: 70%; height: 2px; background: #dce5d8; margin-top: 3px; border-radius: 2px; }
.kanban-moving-next { opacity: 0; border-color: #d6b27a; }
.kanban-task-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; }
.kanban-task-footer b { width: 13px; height: 3px; border-radius: 2px; background: #d7e4d0; }
.kanban-task-footer em { color: #4b7d53; font-style: normal; font-size: 7px; line-height: 1; }
.kanban-cursor { left: 19%; top: 40px; }

/* Every scene repeats automatically while its card is visible. */
.preview-active .notes-draft { animation: notes-draft var(--demo-time) infinite both; }
.preview-active .notes-summary { animation: notes-summary var(--demo-time) infinite both; }
.preview-active .notes-summary div { animation: notes-line var(--demo-time) infinite both; }
.preview-active .notes-summary div:last-child { animation-name: notes-line-last; }
.preview-active .notes-map { animation: notes-map var(--demo-time) infinite both; }
.preview-active .map-lines span:nth-child(1) { animation: map-node-one var(--demo-time) infinite both; }
.preview-active .map-lines span:nth-child(2) { animation: map-node-two var(--demo-time) infinite both; }
.preview-active .map-lines span:nth-child(3) { animation: map-node-three var(--demo-time) infinite both; }
.preview-active .notes-scan { animation: notes-scan var(--demo-time) infinite both; }
.preview-active .mini-check { animation: demo-confirm var(--demo-time) infinite both; }
.preview-active .template-placeholder { animation: template-placeholder var(--demo-time) infinite both; }
.preview-active .template-row:not(.template-row-alt) { animation: template-stage-one var(--demo-time) infinite both; }
.preview-active .template-row-alt { animation: template-stage-two var(--demo-time) infinite both; }
.preview-active .template-name { animation: template-fit var(--demo-time) infinite both; }
.preview-active .template-filled { animation: template-filled var(--demo-time) infinite both; }
.preview-active .product-placeholder { animation: product-placeholder var(--demo-time) infinite both; }
.preview-active .product-filled { animation: product-filled var(--demo-time) infinite both; }
.preview-active .template-chip { animation: copy-press var(--demo-time) infinite both; }
.preview-active .copy-feedback { animation: copy-feedback var(--demo-time) infinite both; }
.preview-active .text-cursor { animation: text-cursor var(--demo-time) infinite both; }
.preview-active .scene-receipt { animation: receipt-feed var(--demo-time) infinite both; }
.preview-active .receipt-scan { animation: receipt-scan var(--demo-time) infinite both; }
.preview-active .budget-bars i { animation: chart-update var(--demo-time) infinite both; }
.preview-active .budget-bars i:nth-child(even) { animation-name: chart-update-late; }
.preview-active .transaction-row { animation: transaction-appear var(--demo-time) infinite both; }
.preview-active .transaction-toast { animation: transaction-toast var(--demo-time) infinite both; }
.preview-active .voice-input { animation: voice-appear var(--demo-time) infinite both; }
.preview-active .voice-input i { animation: voice-wave var(--demo-time) infinite both; }
.preview-active .voice-input i:nth-of-type(2) { animation-delay: -.12s; }
.preview-active .voice-input i:nth-of-type(3) { animation-delay: -.24s; }
.preview-active .voice-input i:nth-of-type(4) { animation-delay: -.36s; }
.preview-active .kanban-moving { animation: kanban-move var(--demo-time) infinite both; }
.preview-active .kanban-moving-next { animation: kanban-next var(--demo-time) infinite both; }
.preview-active .kanban-task-footer em { animation: kanban-check var(--demo-time) infinite both; }
.preview-active .kanban-cursor { animation: kanban-cursor var(--demo-time) infinite both; }
.preview-active:not(.preview-visible) .project-art * { animation-play-state: paused; }

@keyframes notes-draft { 0%, 10%, 100% { opacity: 1; transform: none; } 18%, 92% { opacity: 0; transform: translateY(-6px); } 95% { opacity: 0; transform: none; } }
@keyframes notes-summary { 0%, 18%, 100% { opacity: 0; } 26%, 44% { opacity: 1; } 50% { opacity: 0; } }
@keyframes notes-line { 0%, 22%, 100% { opacity: 0; transform: translateX(-6px); } 29%, 44% { opacity: 1; transform: none; } 50% { opacity: 0; transform: none; } }
@keyframes notes-line-last { 0%, 27%, 100% { opacity: 0; transform: translateX(-6px); } 34%, 44% { opacity: 1; transform: none; } 50% { opacity: 0; transform: none; } }
@keyframes notes-map { 0%, 46%, 100% { opacity: 0; transform: translateY(4px); } 53%, 88% { opacity: 1; transform: none; } 96% { opacity: 0; transform: translateY(-4px); } }
@keyframes map-node-one { 0%, 51%, 100% { opacity: 0; transform: scale(.7); } 57%, 89% { opacity: 1; transform: none; } 96% { opacity: 0; transform: none; } }
@keyframes map-node-two { 0%, 57%, 100% { opacity: 0; transform: scale(.7); } 63%, 89% { opacity: 1; transform: none; } 96% { opacity: 0; transform: none; } }
@keyframes map-node-three { 0%, 63%, 100% { opacity: 0; transform: scale(.7); } 69%, 89% { opacity: 1; transform: none; } 96% { opacity: 0; transform: none; } }
@keyframes notes-scan { 0%, 5%, 100% { opacity: 0; left: 0; } 7% { opacity: 1; left: 0; } 15% { opacity: 1; left: 100%; } 18%, 95% { opacity: 0; left: 100%; } 96% { opacity: 0; left: 0; } }
@keyframes demo-confirm { 0%, 29%, 100% { opacity: 0; transform: translateY(4px) scale(.95); } 37%, 88% { opacity: 1; transform: none; } 95% { opacity: 0; transform: translateY(4px) scale(.95); } }
@keyframes template-stage-one { 0%, 43%, 100% { opacity: 1; } 51%, 95% { opacity: 0; } }
@keyframes template-stage-two { 0%, 45%, 100% { opacity: 0; } 53%, 89% { opacity: 1; } 96% { opacity: 0; } }
@keyframes template-placeholder { 0%, 12%, 100% { opacity: 1; } 19%, 95% { opacity: 0; } }
@keyframes template-fit { 0%, 12%, 100% { width: 45px; } 19%, 94% { width: 24px; } }
@keyframes template-filled { 0%, 13%, 100% { opacity: 0; } 20%, 100% { opacity: 1; } }
@keyframes product-placeholder { 0%, 61%, 100% { opacity: 1; } 68%, 95% { opacity: 0; } }
@keyframes product-filled { 0%, 61%, 100% { opacity: 0; } 68%, 94% { opacity: 1; } }
@keyframes copy-press { 0%, 29%, 36%, 73%, 80%, 100% { transform: none; background: #e5ddff; } 33%, 77% { transform: scale(.94); background: #cbb9f4; } }
@keyframes copy-feedback { 0%, 35%, 48%, 78%, 90%, 100% { opacity: 0; transform: translateY(4px); } 39%, 44%, 82%, 87% { opacity: 1; transform: none; } }
@keyframes text-cursor {
  0%, 7%, 100% { opacity: 0; transform: translate(38px, 35px); }
  13%, 19% { opacity: 1; transform: none; }
  30%, 34% { opacity: 1; transform: translate(-48px, 44px); }
  43%, 52% { opacity: 0; transform: translate(38px, 35px); }
  62%, 68% { opacity: 1; transform: none; }
  74%, 78% { opacity: 1; transform: translate(-48px, 44px); }
  88%, 95% { opacity: 0; transform: translate(-32px, 50px); }
}
@keyframes receipt-feed { 0%, 16%, 100% { opacity: 1; transform: rotate(-9deg); } 27%, 91% { opacity: 0; transform: translate(46px, 7px) rotate(0) scale(.45); } 95% { opacity: 0; transform: rotate(-9deg); } }
@keyframes receipt-scan { 0%, 5%, 100% { opacity: 0; top: 0; } 7% { opacity: 1; top: 0; } 16% { opacity: 1; top: 100%; } 19%, 94% { opacity: 0; top: 100%; } 96% { opacity: 0; top: 0; } }
@keyframes chart-update { 0%, 26%, 100% { transform: scaleY(.2); } 36%, 67%, 91% { transform: scaleY(1); } 72% { transform: scaleY(.65); } }
@keyframes chart-update-late { 0%, 27%, 100% { transform: scaleY(.3); } 38%, 68%, 91% { transform: scaleY(1); } 73% { transform: scaleY(.65); } }
@keyframes transaction-appear { 0%, 30%, 100% { opacity: 0; transform: translateY(3px); } 38%, 90% { opacity: 1; transform: none; } 96% { opacity: 0; transform: translateY(3px); } }
@keyframes transaction-toast { 0%, 36%, 51%, 73%, 88%, 100% { opacity: 0; transform: translateY(4px); } 42%, 47%, 79%, 84% { opacity: 1; transform: none; } }
@keyframes voice-appear { 0%, 51%, 100% { opacity: 0; transform: translateY(5px); } 57%, 82% { opacity: 1; transform: none; } 88% { opacity: 0; transform: translateY(-4px); } }
@keyframes voice-wave { 0%, 53%, 62%, 69%, 100% { transform: scaleY(.45); } 57%, 65%, 73% { transform: scaleY(1.5); } }
@keyframes kanban-move {
  0%, 10%, 100% { opacity: 1; transform: translateX(0); border-color: #c9d4c5; box-shadow: 0 2px 4px #2f493518; }
  15% { transform: translate(10px, -5px) rotate(-4deg); box-shadow: 0 6px 9px #2f493528; }
  20%, 25% { transform: translateX(calc(100% + 6px)); border-color: #d6b27a; box-shadow: 0 2px 4px #2f493518; }
  30% { transform: translate(calc(100% + 16px), -5px) rotate(-4deg); box-shadow: 0 6px 9px #2f493528; }
  35%, 47% { opacity: 1; transform: translateX(calc(200% + 12px)); border-color: #8daf90; box-shadow: 0 2px 4px #2f493518; }
  49% { opacity: 0; transform: translateX(calc(200% + 12px)); }
  50%, 94% { opacity: 0; transform: translateX(0); }
}
@keyframes kanban-next {
  0%, 49%, 100% { opacity: 0; transform: translateX(0); }
  55%, 60% { opacity: 1; transform: translateX(0); }
  64% { opacity: 1; transform: translate(10px, -5px) rotate(-4deg); box-shadow: 0 6px 9px #2f493528; }
  70%, 86% { opacity: 1; transform: translateX(calc(100% + 6px)); box-shadow: 0 2px 4px #2f493518; }
  90% { opacity: 0; transform: translateX(calc(100% + 6px)); }
  94% { opacity: 0; transform: translateX(0); }
}
@keyframes kanban-check { 0%, 32%, 100% { opacity: 0; } 38%, 47% { opacity: 1; } 50% { opacity: 0; } }
@keyframes kanban-cursor {
  0%, 8%, 100% { opacity: 0; left: 19%; transform: translate(8px, 14px); }
  13% { opacity: 1; left: 23%; transform: translateY(-5px); }
  20%, 25% { opacity: 1; left: 52%; transform: none; }
  30% { opacity: 1; left: 56%; transform: translateY(-5px); }
  35% { opacity: 1; left: 86%; transform: none; }
  43%, 55% { opacity: 0; left: 19%; transform: translate(8px, 14px); }
  63% { opacity: 1; left: 23%; transform: translateY(-5px); }
  70% { opacity: 1; left: 52%; transform: none; }
  80%, 94% { opacity: 0; left: 57%; transform: translateY(8px); }
}
.project-info { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.project-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.project-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.project-logo { width: 23px; height: 23px; flex: 0 0 23px; object-fit: cover; border-radius: 7px; box-shadow: 0 1px 4px rgba(25, 50, 40, .12); }
.project-title h3 { font-size: 18px; margin: 0; font-weight: 750; letter-spacing: -.02em; }
.project-title a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--muted); background: #f4f5f0; transition: color .18s ease, background .18s ease, transform .18s ease; }
.project-title a:hover { color: #fff; background: var(--orange); transform: translateY(-1px); }
.project-title a .icon-inline { width: 15px; height: 15px; stroke-width: 2; }
.project-info>p { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0 0 16px; min-height: 40px; }
.project-tags { font-size: 12px; color: var(--muted); margin-top: auto; font-weight: 500; letter-spacing: .02em; }
.internal-pill { font-size: 9px; font-weight: 700; color: #555; background: #ebebe5; padding: 3px 6px; border-radius: 4px; }
.experience-band { border-top: 1px solid var(--line); padding: 38px 0; }
.timeline { display: flex; flex-direction: column; }
.role { position: relative; padding: 0 0 23px; }
.role summary { display: flex; align-items: start; gap: 16px; list-style: none; cursor: pointer; }
.role summary::-webkit-details-marker { display: none; }
.role-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #edf0e6; }
.role-icon .icon { width: 21px; height: 21px; }
.role summary>span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.role small { color: var(--orange); font-size: 11px; font-weight: 650; margin-bottom: 4px; }
.role strong { font-size: 15px; font-weight: 650; line-height: 1.4; }
.role em { color: var(--muted); font-style: normal; font-size: 12px; margin-top: 3px; }
.role-plus { display: grid; place-items: center; min-width: 32px; height: 32px; margin-left: auto; color: var(--accent); line-height: 1; }
.role[open] .role-plus { transform: rotate(45deg); }
.role p { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 8px 0 0 56px; max-width: 470px; }
.more-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 650; color: var(--ink); transition: color .18s ease; }
.more-link:hover { color: var(--orange); }
.more-link .icon-inline { width: 14px; height: 14px; color: var(--orange); stroke-width: 2.2; transition: transform .18s ease; }
.more-link:hover .icon-inline { transform: translateX(3px); }

/* Contact Card (Dominant Green Brand Style) */
.contact-section { padding-block: 44px 20px; }
.contact-card {
  background: #285448;
  background: linear-gradient(135deg, #224a3e 0%, #285448 55%, #1e4137 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  padding: 36px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 36px;
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(40, 84, 72, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.contact-card:hover {
  box-shadow: 0 20px 48px rgba(40, 84, 72, 0.28), 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}
.contact-cta-col { display: flex; flex-direction: column; position: relative; z-index: 1; }
.contact-title {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.2;
  margin: 0;
  color: #ffffff;
}
.contact-title .accent-text { color: var(--orange-line); }
.contact-accent-line {
  width: 60px;
  height: 3.5px;
  background: var(--orange);
  border-radius: 3px;
  margin-top: 14px;
}
.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.contact-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; position: relative; z-index: 1; }
.contact-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #e2ece5;
  transition: color .18s ease, transform .18s ease;
}
a.contact-info-item:hover {
  color: #ffffff;
  transform: translateX(3px);
}
.contact-icon-wrap {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.contact-info-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #d3e1ce;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-connect-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.connect-title {
  font-size: 14px;
  font-weight: 750;
  color: #ffffff;
  margin: 0 0 14px;
  letter-spacing: -.01em;
}
.social-links-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.social-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  color: #ffffff;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform .2s cubic-bezier(.2,.7,.2,1), border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.social-btn:hover {
  transform: translateY(-3px);
  border-color: #ffffff;
  background: #ffffff;
  color: #285448;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
.social-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Footer Bar */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 24px;
  margin-top: 40px;
  font-size: 12.5px;
  color: var(--muted);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.footer-copyright {
  margin: 0;
  font-weight: 550;
  color: var(--muted);
}
.footer-top-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  color: var(--muted);
  transition: color .18s ease, transform .18s ease;
}
.footer-top-link:hover {
  color: var(--orange);
  transform: translateY(-2px);
}
.footer-top-link span {
  font-size: 14px;
  line-height: 1;
}
.experience-layout { display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); gap: 56px; }
.experience-intro>p { max-width: 250px; font-size: 14px; line-height: 1.75; color: var(--muted); margin-bottom: 14px; }
.role:not(:last-child)::before { content: ""; position: absolute; top: 44px; bottom: 4px; left: 19px; border-left: 1px solid var(--line); }
.role:last-child { padding-bottom: 0; }
.project-toolbar { display: flex; justify-content: flex-end; margin-bottom: 18px; }
@media(min-width: 1180px) {
  .project-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; overflow: visible; scroll-snap-type: none; padding-bottom: 6px; }
  .project-card { width: 100%; }
  .project-art { height: 174px; padding-inline: 10px; }
  .project-info { padding: 17px 16px 18px; }
  .project-title h3 { font-size: 16px; }
  .project-info>p { font-size: 12px; }
  .project-tags { font-size: 10.5px; }
  .project-toolbar { display: none; }
}
@media(max-width: 980px) {
  .container { width: min(var(--max), calc(100% - 48px)); }
  .nav-links { gap: 14px; font-size: 11px; }
  .hero { gap: 24px; min-height: 380px; }
  .hero h1 { font-size: clamp(38px, 5vw, 52px); }
  .hero-role { font-size: 13px; }
  .hero-description { font-size: 13px; }
  .about, .experience-layout { gap: 32px; }
  .about-copy p:not(.section-kicker) { font-size: 13px; }
  .project-card { flex: 0 0 clamp(280px, calc((100% - 20px) / 2), 360px); }
  .project-info { padding: 18px 18px; }
  .project-art { padding-inline: 14px; height: 185px; }
  .project-title h3 { font-size: 17px; }
  .project-info>p { font-size: 12px; }
  .contact-card { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); padding: 32px; gap: 28px; }
}
@media(max-width: 900px) {
  .nav { flex-wrap: wrap; gap: 10px; }
  .brand { margin-right: 0; }
  .menu-toggle { display: none; }
  .language-switch { margin-left: auto; order: 1; }
  .nav-links { order: 3; width: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 14px; font-size: 13px; margin-left: 0; }
  .nav-links.open { display: flex; }
  .nav-links>a { padding: 10px 0; }
  .nav-cta { display: none; }
}
@media(max-width: 680px) {
  html { scroll-padding-top: 78px; }
  .container { width: calc(100% - 38px); }
  .nav { min-height: 64px; }
  .brand { font-size: 27px; }
  .brand-logo { transform: translateX(-34px); }
  .menu-toggle { display: none; }
  .language-switch { order: 1; }
  .nav-links { width: 100%; display: none; flex-direction: column; align-items: stretch; padding: 5px 0 18px; gap: 0; font-size: 13px; margin-left: 0; }
  .nav-links.open { display: flex; }
  .nav-links>a { padding: 11px 0; }
  .hero { display: flex; flex-direction: column; min-height: 0; padding-block: 28px 24px; gap: 14px; }
  .hero-copy { width: 100%; }
  .hello { font-size: 14px; margin-bottom: 19px; }
  .hero h1 { font-size: clamp(38px, 10.5vw, 54px); white-space: normal; }
  .hero-role { font-size: 13px; }
  .hero-description { font-size: 14px; margin-bottom: 19px; }
  .hero-art img { width: min(100%, 350px); }
  .button { min-height: 44px; padding: 10px 15px; }
  .about { display: block; padding-block: 16px 30px; }
  .about-art { width: min(100%, 340px); margin: 0 auto 18px; }
  .about-copy h2, .section-heading h2 { font-size: 25px; }
  .about-copy p:not(.section-kicker) { font-size: 13px; }
  .about-points { gap: 14px 12px; font-size: 11px; }
  .about-points>span { gap: 8px; }
  .about-points .icon { width: 22px; height: 22px; }
  .section-heading { margin-bottom: 21px; }
  .work { padding-block: 28px 30px; }
  .work-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 16px; }
  .slider-nav { flex-shrink: 0; }
  .project-grid { display: flex; flex-direction: row; gap: 16px; padding-bottom: 14px; }
  .project-card { flex: 0 0 84vw; display: flex; flex-direction: column; }
  .project-art { height: 180px; padding: 14px; }
  .project-info { padding: 18px 20px; }
  .project-title h3 { font-size: 18px; }
  .project-info>p { font-size: 12.5px; margin-bottom: 12px; min-height: 0; }
  .project-tags { font-size: 11.5px; }
  .skills-band { padding-block: 28px 32px; }
  .skills-band .section-heading { margin-bottom: 18px; }
  .skills-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 8px; }
  .skill-item { width: auto; min-width: 0; gap: 8px; }
  .skill-tile { width: 56px; height: 56px; border-radius: 15px; }
  .skill-tile-icon { width: 24px; height: 24px; }
  .skill-label { max-width: 76px; font-size: 10.5px; line-height: 1.25; }
  .experience-band { padding: 30px 0; }
  .experience-layout { grid-template-columns: 1fr; gap: 25px; }
  .experience-intro>p { max-width: 340px; font-size: 13px; margin-bottom: 8px; }
  .experience-intro .section-heading { margin-bottom: 20px; }
  .role { padding-bottom: 23px; }
  .role strong { font-size: 14px; }
  .role p { margin-left: 56px; }
  .contact-section { padding-block: 28px 12px; }
  .contact-card { grid-template-columns: 1fr; padding: 28px 20px; gap: 24px; border-radius: 16px; }
  .contact-side { grid-template-columns: 1fr; gap: 20px; }
  .contact-title { font-size: 22px; }
  .social-btn { width: 42px; height: 42px; }
  .site-footer { padding-block: 22px 28px; }
  .footer-inner { flex-direction: row; align-items: flex-start; gap: 18px; }
  .footer-copyright { flex: 1 1 auto; line-height: 1.5; }
  .footer-top-link { flex: 0 0 auto; white-space: nowrap; }
}
@media(max-width: 360px) {
  .hero h1 { font-size: 37px; }
  .hero-actions { gap: 8px; }
  .button { padding-inline: 12px; gap: 10px; }
  .skills-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap-inline: 10px; }
  .skill-label { max-width: 82px; }
  .about-art { width: min(100%, 300px); }
  .about-points { font-size: 10px; }
}
@media(prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { transition: none !important; animation: none !important; }
}