/* Content-led composition: profile, visible skills, evidence, then the full journey. */
.hero { min-height: max(950px, 100svh); padding: 145px 0 140px; }
.hero h1 { font-size: clamp(88px, 8.6vw, 132px); }
.hero-eyebrow { margin-bottom: 32px; }
.hero-role { margin-top: 30px; font-size: clamp(23px, 2.1vw, 31px); line-height: 1.24; letter-spacing: -.035em; }
.hero-role > span { color: #bfb7d3; }
.hero-description { max-width: 535px; margin-top: 24px; font-size: 16px; line-height: 1.8; letter-spacing: -.15px; color: #b7b4c4; }
.hero-seniority { margin-top: 22px; font: 10px/1.5 var(--mono); color: #a19bae; }
.hero-actions { margin-top: 28px; gap: 26px; }
.hero-actions .button { font-size: 12px; gap: 27px; }
.hero-actions .quiet-link { font-size: 12px; }
.hero-sculpture { width: 61%; right: -5%; }
.object-coordinate { right: 16%; }
.skills-section { padding: 100px 0 110px; position: relative; }
.skills-section .section-heading { align-items: end; margin-bottom: 54px; }

.skills-list { border-top: 1px solid var(--line); }
.skill-row { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 26px; padding: 34px 0; border-bottom: 1px solid var(--line); position: relative; }
.skill-row::before { content: ''; position: absolute; inset: 0 -25px; background: linear-gradient(90deg, #b6a0ff08, transparent); opacity: 0; transition: opacity .4s; pointer-events: none; }
.skill-row:hover::before { opacity: 1; }

.skill-title { display: flex; align-items: center; gap: 26px; position: relative; }
.skill-title h3 { font-size: clamp(24px, 2.4vw, 35px); line-height: 1.12; letter-spacing: -.045em; }
.skill-row > p { font-size: 14px; line-height: 1.9; color: #b3adbf; max-width: 600px; position: relative; }
.skill-symbol { display: block; position: relative; flex: 0 0 52px; width: 52px; height: 52px; font: 30px/52px var(--mono); color: #a392cd; letter-spacing: -4px; }
.skill-database i { position: absolute; width: 40px; height: 22px; border: 1px solid #ac9bd2; border-radius: 50%; left: 3px; top: 4px; background: #11101b; }
.skill-database i:nth-child(1) { top: 25px; }.skill-database i:nth-child(2) { top: 14px; }.skill-database i:nth-child(3) { border-color: #d7c8ff; background: radial-gradient(ellipse, #b6a0ff33, #171223); }
.skill-symbol svg { display: block; width: 100%; height: 100%; color: #ac9bd2; }
.skill-icon-accent { stroke: #7f9dc5; }
.work-section { padding-top: 15px; }
.mission-products { margin-top: 30px; display: grid; gap: 22px; max-width: 530px; }
.mission-products p { font-size: 14px; line-height: 1.85; color: var(--muted); }
.product-demo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 9px; padding: 7px 0; border-bottom: 1px solid #d9b88777; font-size: 12px; font-weight: 500; line-height: 1.5; color: #f1d2a6; transition: color .2s,border-color .2s; }
.product-demo > span { font-size: 17px; }
.product-demo:hover { color: #fff0d9; border-color: #f1d2a6; }
.mission-products strong { display: block; font-size: 14px; color: #e9d3b5; font-weight: 500; margin-bottom: 5px; }
.mission-payment .mission-step-text { margin-top: 27px; }
.mission-payment .mission-inner { padding-top: 50px; }
.mission-details { display: flex; align-items: center; gap: 16px; width: 100%; margin-top: 22px; padding: 18px 20px; text-align: left; border: 1px solid color-mix(in srgb,var(--scene-accent) 46%,transparent); border-radius: 6px; background: color-mix(in srgb,var(--scene-accent) 11%,#0b1019); color: #f0f2f8; transition: background .25s,border-color .25s,transform .25s,box-shadow .25s; }
.mission-details > svg { width: 25px; height: 30px; flex: 0 0 25px; color: var(--scene-accent); }
.mission-details-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mission-details-title { font-size: 15px; font-weight: 500; line-height: 1.4; }
.mission-details-description { font-size: 11px; line-height: 1.5; color: #c0c2d1; }
.mission-details:is(:hover,:focus-visible) { background: color-mix(in srgb,var(--scene-accent) 19%,#0b1019); border-color: var(--scene-accent); box-shadow: 0 6px 25px color-mix(in srgb,var(--scene-accent) 10%,transparent); transform: translateY(-2px); }
@media (max-width:850px) { .mission-details { gap: 13px; padding: 16px; }.mission-details-title { font-size: 14px; } }
@media print { .mission-details { display: none; } }
.featured-section { position: relative; padding: 20px 0 100px; }
.independent-section { position: relative; padding-top: 85px; border-top: 1px solid #b6a0ff40; background: linear-gradient(180deg,#141320 0,#0d0d17 420px,#090b12 100%); }
.independent-heading { margin-bottom: 58px; align-items: last baseline; }
.independent-heading > p { max-width: 380px; }
.independent-section .featured-section { padding-top: 0; padding-bottom: 60px; }
#lab-title { font-size: clamp(32px,3.5vw,48px); line-height: 1.1; }
.featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.featured-project { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--line); background: linear-gradient(150deg,#14121e,#090b12 70%); border-radius: 5px; overflow: hidden; }


.featured-project h3 { font-size: clamp(38px, 4vw, 59px); margin-top: 28px; }
.featured-project > p { font-size: 14px; line-height: 1.85; color: #aea9bd; margin-top: 24px; min-height: 104px; }
.featured-project .line-link { margin-top: auto; padding-bottom: 0; border-bottom: 0; font-size: 12px; }
.featured-project .line-link > span { font-size: 28px; }
.featured-project .project-details { --scene-accent: var(--violet); margin-top: auto; }
.scan-feature .project-details { --scene-accent: #a1d2ac; }
.geo-demo { position: relative; margin: 18px -10px 28px; min-height: 390px; }
.geo-demo canvas { display: block; width: 100%; height: 290px; }
.geo-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 5px; }
.geo-controls button { font: 9px/1.5 var(--mono); padding: 8px 10px; border: 1px solid #ffffff25; border-radius: 4px; color: #afa8c0; transition: background .2s,border-color .2s; }
.geo-controls button[aria-pressed=true] { color: #ede6ff; border-color: #ab91ef88; background: #b196fa1b; }
.geo-controls button[data-geo-filter=station][aria-pressed=true] { border-color: #85caff88; background: #85caff14; }
.geo-controls button[data-geo-filter=green][aria-pressed=true] { border-color: #79d5b388; background: #79d5b314; }
.geo-demo output { display: block; min-height: 22px; text-align: center; font: 11px/1.6 var(--mono); margin-top: 15px; color: #dbd0ef; }
.scan-feature { background: radial-gradient(ellipse at 50% 65%,#354e3d38,transparent 65%), linear-gradient(150deg,#141a17,#090e10 75%); }
.scan-feature h3 em { color: #a1d2ac; }
.lab-section { padding-top: 85px; }
.books-visual { background: radial-gradient(ellipse at center,#83614230,transparent 72%); }
.fitness-visual { background: radial-gradient(ellipse at center,#24534630,transparent 65%); }
.grid-visual { background: radial-gradient(ellipse at center,#1b5b5030,transparent 75%); }
.contact-section h2 { font-size: clamp(60px, 9.3vw, 145px); }
@media (min-width:1700px) { .hero h1 { font-size: 145px; }.hero-description { max-width: 575px; font-size: 17px; }.hero { min-height: 1030px; } }
@media (max-width:1150px) { .hero h1 { font-size: 9.8vw; }.hero-description { max-width: 465px; }.hero-role { font-size: 26px; }.hero-sculpture { right: -13%; width: 68%; }.hero { min-height: 940px; }.skill-row { grid-template-columns: 1fr 1.2fr; gap: 20px; }.skill-title { gap: 18px; }.skill-title h3 { font-size: 28px; }.skill-symbol { flex-basis: 45px; width: 45px; }.featured-grid { gap: 22px; }.featured-project { padding: 26px; }.featured-project > p { font-size: 13px; min-height: 120px; }.geo-controls { gap: 5px; }.geo-controls button { font-size: 8px; padding: 8px; } }
@media (max-width:850px) { .hero { min-height: 960px; }.hero-description { max-width: 430px; font-size: 15px; }.hero-role { font-size: 25px; }.hero h1 { font-size: 11.5vw; }.hero-sculpture { width: 82%; right: -28%; opacity: .75; }.hero-sculpture::after { background: linear-gradient(90deg,#06070b 5%,#06070b55 24%,transparent 50%),linear-gradient(0deg,#06070b,transparent 25%,transparent 85%,#06070b); }.skills-section { padding: 75px 0; }.skill-row { grid-template-columns: 1fr 1.3fr; gap: 17px; padding: 28px 0; }.skill-title { display: block; }.skill-symbol { width: 43px; height: 43px; margin-bottom: 17px; }.skill-title h3 { font-size: 25px; }.skill-row > p { font-size: 13px; }.featured-grid { grid-template-columns: 1fr; gap: 30px; }.featured-project { padding: 34px; }.featured-project h3 { font-size: 51px; }.featured-project > p { min-height: 0; max-width: 550px; font-size: 14px; }.geo-demo canvas { height: 320px; }.geo-controls button { font-size: 10px; }.featured-section { padding-bottom: 70px; } }
@media (max-width:600px) {
  .hero { min-height: 0; padding: 124px 0 0; display: flex; flex-direction: column; align-items: stretch; }
  .hero-content { order: 0; }.hero-eyebrow { font-size: 8px; margin-bottom: 28px; }.hero h1 { font-size: 17vw; }.name-first { font-size: 18vw; }
  .hero-role { font-size: 24px; line-height: 1.22; margin-top: 26px; }.hero-description { font-size: 14px; line-height: 1.8; max-width: none; margin-top: 22px; }.hero-seniority { font-size: 9px; margin-top: 19px; }
  .hero-actions { flex-wrap: wrap; gap: 20px; margin-top: 27px; }.hero-actions .button { font-size: 11px; padding: 16px; gap: 16px; }.hero-actions .quiet-link { font-size: 11px; gap: 10px; }
  .hero-sculpture { order: 1; position: relative; height: 350px; width: 100%; right: auto; top: auto; bottom: auto; margin-top: 10px; opacity: 1; transform: none!important; }
  .hero-sculpture::after { background: linear-gradient(0deg,#06070b,transparent 22%,transparent 80%,#06070b); }.object-coordinate { top: 13%; right: 7%; }.object-interaction { display: none; }
  .hero h1 { transform: none!important; opacity: 1!important; }
  .skills-section { padding: 54px 0 60px; }.skills-section .section-heading { margin-bottom: 30px; }.skills-section h2 { font-size: 36px; }
  .skill-row { grid-template-columns: minmax(0,1fr); gap: 18px; padding: 27px 0; }.skill-title { display: flex; gap: 20px; }.skill-title h3 { font-size: 25px; }.skill-title h3 br { display: none; }.skill-symbol { flex-basis: 43px; margin: 0; }.skill-row > p { font-size: 13px; line-height: 1.85; }.skill-row::before { inset-inline: -10px; }
  .mission-products { gap: 18px; margin-top: 23px; }.mission-products p { font-size: 13px; }.mission-products strong { font-size: 13px; }.mission-payment .mission-inner { padding-top: 25px; }
  .mission-inner > .mission-visual { order: -1; margin-top: 0; }
  .featured-section { padding: 0 0 55px; }.featured-grid { gap: 24px; }.featured-project { padding: 25px 20px; }.featured-project h3 { font-size: 43px; margin-top: 23px; }.featured-project > p { font-size: 13px; margin-top: 20px; }.featured-project .line-link { font-size: 11px; }.featured-project .line-link > span { font-size: 25px; }
  .geo-demo { margin: 15px -10px 25px; min-height: 0; }.geo-demo canvas { height: 260px; }.geo-controls { gap: 6px; }.geo-controls button { padding: 9px 8px; font-size: 8px; }.geo-demo output { font-size: 10px; }
  .lab-section { padding-top: 55px; }
  .contact-section h2 { font-size: 12.5vw; }
}
@media (max-width:360px) { .hero-actions { gap: 18px; }.hero-actions .quiet-link { padding-block: 7px; }.hero-role { font-size: 22px; }.skill-title { gap: 12px; }.skill-title h3 { font-size: 22px; }.skill-row { gap: 12px; grid-template-columns: minmax(0,1fr); }.featured-project { padding: 22px 16px; }.featured-project h3 { font-size: 39px; }.geo-controls button { font-size: 7px; padding-inline: 7px; } }
@media print { .skills-section { padding: 20px 0; }.skill-row { grid-template-columns: 1fr 2fr; padding: 15px 0; break-inside: avoid; }.skill-row p,.featured-project > p { color: #333; }.skill-symbol,.skills-index,.geo-demo { display: none; }.skill-title h3 { font-size: 20px; }.skill-row p { font-size: 10px; }.featured-grid { display:block; }.featured-project { background:white; color:black; border:0; break-inside:avoid; padding:20px 0; }.featured-project h3 { font-size: 25px; }.hero { min-height:0; }.hero-role { font-size:24px; }.hero-role span { color:#333; }.hero-seniority { color:#444; }.lab-rail { display:grid; grid-template-columns:1fr 1fr; }.contact-section h2 { font-size:60px; } }

#dialog-content > p + p { margin-top: 14px; }
@media (max-width:850px) { .independent-section { padding-top: 60px; }.independent-heading { margin-bottom: 38px; } }
@media (max-width:600px) { .independent-section { padding-top: 45px; }.independent-heading { margin-bottom: 30px; }.independent-heading > p { max-width: 320px; }.independent-heading > p br { display: none; }.independent-section .featured-section { padding-bottom: 35px; } }
@media print { .independent-section { background: white; border-top: 1px solid #ccc; }.independent-heading { break-after: avoid; } }
.dialog-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 56px; max-width: 100%; margin-top: 30px; padding: 14px 20px; border: 1px solid #f5ddbc; border-radius: 6px; background: linear-gradient(120deg,#f2d7ad,#d9af78); color: #241b10; font-size: 14px; font-weight: 500; line-height: 1.4; box-shadow: 0 5px 22px #d9af7814; transition: transform .2s,box-shadow .2s,border-color .2s; }
.dialog-cta-arrow { flex-shrink: 0; font-size: 24px; line-height: 1; transition: transform .2s; }
.dialog-cta:hover { transform: translateY(-2px); border-color: #fff0da; box-shadow: 0 8px 28px #d9af7829; }
.dialog-cta:hover .dialog-cta-arrow { transform: translate(2px,-2px); }
.dialog-cta:focus-visible { outline: 2px solid #f2d7ad; outline-offset: 5px; }
.dialog-cta-product { background: linear-gradient(120deg,#ded4ff,#b6a0ed); border-color: #e1d8ff; color: #211834; box-shadow: 0 5px 22px #b6a0ff14; }
.dialog-cta-product:hover { border-color: #f0eaff; box-shadow: 0 8px 28px #b6a0ff29; }
.dialog-cta-product:focus-visible { outline-color: #d4c5ff; }
@media (max-width:600px) { .dialog-cta { width: 100%; gap: 18px; padding-inline: 18px; } }
@media (prefers-reduced-motion:reduce) { .dialog-cta,.dialog-cta-arrow { transition: none; }.dialog-cta:hover,.dialog-cta:hover .dialog-cta-arrow { transform: none; } }

/* Published products stay visible with the two interactive independent projects. */
.independent-products { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; margin-top: 36px; }
.product-card { display: flex; flex-direction: column; min-width: 0; }
.product-card .project-visual { flex: 0 0 250px; }
.product-card .project-content { display: flex; flex-direction: column; flex: 1; padding: 26px; }
.product-card .project-content h3 { font-size: clamp(28px,2.5vw,36px); line-height: 1.15; }
.product-card .project-content > p { min-height: 0; margin-bottom: auto; }
.product-card .project-details { --scene-accent: var(--card-accent); margin-top: 24px; padding: 14px; gap: 12px; }
.product-card .mission-details-title { font-size: 13px; }
.product-card .mission-details > svg { width: 20px; height: 25px; flex-basis: 20px; }
.product-card .product-platform { align-self: flex-start; min-height: 48px; margin-top: 14px; padding: 12px 16px; gap: 18px; font-size: 12px; }


.product-card.project-fitness { --card-accent: #a1d2ac; }
.product-card.project-grid { --card-accent: #b6d996; }
.product-card:focus-within { border-color: var(--card-accent); box-shadow: 0 0 45px color-mix(in srgb,var(--card-accent) 9%,transparent); }
@media (max-width:1000px) {
 .independent-products { grid-template-columns: minmax(0,1fr); gap: 24px; }
 .product-card { display: grid; grid-template-columns: .8fr 1.2fr; }
 .product-card .project-visual { height: 100%; min-height: 310px; border-bottom: 0; border-right: 1px solid #ffffff10; }
}
@media (max-width:600px) {
 .independent-products { margin-top: 24px; }
 .product-card { display: flex; }
 .product-card .project-visual { min-height: 0; height: 230px; flex-basis: 230px; border-right: 0; border-bottom: 1px solid #ffffff10; }
 .product-card .project-content { padding: 24px 20px; }
 .product-card .project-content h3 { font-size: 32px; }
 .product-card .project-content > p { font-size: 13px; }


 .product-card .project-details { padding: 15px; }
}
@media print {
 .independent-products { display: block; }
 .product-card { display: block; margin-top: 20px; }
 .product-card .project-visual { display: none; }
 .product-card .project-details { display: none; }
}

/* Each independent product uses the same pair: product type / current status. */
.product-meta { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 12px; color: #b1a7c1; font: 10px/1.6 var(--mono); letter-spacing: .05em; }
.product-meta > span:last-child { text-align: right; color: var(--card-accent,var(--violet)); }
.product-meta small { display: block; margin-top: 4px; color: #aaa5b9; font: inherit; font-size: 9px; letter-spacing: .02em; }
.scan-feature { --card-accent: #a1d2ac; }
@media (max-width:600px) { .product-meta { gap: 10px; } }
@media print { .product-meta,.product-meta > span:last-child,.product-meta small { color: #444; } }

.store-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 20px; margin-top: 14px; padding-block: 4px; }
.store-link { display: inline-flex; flex: 0 0 auto; align-items: center; min-height: 54px; border-radius: 5px; }
.store-link:focus-visible { outline: 2px solid var(--card-accent,var(--violet)); outline-offset: 5px; }
.store-badge { display: block; width: auto; max-width: none; }
.store-badge-apple { height: 40px; }
/* Original Google PNGs have a 192 px visible badge in French, 168 px in English. */
.store-badge-google { height: calc(40px * 250 / 192); }
.store-links:lang(en) .store-badge-google { height: calc(40px * 250 / 168); }
#dialog-content > .store-links { margin-top: 24px; }

/* Four complementary personal apps on the same television. */
.tv-screen.tizen-apps-screen { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: 1fr; gap: 8px; padding: 22px 12px; align-items: center; max-width: calc(100% - 42px); background: radial-gradient(ellipse at 50% 0%, #53413055, transparent 80%), #141317; }
.tv-screen > .tizen-app-tile { position: static; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 0; height: 94px; border: 1px solid #d4b18c33; border-radius: 7px; background: #d4b18c09; color: #e6b185; font: 8px var(--mono); letter-spacing: 0; }
.tizen-app-tile svg { width: 32px; height: 32px; }
.tv-screen > .tizen-app-tile:nth-child(2) { color: #d9c58f; border-color: #d9c58f33; background: #d9c58f09; }
.tv-screen > .tizen-app-tile:nth-child(3) { color: #adcbb9; border-color: #adcbb933; background: #adcbb909; }

/* Illustrations sit beside the relevant app description, then below it on mobile. */
dialog.dialog-illustrated { width: min(1020px, calc(100% - 30px)); }
.dialog-project-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 30px; padding: 28px 0; border-bottom: 1px solid #ffffff12; }
.dialog-project-copy h3 { margin-top: 0; }
.dialog-project-copy p + p { margin-top: 12px; }
.dialog-project-illustration { min-width: 0; margin: 0; }
.dialog-project-illustration img { display: block; width: 100%; height: auto; }
.dialog-infra-overview { margin: 36px 0; }
dialog.dialog-homelab #dialog-content > h3 { margin-top: 34px; }
dialog.dialog-homelab #dialog-content > p { max-width: 84ch; }
#case-dialog:not([open]) .homelab-visual * { animation-play-state: paused; }
@media (max-width: 720px) {
  .dialog-project-section { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 0; }
  .dialog-project-illustration { width: 100%; max-width: 440px; justify-self: center; }
}

.tv-screen > .tizen-app-tile:nth-child(4) { color: #a5bee2; border-color: #a5bee233; background: #a5bee209; }
@media(max-width:600px) { .tv-screen.tizen-apps-screen { gap: 5px; padding: 16px 8px; }.tv-screen > .tizen-app-tile { font-size: 6px; }.tizen-app-tile svg { width: 26px; height: 26px; } }
/* Project demonstrations load only when the visitor chooses to play them. */
.dialog-video { margin: 32px 0; }
.dialog-video h3 { margin-top: 0; }
.dialog-video-stage { position: relative; overflow: hidden; aspect-ratio: 16/9; margin-top: 18px; border: 1px solid #d7b18d44; border-radius: 8px; background: #0b1019; }
.dialog-video-stage video, .dialog-video-stage iframe { display: block; border: 0; width: 100%; height: 100%; }
.dialog-video-launch { position: relative; display: grid; width: 100%; height: 100%; place-items: center; background: radial-gradient(ellipse,#353142,#11141f); }
.dialog-video-launch img { position: absolute; width: 100%; height: 100%; object-fit: contain; opacity: .35; }
.dialog-video-launch span { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 24px; border: 1px solid #e1bc99aa; border-radius: 6px; color: #f6ece3; background: #231e29ee; font-size: 16px; }
.dialog-video-launch span::before { content: '▶'; font-size: 18px; color: #dfbb91; }
.dialog-video-launch:hover span { background: #3b2f3e; }
.dialog-video figcaption { margin-top: 12px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; color: #aaa6b6; font: 11px/1.6 var(--mono); }
.dialog-video figcaption a { color: #dfbb91; text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:600px) { .dialog-video-launch span { font-size: 12px; padding: 12px; gap: 10px; }.dialog-video figcaption { font-size: 9px; } }