.site-shell{padding-top:84px;overflow:visible}.topbar{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;width:100% !important;height:84px;box-sizing:border-box;z-index:990 !important;margin:0 !important;padding:0 clamp(20px,4.5vw,64px);background:#090b0ef0;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,0.08);transition:border-color .25s,background .25s,box-shadow .25s}.topbar.is-scrolled{background:#0a0c0fee;border-color:#c7f36b32}.scroll-progress{position:fixed;z-index:40;left:0;right:0;top:0;height:2px;background:#ffffff0c;pointer-events:none}.scroll-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#c7f36b,#b9d987,#a89cf9);transform:scaleX(0);transform-origin:left center;will-change:transform}.topbar nav a{position:relative;transition:color .2s ease}.topbar nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--lime);transition:right .2s ease}.topbar nav a:hover::after{right:0}.brand-mark{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08);box-shadow:0 0 17px #c7f36b24}.gradient-title{background-size:180% 100%;animation:gradient-travel 7s ease-in-out infinite alternate}@keyframes gradient-travel{from{background-position:0% 50%}to{background-position:100% 50%}}.hero-visual::before{content:'';position:absolute;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,#b9ef4820,transparent 68%);filter:blur(13px);animation:glow-breathe 7s ease-in-out infinite;pointer-events:none}@keyframes glow-breathe{0%,100%{opacity:.45;scale:.88}50%{opacity:.9;scale:1.12}}.timeline-type{display:inline-flex;align-items:center;margin-bottom:9px;padding:4px 7px;border:1px solid #c7f36b37;border-radius:3px;color:#c7e993;background:#c7f36b0a;font:8px 'DM Mono',monospace;letter-spacing:.1em}.timeline-item:nth-child(even) .timeline-type{border-color:#a89cf944;color:#c0b8ff;background:#a89cf90b}.timeline-date{max-width:125px;line-height:1.7}.timeline-item{transition:opacity .6s ease,translate .6s cubic-bezier(.2,.7,.2,1)}.timeline-item .timeline-content{transition:border-color .25s}.timeline-item:hover .timeline-content{border-color:#c7f36b30}.contact-card{transition:transform .3s ease,border-color .3s,box-shadow .3s}.contact-card:hover{transform:translateY(-3px);border-color:#c7f36b49;box-shadow:0 18px 50px #0004}
.project-meta-group{margin:13px 10px 0}.meta-caption{display:block;margin-bottom:7px;color:#7f898c;font:8px 'DM Mono',monospace;letter-spacing:.1em}.project-meta-group .tag-row{margin:0}.project-meta-group .tech-tag{font-size:7px}.detail-tags{margin:8px 0 14px!important}.detail-panel>.section-kicker:not(:first-child){display:block;margin-top:16px}
.project-preview-frame{position:absolute;inset:8px;overflow:hidden;border:1px solid #ffffff24;border-radius:7px;background:#101419;box-shadow:0 14px 36px #0007;transform:translateY(1px);transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.preview-chrome{position:relative;z-index:1;display:flex;align-items:center;gap:5px;height:25px;padding:0 9px;background:linear-gradient(180deg,#20262c,#14191e);border-bottom:1px solid #ffffff16;color:#c2c8cc;font:7px 'DM Mono',monospace;letter-spacing:.03em}
.preview-chrome>span{width:5px;height:5px;border-radius:50%;background:#f28f83}.preview-chrome>span:nth-child(2){background:#e9c56f}.preview-chrome>span:nth-child(3){background:#8fd19e}.preview-chrome i{min-width:0;flex:1;margin-left:6px;overflow:hidden;color:#a5adb3;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.preview-chrome b{padding:4px 6px;border:1px solid #c7f36b35;border-radius:3px;color:#c7f36b;font-size:6px;font-weight:400;letter-spacing:.1em}
.project-preview-frame .project-cover{height:calc(100% - 25px);object-position:center 42%;filter:saturate(.9) contrast(1.02)}.project-preview-frame::after{content:"";position:absolute;inset:25px 0 0;pointer-events:none;background:linear-gradient(180deg,transparent 60%,#080c10a6),linear-gradient(90deg,#0a0e1230,transparent 14%,transparent 88%,#0a0e1226)}.project-card:hover .project-preview-frame{transform:translateY(-2px) scale(1.006);border-color:#c7f36b55;box-shadow:0 20px 44px #0009,0 0 20px #c7f36b12}
@media(max-width:600px){.project-preview-frame{inset:7px}.preview-chrome{height:23px}.project-preview-frame .project-cover{height:calc(100% - 23px)}.project-preview-frame::after{inset:23px 0 0}}
@media(prefers-reduced-motion:reduce){.project-preview-frame,.project-preview-frame .project-cover{transition:none!important}.project-card:hover .project-preview-frame{transform:none}}
@media(max-width:800px){.topbar{margin:0 !important;padding:0 5% !important}}
.hero h1:focus{outline:none}
@media(max-width:600px){.topbar{height:76px;gap:8px}.brand{font-size:13px;gap:9px;white-space:nowrap}.brand-mark-3d{width:38px;height:38px;border-radius:9px;}.topbar nav{gap:8px}.topbar nav a{display:inline!important;font-size:8px}.nav-cta{font-size:9px;padding:8px 9px;white-space:nowrap}.hero h1{font-size:clamp(46px,12vw,62px);line-height:1.02}.hero-copy{max-width:100%}.hero-lead{max-width:42ch}.hero-actions{flex-wrap:wrap}.hero-actions .button{padding:11px 12px;gap:10px;font-size:10px}.hero-visual{overflow:visible}.timeline-item{grid-template-columns:88px 19px minmax(0,1fr);gap:7px}.timeline-item:before{left:96px}.timeline-date{font-size:7px;overflow-wrap:anywhere}.timeline-title{gap:6px}.timeline-title h3{font-size:14px;line-height:1.35}.timeline-title p{line-height:1.5}.timeline-content{min-width:0}.timeline-content ul{padding-left:13px}.timeline-content .tag-row{margin-left:0}.timeline-type{font-size:7px;padding:4px 5px}.stack-inner>div:first-child>p{max-width:none}}
@media(prefers-reduced-motion:reduce){.gradient-title{animation:none}.hero-visual::before{animation:none}}
.project-cover{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s}.project-card:hover .project-cover{transform:scale(1.035);filter:saturate(1.08)}.detail-cover{display:block;width:min(100%,980px);max-height:560px;object-fit:cover;object-position:center;border:1px solid #ffffff18;border-radius:8px;margin:32px 0 20px;box-shadow:0 24px 80px #0006}
.project-card{position:relative;isolation:isolate;overflow:hidden;transform:perspective(900px) translateZ(0);transition:transform .42s cubic-bezier(.2,.8,.2,1),border-color .32s,box-shadow .42s}.project-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(320px circle at var(--spot-x,50%) var(--spot-y,0%),#c7f36b18,transparent 72%);transition:opacity .35s}.project-card:hover{transform:perspective(900px) translateY(-8px) rotateX(1deg);border-color:#c7f36b63;box-shadow:0 22px 58px #0008,0 0 32px #c7f36b0a}.project-card:hover::before{opacity:1}.project-art{transform:translateZ(0)}.project-number{transition:color .3s,transform .4s}.project-card:hover .project-number{color:#e2ff9c;transform:translateY(-2px)}
.section-heading h2,.contact-section h2{animation:heading-focus .8s cubic-bezier(.2,.8,.2,1) both}.section-heading.is-visible h2,.contact-section.is-visible h2{animation:heading-focus .8s cubic-bezier(.2,.8,.2,1) both}@keyframes heading-focus{from{opacity:.25;filter:blur(5px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
.timeline-item:hover{translate:5px 0}.timeline-item:hover .timeline-content{box-shadow:0 12px 34px #0003}.timeline-item.is-visible .timeline-marker i{animation:marker-pop .48s cubic-bezier(.2,.8,.2,1) both}@keyframes marker-pop{0%{scale:.25;opacity:.3}70%{scale:1.35}100%{scale:1;opacity:1}}
.skill-chip{transition:transform .28s cubic-bezier(.2,.8,.2,1),color .25s,border-color .25s,background-color .25s,box-shadow .3s}.skill-chip:hover{transform:translateY(-4px) scale(1.045);color:#e5f7c4;border-color:#c7f36b75;background:#c7f36b0d;box-shadow:0 7px 22px #c7f36b12}.skill-group.is-visible .skill-chip{animation:chip-arrive .45s cubic-bezier(.2,.8,.2,1) both}.skill-group.is-visible .skill-chip:nth-child(2){animation-delay:50ms}.skill-group.is-visible .skill-chip:nth-child(3){animation-delay:100ms}.skill-group.is-visible .skill-chip:nth-child(4){animation-delay:150ms}.skill-group.is-visible .skill-chip:nth-child(5){animation-delay:200ms}@keyframes chip-arrive{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.contact-card:focus-within{transform:translateY(-4px);border-color:#c7f36b70;box-shadow:0 20px 58px #0005,0 0 24px #c7f36b0b}.contact-email span,.project-links span,.button span{display:inline-block;transition:transform .25s}.contact-email:hover span,.project-links a:hover span,.button:hover span{transform:translate(3px,-2px)}.footer a{transition:color .2s,transform .25s}.footer a:hover{transform:translateY(-2px)}
@media(max-width:800px){.project-card:hover{transform:translateY(-4px)}.timeline-item:hover{translate:2px 0}}
@media(prefers-reduced-motion:reduce){.project-card,.timeline-item,.skill-chip,.contact-card,.footer a{transition:none!important}.project-card:hover,.timeline-item:hover,.contact-card:hover,.contact-card:focus-within{transform:none;translate:none}.project-card::before{display:none}.section-heading h2,.contact-section h2,.timeline-item.is-visible .timeline-marker i,.skill-group.is-visible .skill-chip{animation:none!important}}
.stack-band{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(115deg,#0d1114 0%,#111619 48%,#101316 100%)}.stack-band::before,.stack-band::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(2px)}.stack-band::before{width:480px;height:480px;right:-160px;top:-260px;background:radial-gradient(circle,#c7f36b0c,transparent 68%)}.stack-band::after{width:340px;height:340px;left:-210px;bottom:-230px;background:radial-gradient(circle,#a89cf912,transparent 70%)}.stack-inner{display:block;padding-top:86px;padding-bottom:92px}.stack-intro{display:grid;grid-template-columns:1fr minmax(210px,.55fr);align-items:end;gap:32px 50px;padding-bottom:34px;border-bottom:1px solid #ffffff17;position:relative}.stack-intro h2{font-size:clamp(38px,5vw,58px);line-height:1.06;margin-top:14px}.stack-intro>p{font-size:13px;line-height:1.85;color:#939aa1;max-width:340px;margin:0 0 5px}.stack-index{grid-column:1/-1;display:flex;align-items:center;gap:9px;color:#7c858c;font:9px 'DM Mono',monospace;letter-spacing:.13em}.stack-index i{color:var(--lime);font-style:normal}.skill-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}.skill-group{position:relative;min-width:0;min-height:132px;padding:18px 19px 23px;border:0;border-radius:0;background:transparent;transition:transform .3s}.skill-group::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,#ffffff1a,#ffffff08 58%,transparent);background-size:200% 100%;animation:trail-shimmer 6s linear infinite}.skill-group:hover{transform:translateY(-2px)}.skill-group:hover::after{background-image:linear-gradient(90deg,transparent,#80f2e2aa,#d9edbd,#edc89599,transparent);box-shadow:0 0 10px #80f2e220}.skill-group-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.skill-group h3{font:600 12px Manrope,sans-serif;color:#e0e4e6;margin:0}.skill-group h3 span{color:var(--lime);margin-right:8px}.skill-count{color:#687278;font:9px 'DM Mono',monospace}.skill-list{display:flex;gap:7px;flex-wrap:wrap}.skill-chip{font-size:9px;line-height:1.4;padding:7px 10px;border-color:#303a3d;background:#101719;color:#b1bdbe}.skill-chip:hover{transform:translateY(-2px);box-shadow:0 6px 18px #c7f36b12}@keyframes trail-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}@media(max-width:760px){.stack-inner{padding-top:68px;padding-bottom:72px}.stack-intro{grid-template-columns:1fr;gap:12px;padding-bottom:25px}.stack-intro h2{font-size:clamp(36px,7vw,48px)}.stack-intro>p{max-width:48ch}.stack-index{margin-top:7px}.skill-categories{gap:14px 26px;margin-top:15px}.skill-group{padding:15px 2px 19px;min-height:120px}}@media(max-width:520px){.stack-inner{padding-top:58px;padding-bottom:60px}.stack-intro h2{font-size:36px}.skill-categories{grid-template-columns:1fr;gap:5px}.skill-group{min-height:0;padding:15px 0 17px}.skill-chip{font-size:8px;padding:7px 8px}}@media(prefers-reduced-motion:reduce){.stack-band::before,.stack-band::after{display:none}.skill-group:hover{transform:none;box-shadow:none}.skill-group::after{animation:none}}
.hero-visual{isolation:isolate}.flow-lines{position:absolute;z-index:-1;inset:-4% -9%;width:118%;height:108%;overflow:visible;pointer-events:none}.flow-track{fill:none;stroke:url(#flowGradient);stroke-width:.7;opacity:.23}.flow-trail{fill:none;stroke:url(#flowGradient);stroke-width:1.25;stroke-linecap:round;stroke-dasharray:.12 .88;stroke-dashoffset:1;filter:url(#flowGlow);animation:tail-travel 7s linear infinite}.flow-trail-two{animation-duration:8.5s;animation-delay:-3.5s}.flow-trail-three{animation-duration:9.5s;animation-delay:-6s}@keyframes tail-travel{to{stroke-dashoffset:0}}.flow-node{fill:#c9fff1;filter:url(#flowGlow);opacity:.86}.node-end{fill:#f1d9b6}.flow-node:nth-of-type(2n){animation:node-breathe 2.8s ease-in-out infinite alternate}@keyframes node-breathe{to{opacity:.45;filter:drop-shadow(0 0 8px #e8d4aa)}}
@media(max-width:760px){.flow-lines{inset:0 -7%;width:114%;height:100%;opacity:.8}.flow-trail{stroke-width:1.5}}
@media(prefers-reduced-motion:reduce){.flow-trail,.flow-node:nth-of-type(2n){animation:none}.flow-trail{stroke-dashoffset:0;stroke-dasharray:.025 .975}}
.stack-band{background:transparent;border-top:0;border-bottom:0}
.flow-trail{stroke-width:1.8;stroke-dasharray:70 600;stroke-dashoffset:670}

/* Contact: clear, two-column invitation with a quiet moving light connector. */
.contact-section{position:relative;padding-top:122px;padding-bottom:112px;isolation:isolate;overflow:hidden}
.contact-section::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:660px;height:480px;right:-280px;top:12%;border-radius:50%;background:radial-gradient(circle,#a89cf910,transparent 70%)}
.contact-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid #ffffff14}
.contact-availability{display:inline-flex;align-items:center;gap:8px;color:#9ca79e;font:8px 'DM Mono',monospace;letter-spacing:.11em}
.contact-availability i,.contact-card-top i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#c7f36b;box-shadow:0 0 12px #c7f36b99;animation:contact-pulse 2.2s ease-in-out infinite}
@keyframes contact-pulse{50%{opacity:.45;box-shadow:0 0 3px #c7f36b55}}
.contact-layout{position:relative;isolation:isolate;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);gap:clamp(42px,8vw,112px);align-items:center;margin-top:47px}
.contact-flow{position:absolute;z-index:-1;left:-1.5%;right:-1.5%;top:50%;width:103%;height:160px;transform:translateY(-50%);overflow:visible;pointer-events:none;opacity:.58}
.contact-flow-track,.contact-flow-trail{fill:none;stroke:url(#contactFlowGradient);stroke-linecap:round}
.contact-flow-track{stroke-width:1;opacity:.16}
.contact-flow-trail{stroke-width:1.6;stroke-dasharray:82 620;stroke-dashoffset:700;filter:url(#contactFlowGlow);animation:contact-trail 9s linear infinite}
@keyframes contact-trail{to{stroke-dashoffset:0}}
.contact-flow-node{fill:#a4fff2;filter:url(#contactFlowGlow);animation:contact-pulse 2.6s ease-in-out infinite}
.contact-flow-node-end{fill:#f0d1a8;animation-delay:-1.3s}
.contact-copy{min-width:0;padding:16px 0 20px}
.contact-section h2{font-size:clamp(42px,5.5vw,68px);line-height:1.04;margin:0;letter-spacing:-.075em}
.contact-copy>p{font-size:13px;line-height:1.85;color:#9ba1a8;max-width:390px;margin:22px 0 28px}
.contact-methods{display:grid;gap:9px;max-width:420px}
.contact-method{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 20px;align-items:center;gap:12px;padding:12px 14px;border:1px solid #ffffff13;border-radius:7px;background:linear-gradient(105deg,#11171aeb,#0d1013da);transition:border-color .28s,transform .28s,background .28s,box-shadow .28s}
.contact-method:hover{transform:translateX(5px);border-color:#c7f36b55;background:#141a19;box-shadow:0 10px 32px #0003,0 0 20px #c7f36b08}
.contact-method-icon{width:32px;height:32px;display:grid;place-items:center;border:1px solid #c7f36b35;border-radius:50%;color:var(--lime);font:14px 'DM Mono',monospace;background:#c7f36b09}
.contact-method>span:nth-child(2){min-width:0;display:grid;gap:5px}
.contact-method small{color:#788188;font:8px 'DM Mono',monospace;letter-spacing:.12em}
.contact-method strong{overflow:hidden;color:#d9e8c0;font:11px 'DM Mono',monospace;text-overflow:ellipsis;white-space:nowrap}
.contact-method-arrow{justify-self:end;color:#c7f36b;font-size:13px;transition:transform .25s}
.contact-method:hover .contact-method-arrow{transform:translate(3px,-3px)}
.contact-card{position:relative;overflow:hidden;border:1px solid #ffffff1b;border-radius:12px;padding:23px;background:linear-gradient(145deg,#151c20f2,#101316f5);box-shadow:0 24px 70px #0005,0 0 45px #9de2cd08}
.contact-card::before{content:"";position:absolute;top:0;left:8%;width:48%;height:1px;background:linear-gradient(90deg,transparent,#c7f36b99,#d9c8a6,transparent);filter:drop-shadow(0 0 5px #c7f36b88);animation:contact-edge 7s ease-in-out infinite alternate}
@keyframes contact-edge{from{transform:translateX(-12%);opacity:.45}to{transform:translateX(110%);opacity:1}}
.contact-card-top{align-items:center;color:#c2c9c9;font-size:9px;letter-spacing:.1em}
.contact-card-top span:first-child{display:inline-flex;align-items:center;gap:9px}
.contact-card-top span:last-child{font-size:15px;text-shadow:0 0 14px #c7f36b55}
.contact-card form{gap:15px;margin-top:25px}
.contact-card label{gap:8px;color:#aab2b5;font-size:9px}
.contact-card input,.contact-card textarea{padding:12px;border-radius:5px;background:#0b0f11;border-color:#ffffff17;transition:border-color .2s,box-shadow .2s,background .2s}
.contact-card input:focus,.contact-card textarea:focus{border-color:#c7f36b8a;background:#0d1212;box-shadow:0 0 0 3px #c7f36b0b}
.contact-card textarea{min-height:92px}
.contact-card .button{margin-top:3px;min-height:43px}
.contact-card .form-note{margin:25px 0 21px;max-width:38ch;font-size:11px;line-height:1.9;color:#a8b0b4}
.contact-card .form-note code{overflow-wrap:anywhere}
.contact-card-footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #ffffff12;margin-top:20px;padding-top:15px;color:#747e83;font:7px 'DM Mono',monospace;letter-spacing:.08em}
.contact-card-footer span:last-child{color:#aeb5b5}
.contact-card-footer i{color:var(--lime);font-style:normal;padding:0 3px}
.contact-section.is-visible .contact-flow-trail{animation:contact-trail 9s linear infinite}
@media(max-width:760px){.contact-section{padding-top:82px;padding-bottom:78px}.contact-layout{grid-template-columns:1fr;gap:28px;margin-top:30px}.contact-copy{padding:7px 0 4px}.contact-section h2{font-size:clamp(42px,9vw,58px)}.contact-copy>p{margin:17px 0 20px}.contact-methods{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}.contact-method{grid-template-columns:28px minmax(0,1fr) 14px;gap:8px;padding:10px}.contact-method-icon{width:28px;height:28px}.contact-method strong{font-size:9px}.contact-card{max-width:none}.contact-flow{top:20%;height:90px;opacity:.35}}
@media(max-width:480px){.contact-heading{align-items:flex-start;flex-direction:column;gap:11px;padding-bottom:16px}.contact-availability{font-size:7px}.contact-section h2{font-size:43px}.contact-methods{grid-template-columns:1fr}.contact-method{padding:11px 13px}.contact-method strong{font-size:10px}.contact-card{padding:18px}.contact-card-footer{font-size:6px}}
@media(prefers-reduced-motion:reduce){.contact-availability i,.contact-card-top i,.contact-flow-trail,.contact-flow-node,.contact-card::before{animation:none!important}.contact-flow-trail{stroke-dasharray:none;stroke-dashoffset:0}.contact-method,.contact-card{transition:none!important}.contact-method:hover,.contact-card:hover,.contact-card:focus-within{transform:none;translate:none}}

/* Let the hero headline land in a few soft, staggered beats with rich continuous life. */
.hero h1{position:relative;line-height:1.08!important;margin:24px 0 20px!important}
.hero-title-line{display:inline-block;opacity:0;animation:hero-title-arrive .7s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hero-title-line:first-child{animation-delay:.1s;color:#f1f4f8;transition:transform .3s ease,text-shadow .3s ease}
.hero-title-line:first-child:hover{transform:translateY(-2px);text-shadow:0 0 25px rgba(199,243,107,.35)}

/* developer. - Smooth Continuous Aurora Gradient */
.hero-title-line.gradient-title{animation-delay:.22s;background:linear-gradient(115deg,#c7f36b 0%,#8cefe3 30%,#a89cf9 60%,#c7f36b 100%)!important;background-size:260% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;filter:drop-shadow(0 0 20px rgba(199,243,107,.2));animation:hero-title-arrive .7s cubic-bezier(.16,1,.3,1) .22s both,hero-gradient-aurora 7s ease-in-out 1s infinite alternate!important;transition:transform .3s ease,filter .3s ease}
.hero-title-line.gradient-title:hover{transform:translateY(-2px);filter:drop-shadow(0 0 30px rgba(140,239,227,.5))}
@keyframes hero-gradient-aurora{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Building for people. - Clean Editorial Serif Italic (no nested spans, no ghosting) */
.hero-title-line.serif-title{animation-delay:.36s;font-family:Georgia,'Times New Roman',serif!important;font-style:italic!important;font-weight:400!important;color:#e6e9ee!important;-webkit-text-fill-color:#e6e9ee!important;letter-spacing:-.06em!important;transition:color .3s ease,text-shadow .3s ease,transform .3s ease}
.hero-title-line.serif-title:hover{color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:0 0 22px rgba(199,243,107,.35)}

/* Glowing Neon Laser Underline */
.hero h1::after{content:"";position:absolute;left:0;bottom:-10px;width:clamp(65px,8vw,95px);height:2px;border-radius:999px;background:linear-gradient(90deg,#c7f36b,#8cefe3 50%,#a89cf9);box-shadow:0 0 10px #c7f36b88,0 0 20px #8cefe355;transform:scaleX(0);transform-origin:left;animation:hero-title-rule .8s cubic-bezier(.16,1,.3,1) .65s both}

/* Eyebrow Status Badge & Shimmering Photon Beam */
.hero .eyebrow{position:relative;display:inline-flex;align-items:center;gap:11px;padding:6px 14px;background:rgba(199,243,107,.04);border:1px solid rgba(199,243,107,.18);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);width:fit-content;box-shadow:0 2px 14px rgba(0,0,0,.35);animation:eyebrow-arrive .7s cubic-bezier(.18,.72,.22,1) both}
@keyframes eyebrow-arrive{from{opacity:0;transform:translate3d(0,-10px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.hero .status-dot{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:#c7f36b;box-shadow:0 0 10px #c7f36b,0 0 18px rgba(199,243,107,.6);animation:status-beacon-core 2.4s ease-in-out infinite}
.hero .status-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid rgba(199,243,107,.9);animation:status-beacon-ripple 2.4s cubic-bezier(0,.2,.8,1) infinite}
@keyframes status-beacon-core{0%,100%{transform:scale(1);filter:drop-shadow(0 0 4px #c7f36b)}50%{transform:scale(1.18);filter:drop-shadow(0 0 9px #c7f36b)}}
@keyframes status-beacon-ripple{0%{transform:scale(.8);opacity:1}75%{transform:scale(2.6);opacity:0}100%{transform:scale(2.8);opacity:0}}

.hero .eyebrow-line{position:relative;height:1px;width:38px;margin:0 2px;background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(199,243,107,.7) 50%,rgba(255,255,255,.1));background-size:200% 100%;animation:photon-beam-sweep 3.6s ease-in-out infinite}
@keyframes photon-beam-sweep{0%{background-position:100% 0}50%{background-position:0% 0}100%{background-position:-100% 0}}

/* Hero Lead Subtitle Smooth Arrival & Keyword Highlights */
.hero-lead{opacity:0;animation:hero-lead-arrive .85s cubic-bezier(.16,1,.3,1) .65s both;position:relative}
@keyframes hero-lead-arrive{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.hero-lead-highlight{color:#e6ebf0;font-weight:500;position:relative;padding:0 2px;border-bottom:1px dashed rgba(199,243,107,.45);transition:color .25s ease,border-color .25s ease}
.hero-lead-highlight:hover{color:#c7f36b;border-bottom-color:#c7f36b;text-shadow:0 0 12px rgba(199,243,107,.3)}

/* Interactive Ambient Glow on Hero Headline */
.hero-copy{position:relative}
.hero-copy::before{content:"";position:absolute;inset:-30px -40px;background:radial-gradient(420px circle at var(--hero-mouse-x,30%) var(--hero-mouse-y,30%),rgba(199,243,107,.07),transparent 70%);pointer-events:none;opacity:0;transition:opacity .4s ease;z-index:-1;border-radius:24px}
.hero:hover .hero-copy::before{opacity:1}

@keyframes hero-title-arrive{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes hero-title-rule{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.hero-title-line,.hero h1::after,.hero .eyebrow,.hero .status-dot,.hero .status-dot::after,.hero .eyebrow-line,.hero-lead{animation:none!important;opacity:1;transform:none;filter:none}.hero-title-line.gradient-title{animation:none!important}}

/* Scroll-drawn career path and pointer-responsive project cards. */
.timeline{position:relative;isolation:isolate}
.timeline::before,.timeline::after{content:"";position:absolute;z-index:-1;left:147px;top:7px;bottom:44px;width:1px;pointer-events:none}
.timeline::before{background:linear-gradient(180deg,#c7f36b20,#ffffff18 72%,#ffffff08)}
.timeline::after{background:linear-gradient(180deg,#c7f36b,#a9e9b7 55%,#a89cf9);transform:scaleY(var(--timeline-progress,0));transform-origin:top;box-shadow:0 0 9px #c7f36b73;transition:transform .12s linear}
.timeline-item::before{display:none}
.timeline-marker{position:relative;display:grid;place-items:center;transition:border-color .3s,background .3s,box-shadow .3s,transform .3s}
.timeline-marker i{display:block;width:4px;height:4px;border-radius:50%;background:var(--lime);opacity:0;scale:.4;box-shadow:0 0 8px #c7f36b}
.timeline-item.is-visible .timeline-marker{border-color:#d9fb91;background:#1b2612;box-shadow:0 0 15px #c7f36b69}
.timeline-item.is-visible .timeline-marker i{opacity:1;scale:1}
.project-card{transform-style:preserve-3d;will-change:transform}
.project-card:hover{transform:perspective(900px) translateY(-8px) rotateX(var(--card-rotate-x,1deg)) rotateY(var(--card-rotate-y,0deg));box-shadow:0 24px 62px #0009,0 0 30px #c7f36b0c}
.project-card::before{background:radial-gradient(320px circle at var(--spot-x,50%) var(--spot-y,0%),#c7f36b21,transparent 72%)}
.project-card:hover .project-cover{transform:scale(1.055) translate(var(--cover-shift-x,0px),var(--cover-shift-y,0px));filter:saturate(1.12)}
@media(max-width:800px){.timeline::before,.timeline::after{left:83px}.project-card:hover{transform:translateY(-4px)}}
@media(max-width:600px){.timeline::before,.timeline::after{left:83px}}
@media(hover:none){.project-card:hover{transform:none;box-shadow:0 16px 42px #0005}.project-card:hover::before{opacity:0}.project-card:hover .project-cover{transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.timeline::after{transform:scaleY(1);transition:none;box-shadow:none}.timeline-marker,.project-card{will-change:auto}.project-card:hover{transform:none}.project-card:hover .project-cover{transform:none}}

.footer{gap:20px;flex-wrap:wrap;padding:15px 0;min-height:74px}
.footer-rights{max-width:none!important;color:#858b92}
.footer-socials{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,25px);margin:0 auto;color:#939aa1;font:8px 'DM Mono',monospace}
.footer-socials a{display:inline-flex;align-items:center;gap:5px;transition:color .2s,transform .25s}
.footer-socials a:hover{color:#d8f5a0;transform:translateY(-2px)}
.footer-socials a span{color:var(--lime)}
.footer-top{white-space:nowrap}
@media(max-width:760px){.footer{row-gap:14px}.footer-rights{max-width:calc(100% - 110px)!important}.footer-socials{order:3;justify-content:flex-start;width:100%;padding-top:12px;border-top:1px solid #ffffff12}.footer-top{margin-left:auto}}
@media(max-width:480px){.footer-socials{gap:14px;font-size:7px}.footer-rights{font-size:7px}}

/* Sharper, larger navigation with a subtle moving light rail. */
.topbar{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;width:100% !important;z-index:990 !important;isolation:isolate}
.topbar::after{content:"";position:absolute;z-index:-1;left:0;bottom:-1px;width:32%;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#8cefe3,#c7f36b,transparent);filter:drop-shadow(0 0 5px #c7f36b75);opacity:.7;animation:nav-rail-flow 8s ease-in-out infinite alternate}
@keyframes nav-rail-flow{from{transform:translateX(-4%);opacity:.25}to{transform:translateX(222%);opacity:.8}}
.topbar nav{align-items:center;gap:clamp(25px,3vw,42px);font-size:14px;color:#aeb4bb}
.topbar nav a{display:inline-block!important;position:relative;isolation:isolate;padding:9px 0;font-size:14px;font-weight:500;line-height:1.2;letter-spacing:-.015em;transition:color .24s ease,transform .28s cubic-bezier(.2,.8,.2,1);animation:nav-item-arrive .62s cubic-bezier(.2,.75,.2,1) both}
.topbar nav a:nth-child(1){animation-delay:.12s}.topbar nav a:nth-child(2){animation-delay:.19s}.topbar nav a:nth-child(3){animation-delay:.26s}.topbar nav a:nth-child(4){animation-delay:.33s}
.topbar nav a::before{content:"";position:absolute;z-index:-1;inset:2px -10px;border-radius:5px;background:radial-gradient(ellipse,#c7f36b15,transparent 72%);opacity:0;transform:scale(.82);transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.topbar nav a::after{right:auto;bottom:2px;width:100%;height:1px;background:linear-gradient(90deg,#8cefe3,#c7f36b 60%,#e9d1ad);box-shadow:0 0 8px #c7f36b7a;transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.topbar nav a:hover,.topbar nav a:focus-visible,.topbar nav a.is-active{color:#e2f8bb}
.topbar nav a:hover,.topbar nav a:focus-visible{transform:translateY(-2px)}
.topbar nav a:hover::before,.topbar nav a:focus-visible::before,.topbar nav a.is-active::before{opacity:1;transform:scale(1)}
.topbar nav a:hover::after,.topbar nav a:focus-visible::after,.topbar nav a.is-active::after{right:auto;transform:scaleX(1)}
.topbar nav a.is-active::after{animation:nav-underline-glint 2.8s ease-in-out infinite}
@keyframes nav-item-arrive{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes nav-underline-glint{0%,100%{filter:brightness(.9);box-shadow:0 0 5px #c7f36b45}50%{filter:brightness(1.35);box-shadow:0 0 11px #c7f36b9c}}
.topbar nav a:focus-visible{outline:2px solid #c7f36b99;outline-offset:5px;border-radius:2px}
.nav-cta{font-size:13px;transition:color .22s,border-color .22s,background .22s,transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s}
.nav-cta:hover{transform:translateY(-2px);border-color:#c7f36b76;background:#c7f36b0a;box-shadow:0 7px 22px #c7f36b13}
.nav-cta span{display:inline-block;transition:transform .25s}.nav-cta:hover span{transform:translate(2px,-2px)}
@media(max-width:800px){.topbar nav{gap:clamp(18px,3vw,30px)}}
@media(max-width:600px){.topbar{height:66px;gap:7px}.topbar nav{gap:clamp(6px,2vw,9px)}.topbar nav a{padding:9px 0;font-size:clamp(11px,3.05vw,12px);letter-spacing:-.025em}.topbar nav a::before{inset:2px -4px}.topbar nav a::after{bottom:3px}.brand{font-size:12px;gap:7px}.brand-mark{width:25px;height:25px}.nav-cta{font-size:10px;padding:8px 9px}.nav-cta span{margin-left:5px}}
@media(max-width:350px){.topbar nav{gap:5px}.topbar nav a{font-size:10px}.nav-cta{padding:7px 8px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.topbar::after,.topbar nav a,.topbar nav a.is-active::after{animation:none!important}.topbar nav a,.nav-cta,.nav-cta span{transition:none!important}.topbar nav a,.nav-cta:hover{transform:none}.topbar nav a::after{transition:none!important}}

.detail-panel{max-width:980px;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:30px}
.detail-highlights ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;list-style:none;margin:13px 0 0;padding:0}
.detail-highlights li{position:relative;padding:0 0 0 16px;color:#b5bbc1;font-size:12px;line-height:1.7}
.detail-highlights li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:#c7f36b;box-shadow:0 0 9px #c7f36b68}
.detail-panel>p{margin:11px 0 0;color:#aeb5bb;font-size:13px;line-height:1.9;max-width:78ch}
.detail-highlights,.detail-panel>div{min-width:0}
@media(max-width:600px){.detail-panel{padding:18px;gap:19px}.detail-highlights ul{grid-template-columns:1fr;gap:8px}.detail-highlights li{font-size:11px}}

/* Proof Strip */
.proof-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:34px;padding-top:22px;border-top:1px solid #ffffff14}
.proof-item{display:flex;flex-direction:column;gap:4px}
.proof-metric{font:700 16px 'DM Mono',monospace;color:var(--lime);letter-spacing:-.02em}
.proof-label{font:8px 'DM Mono',monospace;color:#858b94;letter-spacing:.08em;text-transform:uppercase}

/* Services */
.services-section{padding-top:115px}
.services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.service-card{border:1px solid #24292f;background:linear-gradient(145deg,#121518,#0e1013);border-radius:8px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .3s ease,border-color .3s,box-shadow .3s}
.service-card:hover{transform:translateY(-5px);border-color:#c7f36b55;box-shadow:0 16px 45px #0007,0 0 24px #c7f36b0c}
.service-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.service-icon{font-size:18px;color:var(--lime);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:#c7f36b0d;border:1px solid #c7f36b28}
.service-index{font:9px 'DM Mono',monospace;color:#79828a}
.service-card h3{font:600 20px Manrope,sans-serif;letter-spacing:-.03em;margin:0 0 12px;color:#eef2f5}
.service-description{color:#9aa1a8;font-size:12px;line-height:1.8;margin:0 0 20px}
.service-capabilities{border-top:1px solid #ffffff10;padding-top:16px;margin-bottom:24px}
.service-capabilities ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.service-capabilities li{position:relative;padding-left:14px;font-size:11px;line-height:1.6;color:#b0b7be}
.service-capabilities li::before{content:"·";position:absolute;left:0;top:-2px;font-size:16px;color:var(--lime)}
.service-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff10;padding-top:14px;margin-top:auto}
.service-project-link,.service-action-link{font:9px 'DM Mono',monospace;letter-spacing:.05em;color:#aeb5bb;display:inline-flex;align-items:center;gap:5px;transition:color .2s}
.service-project-link span,.service-action-link span{color:var(--lime);transition:transform .2s}
.service-project-link:hover,.service-action-link:hover{color:#e2f8bb}
.service-project-link:hover span,.service-action-link:hover span{transform:translate(2px,-2px)}

/* Process / How I Work */
.process-section{padding-top:115px}
.process-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:40px}
.process-card{border:1px solid #24292f;background:linear-gradient(150deg,#121619,#0e1114);border-radius:8px;padding:18px 15px;display:flex;flex-direction:column;gap:12px;transition:transform .28s ease,border-color .28s}
.process-card:hover{transform:translateY(-4px);border-color:#c7f36b48}
.process-step-num{font:700 24px 'DM Mono',monospace;color:#c7f36b70;line-height:1}
.process-card h3{font:600 15px Manrope,sans-serif;letter-spacing:-.02em;margin:0;color:#e6eaed}
.process-step-summary{font-size:11px;line-height:1.6;color:#a0a7af;margin:0}
.process-step-detail{font-size:10px;line-height:1.65;color:#7b838b;margin:0;padding-top:8px;border-top:1px solid #ffffff0a}
.approach-banner{border:1px solid #ffffff14;background:linear-gradient(135deg,#13191d,#0f1316);border-radius:10px;padding:30px}
.approach-header h3{font:600 22px Manrope,sans-serif;letter-spacing:-.03em;margin:8px 0 20px;color:#edf2f5}
.approach-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.principle-item{border-left:2px solid #c7f36b33;padding-left:16px}
.principle-tag{font:8px 'DM Mono',monospace;letter-spacing:.1em;color:var(--lime);margin-bottom:6px}
.principle-item strong{display:block;font:600 14px Manrope,sans-serif;color:#e4e9ed;margin-bottom:6px}
.principle-item p{font-size:11px;line-height:1.7;color:#9299a1;margin:0}

/* About Section */
.about-section{padding-top:115px}
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.about-narrative{display:flex;flex-direction:column;gap:16px}
.about-lead{font-size:15px!important;line-height:1.85!important;color:#e3e7eb!important}
.about-narrative p{font-size:13px;line-height:1.85;color:#9aa1a9;margin:0}
.about-narrative em,.about-narrative strong{color:#d8f59d;font-style:normal;font-weight:600}
.about-actions{display:flex;gap:12px;margin-top:14px}
.about-pillars{display:grid;gap:14px}
.pillar-card{border:1px solid #23292e;background:linear-gradient(140deg,#13171b,#0f1215);border-radius:8px;padding:18px;transition:transform .25s ease,border-color .25s}
.pillar-card:hover{transform:translateX(4px);border-color:#c7f36b44}
.pillar-icon{display:inline-block;color:var(--lime);font-size:14px;margin-bottom:6px}
.pillar-card h4{font:600 15px Manrope,sans-serif;color:#edf1f4;margin:0 0 6px}
.pillar-card p{font-size:11px;line-height:1.7;color:#9198a0;margin:0}

/* FAQs */
.faq-section{padding-top:115px}
.faq-grid{display:grid;gap:12px;max-width:900px}
.faq-accordion-item{border:1px solid #242a30;background:linear-gradient(145deg,#121619,#0e1114);border-radius:8px;overflow:hidden;transition:border-color .25s}
.faq-accordion-item[open]{border-color:#c7f36b55;background:linear-gradient(145deg,#14191d,#101317)}
.faq-accordion-item summary{list-style:none;padding:18px 22px;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;user-select:none}
.faq-accordion-item summary::-webkit-details-marker{display:none}
.faq-category{font:8px 'DM Mono',monospace;letter-spacing:.1em;color:#c7f36b;padding:3px 6px;border-radius:3px;background:#c7f36b0c;border:1px solid #c7f36b28;text-transform:uppercase}
.faq-question-text{font:600 15px Manrope,sans-serif;color:#edf2f5;letter-spacing:-.02em}
.faq-toggle{font:500 18px 'DM Mono',monospace;color:var(--lime);transition:transform .25s}
.faq-accordion-item[open] .faq-toggle{transform:rotate(45deg)}
.faq-answer{padding:0 22px 20px 22px;border-top:1px solid #ffffff0a}
.faq-answer p{font-size:13px;line-height:1.85;color:#9ca3ab;margin:14px 0 0}

/* Contact Prep & Booking Callout */
.contact-prep-hint{margin:16px 0 20px;padding:12px 14px;border-radius:6px;background:#c7f36b08;border:1px solid #c7f36b26;max-width:440px}
.prep-hint-title{display:block;font:8px 'DM Mono',monospace;letter-spacing:.08em;color:var(--lime);margin-bottom:5px}
.contact-prep-hint p{font-size:11px;line-height:1.6;color:#b5bec1;margin:0}
.contact-booking-callout{margin:18px 0 24px;display:flex;flex-direction:column;gap:8px;max-width:420px}
.contact-booking-callout span{font:8px 'DM Mono',monospace;color:#79828a;letter-spacing:.1em}

/* Book a Call Page */
.book-call-page{padding-top:65px;padding-bottom:120px;max-width:1240px}
.booking-header{margin-bottom:46px;padding-bottom:28px;border-bottom:1px solid #ffffff12}
.booking-header h1{font:700 clamp(44px,5.8vw,70px)/1.06 Manrope,sans-serif;letter-spacing:-.065em;margin:16px 0 18px}
.booking-header .detail-lead{font-size:14px;line-height:1.85;color:#9da4ad;max-width:680px;margin:0}
.booking-grid{display:grid;grid-template-columns:minmax(320px,.92fr) minmax(520px,1.4fr);gap:36px;align-items:start}
.booking-overview-col{display:flex;flex-direction:column;gap:20px}
.booking-card{border:1px solid #242a30;background:linear-gradient(150deg,#13171b,#0f1215);border-radius:12px;padding:26px;transition:border-color .28s ease,box-shadow .28s ease}
.booking-card:hover{border-color:#c7f36b44;box-shadow:0 12px 35px #00000040}
.card-kicker{display:block;font:8px 'DM Mono',monospace;letter-spacing:.14em;color:var(--lime);margin-bottom:10px}
.booking-card h3{font:600 18px Manrope,sans-serif;letter-spacing:-.02em;margin:0 0 16px;color:#eff3f6}
.booking-checklist{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.booking-checklist li{display:flex;flex-direction:column;gap:3px;padding-left:16px;position:relative}
.booking-checklist li::before{content:"✦";position:absolute;left:0;top:2px;font-size:10px;color:var(--lime)}
.booking-checklist strong{font-size:13px;color:#e5ebf0}
.booking-checklist span{font-size:11px;line-height:1.6;color:#9299a2}
.booking-prep-list{margin:0;padding-left:18px;display:grid;gap:12px}
.booking-prep-list li{font-size:12px;line-height:1.75;color:#9ea5ae}
.booking-prep-list strong{color:#d8f59d}
.format-items{display:grid;gap:14px}
.format-item{display:flex;flex-direction:column;gap:4px;padding-bottom:12px;border-bottom:1px solid #ffffff0a}
.format-item:last-child{border-bottom:0;padding-bottom:0}
.format-label{font:8px 'DM Mono',monospace;letter-spacing:.12em;color:#757e86}
.format-item strong{font-size:12px;color:#dce2e6}

/* Scheduler Right Column */
.booking-scheduler-col{min-width:0}
.scheduler-card{border:1px solid #283038;background:linear-gradient(145deg,#13181c,#0d1013);border-radius:14px;padding:24px;box-shadow:0 24px 60px #0008,0 0 35px #9de2cd08}
.scheduler-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid #ffffff12}
.scheduler-status{display:inline-flex;align-items:center;gap:8px;font:8px 'DM Mono',monospace;letter-spacing:.12em;color:#a4ebb0}
.scheduler-status i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px #c7f36b}
.status-pending{color:#d1b87a}
.status-pending i{background:#d1b87a;box-shadow:0 0 10px #d1b87a}
.scheduler-badge{font:8px 'DM Mono',monospace;letter-spacing:.1em;color:#d1b87a;background:#3a321944;border:1px solid #735e2b;padding:4px 8px;border-radius:3px}
.scheduler-instruction{font-size:12px;line-height:1.7;color:#9aa2aa;margin:0 0 18px}
.scheduler-frame-wrap{width:100%;height:850px;min-height:850px;border-radius:12px;overflow:hidden;border:1px solid #ffffff24;background:#ffffff;box-shadow:0 18px 50px #00000080}
.scheduler-frame{width:100%;height:100%;border:0;display:block;background:#ffffff}
.scheduler-fallback{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px;padding:16px 20px;border-radius:8px;background:#0c0f12;border:1px solid #ffffff10;flex-wrap:wrap}
.fallback-text strong{font:600 13px Manrope,sans-serif;color:#e4e9ed;display:block;margin-bottom:4px}
.fallback-text p{font-size:11px;color:#8e959d;margin:0}
.scheduler-pending .pending-body h3{font:600 20px Manrope,sans-serif;color:#edf2f5;margin:0 0 12px}
.scheduler-pending .pending-body p{font-size:13px;line-height:1.85;color:#9ba2aa;margin:0 0 24px}
.setup-notice-box{border:1px solid #735e2b;background:#2a231266;border-radius:8px;padding:18px;margin:20px 0}
.setup-notice-box strong{display:block;font:600 13px Manrope,sans-serif;color:#f3d789;margin-bottom:8px}
.setup-notice-box p{font-size:12px;line-height:1.75;color:#ddd2b3;margin:0}
.setup-notice-box code{color:#c7f36b;background:#101416;padding:2px 6px;border-radius:3px;font-size:11px}
.pending-fallback-contact{border-top:1px solid #ffffff10;padding-top:18px;margin-top:22px}
.pending-fallback-contact>span{display:block;font:8px 'DM Mono',monospace;letter-spacing:.1em;color:#858c93;margin-bottom:12px}
.direct-booking-actions{display:flex;flex-wrap:wrap;gap:10px}

/* Bottom FAQs & Direct Message Section */
.booking-bottom-section{margin-top:54px;display:grid;gap:24px}
.booking-faq-card{border:1px solid #242a30;background:linear-gradient(150deg,#13171b,#0f1215);border-radius:12px;padding:30px}
.booking-faq-card h3{font:600 20px Manrope,sans-serif;letter-spacing:-.03em;margin:0 0 20px;color:#edf2f5}
.booking-faq-list{display:grid;gap:12px}
.booking-faq-item{border-bottom:1px solid #ffffff0a;padding:14px 0}
.booking-faq-item:last-child{border-bottom:0;padding-bottom:0}
.booking-faq-item summary{font:600 14px Manrope,sans-serif;color:#e2e7eb;cursor:pointer}
.booking-faq-item p{font-size:12px;line-height:1.8;color:#929aa3;margin:10px 0 0}
.booking-closing-card{border:1px solid #242a30;background:linear-gradient(135deg,#141a1e,#101417);border-radius:12px;padding:28px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.booking-closing-card strong{display:block;font:600 17px Manrope,sans-serif;color:#edf2f6;margin:6px 0}
.booking-closing-card p{font-size:12px;line-height:1.75;color:#949ca4;margin:0;max-width:52ch}
.closing-cta-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ==========================================================================
   Enhanced Multi-Column Architectural Footer
   ========================================================================== */
.footer {
    display: flex;
    flex-direction: column;
    margin-top: 64px;
    padding: 64px 0 36px;
    border-top: 1px solid #1f2731;
    background: linear-gradient(180deg, #090b0e00 0%, #07090c 45%, #050608 100%);
    position: relative;
    isolation: isolate;
}
.footer::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c7f36b80, #8cefe380, transparent);
    filter: drop-shadow(0 0 6px #c7f36b66);
    pointer-events: none;
}
.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(160px, 0.9fr) minmax(190px, 1fr) minmax(190px, 1.05fr);
    gap: 40px;
    margin-bottom: 48px;
}
.footer-identity {
    display: grid;
    gap: 14px;
}
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font: 700 16px Manrope, sans-serif;
    color: #edf2f5;
    text-decoration: none;
    transition: transform 0.25s;
}
.footer-brand:hover {
    transform: translateX(2px);
}
.footer-brand .brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, #17221c, #10161a);
    border: 1px solid #c7f36b44;
    color: var(--lime);
    display: grid;
    place-items: center;
    font: 700 11px 'DM Mono', monospace;
    box-shadow: 0 0 12px #c7f36b20;
}
.footer-bio {
    font-size: 12px;
    line-height: 1.7;
    color: #8c96a0;
    margin: 0;
    max-width: 38ch;
}
.footer-availability-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 10px 'DM Mono', monospace;
    color: #cbeab2;
    background: #c7f36b0d;
    border: 1px solid #c7f36b33;
    padding: 5px 12px;
    border-radius: 20px;
    width: fit-content;
    box-shadow: 0 0 16px #c7f36b0a;
}
.pulse-beacon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 10px #c7f36b;
    position: relative;
    animation: beacon-pulse 2s infinite ease-in-out;
}
@keyframes beacon-pulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 6px #c7f36b; }
    50% { transform: scale(1.3); opacity: 0.7; box-shadow: 0 0 14px #c7f36b; }
}
.footer-location-tag {
    font: 10px 'DM Mono', monospace;
    color: #6a7580;
    letter-spacing: 0.04em;
}
.footer-col-title {
    display: block;
    font: 700 9px 'DM Mono', monospace;
    letter-spacing: 0.12em;
    color: var(--lime);
    margin-bottom: 16px;
    text-transform: uppercase;
}
.footer-nav-list {
    display: grid;
    gap: 9px;
}
.footer-nav-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 11px Manrope, sans-serif;
    color: #929da7;
    text-decoration: none;
    transition: all 0.2s ease;
}
.footer-nav-list a span {
    font: 9px 'DM Mono', monospace;
    color: #5c6771;
    transition: color 0.2s;
}
.footer-nav-list a:hover {
    color: #edf2f5;
    transform: translateX(4px);
}
.footer-nav-list a:hover span {
    color: var(--lime);
}
.footer-links-group {
    display: grid;
    gap: 8px;
}
.footer-channel-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #0f1318;
    border: 1px solid #1f2730;
    border-radius: 6px;
    font: 11px Manrope, sans-serif;
    color: #cbd4dc;
    text-decoration: none;
    transition: all 0.22s ease;
}
.footer-channel-link:hover {
    border-color: #c7f36b55;
    background: #141b21;
    transform: translateY(-2px);
    color: #ffffff;
    box-shadow: 0 8px 20px #00000080;
}
.footer-channel-link .channel-icon {
    font: 12px 'DM Mono', monospace;
    color: var(--lime);
    width: 14px;
    text-align: center;
}
.footer-channel-link .channel-label {
    flex: 1;
    font-weight: 500;
}
.footer-channel-link .channel-arrow {
    font-size: 11px;
    color: #727e8a;
    transition: transform 0.2s, color 0.2s;
}
.footer-channel-link:hover .channel-arrow {
    transform: translate(2px, -2px);
    color: var(--lime);
}
.footer-channel-link.highlight-booking {
    border-color: #c7f36b44;
    background: #13221b;
}
.footer-channel-link.highlight-booking:hover {
    border-color: var(--lime);
    box-shadow: 0 0 18px #c7f36b20;
}
.footer-channel-link .channel-badge {
    font: 8px 'DM Mono', monospace;
    color: var(--lime);
    background: #c7f36b15;
    border: 1px solid #c7f36b30;
    padding: 2px 6px;
    border-radius: 3px;
}
.footer-system-spec .spec-list {
    display: grid;
    gap: 8px;
}
.footer-system-spec .spec-row {
    display: grid;
    gap: 2px;
    padding: 8px 12px;
    background: #0a0e12;
    border: 1px solid #1a222a;
    border-radius: 6px;
    transition: border-color 0.2s;
}
.footer-system-spec .spec-row:hover {
    border-color: #c7f36b33;
}
.footer-system-spec .spec-key {
    font: 8px 'DM Mono', monospace;
    color: #6a747e;
    letter-spacing: 0.08em;
}
.footer-system-spec .spec-val {
    font: 600 11px 'DM Mono', monospace;
    color: #b5c1cb;
}
.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid #1a222a;
    flex-wrap: wrap;
}
.footer-copy {
    font: 11px 'DM Mono', monospace;
    color: #717d87;
}
.footer-top-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    background: #101418;
    border: 1px solid #232b34;
    border-radius: 20px;
    font: 11px 'DM Mono', monospace;
    color: #cbd5de;
    text-decoration: none;
    transition: all 0.25s ease;
}
.footer-top-btn:hover {
    border-color: var(--lime);
    color: var(--lime);
    background: #152219;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px #c7f36b1a;
}
.footer-top-btn .top-arrow {
    font-size: 12px;
    display: inline-block;
    transition: transform 0.25s;
}
.footer-top-btn:hover .top-arrow {
    transform: translateY(-3px);
}
.nav-cta-booking {
    border-color: #c7f36b66;
    background: #c7f36b0d;
    color: #e4f7be;
}

/* ==========================================================================
   ELEVATED SITE-WIDE ANIMATIONS
   ========================================================================== */

/* 1. Dynamic Button Light-Sweep Shimmer */
.button-primary, .blueprint-apply-btn, .nav-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.button-primary::after, .blueprint-apply-btn::after, .nav-cta::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -120%;
    width: 60%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: rotate(25deg);
    pointer-events: none;
    transition: none;
}
.button-primary:hover::after, .blueprint-apply-btn:hover::after, .nav-cta:hover::after {
    left: 150%;
    transition: left 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 2. Hero Ambient Energy Glow & Floating Tags */
.hero-visual::before {
    animation: hero-ambient-pulse 5.5s ease-in-out infinite alternate !important;
}
@keyframes hero-ambient-pulse {
    0% { transform: scale(0.9) rotate(0deg); opacity: 0.45; filter: blur(24px); }
    50% { transform: scale(1.18) rotate(12deg); opacity: 0.85; filter: blur(34px); }
    100% { transform: scale(1) rotate(-8deg); opacity: 0.55; filter: blur(28px); }
}

.float-tag {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s, border-color 0.3s !important;
}
.float-tag:hover {
    transform: scale(1.08) translateY(-4px) !important;
    border-color: #c7f36b88 !important;
    box-shadow: 0 10px 24px #00000088, 0 0 18px #c7f36b22 !important;
}

/* 3. Accelerated, Radiant SVG Circuit Trails */
.flow-trail {
    animation-duration: 5s !important;
    stroke-width: 2.2px !important;
    filter: drop-shadow(0 0 8px #c7f36b) !important;
}
.contact-flow-trail {
    animation-duration: 5.5s !important;
    stroke-width: 2.4px !important;
    filter: drop-shadow(0 0 10px #c7f36b) !important;
}

/* 4. Enhanced Project, Service, and Pillar Card Hover Depth */
.project-card, .service-card, .process-card, .pillar-card, .about-pillars > div {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.project-card:hover {
    transform: perspective(1000px) translateY(-8px) scale(1.008) !important;
    border-color: #c7f36b66 !important;
    box-shadow: 0 24px 60px #00000099, 0 0 35px #c7f36b15 !important;
}
.service-card:hover, .process-card:hover, .pillar-card:hover {
    transform: translateY(-5px) scale(1.015) !important;
    border-color: #c7f36b55 !important;
    box-shadow: 0 18px 45px #00000080, 0 0 24px #c7f36b10 !important;
}

/* 5. Ripple Radar Waves on Status Beacons */
.live-pulse, .contact-availability i, .pulse-beacon {
    position: relative;
}
.live-pulse::after, .contact-availability i::after, .pulse-beacon::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid var(--lime);
    animation: ripple-beacon 2.4s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}
@keyframes ripple-beacon {
    0% { transform: scale(1); opacity: 0.8; }
    70% { transform: scale(2.8); opacity: 0; }
    100% { transform: scale(2.8); opacity: 0; }
}

/* 6. Section Kickers Subtitle Glow Arrive */
.section-kicker {
    position: relative;
    display: inline-block;
    transition: color 0.25s ease;
}
.section-heading:hover .section-kicker {
    color: #e5ffad;
    text-shadow: 0 0 10px #c7f36b66;
}

/* 7. Archetype and Capability Micro-Spring Animations */
.archetype-card.is-selected {
    animation: card-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes card-pop {
    0% { transform: scale(0.96); }
    60% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.capability-checkbox.checked span {
    animation: check-spring 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.3) both;
}
@keyframes check-spring {
    0% { transform: scale(0) rotate(-20deg); opacity: 0; }
    70% { transform: scale(1.25) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* 8. Glowing Outline Travel on Blueprint Card */
.blueprint-card {
    position: relative;
}
.blueprint-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c7f36b, #8cefe3, transparent);
    background-size: 200% 100%;
    animation: border-beam-flow 4s linear infinite;
    pointer-events: none;
}
@keyframes border-beam-flow {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Responsive adjustments */
@media(max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }
}
@media(max-width: 800px) {
    .proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .services-grid { grid-template-columns: 1fr; }
    .process-grid { grid-template-columns: 1fr; }
    .approach-principles { grid-template-columns: 1fr; gap: 18px; }
    .about-grid { grid-template-columns: 1fr; }
    .booking-grid { grid-template-columns: 1fr; }
}
@media(max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .proof-metric { font-size: 14px; }
    .topbar nav { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
    .topbar nav::-webkit-scrollbar { display: none; }
}
@media(prefers-reduced-motion:reduce) {
    .service-card:hover,.process-card:hover,.pillar-card:hover{transform:none!important}
    .faq-toggle{transition:none!important}
    .button-primary::after, .blueprint-apply-btn::after, .nav-cta::after, .blueprint-card::before, .live-pulse::after, .pulse-beacon::after { animation: none!important; display: none!important; }
}


/* ==========================================================================
   FEATURE: Interactive Project Scoper & Requirement Estimator
   ========================================================================== */
.scoper-container {
    margin: 36px 0 48px;
    padding: 34px 36px;
    background: linear-gradient(168deg, #11151a 0%, #0c0f13 100%);
    border: 1px solid #232b34;
    border-radius: 16px;
    box-shadow: 0 24px 64px #00000080, 0 0 32px #c7f36b06;
    position: relative;
    isolation: isolate;
}
.scoper-header {
    display: grid;
    gap: 10px;
    padding-bottom: 24px;
    border-bottom: 1px solid #1c232b;
}
.scoper-badge-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.scoper-kicker {
    font: 700 9px 'DM Mono', monospace;
    letter-spacing: 0.14em;
    color: var(--lime);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.scoper-kicker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 10px #c7f36b;
    animation: contact-pulse 2.2s ease-in-out infinite;
}
.scoper-badge {
    font: 8px 'DM Mono', monospace;
    color: #8cefe3;
    background: #8cefe312;
    border: 1px solid #8cefe330;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.08em;
}
.scoper-title {
    font: 600 clamp(22px, 3vw, 30px) Manrope, sans-serif;
    color: #edf2f5;
    margin: 0;
    letter-spacing: -0.03em;
}
.scoper-subtitle {
    font-size: 13px;
    line-height: 1.7;
    color: #929ba5;
    max-width: 68ch;
    margin: 0;
}
.scoper-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.95fr);
    gap: 32px;
    align-items: start;
    margin-top: 30px;
}
.scoper-form-col {
    display: grid;
    gap: 28px;
}
.scoper-field-group {
    display: grid;
    gap: 14px;
}
.field-label-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.field-step {
    font: 700 9px 'DM Mono', monospace;
    color: var(--lime);
    background: #c7f36b12;
    border: 1px solid #c7f36b33;
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: 0.08em;
}
.field-title {
    font: 600 13px Manrope, sans-serif;
    color: #edf2f5;
    margin: 0;
    letter-spacing: -0.01em;
}
.field-count {
    margin-left: auto;
    font: 10px 'DM Mono', monospace;
    color: #7b8792;
}

/* Step 1: Archetypes */
.archetype-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.archetype-card {
    background: #14181f;
    border: 1px solid #232b34;
    border-radius: 10px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    transition: all 0.22s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.archetype-card:hover {
    border-color: #c7f36b55;
    background: #181f28;
    transform: translateY(-2px);
}
.archetype-card.is-selected {
    border-color: #c7f36b;
    background: linear-gradient(145deg, #17241e 0%, #121b16 100%);
    box-shadow: 0 0 20px #c7f36b15;
}
.archetype-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}
.archetype-icon {
    font-size: 15px;
    color: var(--lime);
}
.archetype-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #38434e;
    background: #0b0e12;
    transition: all 0.2s;
}
.archetype-radio.checked {
    border-color: var(--lime);
    background: var(--lime);
    box-shadow: 0 0 8px #c7f36b80;
}
.archetype-title {
    font: 600 13px Manrope, sans-serif;
    color: #edf2f6;
}
.archetype-desc {
    font-size: 10px;
    line-height: 1.45;
    color: #88939e;
}

/* Step 2: Capabilities */
.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.capability-card {
    background: #13171e;
    border: 1px solid #222932;
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    user-select: none;
}
.capability-card:hover {
    border-color: #c7f36b44;
    background: #171d24;
}
.capability-card.is-checked {
    border-color: #c7f36b88;
    background: #14221c;
}
.capability-checkbox {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 4px;
    border: 1.5px solid #36414c;
    background: #090c10;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #090c10;
    transition: all 0.18s;
    margin-top: 1px;
}
.capability-checkbox.checked {
    background: var(--lime);
    border-color: var(--lime);
    color: #090c10;
    box-shadow: 0 0 10px #c7f36b55;
}
.capability-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.capability-title {
    font: 600 12px Manrope, sans-serif;
    color: #edf2f5;
}
.capability-desc {
    font-size: 10px;
    line-height: 1.4;
    color: #84909c;
}

/* Step 3: Timeline */
.timeline-segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.timeline-segment {
    background: #13171e;
    border: 1px solid #222932;
    border-radius: 8px;
    padding: 11px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    font: 600 11px Manrope, sans-serif;
    color: #98a2ac;
}
.timeline-segment:hover {
    border-color: #c7f36b44;
    color: #edf2f5;
}
.timeline-segment.is-selected {
    border-color: #c7f36b;
    background: #15231c;
    color: var(--lime);
    box-shadow: 0 0 14px #c7f36b12;
}
.segment-radio {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid #38444f;
}
.segment-radio.checked {
    background: var(--lime);
    border-color: var(--lime);
    box-shadow: 0 0 6px #c7f36b;
}

/* Blueprint Summary Card */
.blueprint-card {
    background: #090c0f;
    border: 1px solid #232b34;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 40px #00000099;
    position: sticky;
    top: 88px;
}
.blueprint-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #11161d;
    border-bottom: 1px solid #1e2630;
    flex-wrap: wrap;
    gap: 10px;
}
.blueprint-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 700 10px 'DM Mono', monospace;
    color: #cbd4dc;
    letter-spacing: 0.1em;
}
.blueprint-glyph {
    color: var(--lime);
    font-size: 13px;
}
.blueprint-badge {
    font: 700 9px 'DM Mono', monospace;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 0.06em;
}
.blueprint-badge.badge-complex {
    color: #a89cf9;
    background: #a89cf91a;
    border: 1px solid #a89cf944;
}
.blueprint-badge.badge-standard {
    color: #8cefe3;
    background: #8cefe31a;
    border: 1px solid #8cefe344;
}
.blueprint-badge.badge-mvp {
    color: #e9c56f;
    background: #e9c56f1a;
    border: 1px solid #e9c56f44;
}
.blueprint-body {
    padding: 20px;
    display: grid;
    gap: 18px;
}
.blueprint-item {
    display: grid;
    gap: 6px;
}
.blueprint-caption {
    font: 700 9px 'DM Mono', monospace;
    color: #76818b;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.architecture-name {
    font: 600 13px/1.45 Manrope, sans-serif;
    color: #edf2f6;
    margin: 0;
}
.blueprint-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.blueprint-tag {
    font: 10px 'DM Mono', monospace;
    color: #c4d0d8;
    background: #121820;
    border: 1px solid #222b36;
    padding: 3px 8px;
    border-radius: 4px;
}
.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}
.preview-copy-hint {
    font: 9px 'DM Mono', monospace;
    color: #6b7782;
}
.blueprint-message-preview {
    background: #06080a;
    border: 1px solid #1a2027;
    border-radius: 8px;
    overflow: hidden;
}
.preview-code-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #0c1015;
    border-bottom: 1px solid #161c22;
}
.preview-code-chrome .code-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.preview-code-chrome .dot-red { background: #e06c75; }
.preview-code-chrome .dot-yellow { background: #e5c07b; }
.preview-code-chrome .dot-green { background: #98c379; }
.preview-code-chrome .code-title {
    margin-left: 6px;
    font: 9px 'DM Mono', monospace;
    color: #727e8a;
}
.preview-text {
    margin: 0;
    padding: 13px 15px;
    font: 10.5px/1.65 'DM Mono', monospace;
    color: #b5c1cb;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 180px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #232b35 #06080a;
}
.blueprint-footer {
    padding: 16px 20px;
    background: #0c1116;
    border-top: 1px solid #1b232b;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.blueprint-apply-btn {
    flex: 1;
    min-width: 170px;
    font-size: 11px;
}
.blueprint-book-btn {
    white-space: nowrap;
    font-size: 11px;
}

@media(max-width: 900px) {
    .scoper-layout {
        grid-template-columns: 1fr;
    }
    .blueprint-card {
        position: static;
    }
}
@media(max-width: 640px) {
    .scoper-container {
        padding: 22px 18px;
    }
    .archetype-grid,
    .capabilities-grid {
        grid-template-columns: 1fr;
    }
    .timeline-segmented {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   FEATURE 3: Live GitHub Activity & Open-Source Showcase (Restyled & Animated)
   ========================================================================== */

/* ── Keyframes ── */
@keyframes gh-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gh-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199, 243, 107, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(199, 243, 107, 0); }
}
@keyframes gh-card-reveal {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Outer Card ── */
.github-activity-card {
    border: 1px solid #1c242e;
    background: linear-gradient(165deg, #0e1217 0%, #090b0e 100%);
    border-radius: 16px;
    padding: 28px;
    display: grid;
    gap: 24px;
    margin-top: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    animation: gh-fade-up 0.5s ease-out both;
    position: relative;
    overflow: hidden;
}
.github-activity-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(199, 243, 107, 0.25), rgba(140, 239, 227, 0.25), transparent);
}

/* ── Top Header Row ── */
.github-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid #182028;
}

.github-user-badge {
    display: flex;
    align-items: center;
    gap: 14px;
}

.github-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #151a22, #0f1318);
    border: 1px solid #232d39;
    display: grid;
    place-items: center;
    color: #e6edf3;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}
.github-activity-card:hover .github-icon {
    color: var(--lime);
    border-color: rgba(199, 243, 107, 0.4);
    box-shadow: 0 0 20px rgba(199, 243, 107, 0.15);
}

.github-user-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.github-handle-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.github-handle {
    font: 700 14px 'DM Mono', monospace;
    color: #f0f4f8;
    letter-spacing: -0.01em;
}

.github-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 9px 'DM Mono', monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lime);
    background: rgba(199, 243, 107, 0.08);
    border: 1px solid rgba(199, 243, 107, 0.25);
    padding: 2px 8px;
    border-radius: 20px;
}

.status-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    animation: gh-pulse-glow 2s infinite;
}

.github-sub {
    font-size: 11.5px;
    color: #7d8792;
    letter-spacing: -0.01em;
}

/* ── Profile Action Button ── */
.github-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 8px;
    background: linear-gradient(135deg, #14181f, #0f1217);
    border: 1px solid #232d39;
    color: #cbd5e1;
    font: 600 11.5px 'DM Mono', monospace;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.github-view-btn .btn-arrow {
    color: var(--lime);
    transition: transform 0.25s ease;
    font-size: 12px;
}
.github-view-btn:hover {
    border-color: rgba(199, 243, 107, 0.5);
    color: #f8fafc;
    background: linear-gradient(135deg, #18221c, #111814);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(199, 243, 107, 0.15);
}
.github-view-btn:hover .btn-arrow {
    transform: translate(2px, -2px);
}

/* ── Repositories Grid ── */
.github-repos-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* ── Individual Repo Card ── */
.github-repo-item {
    border: 1px solid #1a222c;
    background: linear-gradient(150deg, #11161d 0%, #0a0d11 100%);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    animation: gh-card-reveal 0.45s ease-out both;
}

/* Stagger entrance */
.github-repo-item:nth-child(1) { animation-delay: 0.04s; }
.github-repo-item:nth-child(2) { animation-delay: 0.08s; }
.github-repo-item:nth-child(3) { animation-delay: 0.12s; }
.github-repo-item:nth-child(4) { animation-delay: 0.16s; }
.github-repo-item:nth-child(5) { animation-delay: 0.20s; }
.github-repo-item:nth-child(6) { animation-delay: 0.24s; }

.github-repo-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.github-repo-item:hover {
    border-color: rgba(199, 243, 107, 0.45);
    transform: translateY(-4px);
    background: linear-gradient(150deg, #141b24 0%, #0d1117 100%);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(199, 243, 107, 0.1);
}
.github-repo-item:hover::after {
    left: 140%;
}

/* ── Repo Top Row ── */
.repo-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.repo-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.repo-folder-icon {
    color: #8cefe3;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.85;
    transition: transform 0.25s ease;
}
.github-repo-item:hover .repo-folder-icon {
    transform: scale(1.1);
    color: var(--lime);
}

.repo-name {
    font: 600 13.5px Manrope, sans-serif;
    color: #eef3f7;
    letter-spacing: -0.015em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.github-repo-item:hover .repo-name {
    color: var(--lime);
}

.repo-arrow {
    color: #5d6773;
    font-size: 13px;
    font-family: 'DM Mono', monospace;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}
.github-repo-item:hover .repo-arrow {
    color: var(--lime);
    transform: translate(2px, -2px);
}

/* ── Repo Description ── */
.repo-desc {
    font-size: 11.5px;
    line-height: 1.6;
    color: #88939f;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 54px;
    transition: color 0.2s ease;
}
.github-repo-item:hover .repo-desc {
    color: #b1bcc7;
}

/* ── Repo Meta Row ── */
.repo-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.repo-lang {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 600 10.5px 'DM Mono', monospace;
    color: #cbd5e1;
}

.lang-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.dot-csharp     { background: #9b4993; box-shadow: 0 0 8px rgba(155, 73, 147, 0.6); }
.dot-typescript { background: #3178c6; box-shadow: 0 0 8px rgba(49, 120, 198, 0.6); }
.dot-javascript { background: #f7df1e; box-shadow: 0 0 8px rgba(247, 223, 30, 0.6); }
.dot-php        { background: #777bb4; box-shadow: 0 0 8px rgba(119, 123, 180, 0.6); }
.dot-default    { background: var(--lime); box-shadow: 0 0 8px rgba(199, 243, 107, 0.6); }

.repo-badge {
    font: 600 8.5px 'DM Mono', monospace;
    letter-spacing: 0.04em;
    color: #8c96a3;
    background: #141920;
    border: 1px solid #232c37;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    transition: all 0.2s ease;
}
.github-repo-item:hover .repo-badge {
    color: #e2e8f0;
    border-color: rgba(140, 239, 227, 0.35);
    background: rgba(140, 239, 227, 0.06);
}

/* ── Responsive adjustments ── */
@media (max-width: 1024px) {
    .github-repos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .github-activity-card {
        padding: 20px;
    }
    .github-card-top {
        flex-direction: column;
        align-items: flex-start;
    }
    .github-view-btn {
        width: 100%;
        justify-content: center;
    }
    .github-repos-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .github-activity-card,
    .github-repo-item {
        animation: none !important;
        transition: none !important;
    }
    .github-repo-item:hover {
        transform: none !important;
    }
    .status-pulse-dot {
        animation: none !important;
    }
}

/* ==========================================================================
   PROJECT DETAIL PAGE – Header Restyle & Animations
   ========================================================================== */

/* ── entrance keyframes ── */
@keyframes detail-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes detail-slide-right {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes detail-scale-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes detail-title-reveal {
  from { opacity: 0; transform: translateY(30px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes cover-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@keyframes tag-pop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bullet-grow {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ── page container ── */
.detail-page {
    min-height: 68vh;
    padding-top: 90px !important;
    padding-bottom: 100px;
}

/* ── back link ── */
.detail-page .back-link {
    font: 500 11px 'DM Mono', monospace;
    color: #7b858e;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 48px;
    padding: 8px 16px 8px 12px;
    border: 1px solid #1e262e;
    border-radius: 8px;
    background: #0e121700;
    transition: all .3s cubic-bezier(.16,1,.3,1);
    animation: detail-slide-right .5s ease-out both;
    letter-spacing: .03em;
}
.detail-page .back-link:hover {
    color: var(--lime);
    border-color: #c7f36b55;
    background: #c7f36b08;
    transform: translateX(-4px);
}

/* ── project kicker ── */
.detail-page > .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #14181e, #101317);
    border: 1px solid #1e262e;
    border-radius: 6px;
    color: #8cefe3;
    font-size: 9px !important;
    animation: detail-fade-up .5s ease-out .08s both;
    margin-bottom: 8px;
}

/* ── title ── */
.detail-page h1 {
    font: 700 clamp(44px, 7.5vw, 78px)/1.02 Manrope, sans-serif !important;
    letter-spacing: -.065em !important;
    margin: 18px 0 20px !important;
    animation: detail-title-reveal .65s cubic-bezier(.2,.8,.2,1) .14s both;
    max-width: 900px;
}
.detail-page h1 .gradient-title {
    font-size: inherit;
    animation: gradient-travel 7s ease-in-out infinite alternate;
}

/* ── lead description ── */
.detail-page .detail-lead {
    font-size: 15px !important;
    line-height: 1.85 !important;
    color: #94a0ac !important;
    max-width: 660px;
    animation: detail-fade-up .55s ease-out .22s both;
    margin-bottom: 32px;
}

/* ── cover image ── */
.detail-page .detail-cover {
    display: block;
    width: 100%;
    max-width: 920px;
    border-radius: 14px;
    border: 1px solid #1e262e;
    box-shadow: 0 24px 64px #00000055, 0 0 0 1px #ffffff06 inset;
    object-fit: cover;
    object-position: top center;
    aspect-ratio: 16 / 9;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, border-color .5s;
    animation: detail-scale-in .6s ease-out .28s both;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}
.detail-page .detail-cover:hover {
    transform: translateY(-4px) scale(1.005);
    border-color: #c7f36b33;
    box-shadow: 0 32px 80px #00000066, 0 0 40px #c7f36b08;
}

/* ── period kicker (below image) ── */
.detail-page .detail-actions ~ .section-kicker,
.detail-page > .section-kicker:nth-of-type(2) {
    margin-top: -8px;
}

/* ── action buttons row ── */
.detail-page .detail-actions {
    display: flex;
    gap: 12px;
    margin: 28px 0 48px;
    animation: detail-fade-up .5s ease-out .36s both;
}
.detail-page .detail-actions .button {
    border-radius: 10px;
    padding: 13px 22px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: all .3s cubic-bezier(.16,1,.3,1);
    position: relative;
    overflow: hidden;
}
.detail-page .detail-actions .button::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .3s;
}
.detail-page .detail-actions .button-primary {
    background: linear-gradient(135deg, var(--lime), #a8d960);
    border-color: var(--lime);
    box-shadow: 0 4px 20px #c7f36b30;
}
.detail-page .detail-actions .button-primary::before {
    background: linear-gradient(135deg, #d5fb83, #c7f36b);
}
.detail-page .detail-actions .button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px #c7f36b40;
}
.detail-page .detail-actions .button-primary:hover::before { opacity: 1; }

.detail-page .detail-actions .button-quiet {
    border: 1px solid #2a3138;
    background: linear-gradient(135deg, #14181e, #101317);
}
.detail-page .detail-actions .button-quiet:hover {
    transform: translateY(-2px);
    border-color: #c7f36b55;
    background: linear-gradient(135deg, #1a2218, #141a14);
    color: var(--lime);
    box-shadow: 0 8px 24px #00000044;
}

/* ── detail panel (highlights, overview, tags) ── */
.detail-page .detail-panel {
    border: 1px solid #1e262e !important;
    background: linear-gradient(165deg, #0e1217, #090b0e) !important;
    border-radius: 14px !important;
    padding: 28px !important;
    max-width: 920px !important;
    box-shadow: 0 16px 48px #00000044;
    animation: detail-fade-up .55s ease-out .44s both;
    position: relative;
    overflow: hidden;
}
.detail-page .detail-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c7f36b22, #a89cf922, transparent);
}

/* section kickers inside the panel */
.detail-page .detail-panel .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: #14181e;
    border: 1px solid #1e262e;
    border-radius: 5px;
    color: #8cefe3;
    font-size: 8px !important;
    margin-bottom: 12px;
}

/* system overview text */
.detail-page .detail-panel > p {
    font-size: 13.5px !important;
    line-height: 1.9 !important;
    color: #a0a8b2 !important;
    max-width: 80ch;
}

/* ── highlights list ── */
.detail-page .detail-highlights ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 28px;
}
.detail-page .detail-highlights li {
    position: relative;
    padding: 0 0 0 20px;
    color: #b0b8c2;
    font-size: 12.5px;
    line-height: 1.75;
    animation: detail-fade-up .4s ease-out both;
}
.detail-page .detail-highlights li:nth-child(1) { animation-delay: .48s; }
.detail-page .detail-highlights li:nth-child(2) { animation-delay: .53s; }
.detail-page .detail-highlights li:nth-child(3) { animation-delay: .58s; }
.detail-page .detail-highlights li:nth-child(4) { animation-delay: .63s; }
.detail-page .detail-highlights li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 8px #c7f36b55;
    animation: bullet-grow .3s ease-out both;
}
.detail-page .detail-highlights li:nth-child(1)::before { animation-delay: .5s; }
.detail-page .detail-highlights li:nth-child(2)::before { animation-delay: .55s; }
.detail-page .detail-highlights li:nth-child(3)::before { animation-delay: .6s; }
.detail-page .detail-highlights li:nth-child(4)::before { animation-delay: .65s; }
.detail-page .detail-highlights li:hover {
    color: #e0e5ea;
}

/* ── tech / topic tags ── */
.detail-page .detail-tags {
    margin: 10px 0 16px !important;
}
.detail-page .detail-tags .tech-tag {
    border: 1px solid #242c34;
    background: linear-gradient(135deg, #14181e, #101317);
    border-radius: 6px;
    padding: 6px 12px;
    font: 500 9px 'DM Mono', monospace;
    color: #a0a8b2;
    transition: all .25s cubic-bezier(.16,1,.3,1);
    animation: tag-pop .35s ease-out both;
}
.detail-page .detail-tags .tech-tag:nth-child(1) { animation-delay: .5s; }
.detail-page .detail-tags .tech-tag:nth-child(2) { animation-delay: .55s; }
.detail-page .detail-tags .tech-tag:nth-child(3) { animation-delay: .56s; }
.detail-page .detail-tags .tech-tag:nth-child(4) { animation-delay: .58s; }
.detail-page .detail-tags .tech-tag:nth-child(5) { animation-delay: .6s; }
.detail-page .detail-tags .tech-tag:nth-child(6) { animation-delay: .62s; }
.detail-page .detail-tags .tech-tag:nth-child(7) { animation-delay: .64s; }
.detail-page .detail-tags .tech-tag:hover {
    border-color: #c7f36b55;
    color: var(--lime);
    background: linear-gradient(135deg, #1a2218, #141a14);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #00000044;
}

/* ── responsive ── */
@media (max-width: 600px) {
    .detail-page { padding-top: 55px !important; }
    .detail-page .back-link {
        margin-bottom: 32px;
        padding: 6px 12px 6px 10px;
        font-size: 10px;
    }
    .detail-page h1 {
        font-size: clamp(36px, 10vw, 52px) !important;
        margin: 14px 0 16px !important;
    }
    .detail-page .detail-lead {
        font-size: 13.5px !important;
        margin-bottom: 24px;
    }
    .detail-page .detail-cover {
        border-radius: 10px;
        aspect-ratio: 16 / 10;
    }
    .detail-page .detail-actions {
        flex-wrap: wrap;
        gap: 10px;
        margin: 20px 0 36px;
    }
    .detail-page .detail-actions .button {
        padding: 11px 16px;
        font-size: 11px;
    }
    .detail-page .detail-panel {
        padding: 20px !important;
        border-radius: 10px !important;
    }
    .detail-page .detail-highlights ul {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ── reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
    .detail-page .back-link,
    .detail-page > .section-kicker,
    .detail-page h1,
    .detail-page .detail-lead,
    .detail-page .detail-cover,
    .detail-page .detail-actions,
    .detail-page .detail-panel,
    .detail-page .detail-highlights li,
    .detail-page .detail-tags .tech-tag {
        animation: none !important;
    }
    .detail-page .detail-cover:hover,
    .detail-page .detail-actions .button:hover {
        transform: none !important;
    }
}

/* ==========================================================================
   FEATURE 4: Architecture Diagrams, ERD Schemas & Code Deep-Dive
   ========================================================================== */
/* ==========================================================================
   Architecture Diagram – Deep-Dive Card  (restyled)
   ========================================================================== */

/* ── entrance keyframes ── */
@keyframes arch-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes arch-pulse-arrow {
  0%, 100% { opacity: .55; transform: translateY(0); }
  50%      { opacity: 1;  transform: translateY(3px); }
}
@keyframes arch-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes erd-slide-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── card shell ── */
.arch-deepdive-card {
    border: 1px solid #1e262e;
    background: linear-gradient(165deg, #0e1217 0%, #090b0e 100%);
    border-radius: 16px;
    padding: 0;
    display: grid;
    gap: 0;
    margin: 36px 0 24px;
    box-shadow: 0 20px 60px #00000055, 0 0 0 1px #ffffff06 inset;
    overflow: hidden;
    animation: arch-fade-up .5s ease-out both;
}

/* ── tab header ── */
.arch-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid #1a2028;
    background: linear-gradient(180deg, #12161c 0%, #0e1217 100%);
}
.arch-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.arch-tab-btn {
    background: #14181e;
    border: 1px solid #242c34;
    border-radius: 8px;
    padding: 8px 16px;
    color: #8893a0;
    font: 600 11px 'DM Mono', monospace;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(.16,1,.3,1);
    letter-spacing: .02em;
    position: relative;
    overflow: hidden;
}
.arch-tab-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #c7f36b10, transparent 60%);
    opacity: 0;
    transition: opacity .25s;
}
.arch-tab-btn:hover {
    border-color: #c7f36b55;
    color: #d8e0e6;
    transform: translateY(-1px);
}
.arch-tab-btn:hover::before { opacity: 1; }
.arch-tab-btn.active {
    background: linear-gradient(135deg, #152218, #111a14);
    border-color: #c7f36b;
    color: var(--lime);
    box-shadow: 0 0 20px #c7f36b15, 0 0 0 1px #c7f36b22 inset;
}
.arch-tab-btn.active::before { opacity: 1; }

.arch-tag {
    font: 700 9px 'DM Mono', monospace;
    letter-spacing: .12em;
    color: #556;
    text-transform: uppercase;
    background: #14181e;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid #1e262e;
}

/* ── tab body ── */
.arch-tab-body {
    padding: 24px;
    min-height: 280px;
}

/* ── diagram canvas ── */
.diagram-canvas { display: grid; gap: 0; }
.diagram-layers { display: grid; gap: 0; }

/* ── tier layers ── */
.diag-layer {
    background: linear-gradient(135deg, #12161d 0%, #0d1015 100%);
    border: 1px solid #1c2430;
    border-radius: 12px;
    padding: 20px;
    display: grid;
    gap: 14px;
    transition: all .3s cubic-bezier(.16,1,.3,1);
    position: relative;
    animation: arch-fade-up .45s ease-out both;
}
.diag-layer:nth-child(1) { animation-delay: .05s; }
.diag-layer:nth-child(3) { animation-delay: .15s; }
.diag-layer:nth-child(5) { animation-delay: .25s; }

.diag-layer:hover {
    border-color: #c7f36b33;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px #00000044;
}

/* per-tier accent glow on hover */
.layer-presentation:hover { box-shadow: 0 8px 32px #3b82f615; border-color: #3b82f644; }
.layer-services:hover     { box-shadow: 0 8px 32px #f59e0b15; border-color: #f59e0b44; }
.layer-data:hover         { box-shadow: 0 8px 32px #8b5cf615; border-color: #8b5cf644; }

/* ── layer pill labels ── */
.layer-pill {
    display: inline-flex;
    align-items: center;
    font: 700 9px 'DM Mono', monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 6px;
    width: fit-content;
    border: 1px solid;
}
.layer-presentation .layer-pill {
    color: #60a5fa;
    background: #3b82f612;
    border-color: #3b82f633;
}
.layer-services .layer-pill {
    color: #fbbf24;
    background: #f59e0b12;
    border-color: #f59e0b33;
}
.layer-data .layer-pill {
    color: #a78bfa;
    background: #8b5cf612;
    border-color: #8b5cf633;
}

/* ── boxes inside layers ── */
.layer-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.diag-box {
    background: #0a0d11;
    border: 1px solid #1a2028;
    border-radius: 8px;
    padding: 14px 16px;
    display: grid;
    gap: 4px;
    transition: all .25s cubic-bezier(.16,1,.3,1);
    position: relative;
    overflow: hidden;
}
.diag-box::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, #ffffff05, transparent);
    transition: left .5s;
}
.diag-box:hover::after { left: 150%; }
.diag-box:hover {
    border-color: #c7f36b33;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px #00000044;
}
.diag-box strong {
    font: 600 12.5px Manrope, sans-serif;
    color: #e8edf2;
    letter-spacing: -.01em;
}
.diag-box span {
    font-size: 10.5px;
    line-height: 1.55;
    color: #6e7a86;
}

/* ── flow arrows ── */
.diagram-arrow {
    text-align: center;
    font: 600 11px 'DM Mono', monospace;
    padding: 10px 0;
    animation: arch-pulse-arrow 2.5s ease-in-out infinite;
    position: relative;
}
.layer-presentation ~ .diagram-arrow { color: #60a5fa; }
.layer-services ~ .diagram-arrow     { color: #fbbf24; }
/* fallback */
.diagram-arrow { color: var(--lime); opacity: .8; }

/* ── ERD database tab ── */
.database-erd-view { animation: arch-fade-up .4s ease-out both; }

.erd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}
.erd-table {
    background: linear-gradient(135deg, #12161d, #0d1015);
    border: 1px solid #1c2430;
    border-radius: 10px;
    overflow: hidden;
    transition: all .3s cubic-bezier(.16,1,.3,1);
    animation: erd-slide-in .4s ease-out both;
}
.erd-table:nth-child(1) { animation-delay: .0s; }
.erd-table:nth-child(2) { animation-delay: .07s; }
.erd-table:nth-child(3) { animation-delay: .14s; }
.erd-table:nth-child(4) { animation-delay: .21s; }

.erd-table:hover {
    border-color: #8b5cf644;
    transform: translateY(-3px);
    box-shadow: 0 8px 28px #00000044, 0 0 16px #8b5cf610;
}

.erd-table-head {
    background: linear-gradient(135deg, #181e28, #141a22);
    padding: 10px 14px;
    border-bottom: 1px solid #242c36;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.erd-name {
    font: 700 12px 'DM Mono', monospace;
    color: #8cefe3;
    letter-spacing: .02em;
}
.erd-badge {
    font: 700 8px 'DM Mono', monospace;
    color: #556;
    background: #1a2028;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #242c34;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.erd-cols {
    list-style: none;
    padding: 10px 14px;
    margin: 0;
    display: grid;
    gap: 5px;
}
.erd-cols li {
    font: 10.5px/1.5 'DM Mono', monospace;
    color: #b0b8c2;
    padding: 3px 0;
    border-bottom: 1px dashed #ffffff08;
    transition: color .2s;
}
.erd-cols li:last-child { border-bottom: none; }
.erd-cols li:hover { color: #e8edf2; }

.erd-cols li b {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 6px;
    letter-spacing: .06em;
    vertical-align: 1px;
}
.col-pk b {
    background: #c7f36b18;
    color: var(--lime);
    border: 1px solid #c7f36b44;
}
.col-fk b {
    background: #a78bfa18;
    color: #c0b8ff;
    border: 1px solid #a78bfa44;
}

/* ── code snippet tab ── */
.code-snippet-view {
    background: #080a0d;
    border: 1px solid #1a2028;
    border-radius: 10px;
    overflow: hidden;
    animation: arch-fade-up .4s ease-out both;
}
.code-snippet-header {
    background: linear-gradient(135deg, #101418, #0c1014);
    padding: 10px 16px;
    border-bottom: 1px solid #1a2028;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.code-file-name {
    font: 600 10.5px 'DM Mono', monospace;
    color: #8cefe3;
    letter-spacing: .01em;
}
.code-snippet-view .button-xs {
    font-size: 10px;
    padding: 4px 10px;
}
.code-block {
    padding: 18px;
    margin: 0;
    max-height: 420px;
    overflow-y: auto;
    font: 11px/1.7 'DM Mono', monospace;
    color: #c5cdd4;
    white-space: pre-wrap;
    word-break: break-word;
    scrollbar-width: thin;
    scrollbar-color: #242c34 #080a0d;
    background: transparent;
}

/* ── responsive ── */
@media(max-width: 768px) {
    .arch-tab-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
    }
    .arch-tab-body { padding: 16px; }
    .layer-boxes { grid-template-columns: 1fr; }
    .erd-grid { grid-template-columns: 1fr; }
    .diag-layer { padding: 14px; }
    .arch-tab-btn { padding: 6px 12px; font-size: 10px; }
}

/* ==========================================================================
   AI Chat Assistant Widget
   ========================================================================== */
.chat-widget-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
}
.chat-launcher-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border-radius: 30px;
    background: linear-gradient(135deg, #131a20, #0c1014);
    border: 1.5px solid #c7f36b66;
    color: #edf2f5;
    font: 600 12px Manrope, sans-serif;
    cursor: pointer;
    box-shadow: 0 12px 36px #000000b0, 0 0 20px #c7f36b20;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.chat-launcher-btn:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: var(--lime);
    box-shadow: 0 16px 44px #000000cc, 0 0 28px #c7f36b35;
    background: linear-gradient(135deg, #17241e, #0e1416);
}
.launcher-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 8px #c7f36b;
    animation: beacon-pulse 2s infinite ease-in-out;
}
.launcher-icon {
    color: var(--lime);
    font-size: 13px;
}
.launcher-text {
    letter-spacing: -0.01em;
}
.launcher-badge {
    font: 700 8px 'DM Mono', monospace;
    color: var(--lime);
    background: #c7f36b15;
    border: 1px solid #c7f36b33;
    padding: 2px 6px;
    border-radius: 10px;
    letter-spacing: 0.05em;
}
.chat-window {
    width: min(420px, calc(100vw - 28px));
    height: min(610px, calc(100vh - 100px));
    background: #0d1217f2;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.8), 0 0 35px rgba(199, 243, 107, 0.07);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: chat-pop-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-window.is-widescreen {
    width: min(560px, calc(100vw - 32px));
    height: min(690px, calc(100vh - 80px));
}
@keyframes chat-pop-in {
    0% { transform: scale(0.94) translateY(16px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Chat Header */
.chat-header {
    padding: 13px 16px;
    background: rgba(17, 23, 30, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.chat-header-info {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    flex: 1;
}
.chat-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, #18281e 0%, #101915 100%);
    border: 1px solid rgba(199, 243, 107, 0.35);
    display: grid;
    place-items: center;
    color: var(--lime);
    font: 700 11px 'DM Mono', monospace;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(199, 243, 107, 0.12);
}
.avatar-letters {
    letter-spacing: 0.05em;
    font-size: 11px;
    font-weight: 700;
}
.online-indicator {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c7f36b;
    border: 1.5px solid #11171e;
    box-shadow: 0 0 6px #c7f36b;
}
.chat-header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.chat-header-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.chat-header-name {
    font: 700 13.5px Manrope, sans-serif;
    color: #f0f4f7;
    margin: 0;
    letter-spacing: -0.01em;
}
.chat-model-badge {
    display: inline-flex;
    align-items: center;
    gap: 3.5px;
    font: 700 7.5px 'DM Mono', monospace;
    padding: 1.5px 6px;
    border-radius: 999px;
    background: rgba(199, 243, 107, 0.1);
    color: #c7f36b;
    border: 1px solid rgba(199, 243, 107, 0.28);
    letter-spacing: 0.05em;
}
.model-badge-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c7f36b;
    box-shadow: 0 0 4px #c7f36b;
}
.chat-header-status {
    font: 500 10.5px Manrope, sans-serif;
    color: #8c98a4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.chat-action-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 7px;
    color: #929ea8;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
}
.chat-action-btn:hover, .chat-action-btn.is-active {
    color: #ffffff;
    border-color: rgba(199, 243, 107, 0.4);
    background: rgba(199, 243, 107, 0.12);
}
.chat-close-btn:hover {
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.4);
    background: rgba(255, 107, 107, 0.1);
}

/* Header Dropdown Menu */
.chat-menu-wrapper {
    position: relative;
}
.chat-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 195px;
    background: #11171f;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
    padding: 5px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.4);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: menu-pop-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes menu-pop-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #cbd5de;
    font: 500 11.5px Manrope, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: all 0.16s ease;
}
.chat-menu-item:hover {
    background: rgba(199, 243, 107, 0.12);
    color: #c7f36b;
}
.chat-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 3px 0;
}
.chat-menu-danger:hover {
    background: rgba(255, 94, 87, 0.12) !important;
    color: #ff6b6b !important;
}

/* Persona Switcher Bar */
.chat-persona-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    background: #0a0e12;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
    scrollbar-width: none;
}
.chat-persona-bar::-webkit-scrollbar {
    display: none;
}
.chat-persona-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #8c97a0;
    font: 600 10.5px 'DM Mono', monospace;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.persona-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #505c66;
    transition: all 0.2s;
}
.chat-persona-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #edf2f5;
    border-color: rgba(255, 255, 255, 0.15);
}
.chat-persona-btn.is-active {
    background: rgba(199, 243, 107, 0.12);
    border-color: rgba(199, 243, 107, 0.45);
    color: #c7f36b;
}
.chat-persona-btn.is-active .persona-dot {
    background: #c7f36b;
    box-shadow: 0 0 6px #c7f36b;
}

/* Messages Area */
.chat-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scrollbar-width: thin;
    scrollbar-color: #232b35 #0a0d10;
}
.chat-message-row {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.chat-message-row.msg-user {
    justify-content: flex-end;
}
.chat-message-row.msg-ai {
    justify-content: flex-start;
}
.msg-avatar {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #18281e 0%, #101915 100%);
    border: 1px solid rgba(199, 243, 107, 0.35);
    color: var(--lime);
    display: grid;
    place-items: center;
    font-size: 10px;
    margin-top: 2px;
    flex-shrink: 0;
}
.chat-bubble {
    max-width: 86%;
    padding: 12px 15px;
    border-radius: 14px;
    font: 400 12.5px/1.6 Manrope, sans-serif;
    position: relative;
    word-break: break-word;
}
.msg-user .chat-bubble {
    background: linear-gradient(135deg, #19271f, #111d16);
    border: 1px solid rgba(199, 243, 107, 0.35);
    color: #eaf8d6;
    border-top-right-radius: 3px;
}
.msg-ai .chat-bubble {
    background: #11171e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5de;
    border-top-left-radius: 3px;
}
.chat-bubble-text strong {
    color: #f0f4f7;
    font-weight: 600;
}
.chat-inline-code {
    background: rgba(255, 255, 255, 0.08);
    padding: 1.5px 6px;
    border-radius: 4px;
    font: 11px 'DM Mono', monospace;
    color: #c7f36b;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.msg-time {
    display: block;
    font: 9px 'DM Mono', monospace;
    color: #69747e;
    text-align: right;
}
.msg-actions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.msg-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 600 10.5px Manrope, sans-serif;
    color: #d8f59a;
    text-decoration: none;
    padding: 5px 11px;
    background: rgba(199, 243, 107, 0.08);
    border: 1px solid rgba(199, 243, 107, 0.25);
    border-radius: 7px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.msg-action-pill:hover {
    background: rgba(199, 243, 107, 0.18);
    color: #ffffff;
    border-color: rgba(199, 243, 107, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(199, 243, 107, 0.15);
}
.msg-action-pill .action-icon {
    font-size: 10px;
    color: var(--lime);
}
.typing-bubble {
    padding: 10px 14px;
}
.typing-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    animation: typing-bounce 1.3s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40% { transform: translateY(-5px); opacity: 1; }
}

/* Suggestions */
.chat-suggestions {
    padding: 8px 14px 10px;
    background: #090c10;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    gap: 6px;
}
.suggestions-label {
    font: 700 8px 'DM Mono', monospace;
    color: #63717d;
    letter-spacing: 0.1em;
}
.suggestions-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.suggestions-scroll::-webkit-scrollbar {
    display: none;
}
.suggestion-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    padding: 5px 11px;
    font: 500 10.5px Manrope, sans-serif;
    color: #c5d0d8;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}
.suggestion-chip:hover {
    border-color: rgba(199, 243, 107, 0.4);
    background: rgba(199, 243, 107, 0.1);
    color: var(--lime);
}

/* Input Bar */
.chat-input-bar {
    padding: 10px 14px;
    background: #0e1318;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    gap: 7px;
    align-items: center;
}
.chat-mic-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #8c98a3;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    padding: 0;
}
.chat-mic-btn:hover {
    border-color: var(--lime);
    color: var(--lime);
    background: rgba(199, 243, 107, 0.1);
}
.chat-mic-btn.is-listening {
    background: #ff5e57 !important;
    border-color: #ff5e57 !important;
    color: #ffffff !important;
    animation: mic-listening-pulse 1.2s infinite;
}
.chat-input-field {
    flex: 1;
    height: 34px;
    background: #080b0f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0 11px;
    font: 12px Manrope, sans-serif;
    color: #edf2f5;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.chat-input-field:focus {
    border-color: rgba(199, 243, 107, 0.5);
    box-shadow: 0 0 12px rgba(199, 243, 107, 0.1);
}
.chat-send-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--lime);
    border: none;
    color: #0a0d10;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    padding: 0;
}
.chat-send-btn:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 0 14px rgba(199, 243, 107, 0.5);
}
.chat-send-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@media(max-width: 600px) {
    .chat-widget-container {
        bottom: 16px;
        right: 16px;
    }
    .chat-window {
        width: calc(100vw - 24px);
        height: calc(100vh - 80px);
        border-radius: 14px;
    }
}

/* ==========================================================================
   FEATURE: Topbar Command Palette Trigger & Modal
   ========================================================================== */
.topbar-right-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.topbar-cmd-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    background: #13181f;
    border: 1px solid #232c35;
    border-radius: 6px;
    color: #8c96a0;
    font: 11px Manrope, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}
.topbar-cmd-btn:hover {
    border-color: #c7f36b66;
    color: #edf2f5;
    background: #172129;
    box-shadow: 0 0 14px #c7f36b12;
}
.topbar-cmd-btn .cmd-icon {
    font-size: 11px;
    color: var(--lime);
}
.topbar-cmd-btn kbd {
    font: 700 9px 'DM Mono', monospace;
    background: #090c0f;
    border: 1px solid #28333e;
    border-radius: 3px;
    padding: 2px 5px;
    color: var(--lime);
}
@media(max-width: 768px) {
    .topbar-cmd-btn .cmd-label {
        display: none;
    }
}

.cmd-palette-wrapper {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    place-items: center;
    padding: 16px;
}
.cmd-palette-wrapper.is-open {
    display: grid;
}
.cmd-backdrop {
    position: fixed;
    inset: 0;
    background: #000000b3;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: fade-in 0.2s;
}
.cmd-modal {
    position: relative;
    z-index: 1;
    width: min(580px, 100%);
    max-height: 80vh;
    background: #0e1216;
    border: 1px solid #26303b;
    border-radius: 14px;
    box-shadow: 0 24px 80px #000000, 0 0 40px #c7f36b12;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-slide 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-slide {
    0% { transform: scale(0.94) translateY(-14px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.cmd-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #1f2731;
    background: #12171d;
}
.cmd-search-icon {
    font-size: 14px;
    color: var(--lime);
}
.cmd-input {
    flex: 1;
    background: transparent;
    border: none;
    font: 13px Manrope, sans-serif;
    color: #edf2f6;
    outline: none;
}
.cmd-esc-hint {
    font: 700 9px 'DM Mono', monospace;
    background: #0a0d10;
    border: 1px solid #232d37;
    border-radius: 4px;
    padding: 3px 6px;
    color: #727e8a;
    cursor: pointer;
}
.cmd-results-list {
    flex: 1;
    overflow-y: auto;
    max-height: 380px;
    padding: 10px;
    display: grid;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: #232c35 #0e1216;
}
.cmd-empty {
    padding: 30px;
    text-align: center;
    font: 12px Manrope, sans-serif;
    color: #8c969f;
}
.cmd-group-title {
    display: block;
    font: 700 8.5px 'DM Mono', monospace;
    color: var(--lime);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    margin-bottom: 4px;
}
.cmd-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: all 0.18s;
}
.cmd-item:hover, .cmd-item.is-active {
    background: #16231c;
    border-color: #c7f36b44;
}
.cmd-item.is-active .cmd-item-title {
    color: var(--lime);
}
.cmd-item-icon {
    font-size: 14px;
    width: 20px;
    text-align: center;
    color: #929da7;
}
.cmd-item.is-active .cmd-item-icon {
    color: var(--lime);
}
.cmd-item-content {
    flex: 1;
    display: grid;
    gap: 2px;
    min-width: 0;
}
.cmd-item-title {
    font: 600 12.5px Manrope, sans-serif;
    color: #edf2f5;
}
.cmd-item-sub {
    font-size: 10px;
    color: #7b8691;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cmd-item-badge {
    font: 700 8.5px 'DM Mono', monospace;
    color: #8cefe3;
    background: #8cefe315;
    border: 1px solid #8cefe330;
    padding: 2px 6px;
    border-radius: 4px;
}
.cmd-item-enter {
    font: 11px 'DM Mono', monospace;
    color: #55606a;
}
.cmd-item.is-active .cmd-item-enter {
    color: var(--lime);
}
.cmd-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    background: #090c0f;
    border-top: 1px solid #1a222a;
    font: 10px 'DM Mono', monospace;
    color: #69747e;
}
.cmd-keys-hint {
    display: flex;
    gap: 12px;
}
.cmd-keys-hint kbd {
    background: #12171c;
    border: 1px solid #232b34;
    border-radius: 3px;
    padding: 1px 4px;
    color: #9aa4ae;
}

/* ==========================================================================
   FEATURE: Live C# & EF Core Query Optimization Showcase
   ========================================================================== */
.optimizer-card-wrap {
    margin-top: 36px;
    padding: 32px;
    background: linear-gradient(165deg, #11151a 0%, #0c0f13 100%);
    border: 1px solid #232c35;
    border-radius: 16px;
    display: grid;
    gap: 24px;
    box-shadow: 0 20px 60px #00000080, 0 0 30px #c7f36b06;
}
.optimizer-header-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.optimizer-badge {
    font: 700 8.5px 'DM Mono', monospace;
    color: #8cefe3;
    background: #8cefe315;
    border: 1px solid #8cefe333;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.08em;
}
.optimizer-title {
    font: 600 clamp(20px, 2.8vw, 26px) Manrope, sans-serif;
    color: #edf2f5;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.optimizer-subtitle {
    font-size: 12.5px;
    line-height: 1.65;
    color: #8f98a2;
    margin: 0;
    max-width: 66ch;
}
.optimizer-scenarios {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.scenario-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #13171e;
    border: 1px solid #222a33;
    border-radius: 8px;
    font: 600 12px Manrope, sans-serif;
    color: #8e98a2;
    cursor: pointer;
    transition: all 0.2s ease;
}
.scenario-tab:hover {
    border-color: #c7f36b44;
    color: #edf2f5;
    background: #171d24;
}
.scenario-tab.is-active {
    background: #16241d;
    border-color: #c7f36b;
    color: var(--lime);
    box-shadow: 0 0 16px #c7f36b12;
}
.optimizer-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(310px, 0.9fr);
    gap: 24px;
    align-items: start;
}
.code-compare-col {
    display: grid;
    gap: 14px;
}
.code-view-box {
    background: #07090c;
    border: 1px solid #1c232b;
    border-radius: 10px;
    overflow: hidden;
}
.naive-box {
    border-color: #3b2420;
}
.optimized-box {
    border-color: #1f3627;
}
.code-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: #0f1318;
    border-bottom: 1px solid #1c232b;
    flex-wrap: wrap;
    gap: 6px;
}
.status-pill {
    font: 700 9px 'DM Mono', monospace;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}
.status-warn {
    color: #f28f83;
    background: #2a1512;
    border: 1px solid #f28f8344;
}
.status-good {
    color: var(--lime);
    background: #16261b;
    border: 1px solid #c7f36b44;
}
.code-view-note {
    font: 10px 'DM Mono', monospace;
    color: #7b858e;
}
.code-snippet {
    padding: 14px;
    margin: 0;
    font: 10.5px/1.65 'DM Mono', monospace;
    color: #cbd5de;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 220px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #232b35 #07090c;
}
.metrics-card {
    background: #090c0f;
    border: 1px solid #232b34;
    border-radius: 12px;
    padding: 20px;
    display: grid;
    gap: 16px;
}
.metrics-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.metrics-kicker {
    font: 700 9px 'DM Mono', monospace;
    color: var(--lime);
    letter-spacing: 0.1em;
}
.benchmark-chip {
    font: 9px 'DM Mono', monospace;
    color: #8cefe3;
    background: #8cefe315;
    border: 1px solid #8cefe330;
    padding: 2px 6px;
    border-radius: 4px;
}
.metrics-gauges {
    display: grid;
    gap: 14px;
}
.gauge-item {
    display: grid;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #161c22;
}
.gauge-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.gauge-name {
    font: 600 12px Manrope, sans-serif;
    color: #edf2f5;
}
.gauge-delta {
    font: 700 9.5px 'DM Mono', monospace;
    color: var(--lime);
    background: #c7f36b15;
    border: 1px solid #c7f36b33;
    padding: 2px 7px;
    border-radius: 12px;
}
.gauge-comparison {
    display: grid;
    gap: 6px;
}
.gauge-bar-row {
    display: grid;
    grid-template-columns: 55px 1fr 65px;
    align-items: center;
    gap: 10px;
    font: 10px 'DM Mono', monospace;
}
.bar-tag {
    color: #6d7882;
}
.gauge-track {
    height: 6px;
    background: #131920;
    border-radius: 3px;
    overflow: hidden;
}
.fill-before {
    background: #e06c75;
    height: 100%;
}
.fill-after {
    background: var(--lime);
    height: 100%;
    box-shadow: 0 0 8px #c7f36b;
}
.bar-val {
    color: #8c97a0;
    text-align: right;
}
.val-green {
    color: var(--lime);
}
.roundtrips-readout {
    display: flex;
    align-items: center;
    gap: 12px;
}
.roundtrip-box {
    flex: 1;
    padding: 8px;
    background: #101419;
    border: 1px solid #1e2630;
    border-radius: 6px;
    text-align: center;
    display: grid;
    gap: 2px;
}
.roundtrip-box small {
    font: 8.5px 'DM Mono', monospace;
    color: #6b7782;
}
.roundtrip-box strong {
    font: 600 11.5px Manrope, sans-serif;
    color: #edf2f5;
}
.roundtrip-box.highlight {
    border-color: #c7f36b55;
    background: #14211a;
}
.roundtrip-box.highlight strong {
    color: var(--lime);
}
.roundtrip-arrow {
    color: var(--lime);
    font-size: 12px;
}
.metrics-takeaway {
    background: #11171d;
    border: 1px solid #1d252f;
    border-radius: 8px;
    padding: 12px 14px;
    display: grid;
    gap: 4px;
}
.takeaway-title {
    font: 700 8.5px 'DM Mono', monospace;
    color: #727e8a;
    letter-spacing: 0.08em;
}
.takeaway-text {
    font-size: 11px;
    line-height: 1.55;
    color: #cbd5de;
    margin: 0;
}
@media(max-width: 900px) {
    .optimizer-main-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   FEATURE: In-Browser Resume Quick-Viewer Modal
   ========================================================================== */
.resume-modal-wrapper {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: none;
    place-items: center;
    padding: 16px;
}
.resume-modal-wrapper.is-open {
    display: grid;
}
.resume-backdrop {
    position: fixed;
    inset: 0;
    background: #000000b3;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: fade-in 0.2s;
}
.resume-modal {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: 85vh;
    background: #0e1216;
    border: 1px solid #27313c;
    border-radius: 16px;
    box-shadow: 0 24px 80px #000000, 0 0 40px #c7f36b12;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-slide 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.resume-modal-header {
    padding: 18px 24px;
    background: #12171e;
    border-bottom: 1px solid #1f2730;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.resume-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.resume-brand-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #17241e;
    border: 1px solid #c7f36b44;
    color: var(--lime);
    display: grid;
    place-items: center;
    font: 700 12px 'DM Mono', monospace;
}
.resume-name {
    font: 700 16px Manrope, sans-serif;
    color: #edf2f5;
    margin: 0;
}
.resume-role {
    font: 11px 'DM Mono', monospace;
    color: #8c97a0;
}
.resume-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.resume-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid #232c36;
    color: #8c969f;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all 0.2s;
}
.resume-close-btn:hover {
    color: #f28f83;
    border-color: #f28f8344;
}
.resume-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 20px;
    background: #0a0d10;
    border-bottom: 1px solid #1c232b;
    overflow-x: auto;
}
.resume-tab {
    padding: 7px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    font: 600 11px Manrope, sans-serif;
    color: #8e98a2;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.resume-tab:hover {
    color: #edf2f5;
}
.resume-tab.is-active {
    background: #16241d;
    border-color: #c7f36b55;
    color: var(--lime);
}
.resume-content-view {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    max-height: 480px;
    scrollbar-width: thin;
    scrollbar-color: #242c35 #0e1216;
    display: grid;
    gap: 20px;
}
.resume-section {
    display: grid;
    gap: 14px;
}
.section-tag {
    font: 700 9px 'DM Mono', monospace;
    color: var(--lime);
    letter-spacing: 0.1em;
}
.resume-text {
    font-size: 12.5px;
    line-height: 1.7;
    color: #b5c1cb;
    margin: 0;
}
.resume-skills-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.skill-bucket {
    background: #11151a;
    border: 1px solid #1e2630;
    border-radius: 8px;
    padding: 12px 14px;
    display: grid;
    gap: 4px;
}
.skill-bucket strong {
    font: 600 12px Manrope, sans-serif;
    color: #edf2f5;
}
.skill-bucket span {
    font-size: 11px;
    line-height: 1.5;
    color: #8c97a1;
}
.resume-timeline {
    display: grid;
    gap: 16px;
}
.timeline-entry {
    background: #11151a;
    border: 1px solid #1e2630;
    border-radius: 8px;
    padding: 14px 16px;
    display: grid;
    gap: 6px;
}
.entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.entry-header strong {
    font: 600 13px Manrope, sans-serif;
    color: #edf2f5;
}
.entry-date {
    font: 9.5px 'DM Mono', monospace;
    color: #7b8691;
}
.entry-desc {
    font-size: 11.5px;
    line-height: 1.6;
    color: #9aa5b0;
    margin: 0;
}
.education-card {
    background: #11151a;
    border: 1px solid #1e2630;
    border-radius: 8px;
    padding: 18px;
    display: grid;
    gap: 8px;
}
.edu-degree {
    font: 700 14px Manrope, sans-serif;
    color: #edf2f5;
}
.edu-school {
    font: 11px 'DM Mono', monospace;
    color: #8a96a0;
}
.edu-highlight {
    margin-top: 8px;
    padding: 10px 14px;
    background: #16241d;
    border: 1px solid #c7f36b44;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #cde4a9;
}
.grade-badge {
    font: 700 9px 'DM Mono', monospace;
    color: var(--lime);
    background: #c7f36b20;
    border: 1px solid #c7f36b66;
    padding: 2px 7px;
    border-radius: 4px;
}
.resume-projects-list {
    display: grid;
    gap: 12px;
}
.resume-proj-card {
    background: #11151a;
    border: 1px solid #1e2630;
    border-radius: 8px;
    padding: 14px 16px;
    display: grid;
    gap: 6px;
}
.proj-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.proj-card-top strong {
    font: 600 13px Manrope, sans-serif;
    color: #edf2f5;
}
.proj-badge {
    font: 9px 'DM Mono', monospace;
    color: #8cefe3;
    background: #8cefe315;
    border: 1px solid #8cefe330;
    padding: 2px 6px;
    border-radius: 4px;
}
.proj-summary {
    font-size: 11.5px;
    line-height: 1.6;
    color: #9aa5b0;
    margin: 0;
}
.resume-modal-footer {
    padding: 14px 24px;
    background: #090c0f;
    border-top: 1px solid #1a222a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-contacts-strip {
    font: 10px 'DM Mono', monospace;
    color: #6e7984;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
@media(max-width: 600px) {
    .resume-skills-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   FEATURE: Mobile Responsive Navigation Bar & Drawer
   ========================================================================== */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.desktop-nav {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.8vw, 24px);
}
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #13181f;
    border: 1px solid #242c36;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
}
.mobile-menu-toggle:hover {
    border-color: #c7f36b66;
    background: #162029;
}
.hamburger-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: #edf2f5;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}
.mobile-menu-toggle.is-active .hamburger-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.mobile-menu-toggle.is-active .hamburger-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.mobile-menu-toggle.is-active .hamburger-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}
.mobile-nav-drawer.is-open {
    display: block;
}
.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: #000000cc;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: fade-in 0.24s ease;
}
.mobile-nav-sheet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 86vw);
    background: linear-gradient(180deg, #10151a 0%, #090c0f 100%);
    border-left: 1px solid #232c35;
    box-shadow: -14px 0 50px #000000b3;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 24px 20px;
    z-index: 2;
    animation: sheet-slide-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sheet-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 18px;
    border-bottom: 1px solid #1c232b;
    margin-bottom: 16px;
}
.mobile-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 700 14px Manrope, sans-serif;
    color: #edf2f5;
}
.mobile-nav-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #141920;
    border: 1px solid #242c36;
    color: #8e98a2;
    display: grid;
    place-items: center;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.mobile-nav-close:hover {
    color: #f28f83;
    border-color: #f28f8355;
    background: #1f1a1d;
}
.mobile-nav-links {
    display: grid;
    gap: 4px;
    flex: 1;
}
.mobile-nav-links a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.2s ease;
}
.mobile-nav-links a .nav-num {
    font: 700 9.5px 'DM Mono', monospace;
    color: var(--lime);
    opacity: 0.85;
}
.mobile-nav-links a .nav-text {
    font: 600 13px Manrope, sans-serif;
    color: #cbd5de;
    flex: 1;
}
.mobile-nav-links a .nav-arrow {
    font-size: 11px;
    color: #5a6570;
    transition: transform 0.2s, color 0.2s;
}
.mobile-nav-links a:hover {
    background: #15221b;
    border-color: #c7f36b44;
}
.mobile-nav-links a:hover .nav-text {
    color: #ffffff;
}
.mobile-nav-links a:hover .nav-arrow {
    transform: translate(2px, -2px);
    color: var(--lime);
}
.mobile-nav-cta {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #1c232b;
    display: grid;
    gap: 14px;
}
.mobile-booking-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 12px;
    font-size: 12px;
}
.mobile-socials-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    font: 11px 'DM Mono', monospace;
}
.mobile-socials-row a {
    color: #8c969f;
    text-decoration: none;
    transition: color 0.2s;
}
.mobile-socials-row a:hover {
    color: var(--lime);
}

@media(max-width: 900px) {
    .desktop-nav {
        display: none !important;
    }
    .mobile-menu-toggle {
        display: flex;
    }
    .topbar .nav-cta-booking {
        display: none;
    }
    .topbar {
        height: 66px !important;
        padding: 0 5% !important;
        margin: 0 !important;
    }
}
@media(max-width: 600px) {
    .topbar {
        height: 62px !important;
        padding: 0 4% !important;
        margin: 0 !important;
    }
    .site-shell {
        padding-top: 62px !important;
    }
    .topbar .brand {
        font-size: 13px;
    }
    .topbar-cmd-btn {
        padding: 6px 9px;
    }
}

/* Responsive Width & Full-Screen Balance - Desktop Only */
@media (min-width: 901px) {
    .site-shell {
        max-width: min(94vw, 1560px) !important;
        padding-top: 72px !important;
        padding-left: clamp(20px, 4vw, 60px) !important;
        padding-right: clamp(20px, 4vw, 60px) !important;
        margin: 0 auto !important;
    }

    .section-wrap {
        max-width: 1320px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .topbar {
        margin: 0 !important;
        padding: 0 clamp(20px, 4.5vw, 64px) !important;
    }

    .hero {
        grid-template-columns: 1.15fr 0.85fr !important;
        gap: 40px !important;
    }

    .contact-layout {
        grid-template-columns: 1.12fr 0.88fr !important;
        gap: 48px !important;
    }
}

/* Mobile & Tablet Layout Protection */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

@media (max-width: 900px) {
    .site-shell {
        max-width: 100% !important;
        padding: 66px 5% 0 !important;
        margin: 0 auto !important;
    }
    .hero {
        grid-template-columns: 1fr !important;
        padding-top: 45px !important;
        min-height: auto !important;
        gap: 28px !important;
    }
    .hero-copy {
        max-width: 100% !important;
        padding-bottom: 10px !important;
        z-index: 2 !important;
    }
    .hero-visual {
        position: relative !important;
        width: 100% !important;
        max-width: 340px !important;
        margin: 10px auto 35px !important;
        height: 310px !important;
        overflow: visible !important;
    }
    .hero .eyebrow {
        flex-wrap: wrap !important;
        font-size: 8px !important;
        padding: 5px 10px !important;
        gap: 6px !important;
    }
    .hero h1 {
        font-size: clamp(38px, 11vw, 54px) !important;
        line-height: 1.05 !important;
        margin: 18px 0 16px !important;
    }
    .contact-layout {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .telemetry-wrap {
        margin: 10px auto 35px !important;
    }
}

@media (max-width: 600px) {
    .hero-visual {
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        margin: 15px auto 25px !important;
        overflow: visible !important;
    }
    .orbit-one {
        width: 260px !important;
        height: 180px !important;
    }
    .orbit-two {
        width: 280px !important;
        height: 210px !important;
    }
    .core-card {
        width: min(100%, 330px) !important;
        height: auto !important;
        min-height: auto !important;
        transform: none !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }
    .tag-api, .tag-cloud, .tag-dotnet {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .roi-stats-grid {
        grid-template-columns: 1fr !important;
    }
    .roi-field-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    .probe-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .probe-action-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .arch-layer-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .arch-rule-badge {
        width: 100% !important;
    }
    .github-repos-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Ensure new interactive components are always fully visible */
.arch-explorer-card, .telemetry-card, .recipe-vault-card, .roi-calculator-card {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* ========================================================
   1. CLEAN ARCHITECTURE & CQRS EXPLORER
   ======================================================== */
.arch-explorer-card {
    margin: 40px 0 20px;
    background: linear-gradient(145deg, #111519, #0d1013);
    border: 1px solid #232a31;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45);
    position: relative;
    overflow: hidden;
}
.arch-explorer-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(600px circle at 85% 15%, rgba(140, 239, 227, 0.04), transparent 70%);
}
.arch-header {
    margin-bottom: 24px;
}
.arch-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(199, 243, 107, 0.25);
    background: rgba(199, 243, 107, 0.05);
    font: 9px 'DM Mono', monospace;
    color: #c7f36b;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.arch-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c7f36b;
    box-shadow: 0 0 8px #c7f36b;
}
.arch-title {
    font: 600 clamp(24px, 3.5vw, 32px)/1.2 'Manrope', sans-serif;
    letter-spacing: -0.05em;
    margin: 0 0 8px;
}
.arch-title em {
    font-family: Georgia, serif;
    font-style: italic;
    color: #c7f36b;
}
.arch-subtitle {
    font-size: 13px;
    line-height: 1.7;
    color: #8f969e;
    max-width: 680px;
    margin: 0;
}
.arch-layer-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 22px 0 28px;
    border-bottom: 1px solid #1c242c;
    padding-bottom: 18px;
}
.arch-layer-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #151a1f;
    border: 1px solid #242c34;
    border-radius: 8px;
    color: #9aa1a9;
    cursor: pointer;
    font: 12px 'Manrope', sans-serif;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
}
.arch-layer-tab:hover {
    background: #1a2128;
    color: #e2e8f0;
    border-color: #34404c;
}
.arch-layer-tab.is-active {
    background: #182028;
    border-color: #c7f36b66;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.arch-layer-tab.is-simulating {
    animation: tab-pulse 0.8s ease-in-out infinite alternate;
    border-color: #8cefe3;
    box-shadow: 0 0 16px rgba(140, 239, 227, 0.35);
}
@keyframes tab-pulse {
    from { transform: translateY(0); }
    to { transform: translateY(-3px); }
}
.layer-pill {
    font: 10px 'DM Mono', monospace;
    padding: 2px 6px;
    border: 1px solid;
    border-radius: 4px;
}
.layer-name {
    font-weight: 600;
    flex: 1;
    text-align: left;
}
.layer-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0.6;
}
.arch-layer-tab.is-active .layer-indicator {
    opacity: 1;
    box-shadow: 0 0 8px currentColor;
}
.arch-body {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
}
.arch-layer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.arch-layer-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.arch-tier-pill {
    font: 9px 'DM Mono', monospace;
    letter-spacing: 0.08em;
    padding: 4px 8px;
    border: 1px solid;
    border-radius: 4px;
}
.arch-layer-header h4 {
    font: 600 20px 'Manrope', sans-serif;
    margin: 0;
    letter-spacing: -0.03em;
    color: #f1f4f8;
}
.arch-rule-badge {
    font: 10px 'DM Mono', monospace;
    color: #929ba4;
    background: #151a1f;
    border: 1px solid #242c34;
    padding: 6px 10px;
    border-radius: 5px;
}
.arch-rule-badge span {
    color: var(--lime);
    margin-right: 4px;
    font-weight: 600;
}
.arch-layer-desc {
    font-size: 13px;
    line-height: 1.75;
    color: #9fa7b1;
    margin-bottom: 20px;
}
.arch-patterns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
}
.arch-block {
    background: #0f1317;
    border: 1px solid #1f252c;
    border-radius: 8px;
    padding: 16px;
}
.arch-block-label {
    display: block;
    font: 9px 'DM Mono', monospace;
    letter-spacing: 0.08em;
    color: #7b848d;
    margin-bottom: 12px;
}
.arch-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 9px;
    font-size: 11px;
    line-height: 1.6;
    color: #b1b9c2;
}
.arch-list li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.arch-list li span {
    color: var(--lime);
}
.arch-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.arch-chip {
    font: 10px 'DM Mono', monospace;
    padding: 5px 8px;
    border-radius: 4px;
    background: #171d24;
    border: 1px solid #2a3440;
    color: #c5cdd6;
}
.arch-packages {
    margin-top: 14px;
}
.arch-packages-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.arch-pkg-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #151a20;
    border: 1px solid #26313d;
    padding: 6px 10px;
    border-radius: 5px;
    font: 10px 'DM Mono', monospace;
    color: #8cefe3;
}
.pkg-icon {
    font-style: normal;
    font-size: 11px;
}

/* Solution Tree Chrome */
.arch-tree-card {
    background: #0b0e11;
    border: 1px solid #1f262d;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.tree-chrome {
    height: 30px;
    background: #14191f;
    border-bottom: 1px solid #202730;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
}
.tree-chrome span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #505963;
}
.tree-chrome i {
    font: 8px 'DM Mono', monospace;
    color: #808b95;
    margin-left: 8px;
    font-style: normal;
}
.tree-content {
    padding: 14px 16px;
    font: 11px/1.8 'DM Mono', monospace;
    max-height: 280px;
    overflow-y: auto;
}
.tree-root {
    color: #e2e8f0;
    font-weight: 500;
    margin-bottom: 6px;
}
.tree-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #929ba5;
    white-space: nowrap;
}
.tree-name.tree-highlight {
    color: var(--lime);
    font-weight: 500;
}
.tree-comment {
    color: #5d6772;
    font-size: 9px;
    margin-left: 6px;
}
.sim-runner {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}
.sim-btn {
    width: 100%;
    justify-content: center;
    padding: 11px;
    font-size: 11px;
    gap: 8px;
}
.sim-btn.is-running {
    border-color: #8cefe3;
    color: #8cefe3;
}
.sim-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8cefe3;
    animation: status-beacon-ripple 1.5s infinite;
}
.sim-status-text {
    font: 9px 'DM Mono', monospace;
    color: #7b848d;
    text-align: center;
}
.sim-status-text b {
    color: #8cefe3;
}

/* ========================================================
   2. LIVE BACKEND TELEMETRY DASHBOARD
   ======================================================== */
.telemetry-wrap {
    margin: -10px auto 45px;
}
.telemetry-card {
    background: linear-gradient(160deg, #101418, #0c0f12);
    border: 1px solid #232a31;
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    position: relative;
    overflow: hidden;
}
.telemetry-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c7f36b66 30%, #8cefe366 70%, transparent);
}
.telemetry-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}
.telemetry-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 9px 'DM Mono', monospace;
    letter-spacing: 0.1em;
    color: #c7f36b;
}
.telemetry-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c7f36b;
    box-shadow: 0 0 10px #c7f36b;
    animation: status-beacon-core 2s infinite;
}
.telemetry-runtime {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.runtime-tag {
    font: 8px 'DM Mono', monospace;
    color: #858e98;
    background: #161c22;
    border: 1px solid #28323c;
    padding: 4px 8px;
    border-radius: 4px;
}
.telemetry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.telemetry-metric-box {
    background: #0d1013;
    border: 1px solid #1e242a;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 110px;
    transition: border-color 0.25s;
}
.telemetry-metric-box:hover {
    border-color: #313c47;
}
.metric-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 8px 'DM Mono', monospace;
    color: #7b848e;
    margin-bottom: 8px;
}
.metric-code {
    color: #929ba5;
}
.metric-val-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 10px;
}
.health-status-badge {
    font: 10px 'DM Mono', monospace;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.health-status-badge.is-healthy {
    color: #c7f36b;
}
.health-status-badge.is-benchmarking {
    color: #f6c589;
}
.status-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}
.metric-latency {
    font: 9px 'DM Mono', monospace;
    color: #7d8792;
}
.metric-number {
    font: 600 20px 'Manrope', sans-serif;
    letter-spacing: -0.04em;
}
.metric-unit {
    font: 9px 'DM Mono', monospace;
    color: #747d86;
}
.metric-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 8px 'DM Mono', monospace;
    color: #6a737c;
    border-top: 1px solid #161a1f;
    padding-top: 8px;
}
.metric-sparkle {
    color: var(--lime);
}
.metric-progress-bar {
    width: 100%;
    height: 4px;
    background: #181f26;
    border-radius: 999px;
    overflow: hidden;
}
.metric-progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #c7f36b, #8cefe3);
    border-radius: 999px;
    transition: width 0.5s ease;
}

/* Probe Runners */
.telemetry-probe-section {
    background: #090c0f;
    border: 1px solid #1b2127;
    border-radius: 8px;
    padding: 16px 20px;
}
.probe-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.probe-header h4 {
    font: 600 13px 'Manrope', sans-serif;
    margin: 0 0 3px;
    color: #e2e8f0;
}
.probe-header p {
    font-size: 11px;
    color: #79838d;
    margin: 0;
}
.probe-action-btn {
    font-size: 10px;
    padding: 8px 14px;
    gap: 6px;
    white-space: nowrap;
}
.probe-spinner {
    width: 8px;
    height: 8px;
    border: 1.5px solid rgba(199, 243, 107, 0.2);
    border-top-color: #c7f36b;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.probes-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.probe-item {
    background: #11151a;
    border: 1px solid #202730;
    border-radius: 6px;
    padding: 10px 12px;
    transition: all 0.25s ease;
}
.probe-item.is-checking {
    border-color: #f6c589;
    background: #171b1f;
}
.probe-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.probe-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.probe-name {
    font: 600 10px 'Manrope', sans-serif;
    color: #d1d7de;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.probe-type {
    display: none;
}
.probe-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 9px 'DM Mono', monospace;
}
.probe-latency {
    color: #6a747e;
}

/* ========================================================
   3. BATTLE-TESTED C# RECIPE VAULT
   ======================================================== */
.recipe-vault-card {
    margin: 50px 0 20px;
    background: linear-gradient(150deg, #111518, #0c0e11);
    border: 1px solid #232a32;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45);
}
.recipe-header {
    margin-bottom: 22px;
}
.recipe-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(140, 239, 227, 0.25);
    background: rgba(140, 239, 227, 0.05);
    font: 9px 'DM Mono', monospace;
    color: #8cefe3;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.recipe-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8cefe3;
    box-shadow: 0 0 8px #8cefe3;
}
.recipe-title-group h3 {
    font: 600 clamp(22px, 3.2vw, 30px)/1.2 'Manrope', sans-serif;
    letter-spacing: -0.05em;
    margin: 0 0 8px;
}
.recipe-title-group h3 em {
    font-family: Georgia, serif;
    font-style: italic;
    color: #c7f36b;
}
.recipe-title-group p {
    font-size: 13px;
    color: #8e959e;
    margin: 0;
}
.recipe-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}
.recipe-tab-btn {
    background: #14191e;
    border: 1px solid #242c35;
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 4px;
    cursor: pointer;
    transition: all 0.22s ease;
}
.recipe-tab-btn:hover {
    background: #192026;
    border-color: #35414e;
}
.recipe-tab-btn.is-active {
    background: #162028;
    border-color: #c7f36b66;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.tab-category {
    font: 8px 'DM Mono', monospace;
    letter-spacing: 0.08em;
    color: #7b848e;
}
.recipe-tab-btn.is-active .tab-category {
    color: var(--lime);
}
.tab-title {
    font: 600 12px 'Manrope', sans-serif;
    color: #dbe2ea;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recipe-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    font: 10px 'DM Mono', monospace;
    color: #858e98;
}
.recipe-target b, .recipe-pattern b {
    color: #c7f36b;
    margin-right: 14px;
}
.recipe-copy-btn {
    font-size: 10px;
    padding: 7px 12px;
}
.recipe-copy-btn.is-copied {
    border-color: #c7f36b;
    color: #c7f36b;
    background: rgba(199, 243, 107, 0.08);
}
.recipe-code-frame {
    background: #090c0e;
    border: 1px solid #222930;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.recipe-code-chrome {
    height: 32px;
    background: #14191e;
    border-bottom: 1px solid #222830;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 5px;
}
.c-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.c-dot.red { background: #f28f83; }
.c-dot.yellow { background: #e9c56f; }
.c-dot.green { background: #8fd19e; }
.c-file {
    font: 8px 'DM Mono', monospace;
    color: #8e97a1;
    margin-left: 8px;
    font-style: normal;
}
.c-lang {
    margin-left: auto;
    font: 8px 'DM Mono', monospace;
    color: var(--lime);
    border: 1px solid rgba(199, 243, 107, 0.3);
    padding: 2px 5px;
    border-radius: 3px;
}
.recipe-code-pre {
    margin: 0;
    padding: 18px 20px;
    font: 11px/1.8 'DM Mono', monospace;
    color: #cad59f;
    overflow-x: auto;
    white-space: pre;
    max-height: 360px;
}
.recipe-explainer {
    display: flex;
    gap: 12px;
    background: #13181d;
    border: 1px solid #222a33;
    border-radius: 8px;
    padding: 14px 16px;
}
.explainer-icon {
    font-size: 16px;
    line-height: 1;
}
.explainer-text strong {
    display: block;
    font: 600 11px 'Manrope', sans-serif;
    color: #e2e8f0;
    margin-bottom: 3px;
}
.explainer-text p {
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
    color: #8c959f;
}

/* ========================================================
   4. CLOUD & MIGRATION ROI CALCULATOR
   ======================================================== */
.roi-calculator-card {
    margin: 30px 0 35px;
    background: linear-gradient(155deg, #111519, #0d1013);
    border: 1px solid #242c35;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.45);
}
.roi-header {
    margin-bottom: 24px;
}
.roi-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(168, 156, 249, 0.3);
    background: rgba(168, 156, 249, 0.05);
    font: 9px 'DM Mono', monospace;
    color: #a89cf9;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}
.roi-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #a89cf9;
    box-shadow: 0 0 8px #a89cf9;
}
.roi-title-wrap h3 {
    font: 600 clamp(22px, 3.2vw, 30px)/1.2 'Manrope', sans-serif;
    letter-spacing: -0.05em;
    margin: 0 0 8px;
}
.roi-title-wrap h3 em {
    font-family: Georgia, serif;
    font-style: italic;
    color: #c7f36b;
}
.roi-title-wrap p {
    font-size: 13px;
    color: #8f969f;
    margin: 0;
}
.roi-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 30px;
}
.roi-controls {
    display: grid;
    gap: 20px;
}
.roi-field {
    display: grid;
    gap: 8px;
}
.roi-field label {
    font: 9px 'DM Mono', monospace;
    letter-spacing: 0.08em;
    color: #828c96;
}
.roi-field-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.roi-field-val {
    font: 600 14px 'Manrope', sans-serif;
    color: var(--lime);
}
.roi-radio-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.roi-radio-pill {
    background: #14191e;
    border: 1px solid #232b34;
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font: 11px 'Manrope', sans-serif;
    color: #9ba3ac;
    transition: all 0.2s ease;
    text-align: left;
}
.roi-radio-pill:hover {
    border-color: #354250;
    color: #e2e8f0;
}
.roi-radio-pill.is-selected {
    background: #19222a;
    border-color: #c7f36b77;
    color: #ffffff;
}
.pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid #6b7580;
    background: transparent;
}
.roi-radio-pill.is-selected .pill-dot {
    background: var(--lime);
    border-color: var(--lime);
    box-shadow: 0 0 6px var(--lime);
}
.roi-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #1a2027;
    border-radius: 999px;
    outline: none;
}
.roi-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--lime);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(199, 243, 107, 0.7);
}
.slider-marks {
    display: flex;
    justify-content: space-between;
    font: 8px 'DM Mono', monospace;
    color: #636d77;
    padding: 0 2px;
}
.roi-results-panel {
    background: #0d1014;
    border: 1px solid #1f262e;
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.roi-hero-metric {
    border-bottom: 1px solid #1b2127;
    padding-bottom: 18px;
    margin-bottom: 18px;
}
.metric-caption {
    display: block;
    font: 9px 'DM Mono', monospace;
    letter-spacing: 0.1em;
    color: #858f99;
    margin-bottom: 6px;
}
.metric-large-text {
    display: block;
    font: 700 clamp(32px, 4.5vw, 44px)/1 'Manrope', sans-serif;
    letter-spacing: -0.06em;
    margin-bottom: 6px;
}
.metric-sublabel {
    font-size: 11px;
    color: #8b939c;
}
.roi-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
.roi-stat-box {
    background: #12161b;
    border: 1px solid #1f2730;
    border-radius: 6px;
    padding: 12px;
}
.stat-title {
    display: block;
    font: 8px 'DM Mono', monospace;
    color: #7b848e;
    margin-bottom: 6px;
}
.stat-compare {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 600 13px 'Manrope', sans-serif;
    margin-bottom: 4px;
}
.stat-old {
    color: #707983;
    text-decoration: line-through;
}
.stat-arrow {
    color: #555f69;
}
.stat-gain {
    font: 10px 'DM Mono', monospace;
    display: block;
}
.roi-cta-wrap {
    display: grid;
    gap: 8px;
}
.roi-action-btn {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 11px;
}
.roi-guarantee-note {
    font: 8px 'DM Mono', monospace;
    color: #646d77;
    text-align: center;
}

/* Responsive adjustments */
@media(max-width: 900px) {
    .arch-layer-nav {
        grid-template-columns: repeat(2, 1fr);
    }
    .arch-body {
        grid-template-columns: 1fr;
    }
    .telemetry-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .probes-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .recipe-tabs {
        grid-template-columns: repeat(2, 1fr);
    }
    .roi-layout {
        grid-template-columns: 1fr;
    }
    .roi-radio-group {
        grid-template-columns: 1fr;
    }
}
@media(max-width: 600px) {
    .arch-layer-nav {
        grid-template-columns: 1fr;
    }
    .arch-patterns-grid {
        grid-template-columns: 1fr;
    }
    .telemetry-grid {
        grid-template-columns: 1fr;
    }
    .probes-strip {
        grid-template-columns: 1fr;
    }
    .recipe-tabs {
        grid-template-columns: 1fr;
    }
    .arch-explorer-card, .recipe-vault-card, .roi-calculator-card, .telemetry-card {
        padding: 20px 16px;
    }
}

/* ==========================================================================
   Testimonials & Endorsements Showcase
   ========================================================================== */
.testimonials-section {
    position: relative;
    padding-top: 80px;
    padding-bottom: 90px;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 36px;
}

.testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 28px;
    background: linear-gradient(155deg, #13181d 0%, #0d1114 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.35s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(199, 243, 107, 0.35);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.6), 0 0 28px rgba(199, 243, 107, 0.08);
}

.testimonial-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.testimonial-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(199, 243, 107, 0.09);
    border: 1px solid rgba(199, 243, 107, 0.22);
    color: #c7f36b;
    font: 10px/1 'DM Mono', monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.testimonial-badge .badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c7f36b;
    box-shadow: 0 0 8px #c7f36b;
    animation: contact-pulse 2.4s ease-in-out infinite;
}

.testimonial-date {
    color: #636e74;
    font: 10px 'DM Mono', monospace;
    letter-spacing: 0.06em;
}

.testimonial-project-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    font: 11px 'DM Mono', monospace;
    color: #9ba6ab;
    margin-bottom: 18px;
    max-width: 100%;
}

.testimonial-project-pill .pill-icon {
    font-size: 11px;
    opacity: 0.8;
}

.testimonial-project-pill .pill-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.testimonial-quote-wrap {
    position: relative;
    flex-grow: 1;
    margin-bottom: 18px;
}

.testimonial-quote-wrap .quote-mark {
    position: absolute;
    top: -14px;
    left: -6px;
    font-family: Georgia, serif;
    font-size: 42px;
    line-height: 1;
    color: rgba(199, 243, 107, 0.16);
    pointer-events: none;
    user-select: none;
}

.testimonial-quote {
    position: relative;
    margin: 0;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13.5px;
    line-height: 1.78;
    color: #cad3d8;
    font-weight: 400;
}

.testimonial-skills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.testimonial-skill-tag {
    font: 9.5px 'DM Mono', monospace;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(199, 243, 107, 0.05);
    border: 1px solid rgba(199, 243, 107, 0.16);
    color: #c1deb0;
    letter-spacing: 0.03em;
}

.testimonial-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
}

.testimonial-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1b232a, #11161b);
    border: 1.5px solid rgba(199, 243, 107, 0.35);
    color: #c7f36b;
    display: grid;
    place-items: center;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.testimonial-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.testimonial-author-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.testimonial-name {
    color: #edf2f5;
    font-size: 13.5px;
    font-weight: 600;
}

.testimonial-check {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #8bf29c;
    font: 9px/1 'DM Mono', monospace;
    letter-spacing: 0.04em;
    background: rgba(139, 242, 156, 0.09);
    border: 1px solid rgba(139, 242, 156, 0.25);
    border-radius: 10px;
    padding: 2px 7px;
}

.testimonial-role {
    font-size: 11.5px;
    color: #9ba6ab;
    line-height: 1.4;
}

.testimonial-company {
    font-size: 11px;
    color: #717d83;
    line-height: 1.4;
}

@media (max-width: 820px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .testimonial-card {
        padding: 22px 18px;
    }
    .testimonial-quote {
        font-size: 13px;
        line-height: 1.7;
    }
    .testimonial-project-pill .pill-text {
        white-space: normal;
        word-break: break-word;
    }
}

/* ==========================================================================
   Licenses & Certifications Showcase
   ========================================================================== */
.certificates-section {
    position: relative;
    padding-top: 80px;
    padding-bottom: 90px;
}

.cert-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 32px 0 28px;
}

.cert-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #8e999f;
    font: 11px/1.2 'DM Mono', monospace;
    cursor: pointer;
    transition: all 0.25s ease;
}

.cert-tab:hover {
    border-color: rgba(199, 243, 107, 0.4);
    color: #e1ebec;
    background: rgba(255, 255, 255, 0.06);
}

.cert-tab.is-active {
    background: rgba(199, 243, 107, 0.12);
    border-color: rgba(199, 243, 107, 0.45);
    color: #c7f36b;
    font-weight: 600;
}

.cert-tab .tab-count {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9px;
    background: rgba(255, 255, 255, 0.07);
    color: inherit;
}

.cert-tab.is-active .tab-count {
    background: rgba(199, 243, 107, 0.22);
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px;
}

.cert-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    background: linear-gradient(155deg, #13181d 0%, #0d1114 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.35s ease;
}

.cert-card:hover {
    transform: translateY(-4px);
    border-color: rgba(199, 243, 107, 0.35);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 26px rgba(199, 243, 107, 0.08);
}

.cert-card.is-featured {
    border-color: rgba(199, 243, 107, 0.2);
}

.cert-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.cert-issuer-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font: 10px/1.3 'DM Mono', monospace;
    color: #a4b0b5;
}

.cert-issuer-google {
    border-color: rgba(66, 133, 244, 0.3);
    background: rgba(66, 133, 244, 0.08);
    color: #8cb4f5;
}

.cert-issuer-udemy {
    border-color: rgba(164, 53, 240, 0.3);
    background: rgba(164, 53, 240, 0.08);
    color: #d694ff;
}

.cert-issuer-depi {
    border-color: rgba(199, 243, 107, 0.3);
    background: rgba(199, 243, 107, 0.08);
    color: #c7f36b;
}

.cert-issuer-hp {
    border-color: rgba(0, 150, 214, 0.3);
    background: rgba(0, 150, 214, 0.08);
    color: #6dd4ff;
}

.cert-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 9px/1 'DM Mono', monospace;
    color: #8bf29c;
    background: rgba(139, 242, 156, 0.09);
    border: 1px solid rgba(139, 242, 156, 0.25);
    border-radius: 12px;
    padding: 3px 8px;
    letter-spacing: 0.03em;
}

.cert-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8bf29c;
    box-shadow: 0 0 6px #8bf29c;
}

.cert-title {
    font: 600 16px/1.35 'Manrope', sans-serif;
    color: #edf2f5;
    margin: 0 0 10px;
}

.cert-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font: 10px 'DM Mono', monospace;
    color: #727e85;
    margin-bottom: 12px;
}

.cert-cred-id code {
    color: #b9c4c9;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9.5px;
}

.cert-description {
    font: 12.5px/1.7 'Manrope', sans-serif;
    color: #9aa5aa;
    margin: 0 0 16px;
    flex-grow: 1;
}

.cert-skills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cert-skill-chip {
    font: 9.5px 'DM Mono', monospace;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #b7c2c7;
    letter-spacing: 0.02em;
}

.cert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.cert-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 6px;
    font: 11px/1 'DM Mono', monospace;
    text-decoration: none;
    transition: all 0.25s ease;
}

.cert-action-primary {
    background: rgba(199, 243, 107, 0.12);
    border: 1px solid rgba(199, 243, 107, 0.35);
    color: #c7f36b;
    font-weight: 600;
}

.cert-action-primary:hover {
    background: #c7f36b;
    color: #0b0f12;
    border-color: #c7f36b;
    transform: translateY(-1px);
}

.cert-action-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e0e6e9;
}

.cert-action-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateY(-1px);
}

.cert-action-quiet {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #8e9a9f;
}

.cert-action-quiet:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: #d0d7da;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .cert-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .cert-card {
        padding: 22px 18px;
    }
    .cert-category-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .cert-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ==========================================================================
   AI Bot: Target Highlight & Advanced Capabilities (7 Features)
   ========================================================================== */
.target-highlight-pulse {
    outline: 2px solid var(--lime) !important;
    outline-offset: 6px;
    box-shadow: 0 0 38px rgba(199, 243, 107, 0.48) !important;
    animation: target-flash 2.6s ease-out forwards;
}

@keyframes target-flash {
    0% { outline-color: var(--lime); box-shadow: 0 0 45px rgba(199, 243, 107, 0.6); }
    40% { outline-color: rgba(199, 243, 107, 0.6); box-shadow: 0 0 25px rgba(199, 243, 107, 0.35); }
    100% { outline-color: transparent; box-shadow: none; }
}



.chat-bubble-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}
.chat-speak-btn {
    background: transparent;
    border: none;
    color: #727e88;
    font-size: 11px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s;
}
.chat-speak-btn:hover {
    color: var(--lime);
    background: rgba(199, 243, 107, 0.1);
}
.chat-speak-btn.is-speaking {
    color: #c7f36b;
    animation: pulse 1s infinite alternate;
}

/* Interactive C# Code Snippet Card */
.chat-code-card {
    margin: 10px 0 6px;
    border-radius: 8px;
    background: #080b0e;
    border: 1px solid #1f2730;
    overflow: hidden;
}
.chat-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #11161d;
    border-bottom: 1px solid #1a222a;
    font: 10px 'DM Mono', monospace;
    color: #8c9ba4;
}
.chat-code-copy-btn {
    background: rgba(199, 243, 107, 0.08);
    border: 1px solid rgba(199, 243, 107, 0.25);
    border-radius: 4px;
    padding: 2px 7px;
    color: #c7f36b;
    font: 9.5px 'DM Mono', monospace;
    cursor: pointer;
    transition: all 0.2s;
}
.chat-code-copy-btn:hover {
    background: #c7f36b;
    color: #000;
}
.chat-code-body {
    padding: 10px 12px;
    margin: 0;
    font: 11px/1.55 'DM Mono', monospace;
    color: #c5d4dc;
    overflow-x: auto;
    white-space: pre;
    scrollbar-width: thin;
    scrollbar-color: #232d38 #080b0e;
}

/* Interactive Project Estimator Box */
.chat-estimator-box {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(199, 243, 107, 0.04);
    border: 1px dashed rgba(199, 243, 107, 0.3);
}
.estimator-step-title {
    font: 600 11px Manrope, sans-serif;
    color: #edf5dc;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.estimator-step-badge {
    padding: 1px 6px;
    border-radius: 4px;
    background: #c7f36b22;
    color: #c7f36b;
    font: 700 9px 'DM Mono', monospace;
}
.estimator-options-grid {
    display: grid;
    gap: 5px;
}
.estimator-opt-btn {
    padding: 6px 11px;
    border-radius: 6px;
    background: #10151b;
    border: 1px solid #232c35;
    color: #c8d3d9;
    font: 10.5px 'DM Mono', monospace;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}
.estimator-opt-btn:hover {
    background: rgba(199, 243, 107, 0.12);
    border-color: rgba(199, 243, 107, 0.45);
    color: #c7f36b;
    transform: translateX(3px);
}

/* AI Settings Panel (Gemini Mode) */
.chat-settings-panel {
    padding: 12px 16px;
    background: #0f141a;
    border-bottom: 1px solid #1f2832;
    font-size: 11px;
    animation: chat-pop-in 0.2s ease-out;
}
.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font: 600 11px Manrope, sans-serif;
    color: #edf2f5;
}
.settings-input-group {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.settings-input {
    flex: 1;
    padding: 6px 10px;
    border-radius: 5px;
    background: #080b0e;
    border: 1px solid #252f3a;
    color: #edf2f5;
    font: 10.5px 'DM Mono', monospace;
}
.settings-input:focus {
    border-color: var(--lime);
    outline: none;
}
.settings-save-btn {
    padding: 6px 12px;
    border-radius: 5px;
    background: var(--lime);
    color: #0b0f12;
    border: none;
    font: 700 10.5px 'DM Mono', monospace;
    cursor: pointer;
}
.settings-note {
    font: 9.5px 'DM Mono', monospace;
    color: #727e86;
    margin-top: 6px;
    line-height: 1.4;
}

/* ==========================================================================
   BRAND KIT & LOGO ASSET SYSTEM
   ========================================================================== */

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    transition: transform 0.25s ease;
}

.brand-mark {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #090c0f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.brand-mark-3d {
    width: 44px;
    height: 44px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.brand-mark-3d::after {
    display: none !important;
}

.brand-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 10px rgba(199, 243, 107, 0.55)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.35s ease;
}

.brand:hover .brand-mark-3d,
.footer-brand:hover .brand-mark-3d {
    transform: translateY(-2px) scale(1.08) rotate(-2deg);
}

.brand:hover .brand-logo-img,
.footer-brand:hover .brand-logo-img {
    filter: drop-shadow(0 0 18px rgba(199, 243, 107, 0.95)) drop-shadow(0 0 28px rgba(0, 242, 254, 0.65)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.9));
}

.brand:hover .brand-logo-img,
.footer-brand:hover .brand-logo-img {
    transform: scale(1.06);
    filter: contrast(1.12) brightness(1.12);
}

.brand-name-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}

.brand-name, .brand-text {
    font: 800 17px/1.1 Manrope, sans-serif;
    color: #f8fafc;
    letter-spacing: -0.025em;
    display: inline-flex;
    align-items: center;
}

.brand-dot {
    color: var(--lime);
    margin-left: 1px;
    text-shadow: 0 0 8px rgba(199, 243, 107, 0.7);
}

.brand-sub {
    font: 700 8.5px 'DM Mono', monospace;
    letter-spacing: 0.16em;
    color: #a89cf9;
    text-transform: uppercase;
    margin-top: 3px;
    text-shadow: 0 0 10px rgba(168, 156, 249, 0.4);
}

/* ==========================================================================
   HERO 3D HOLOGRAPHIC IDENTITY HUD CARD
   ========================================================================== */

.core-card-branded {
    position: relative;
    z-index: 10;
    width: 295px !important;
    min-height: 385px !important;
    padding: 20px 22px !important;
    border-radius: 16px !important;
    background: linear-gradient(155deg, rgba(20, 26, 33, 0.94) 0%, rgba(11, 14, 18, 0.98) 100%) !important;
    border: 1.5px solid rgba(199, 243, 107, 0.38) !important;
    box-shadow: 
        0 24px 60px rgba(0, 0, 0, 0.85),
        0 0 50px rgba(199, 243, 107, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transform: rotate(2deg) translateY(0) !important;
    animation: heroHudFloat 6s ease-in-out infinite alternate !important;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
}

.core-card-branded:hover {
    transform: rotate(0deg) translateY(-8px) scale(1.03) !important;
    border-color: rgba(199, 243, 107, 0.7) !important;
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.92),
        0 0 70px rgba(199, 243, 107, 0.25),
        0 0 90px rgba(168, 156, 249, 0.2) !important;
}

@keyframes heroHudFloat {
    0% {
        transform: rotate(2deg) translateY(0);
    }
    100% {
        transform: rotate(1deg) translateY(-10px);
    }
}

/* Top HUD bar */
.core-top-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.core-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 700 8.5px 'DM Mono', monospace;
    letter-spacing: 0.12em;
    color: #d7f994;
}
.core-status-pill .live-pulse {
    width: 6px;
    height: 6px;
    background: var(--lime);
    border-radius: 50%;
    box-shadow: 0 0 10px #c7f36b;
}
.core-loc-tag {
    font: 600 8.5px 'DM Mono', monospace;
    letter-spacing: 0.08em;
    color: #8c97a4;
}

/* Holographic Emblem Stage with Animated Scanner */
.core-emblem-stage {
    position: relative;
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0 4px;
    overflow: visible;
    border-radius: 0;
}

/* Cyber Scanning Light Beam */
.core-emblem-stage::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c7f36b, #a89cf9, transparent);
    box-shadow: 0 0 10px #c7f36b, 0 0 18px #a89cf9;
    animation: cyberScanBeam 3.6s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 5;
}

@keyframes cyberScanBeam {
    0% {
        top: 10%;
        opacity: 0;
    }
    20% {
        opacity: 0.85;
    }
    80% {
        opacity: 0.85;
    }
    100% {
        top: 90%;
        opacity: 0;
    }
}

.emblem-halo {
    position: absolute;
    width: 155px;
    height: 155px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(199, 243, 107, 0.32) 0%, rgba(168, 156, 249, 0.2) 50%, transparent 75%);
    filter: blur(14px);
    animation: haloGlowBreathe 4.5s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes haloGlowBreathe {
    0% {
        opacity: 0.6;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1.15);
    }
}

.emblem-ring {
    position: absolute;
    width: 158px;
    height: 158px;
    border-radius: 50%;
    border: 1px dashed rgba(199, 243, 107, 0.4);
    animation: ringOrbitSpin 20s linear infinite;
    pointer-events: none;
}

@keyframes ringOrbitSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.core-hero-emblem {
    position: relative;
    z-index: 2;
    width: 145px;
    height: 145px;
    object-fit: contain;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 18px rgba(199, 243, 107, 0.45));
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s;
    animation: emblemCyberPulse 5s ease-in-out infinite alternate;
}

@keyframes emblemCyberPulse {
    0% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 16px rgba(199, 243, 107, 0.5));
    }
    50% {
        filter: drop-shadow(0 14px 35px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 28px rgba(168, 156, 249, 0.65)) drop-shadow(0 0 45px rgba(199, 243, 107, 0.4));
    }
    100% {
        transform: translateY(-5px) scale(1.03);
        filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 22px rgba(199, 243, 107, 0.6));
    }
}

.core-card-branded:hover .core-hero-emblem {
    transform: scale(1.08) translateY(-4px);
    filter: drop-shadow(0 14px 35px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 28px rgba(199, 243, 107, 0.8));
}

/* Identity Typography with Shimmering Gradients */
.core-identity {
    text-align: center;
    margin: 6px 0 10px;
}

.core-name {
    margin: 0;
    font: 800 21px/1.2 Manrope, sans-serif;
    color: #ffffff;
    letter-spacing: -0.025em;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.core-name-dot {
    color: var(--lime);
    text-shadow: 0 0 10px rgba(199, 243, 107, 0.8);
    display: inline-block;
    animation: dotPulse 2.5s ease-in-out infinite alternate;
}

@keyframes dotPulse {
    0% { opacity: 0.7; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.2); }
}

.core-role {
    display: inline-block;
    margin-top: 5px;
    font: 700 9.5px 'DM Mono', monospace;
    letter-spacing: 0.16em;
    background: linear-gradient(90deg, #a89cf9 0%, #c7f36b 50%, #a89cf9 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: roleGradientTravel 4.5s ease-in-out infinite;
    text-transform: uppercase;
}

@keyframes roleGradientTravel {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Tech Spec Chips */
.core-spec-chips {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.spec-chip {
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font: 600 9px 'DM Mono', monospace;
    letter-spacing: 0.03em;
    transition: all 0.2s ease;
}

.core-card-branded:hover .spec-chip {
    border-color: rgba(199, 243, 107, 0.35);
    background: rgba(199, 243, 107, 0.06);
    color: #e2f8bb;
}

/* Bottom HUD Footer */
.core-footer-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font: 700 8.5px 'DM Mono', monospace;
    letter-spacing: 0.08em;
}

.core-perf {
    color: #94a3b8;
}

.core-ping {
    color: var(--lime);
    text-shadow: 0 0 8px rgba(199, 243, 107, 0.5);
}

/* Floating Tag Polish */
.float-tag {
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    background: rgba(17, 22, 28, 0.85) !important;
    border: 1px solid rgba(199, 243, 107, 0.35) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(199, 243, 107, 0.1) !important;
    transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.float-tag:hover {
    transform: translateY(-3px) scale(1.05) !important;
    border-color: var(--lime) !important;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS FIXES (ZERO OVERLAPS)
   ========================================================================== */

@media (max-width: 800px) {
    .site-shell {
        padding: 0 5% !important;
    }
    .hero {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
        height: auto !important;
        padding-top: 30px !important;
        padding-bottom: 50px !important;
        gap: 30px !important;
        overflow: visible !important;
    }
    .hero-copy {
        padding-bottom: 0 !important;
        max-width: 100% !important;
    }
    .hero-visual {
        height: auto !important;
        min-height: 420px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 20px auto 30px !important;
        position: relative !important;
        width: 100% !important;
        overflow: visible !important;
    }
    .core-card-branded {
        width: min(100%, 310px) !important;
        min-height: auto !important;
        transform: none !important;
        margin: 0 auto !important;
        animation: heroMobileCardFloat 5s ease-in-out infinite alternate !important;
    }
    @keyframes heroMobileCardFloat {
        0% { transform: translateY(0); }
        100% { transform: translateY(-6px); }
    }
    .hero-bottom {
        position: static !important;
        margin-top: 25px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-top: 14px !important;
        width: 100% !important;
    }
    .orbit-one { width: 310px !important; height: 210px !important; }
    .orbit-two { width: 340px !important; height: 260px !important; }
}

@media (max-width: 600px) {
    .topbar {
        height: 74px !important;
        padding: 0 16px !important;
    }
    .brand {
        gap: 10px !important;
    }
    .brand-mark-3d {
        width: 36px !important;
        height: 36px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    .brand-name {
        font-size: 14.5px !important;
    }
    .brand-sub {
        font-size: 7.5px !important;
        letter-spacing: 0.12em !important;
    }
    .core-card-branded {
        width: min(100%, 330px) !important;
        max-width: 330px !important;
        min-height: auto !important;
        height: auto !important;
        padding: 22px 20px !important;
        margin: 10px auto !important;
        box-sizing: border-box !important;
    }
    .core-emblem-stage {
        height: 160px !important;
        min-height: 160px !important;
        width: 100% !important;
        overflow: visible !important;
        margin: 10px auto 6px !important;
    }
    .core-hero-emblem {
        width: 135px !important;
        height: 135px !important;
        max-width: 135px !important;
        max-height: 135px !important;
    }
    .emblem-halo {
        width: 140px !important;
        height: 140px !important;
    }
    .emblem-ring {
        width: 145px !important;
        height: 145px !important;
    }
    .core-name {
        font-size: 19px !important;
    }
    .core-role {
        font-size: 8.5px !important;
    }
    .float-tag {
        display: none !important;
    }
    .flow-lines {
        display: none !important;
    }
}

.brand-modal-wrapper {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
}
.brand-modal-wrapper.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.brand-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 8, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: fadeIn 0.25s ease-out;
}
.brand-modal {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 920px;
    max-height: 90vh;
    background: #0c0f13;
    border: 1px solid rgba(199, 243, 107, 0.35);
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8), 0 0 50px rgba(199, 243, 107, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.brand-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #090c0f;
}
.brand-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.brand-modal-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(199, 243, 107, 0.4);
    box-shadow: 0 0 15px rgba(199, 243, 107, 0.2);
}
.brand-modal-title {
    margin: 0;
    font: 700 18px Manrope, sans-serif;
    color: #f8fafc;
    letter-spacing: -0.02em;
}
.brand-modal-sub {
    font: 11px 'DM Mono', monospace;
    color: #94a3b8;
}
.brand-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #141920;
    border: 1px solid #232d38;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    display: grid;
    place-items: center;
    transition: all 0.2s;
}
.brand-close-btn:hover {
    color: #f8fafc;
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}
.brand-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.brand-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 12px;
    flex-wrap: wrap;
}
.brand-tab {
    padding: 8px 16px;
    border-radius: 8px;
    background: #101419;
    border: 1px solid #1f2731;
    color: #94a3b8;
    font: 11.5px 'DM Mono', monospace;
    cursor: pointer;
    transition: all 0.2s ease;
}
.brand-tab:hover {
    color: #e2e8f0;
    border-color: rgba(199, 243, 107, 0.4);
}
.brand-tab.is-active {
    background: rgba(199, 243, 107, 0.12);
    border-color: var(--lime);
    color: var(--lime);
    font-weight: 600;
}
.brand-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}
.brand-section-kicker {
    font: 700 10px 'DM Mono', monospace;
    color: var(--lime);
    letter-spacing: 0.12em;
}
.brand-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.brand-card {
    background: #0f1318;
    border: 1px solid #1e2631;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.brand-card:hover {
    transform: translateY(-3px);
    border-color: rgba(199, 243, 107, 0.45);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(199, 243, 107, 0.08);
}
.brand-card-preview {
    height: 180px;
    display: grid;
    place-items: center;
    position: relative;
    padding: 16px;
    overflow: hidden;
}
.brand-card-preview.dark-bg {
    background: radial-gradient(circle at center, #151c24 0%, #090c0f 80%);
}
.brand-card-preview.checker-bg {
    background: 
        linear-gradient(45deg, #12171e 25%, transparent 25%), 
        linear-gradient(-45deg, #12171e 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #12171e 75%), 
        linear-gradient(-45deg, transparent 75%, #12171e 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    background-color: #090b0e;
}
.brand-img-preview {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.brand-svg-preview {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
}
.brand-svg-preview.wide {
    max-width: 90%;
    height: auto;
}
.brand-card-info {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.brand-card-info h4 {
    margin: 0 0 6px;
    font: 700 14px Manrope, sans-serif;
    color: #f1f5f9;
}
.brand-card-info p {
    margin: 0 0 16px;
    font: 11px 'DM Sans', sans-serif;
    color: #94a3b8;
    line-height: 1.5;
    flex: 1;
}
.brand-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.brand-btn {
    padding: 7px 12px;
    border-radius: 6px;
    font: 600 11px 'DM Mono', monospace;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.brand-btn-primary {
    background: var(--lime);
    color: #090b0e;
}
.brand-btn-primary:hover {
    background: #d4f87a;
    box-shadow: 0 0 14px rgba(199, 243, 107, 0.4);
    color: #090b0e;
}
.brand-btn-secondary {
    background: #141a22;
    border: 1px solid #232d38;
    color: #cbd5e1;
}
.brand-btn-secondary:hover {
    border-color: var(--lime);
    color: var(--lime);
    background: #18221b;
}

/* Palette Grid */
.brand-palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.palette-card {
    background: #0f1318;
    border: 1px solid #1e2631;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
}
.palette-card:hover {
    transform: translateY(-2px);
    border-color: rgba(199, 243, 107, 0.5);
}
.palette-swatch {
    height: 70px;
    display: flex;
    align-items: flex-end;
    padding: 8px 12px;
    font: 700 12px 'DM Mono', monospace;
}
.palette-meta {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.palette-name {
    font: 700 13px Manrope, sans-serif;
    color: #f1f5f9;
}
.palette-usage {
    font: 10.5px 'DM Sans', sans-serif;
    color: #94a3b8;
    line-height: 1.4;
}
.palette-action {
    margin-top: 6px;
    font: 600 10px 'DM Mono', monospace;
    color: var(--lime);
}

/* Typography Card */
.brand-typography-card {
    background: #0f1318;
    border: 1px solid #1e2631;
    border-radius: 10px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.type-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.type-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.type-role {
    font: 11px 'DM Mono', monospace;
    color: #94a3b8;
}
.type-spec {
    font: 600 12px Manrope, sans-serif;
    color: #f8fafc;
}

.brand-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #090c0f;
    flex-wrap: wrap;
    gap: 10px;
}
.brand-footer-hint {
    font: 11px 'DM Mono', monospace;
    color: #727e86;
}