@import "tailwindcss";

:root { --ink:#f2f7ff; --muted:#91a5ba; --navy:#03101f; --panel:#071a2d; --panel-2:#0b2238; --cyan:#39d7ff; --blue:#087cff; --line:rgba(85,192,255,.18); --amber:#f3b340; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--navy); }
body { margin:0; background:var(--navy); color:var(--ink); font-family:var(--font-geist-sans),Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
textarea { font:inherit; }
.shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.site-header { position:fixed; inset:0 0 auto; z-index:50; height:86px; background:rgba(2,12,24,.82); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }
.header-inner { height:100%; display:flex; align-items:center; gap:34px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:52px; height:52px; display:grid; place-items:center; border:1px solid rgba(78,193,255,.32); background:linear-gradient(145deg,#0c79cd,#063052); box-shadow:inset 0 0 20px rgba(80,210,255,.2); border-radius:11px; overflow:hidden; }
.brand-mark img {
  width:86%;
  height:86%;
  object-fit:contain;
  filter:invert(1);
  mix-blend-mode:screen;
}
.brand strong { display:block; font-size:20px; letter-spacing:.02em; }
.brand small { display:block; margin-top:2px; color:var(--muted); font-family:var(--font-geist-mono); font-size:10px; text-transform:uppercase; letter-spacing:.16em; }
.header-cody-mascot { width:100px; height:82px; flex:0 0 100px; margin-right:auto; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; filter:drop-shadow(0 8px 9px rgba(0,0,0,.42)); }
.header-cody-mascot img { display:block; max-width:100%; max-height:80px; object-fit:contain; object-position:center bottom; animation:header-cody-arrive .52s ease-out both; }
@keyframes header-cody-arrive { from { opacity:0; transform:translateY(8px) scale(.93); } to { opacity:1; transform:translateY(0) scale(1); } }
nav { display:flex; align-items:center; gap:26px; color:#b7c8d9; font-size:14px; }
nav a:hover { color:var(--cyan); }
.login-link { display:flex; align-items:center; gap:9px; border:1px solid rgba(76,194,255,.5); padding:12px 18px; border-radius:7px; color:#f4fbff; background:linear-gradient(135deg,rgba(17,126,201,.32),rgba(4,56,96,.46)); box-shadow:inset 0 0 18px rgba(64,199,255,.08); font-size:13px; font-weight:700; }
.login-link:hover { background:linear-gradient(135deg,rgba(20,159,241,.46),rgba(5,77,127,.55)); border-color:rgba(88,220,255,.75); }
.header-login { position:relative; display:flex; align-items:center; gap:7px; }
.header-login input { width:122px; height:38px; padding:0 11px; color:#f4fbff; border:1px solid rgba(76,194,255,.28); border-radius:6px; outline:none; background:rgba(3,25,44,.76); font-size:11px; }
.header-login input::placeholder { color:#7893aa; }
.header-login input:focus { border-color:rgba(70,213,255,.75); box-shadow:0 0 0 3px rgba(57,215,255,.08); }
.header-login button { height:38px; display:flex; align-items:center; gap:8px; padding:0 13px; color:#f4fbff; border:1px solid rgba(76,194,255,.5); border-radius:6px; background:linear-gradient(135deg,rgba(17,126,201,.36),rgba(4,56,96,.5)); font-size:11px; font-weight:750; cursor:pointer; }
.header-login button:hover { border-color:rgba(88,220,255,.8); background:linear-gradient(135deg,rgba(20,159,241,.5),rgba(5,77,127,.6)); }
.header-login button:focus-visible { outline:none; border-color:#7ee7ff; background:linear-gradient(135deg,rgba(20,159,241,.72),rgba(5,91,150,.78)); box-shadow:0 0 0 3px rgba(57,215,255,.14),0 0 18px rgba(49,200,248,.3); }
.header-login button:disabled { opacity:.7; cursor:wait; }
.header-login-error { position:absolute; top:47px; right:0; width:285px; padding:9px 11px; color:#fff2f2; border:1px solid rgba(255,131,142,.55); border-radius:8px; background:rgba(116,32,43,.97); box-shadow:0 12px 30px rgba(0,0,0,.38); font-size:10px; line-height:1.4; }
.status-dot,.pulse { width:8px; height:8px; border-radius:50%; background:#44f297; box-shadow:0 0 14px #44f297; }
.hero { min-height:890px; position:relative; overflow:hidden; padding-top:158px; background:radial-gradient(circle at 78% 20%,rgba(0,103,202,.22),transparent 34%),radial-gradient(circle at 18% 84%,rgba(0,199,255,.08),transparent 28%),linear-gradient(180deg,#020b17,#041627 72%,#061a2c); }
.circuit-grid { position:absolute; inset:0; opacity:.48; pointer-events:none; background-image:linear-gradient(90deg,transparent 49.75%,rgba(36,185,255,.09) 49.75%,rgba(36,185,255,.09) 50.25%,transparent 50.25%),linear-gradient(0deg,transparent 49.75%,rgba(36,185,255,.07) 49.75%,rgba(36,185,255,.07) 50.25%,transparent 50.25%); background-size:120px 120px; mask-image:linear-gradient(to bottom,#000 15%,transparent 90%); }
.circuit-grid:before,.circuit-grid:after { content:""; position:absolute; border:1px solid rgba(56,207,255,.2); width:44%; height:240px; transform:skewX(-28deg); }
.circuit-grid:before { right:-4%; top:115px; border-left:0; }
.circuit-grid:after { left:-18%; bottom:100px; border-right:0; }
.hero-layout { position:relative; z-index:2; display:grid; grid-template-columns:1.01fr .99fr; gap:66px; align-items:center; }
.eyebrow { margin:0 0 22px; color:#83dfff; display:flex; align-items:center; gap:10px; font-family:var(--font-geist-mono); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow span { width:26px; height:1px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.eyebrow.warm { color:#f8c564; }
.eyebrow.warm span { background:#f8c564; box-shadow:0 0 8px #f8c564; }
h1,h2,h3,p { margin-top:0; }
.hero h1 { margin-bottom:26px; font-size:clamp(48px,5vw,73px); line-height:.99; letter-spacing:-.055em; font-weight:670; }
.hero h1 em { color:var(--cyan); font-style:normal; text-shadow:0 0 24px rgba(0,198,255,.25); }
.hero-lead { max-width:630px; color:#aebed0; font-size:18px; line-height:1.72; }
.hero-actions,.contact-actions { display:flex; gap:12px; flex-wrap:wrap; margin:34px 0 29px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:48px; padding:0 23px; border:1px solid transparent; border-radius:5px; text-transform:uppercase; letter-spacing:.09em; font-family:var(--font-geist-mono); font-size:11px; font-weight:800; cursor:pointer; }
.button.primary { background:linear-gradient(135deg,#1ad5ff,#087cff); color:white; box-shadow:0 10px 34px rgba(0,128,255,.25); }
.button.primary:hover { filter:brightness(1.12); }
.button.secondary { color:#caefff; border-color:rgba(73,198,255,.34); background:rgba(9,55,88,.44); }
.button.secondary:hover { background:rgba(30,119,176,.3); }
.hero-contact { display:flex; gap:22px; flex-wrap:wrap; color:#839bb3; font-family:var(--font-geist-mono); font-size:11px; letter-spacing:.05em; }
.hero-contact a { color:#d7f7ff; }
.hero-visual { position:relative; padding:0 0 10px 18px; }
.photo-frame { position:relative; overflow:hidden; background:#0a1d2f; border-radius:18px; }
.photo-frame:before { content:""; position:absolute; inset:0; z-index:2; border:1px solid rgba(87,209,255,.25); pointer-events:none; }
.photo-frame>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-photo { height:520px; clip-path:none; border-radius:22px; box-shadow:0 30px 90px rgba(0,0,0,.45); }
.hero-photo>img { object-position:62% center; }
.hero-photo:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,14,28,.05),rgba(3,17,31,.15)),linear-gradient(90deg,rgba(0,128,255,.08),transparent); }
.opening-hours-card { position:relative; z-index:8; display:flex; align-items:center; gap:16px; margin:-58px 12px 0 -18px; padding:18px 20px; color:#f4fbff; background:rgba(3,21,38,.97); border:2px solid rgba(80,215,255,.62); border-radius:12px; backdrop-filter:blur(16px); box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 30px rgba(51,203,255,.15); }
.hours-status { flex:0 0 auto; width:13px; height:13px; border-radius:50%; background:#4ef19e; box-shadow:0 0 0 6px rgba(78,241,158,.12),0 0 18px rgba(78,241,158,.85); }
.opening-hours-card div>small,.opening-hours-card div>strong,.opening-hours-card div>span { display:block; }
.opening-hours-card div>small { color:#83e7ff; font-family:var(--font-geist-mono); font-size:11px; font-weight:900; letter-spacing:.15em; }
.opening-hours-card div>strong { margin-top:6px; font-size:20px; line-height:1.35; }
.opening-hours-card .hours-monday { margin-top:8px; padding:8px 11px; color:#fff5cb; border-left:4px solid #ffd43b; border-radius:4px; background:rgba(255,196,32,.16); font-size:14px; font-weight:700; line-height:1.4; }
.opening-hours-card .hours-monday b { color:#ffe36d; font-size:15px; }
.hero-quick-actions { position:relative; z-index:7; display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:10px 12px 0 -18px; }
.hero-quick-actions>a { min-height:70px; display:flex; align-items:center; gap:12px; padding:12px 15px; border:1px solid rgba(93,213,255,.45); border-radius:10px; background:rgba(5,31,50,.93); box-shadow:0 12px 28px rgba(0,0,0,.28); transition:transform .18s ease,filter .18s ease,border-color .18s ease; }
.hero-quick-actions>a:hover { transform:translateY(-2px); filter:brightness(1.12); border-color:#72e4ff; }
.hero-quick-actions>a>span { flex:0 0 auto; width:38px; height:38px; display:grid; place-items:center; color:#062538; border-radius:50%; background:#6ee3ff; font-size:23px; font-weight:900; }
.hero-quick-actions small,.hero-quick-actions strong,.hero-quick-actions b { display:block; }
.hero-quick-actions small { color:#6fa8c4; font-family:var(--font-geist-mono); font-size:8px; font-weight:850; letter-spacing:.12em; }
.hero-quick-actions strong { margin-top:3px; color:#f1fbff; font-size:14px; line-height:1.25; }
.hero-quick-actions b { margin-top:2px; color:#7fe7ff; font-family:var(--font-geist-mono); font-size:9px; letter-spacing:.04em; }
.hero-quick-actions .call-action { border-color:rgba(78,241,158,.38); }
.hero-quick-actions .call-action>span { background:#55eca6; }
.netfone-point-card { position:relative; z-index:10; width:min(100%,620px); min-height:96px; display:grid; grid-template-columns:104px 1fr auto; grid-template-rows:auto 1fr; align-items:center; gap:2px 16px; margin:0 0 30px; padding:14px 18px; color:#171400; background:linear-gradient(145deg,#ffd42a,#f6b900); border:1px solid #ffe77e; box-shadow:0 18px 42px rgba(0,0,0,.3),0 0 28px rgba(255,194,0,.16); clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); transition:transform .2s ease,filter .2s ease; }
.netfone-point-card:hover { transform:translateY(-4px); filter:brightness(1.04); }
.netfone-label { grid-column:2/4; font-family:var(--font-geist-mono); font-size:8px; font-weight:900; letter-spacing:.18em; opacity:.62; }
.netfone-point-card img { grid-row:1/3; display:block; width:104px; height:52px; object-fit:contain; }
.netfone-copy { display:flex; flex-direction:column; align-self:start; }
.netfone-point-card strong { font-size:14px; line-height:1.25; letter-spacing:-.015em; }
.netfone-point-card small { margin-top:4px; font-size:10px; line-height:1.35; opacity:.7; }
.netfone-point-card b { align-self:center; font-family:var(--font-geist-mono); font-size:9px; line-height:1.35; letter-spacing:.07em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.facts-row { position:relative; z-index:3; display:grid; grid-template-columns:repeat(3,1fr); margin-top:88px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.fact { position:relative; display:grid; grid-template-columns:auto 1fr; padding:24px 28px; border-right:1px solid var(--line); }
.fact:last-child { border-right:0; }
.fact>span { grid-row:1/3; margin-right:16px; color:#2c8cba; font-family:var(--font-geist-mono); font-size:11px; }
.fact strong { font-size:15px; }
.fact small { margin-top:4px; color:#6f8aa2; font-size:12px; }
.section { position:relative; padding:120px 0; }
.introduction { position:relative; overflow:hidden; background:linear-gradient(180deg,#061a2c 0%,#071a2b 20%,#061726 100%); color:#eefaff; }
.introduction:after { content:""; position:absolute; width:520px; height:520px; right:-260px; top:-250px; border-radius:50%; background:radial-gradient(circle,rgba(0,183,255,.14),transparent 68%); pointer-events:none; }
.introduction-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr; gap:90px; align-items:center; }
.introduction-copy h2 { margin:0 0 28px; font-size:clamp(37px,4vw,57px); line-height:1.08; letter-spacing:-.045em; }
.introduction-copy .large-copy { max-width:720px; color:#c6d9e9; font-size:18px; line-height:1.7; }
.introduction-copy>p:last-child { max-width:720px; margin-bottom:0; color:#829db4; line-height:1.75; }
.experience-timeline { position:relative; display:grid; gap:14px; padding-left:32px; }
.experience-timeline:before { content:""; position:absolute; left:7px; top:20px; bottom:20px; width:1px; background:linear-gradient(var(--cyan),rgba(0,198,255,.12)); box-shadow:0 0 10px rgba(0,198,255,.35); }
.experience-timeline article { position:relative; display:grid; grid-template-columns:92px 1fr; padding:21px 23px; background:rgba(9,43,67,.72); border:1px solid rgba(79,199,248,.2); }
.experience-timeline article:before { content:""; position:absolute; left:-30px; top:31px; width:10px; height:10px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
.experience-timeline article strong { grid-row:1/3; color:var(--cyan); font-family:var(--font-geist-mono); font-size:25px; }
.experience-timeline article span { font-weight:750; }
.experience-timeline article small { margin-top:5px; color:#7792a9; line-height:1.4; }
.experience-total { display:flex; align-items:baseline; gap:12px; padding:16px 23px; color:#07131f; background:linear-gradient(135deg,#45e3ff,#0a9cff); }
.experience-total b { font-size:28px; }
.experience-total span { font-family:var(--font-geist-mono); font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.services { background:linear-gradient(180deg,#061726 0%,#071827 18%,#03101c 82%,#061625 100%); color:#edf9ff; }
.section-heading { margin-bottom:53px; }
.split-heading { display:grid; grid-template-columns:1fr .68fr; gap:80px; align-items:end; }
.section-heading .eyebrow { color:#52d8ff; }
.section-heading h2,.workshop h2,.museum h2,.contact h2 { margin:0; font-size:clamp(37px,4vw,57px); line-height:1.08; letter-spacing:-.045em; }
.section-heading>p { margin:0; color:#8da6ba; font-size:16px; line-height:1.75; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid rgba(72,194,240,.2); box-shadow:0 28px 80px rgba(0,0,0,.24); }
.service-card { position:relative; min-height:485px; padding:22px 20px 28px; border-right:1px solid rgba(72,194,240,.16); background:linear-gradient(180deg,rgba(13,48,73,.72),rgba(6,27,44,.78)); transition:.25s ease; }
.service-card:last-child { border-right:0; }
.service-card:hover { z-index:2; transform:translateY(-7px); background:linear-gradient(180deg,rgba(18,65,96,.94),rgba(8,36,58,.96)); box-shadow:0 20px 55px rgba(0,0,0,.38),0 0 28px rgba(19,177,237,.09); }
.service-code { display:block; color:#5787a4; font-family:var(--font-geist-mono); font-size:9px; letter-spacing:.18em; text-align:right; }
.service-image { position:relative; height:190px; margin:18px 0 24px; overflow:hidden; background:#061522; border:1px solid rgba(79,213,255,.28); border-radius:15px; clip-path:none; cursor:zoom-in; }
.service-image:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 52%,rgba(3,16,27,.72)); pointer-events:none; }
.service-image img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.service-card:hover .service-image img { transform:scale(1.045); }
.service-image>span { position:absolute; z-index:2; right:12px; bottom:9px; color:#7de4ff; font-family:var(--font-geist-mono); font-weight:900; font-size:12px; text-shadow:0 0 10px rgba(69,214,255,.6); }
.service-card h3 { margin-bottom:15px; font-size:21px; }
.service-card p { margin-bottom:52px; color:#91aabd; font-size:13px; line-height:1.6; }
.service-card a { position:absolute; bottom:24px; left:20px; font-family:var(--font-geist-mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#55d8ff; }
.service-card a span { font-size:16px; margin-left:7px; }
.service-image-preview { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:5vh 6vw; pointer-events:none; visibility:hidden; opacity:0; background:rgba(1,8,15,.84); backdrop-filter:blur(9px); transition:opacity .22s ease,visibility .22s ease; }
.service-image-preview.visible { visibility:visible; opacity:1; }
.service-image-preview-frame { width:min(1040px,88vw); max-height:88vh; padding:12px; border:1px solid rgba(100,220,255,.68); background:linear-gradient(145deg,rgba(9,39,61,.98),rgba(3,18,30,.99)); box-shadow:0 0 0 1px rgba(255,255,255,.07),0 0 55px rgba(39,187,239,.34),0 30px 100px rgba(0,0,0,.68); transform:scale(.88) translateY(18px); transition:transform .28s cubic-bezier(.2,.85,.25,1); }
.service-image-preview.visible .service-image-preview-frame { transform:scale(1) translateY(0); }
.service-image-preview-frame img { display:block; width:100%; height:min(72vh,700px); object-fit:contain; border-radius:13px; background:#020b12; }
.service-image-preview-frame>div { min-height:64px; padding:11px 7px 2px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.service-image-preview-frame strong { color:#f2fbff; font-size:20px; }
.service-image-preview-frame span { color:#64d9ff; font-family:var(--font-geist-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
@media (prefers-reduced-motion:reduce) { .service-image-preview,.service-image-preview-frame { transition:none; } }
.workshop { background:linear-gradient(180deg,#061625 0%,#071929 18%,#030e1b 82%,#17171a 100%); }
.workshop-grid { display:grid; grid-template-columns:1fr .9fr; gap:92px; align-items:center; }
.workshop-images { position:relative; padding:0 50px 55px 0; }
.main-workshop { height:570px; clip-path:none; border-radius:22px; }
.main-workshop img { filter:saturate(.76) contrast(1.05); }
.inset-workshop { position:absolute; width:260px; height:185px; right:0; bottom:0; box-shadow:0 20px 50px rgba(0,0,0,.5); border:7px solid #071929; }
.gallery-opener { padding:0; color:#fff; font:inherit; cursor:pointer; transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease; }
.gallery-opener:hover { transform:translateY(-5px) scale(1.035); border-color:#38cfff; box-shadow:0 24px 65px rgba(0,0,0,.62),0 0 28px rgba(40,197,247,.3); }
.gallery-opener>span { position:absolute; inset:auto 10px 10px; z-index:2; padding:9px 11px; display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid rgba(91,219,255,.42); background:rgba(3,22,37,.86); color:#eafaff; font-family:var(--font-geist-mono); font-size:8px; letter-spacing:.08em; text-transform:uppercase; }
.gallery-opener>span b { color:#64dcff; font-size:10px; }
.workshop-gallery { position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:3vh 4vw; visibility:hidden; opacity:0; background:rgba(1,7,13,.92); backdrop-filter:blur(10px); transition:opacity .24s ease,visibility .24s ease; }
.workshop-gallery.visible { visibility:visible; opacity:1; }
.workshop-gallery-panel { width:min(1180px,94vw); max-height:94vh; padding:12px; border:1px solid rgba(87,211,250,.52); background:linear-gradient(150deg,#09243a,#03121f); box-shadow:0 0 60px rgba(26,177,232,.24),0 35px 110px rgba(0,0,0,.72); transform:scale(.94); transition:transform .28s ease; }
.workshop-gallery.visible .workshop-gallery-panel { transform:scale(1); }
.workshop-gallery-panel>header { min-height:58px; padding:0 6px 10px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.workshop-gallery-panel>header div { display:flex; flex-direction:column; gap:3px; }
.workshop-gallery-panel>header small { color:#4dd5ff; font-family:var(--font-geist-mono); font-size:9px; letter-spacing:.18em; }
.workshop-gallery-panel>header strong { color:#effaff; font-size:18px; }
.workshop-gallery-panel>header button { width:42px; height:42px; border:1px solid rgba(100,211,246,.38); border-radius:50%; background:rgba(7,43,67,.85); color:#e9faff; font-size:27px; cursor:pointer; }
.workshop-gallery-stage { position:relative; height:min(65vh,680px); display:grid; place-items:center; overflow:hidden; border-radius:14px; background:#02090e; }
.workshop-gallery-stage>img { width:100%; height:100%; object-fit:contain; }
.gallery-arrow { position:absolute; top:50%; z-index:2; width:54px; height:70px; border:1px solid rgba(105,218,255,.45); border-radius:9px; display:grid; place-items:center; background:rgba(4,27,44,.77); color:#fff; font-size:43px; cursor:pointer; transform:translateY(-50%); transition:.18s ease; }
.gallery-arrow:hover { background:rgba(12,106,147,.88); border-color:#71e2ff; }
.gallery-arrow.previous { left:14px; }.gallery-arrow.next { right:14px; }
.workshop-gallery-caption { min-height:47px; padding:9px 5px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.workshop-gallery-caption strong { color:#dceefa; font-size:13px; }.workshop-gallery-caption span { color:#61ddff; font-family:var(--font-geist-mono); font-size:11px; }
.workshop-gallery-thumbs { height:76px; display:grid; grid-template-columns:repeat(6,1fr); gap:7px; }
.workshop-gallery-thumbs button { min-width:0; padding:0; overflow:hidden; border:2px solid transparent; background:#04111c; opacity:.58; cursor:pointer; transition:.18s ease; }
.workshop-gallery-thumbs button:hover,.workshop-gallery-thumbs button.active { opacity:1; border-color:#50d8ff; box-shadow:0 0 16px rgba(53,197,239,.28); }
.workshop-gallery-thumbs img { width:100%; height:100%; object-fit:cover; border-radius:7px; }
@media(max-width:700px){.workshop-gallery{padding:1vh 2vw}.workshop-gallery-panel{width:98vw}.workshop-gallery-stage{height:55vh}.workshop-gallery-thumbs{height:58px}.gallery-arrow{width:43px;height:58px}.workshop-gallery-caption strong{font-size:11px}}
.workshop-copy .large-copy,.contact .large-copy { margin:29px 0; color:#a9b9c9; font-size:18px; line-height:1.72; }
.check-list { list-style:none; padding:0; margin:42px 0 0; }
.check-list li { display:flex; gap:16px; padding:19px 0; border-top:1px solid var(--line); }
.check-list li>span { width:30px; height:30px; flex:0 0 auto; display:grid; place-items:center; color:#071929; background:var(--cyan); clip-path:polygon(18% 0,100% 0,100% 82%,82% 100%,0 100%,0 18%); font-weight:900; }
.check-list strong,.check-list small { display:block; }
.check-list strong { font-size:15px; }
.check-list small { margin-top:5px; color:#71889c; line-height:1.5; }
.museum { color:#f4efe8; background:linear-gradient(180deg,#17171a 0%,#201c18 22%,#181a1d 78%,#0c1721 100%); }
.museum-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:90px; align-items:center; }
.museum-copy>p:not(.eyebrow) { margin:30px 0; color:#b8aaa0; font-size:16px; line-height:1.78; }
.text-link { font-family:var(--font-geist-mono); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#9e5d12; }
.text-link span { margin-left:9px; }
.museum-gallery { position:relative; padding-bottom:54px; }
.museum-main { height:520px; clip-path:none; border-radius:22px; }
.museum-label { position:absolute; left:32px; right:32px; bottom:0; padding:18px 21px; display:flex; justify-content:space-between; align-items:center; color:#f4efe5; background:#3e342b; }
.museum-label small { color:#c99b62; font-family:var(--font-geist-mono); letter-spacing:.12em; }
.netfone-section { padding:50px 0; background:linear-gradient(180deg,#0c1721,#082843 38%,#08243b 72%,#061a2b); }
.netfone-inner { display:grid; grid-template-columns:.8fr 1fr auto; gap:52px; align-items:center; }
.netfone-inner h2 { margin:0; font-size:27px; }
.netfone-inner .eyebrow { margin-bottom:11px; }
.netfone-inner>p { margin:0; color:#9ab2c8; line-height:1.65; }
.contact { background:linear-gradient(180deg,#061a2b 0%,#041321 22%,#030e19 100%); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:105px; align-items:start; }
.contact-panel { border:1px solid var(--line); background:rgba(10,33,53,.7); }
.contact-line { padding:25px 27px; border-bottom:1px solid var(--line); }
.contact-line:last-child { border-bottom:0; }
.contact-line small,.contact-line strong,.contact-line span,.contact-line a { display:block; }
.contact-line small { margin-bottom:12px; color:#5e9fc3; font-family:var(--font-geist-mono); font-size:9px; letter-spacing:.18em; }
.contact-line strong { font-size:19px; line-height:1.45; }
.contact-line span { margin-top:7px; color:#8ba1b5; font-size:13px; line-height:1.55; }
.contact-line a { margin-top:8px; color:#63dcff; font-size:13px; }
footer { background:#020a13; border-top:1px solid var(--line); }
.footer-main { min-height:150px; display:flex; align-items:center; gap:30px; }
.footer-main p { margin:0 auto; color:#74899c; }
.footer-main>a { color:#62dbff; font-family:var(--font-geist-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; }
.footer-bottom { display:flex; justify-content:space-between; padding:17px 0; border-top:1px solid rgba(85,192,255,.1); color:#496176; font-family:var(--font-geist-mono); font-size:9px; letter-spacing:.13em; }

.message-popup { position:fixed; z-index:950; right:24px; bottom:24px; width:min(410px,calc(100vw - 32px)); padding:25px; overflow:hidden; color:#effaff; border:1px solid rgba(116,220,247,.62); border-radius:18px; background:linear-gradient(145deg,rgba(35,87,109,.97),rgba(25,65,86,.98)); box-shadow:0 25px 75px rgba(0,8,16,.5),0 0 30px rgba(59,197,231,.16),inset 0 1px rgba(255,255,255,.12); backdrop-filter:blur(16px); animation:message-popup-in .52s cubic-bezier(.2,.85,.25,1) both; }
.message-popup:before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#5ee5ff,#31a9f5,transparent); }
@keyframes message-popup-in { from { opacity:0; transform:translateY(34px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
.message-popup-close { position:absolute; top:12px; right:13px; width:34px; height:34px; display:grid; place-items:center; padding:0; color:#d9f8ff; border:1px solid rgba(183,236,249,.36); border-radius:50%; background:rgba(5,37,55,.35); font-size:23px; line-height:1; cursor:pointer; transition:.18s ease; }
.message-popup-close:hover { color:white; border-color:#ff9b9b; background:#a5424b; }
.message-popup-robot { position:absolute; z-index:1; top:9px; right:53px; width:68px; height:102px; object-fit:contain; object-position:center top; filter:drop-shadow(0 8px 12px rgba(0,8,18,.38)) drop-shadow(0 0 10px rgba(61,214,255,.28)); pointer-events:none; }
.message-popup-kicker { margin:0 125px 8px 0; color:#7feaff; font-family:var(--font-geist-mono); font-size:9px; font-weight:850; letter-spacing:.17em; }
.message-popup h2 { margin:0 125px 8px 0; font-size:26px; letter-spacing:-.03em; }
.message-popup-intro { min-height:62px; margin:0 105px 17px 0; color:#c7e1ea; font-size:13px; line-height:1.55; }
.message-popup textarea,.message-popup input:not(.message-honeypot) { width:100%; color:#f6fcff; border:1px solid rgba(164,224,242,.42); border-radius:9px; outline:none; background:rgba(5,34,51,.46); transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.message-popup textarea { display:block; min-height:105px; resize:vertical; padding:13px 14px; }
.message-popup input:not(.message-honeypot) { height:44px; padding:0 12px; }
.message-popup textarea::placeholder,.message-popup input::placeholder { color:#91b7c5; }
.message-popup textarea:focus,.message-popup input:not(.message-honeypot):focus { border-color:#73e5ff; background:rgba(3,29,46,.67); box-shadow:0 0 0 3px rgba(85,218,249,.13); }
.message-contact-fields { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:9px; }
.message-honeypot { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important; }
.message-popup-error { margin:10px 0 0; padding:9px 11px; color:#fff0f0; border:1px solid rgba(255,143,143,.45); border-radius:8px; background:rgba(125,35,46,.46); font-size:11px; line-height:1.45; }
.message-popup-footer { display:flex; align-items:center; gap:12px; margin-top:13px; }
.message-popup-footer small { flex:1; color:#9fc4d1; font-size:9px; line-height:1.4; }
.message-popup-footer button,.message-popup-success button { min-height:42px; padding:0 15px; border:1px solid #8eeaff; border-radius:8px; color:#062334; background:linear-gradient(135deg,#73e8ff,#42baf5); box-shadow:0 8px 24px rgba(20,137,196,.25); font-size:11px; font-weight:850; cursor:pointer; }
.message-popup-footer button:hover,.message-popup-success button:hover { filter:brightness(1.08); }
.message-popup-footer button:disabled { opacity:.6; cursor:wait; }
.message-popup-success { min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.message-popup[hidden],.message-popup-form-view[hidden],.message-popup-success[hidden],.message-popup-error[hidden] { display:none!important; }
.message-popup-success>span { width:58px; height:58px; display:grid; place-items:center; margin-bottom:15px; color:#083729; border-radius:50%; background:#74efbb; box-shadow:0 0 28px rgba(83,239,176,.36); font-size:28px; font-weight:900; }
.message-popup-success h2 { margin:0 0 9px; }
.message-popup-success p { max-width:300px; margin:0 0 20px; color:#c8e4ec; line-height:1.55; }

.login-page { position:relative; min-height:100vh; overflow:hidden; padding-bottom:70px; background:radial-gradient(circle at 70% 20%,rgba(0,109,209,.22),transparent 34%),#020d1a; }
.login-header { position:relative; z-index:2; height:100px; display:flex; align-items:center; border-bottom:1px solid var(--line); }
.back-link { color:#8eb8d3; font-family:var(--font-geist-mono); font-size:11px; letter-spacing:.08em; }
.login-shell { position:relative; z-index:2; padding-top:70px; }
.login-intro { max-width:720px; margin-bottom:48px; }
.login-intro h1 { margin-bottom:24px; font-size:clamp(44px,6vw,74px); line-height:1; letter-spacing:-.055em; }
.login-intro>p:last-child { max-width:670px; color:#9bafc2; line-height:1.7; }
.login-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.login-grid.single-login { grid-template-columns:minmax(320px,560px); }
.login-card { padding:34px; border:1px solid rgba(74,201,255,.28); background:rgba(8,31,51,.86); backdrop-filter:blur(18px); }
.login-card.service-login { background:rgba(10,22,42,.9); border-color:rgba(87,128,255,.28); }
.card-tag { color:#53dfff; font-family:var(--font-geist-mono); font-size:9px; font-weight:800; letter-spacing:.17em; }
.login-card h2 { margin:15px 0 10px; font-size:27px; }
.login-card>p { min-height:48px; color:#8ca3b8; line-height:1.55; }
.login-card label { display:block; margin:18px 0; color:#bcd0df; font-size:12px; }
.login-card input { width:100%; margin-top:8px; padding:14px 15px; color:white; border:1px solid rgba(80,181,231,.26); outline:none; background:#041426; }
.login-card input:focus { border-color:#40d6ff; box-shadow:0 0 0 3px rgba(64,214,255,.1); }
.button.full { width:100%; margin-top:8px; }
.prototype-note { display:block; margin-top:15px; color:#60798e; line-height:1.5; }

@media (max-width:1050px) { nav { display:none; } .hero-layout { gap:35px; } .service-grid { grid-template-columns:1fr 1fr; } .service-card:nth-child(2) { border-right:0; } .service-card:nth-child(-n+2) { border-bottom:1px solid rgba(72,194,240,.16); } .workshop-grid,.museum-grid { gap:48px; } }
@media (max-width:800px) { .shell { width:min(100% - 28px,650px); } .site-header { height:74px; } .header-inner { gap:12px; } .brand-mark { width:44px;height:44px; } .brand small { display:none; } .header-cody-mascot { display:none; } .brand { margin-right:auto; } .header-login { gap:5px; } .header-login input { width:95px; height:36px; padding:0 8px; } .header-login button { height:36px; padding:0 10px; } .header-login button .status-dot { display:none; } .hero { padding-top:98px; } .hero-layout,.split-heading,.introduction-grid,.workshop-grid,.museum-grid,.contact-grid,.login-grid { grid-template-columns:1fr; } .hero-visual { order:-1; margin-bottom:28px; padding-left:0; padding-top:0; } .netfone-point-card { width:100%; min-height:96px; } .hero-photo { height:440px; } .facts-row { grid-template-columns:1fr; margin-top:60px; } .fact { border-right:0; border-bottom:1px solid var(--line); } .fact:last-child { border-bottom:0; } .section { padding:80px 0; } .split-heading,.introduction-grid { gap:42px; } .workshop-images { order:2; } .workshop-copy { order:1; } .museum-grid { gap:42px; } .footer-main { flex-wrap:wrap; padding:35px 0; } .footer-main p { order:3; width:100%; } .login-shell { padding-top:45px; } }

@media (max-width:560px) { .netfone-point-card { grid-template-columns:82px 1fr; } .netfone-point-card img { width:82px; } .netfone-point-card b { grid-column:2; justify-self:start; margin-top:5px; } .netfone-label { grid-column:2; } }
@media (max-width:540px) { .header-inner .brand>span:last-child { display:none; } .header-login input { width:82px; font-size:10px; } .header-login button { width:68px; overflow:hidden; font-size:10px; padding:0 7px; } .hero h1 { font-size:46px; } .hero-lead { font-size:16px; } .hero-photo { height:370px; } .service-grid { grid-template-columns:1fr; } .service-card { border-right:0; border-bottom:1px solid rgba(72,194,240,.16); } .service-card:last-child { border-bottom:0; } .main-workshop { height:450px; } .inset-workshop { width:190px; height:140px; } .museum-main { height:390px; } .museum-label { left:12px;right:12px; gap:15px; } .museum-label strong { font-size:12px; } .contact-actions,.hero-actions { display:grid; } .footer-brand { width:100%; } .footer-main>a { width:100%; } .login-card { padding:25px; } }
@media (max-width:540px) { .message-popup { right:12px; bottom:12px; width:calc(100vw - 24px); max-height:calc(100vh - 24px); overflow:auto; padding:22px 18px; } .message-popup-robot { top:12px; right:52px; width:58px; height:88px; } .message-popup-kicker,.message-popup h2 { margin-right:110px; } .message-popup-intro { min-height:58px; margin-right:92px; } .message-contact-fields { grid-template-columns:1fr; } .message-popup-footer { align-items:stretch; flex-direction:column; } .message-popup-footer button { width:100%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .scan-line { animation:none; } * { transition:none!important; } }