:root { color-scheme: dark; }
body { -webkit-font-smoothing: antialiased; }
section[id] { scroll-margin-top: 100px; }
h1,h2,h3 { text-wrap: balance; }
h2 { letter-spacing: -.035em; line-height: 1.2; }
p { text-wrap: pretty; }
.text-slate-400 { color: #aab7c9; }
p.text-slate-500 { color: #9baac0; }
nav { box-shadow: 0 8px 32px #02061715; }
nav .btn-tech { font-family: Inter,sans-serif; font-size: 13px; border-color: #52613d; border-radius: 7px; }
.btn-tech { box-shadow: none; transition: background .2s, color .2s, border-color .2s; }
.btn-tech::before { display: none; }
.btn-tech:hover { box-shadow: none; transform: none; background: #a8cc66; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline: 2px solid #b8d888; outline-offset: 5px; }
#hero { padding-top: 148px; padding-bottom: 64px; }
#hero > .relative { max-width: 1050px; }
#hero .code-pattern { opacity: .09; mask-image: linear-gradient(to bottom,black,transparent); }
#hero h1 { font-size: clamp(36px,4.4vw,58px); line-height: 1.13; letter-spacing: -.045em; margin-bottom: 24px; }
#hero h1 span { background: none; color: #a8cc66; }
#hero p { font-size: 17px; line-height: 1.75; margin-bottom: 30px; max-width: 730px; }
#hero .inline-block { font-size: 10px; letter-spacing: .11em; background: transparent; border-color: #344137; padding: 7px 13px; margin-bottom: 26px; }
#hero a { border-radius: 7px; padding: 14px 23px; font-size: 14px; }
#hero a.bg-shopgreen,#contact a.bg-shopgreen { color: #172110; background: #a8cc66; box-shadow: none; }
#hero a.bg-shopgreen:hover,#contact a.bg-shopgreen:hover { background: #b9d98a; }
#expertise,#projects,#about,#contact { padding-top: 80px; padding-bottom: 80px; }
#expertise .mb-16 { margin-bottom: 38px; }
#expertise .grid > .group { display: flex; flex-direction: column; padding: 30px; background: #172235; border: 1px solid #29374b; border-radius: 12px; transition: border-color .2s,background .2s; }
#expertise .grid > .group:hover { background: #1a273b; border-color: #566e44; }
#expertise .grid > .group > div { width: 42px; height: 42px; margin-bottom: 22px; background: #a8cc6610; }
#expertise h3 { font-size: 20px; letter-spacing: -.025em; }
#expertise .grid p { font-size: 15px; line-height: 1.75; max-width: 48ch; margin-bottom: 24px; }
#expertise .grid a { margin-top: auto; font-size: 13px; color: #b2d47d; }
#contact h2 { font-size: clamp(30px,3.4vw,42px); }
#contact .mb-16 { margin-bottom: 40px; }
#contact a.text-lg { font-size: 14px; border-radius: 7px; }
#contact form { background: #172235; box-shadow: none; }
.whatsapp-pulse { animation: none!important; background: #1c2c30!important; border: 1px solid #52664d; box-shadow: none!important; width: 48px!important; height: 48px!important; }
.whatsapp-pulse svg { width: 26px; height: 26px; }
.layer-top,.layer-mid,.layer-bottom,.data-stream,.tech-highlight,.avatar-ring,.scan-line { animation: none!important; }
.layer-mid { transform: translateZ(-20px); }
.layer-bottom { transform: translateZ(-40px); }
.holo-card { animation: none!important; background: #172235; border-color: #2a3749; cursor: pointer; }
.holo-card:hover { transform: none; box-shadow: none; border-color: #708554; }
.holo-card::before,.scan-line,.photo-wrapper::after,.avatar-ring { display: none; }
.holo-card h3 { font-size: 21px; }
.holo-card .photo-wrapper { width: 140px; height: 140px; border-radius: 12px; }
.holo-photo,.holo-card:hover .holo-photo { filter: none; opacity: 1; transform: none; }
.holo-card .bg-black\/40 { background: #101a2b; border-left-width: 1px; line-height: 1.8; }
main > .text-center h1 { font-size: clamp(36px,4.5vw,56px); line-height: 1.15; }
@media(max-width:767px) {
 #hero { padding-top: 118px; padding-bottom: 44px; }
 #hero h1 { font-size: 37px; }
 #hero h1 br { display: none; }
 #hero p { font-size: 15px; line-height: 1.7; }
 #hero .inline-block { font-size: 9px; }
 #hero a { width: 100%; }
 #expertise,#projects,#about,#contact { padding-top: 56px; padding-bottom: 56px; }
 #expertise .grid > .group { padding: 24px; }
 h2 { font-size: 29px!important; }
 .whatsapp-pulse { bottom: 16px!important; right: 16px!important; }
}
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
.holo-card > .flex p { color: #b0c397; }
.holo-card .text-slate-500 { color: #96a6ba; }
@media(max-width:767px) {
 main > .text-center { margin-bottom: 44px; }
 main > .text-center p { font-size: 16px; line-height: 1.7; }
}

#services-intro { padding-top: 144px; padding-bottom: 54px; background: #0f172a; }
#services-intro .code-pattern { opacity: .08; }
#services-intro h1 { font-size: clamp(34px,4.2vw,54px); line-height: 1.15; letter-spacing: -.04em; max-width: 850px; margin: 0 auto 22px; }
#services-intro p { max-width: 660px; font-size: 16px; line-height: 1.8; }
#services-intro .inline-block { font-size: 10px; letter-spacing: .1em; background: transparent; color: #a8b995; border-color: #344137; padding: 7px 13px; }
#service-details { padding-top: 28px; padding-bottom: 72px; }
#service-details > div { max-width: 1120px; }
#service-details > div > .grid { gap: 56px; padding: 48px 0; margin-top: 0; border-top: 1px solid #253246; }
#service-details h2 { font-size: 27px; line-height: 1.25; }
#service-details h2 + p,#service-details p { font-size: 15px; line-height: 1.8; margin-bottom: 22px; }
#service-details ul { margin-bottom: 24px; }
#service-details li { line-height: 1.75; }
#service-details li strong { color: #e0e7ef; font-weight: 600; }
#service-details h2 { text-wrap: pretty; }
#service-details .flex > svg { flex-shrink: 0; }
#service-details .grid > [aria-hidden="true"] { min-width: 0; padding: 24px; border-radius: 12px; border-color: #2a3749; box-shadow: none; background-color: #111c2d; line-height: 1.85; }
#service-details a { display: inline-block; padding: 6px 0; color: #b2d47d; }
#service-process { padding-top: 64px; padding-bottom: 68px; background: #152033; }
#service-process h2 { max-width: 680px; margin: 0 auto 36px; font-size: 32px; }
#service-process .grid { margin-top: 0; gap: 28px; }
#service-process .grid > div { padding-top: 18px; border-top: 1px solid #3a4a5c; }
#service-process .grid [aria-hidden="true"] { position: static; opacity: 1; color: #95a88b; font: 12px 'JetBrains Mono',monospace; margin-bottom: 17px; }
#service-process h3 { font-size: 16px; line-height: 1.4; }
#service-process p { line-height: 1.75; }
#contact { background: linear-gradient(180deg,#0f172a,#121e30); }
#contact > div { max-width: 720px; }
#contact h2 { font-size: clamp(29px,3vw,38px); margin-bottom: 16px; }
#contact > div > p:first-of-type { max-width: 570px; margin: 0 auto 24px; font-size: 16px; line-height: 1.75; }
#contact > div > .flex { gap: 12px; margin-bottom: 28px; }
#contact > div > .flex a { background: transparent; box-shadow: none; color: #c3cfdf; border: 1px solid #3a495b; font-weight: 500; padding: 12px 16px; width: auto; font-size: 13px; }
#contact > div > .flex a:hover { border-color: #a8cc66; background: #a8cc660b; }
#contact > div > .text-left { margin-top: 0; max-width: 640px; }
#contact h3 { font-size: 17px; margin-bottom: 16px; }
#contact form { padding: 28px; border-color: #314056; border-radius: 12px; }
#contact form > .absolute { display: none; }
#contact form .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 18px; }
#contact label { display: block; font-size: 12px; text-transform: none; letter-spacing: 0; color: #bdc9d9; font-weight: 500; }
#contact input,#contact select,#contact textarea { border-radius: 6px; border-color: #344357; background: #101b2c; font-size: 15px; padding: 11px 12px; }
#contact input::placeholder,#contact textarea::placeholder { color: #8999af; }
#contact textarea { min-height: 102px; resize: vertical; }
#contact button[type="submit"] { min-height: 48px; background: #a8cc66; color: #172110; border-color: #a8cc66; border-radius: 6px; font-family: Inter,sans-serif; font-size: 14px; letter-spacing: 0; padding: 12px 16px; }
#contact button[type="submit"]:hover { background: #b9d98a; }
#contact button[type="submit"] span.opacity-50 { display: none; }
#contact > div > p:last-child { font-size: 12px; margin-top: 18px; color: #9baac0; }
@media(max-width:767px) {
 #services-intro { padding-top: 118px; padding-bottom: 36px; }
 #services-intro h1 { font-size: 34px; }
 #services-intro p { font-size: 15px; }
 #service-details { padding-top: 0; padding-bottom: 24px; }
 #service-details > div > .grid { gap: 26px; padding: 34px 0; }
 #service-details .grid > :not([aria-hidden="true"]) { order: 0; }
 #service-details .grid > [aria-hidden="true"] { order: 1; padding: 16px; font-size: 10px; overflow-x: auto; }
 #service-details h2 { font-size: 24px!important; }
 #service-details li { font-size: 13px; }
 #service-details table { min-width: 350px; }
 #service-process { padding-top: 44px; padding-bottom: 44px; }
 #service-process .grid { gap: 24px; }
 #contact { padding-left: 20px; padding-right: 20px; }
 #contact > div > .flex { flex-direction: row; flex-wrap: wrap; gap: 8px; }
 #contact > div > .flex a { font-size: 12px; padding: 10px; }
 #contact form { padding: 20px; }
 #contact form .grid { gap: 16px; }
 #contact input,#contact select,#contact textarea { font-size: 16px; }
 #contact > div > p:last-child { padding: 0 12px; line-height: 1.6; }
}

#contact > div > .flex {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
#contact > div > .flex a {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
}
#contact > div > .flex a svg { flex-shrink: 0; }
@media (max-width: 767px) {
    #contact > div > .flex { grid-template-columns: 1fr; gap: 10px; }
}
#contact #booking-open { width:100%; min-height:48px; padding:12px 16px; font-size:13px; line-height:1.5; font-weight:500; border:1px solid #3a495b; border-radius:7px; color:#c3cfdf; background:transparent; box-shadow:none; }
#contact #booking-open:hover { border-color:#a8cc66; background:#a8cc660b; }
#booking-open svg { flex-shrink:0; }
body.booking-open { overflow:hidden; }
#booking-dialog { width:min(740px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:28px; color:#e2e8f0; background:#142033; border:1px solid #344357; border-radius:16px; box-shadow:0 24px 100px #0008; }
#booking-dialog::backdrop { background:#050b18b8; backdrop-filter:blur(5px); }
.booking-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.booking-eyebrow { font:10px 'JetBrains Mono',monospace; letter-spacing:.12em; color:#a8cc66; }
#booking-close { font-size:26px; width:40px; height:40px; border-radius:8px; color:#c3cfdf; }
#booking-dialog h2 { font-size:30px; margin:12px 0; }
.booking-intro { font-size:14px; color:#aab7c9; line-height:1.7; }
.booking-demo { font-size:12px; line-height:1.6; padding:12px 14px; border:1px solid #48503b; border-radius:8px; color:#c7d4ad; background:#a8cc6608; margin-top:18px; }
.booking-layout { display:grid; grid-template-columns:1.25fr 1fr; gap:28px; margin-top:24px; }
.booking-month { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.booking-month h3,.booking-times h3 { font-size:14px; font-weight:600; }
.booking-month button { width:36px; height:36px; border:1px solid #344357; border-radius:6px; font-size:23px; }
.booking-week,.booking-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; text-align:center; }
.booking-week { font-size:11px; color:#94a3b8; margin-bottom:8px; }
.booking-days button { min-height:38px; border-radius:6px; font-size:13px; border:1px solid transparent; }
#booking-dialog button:disabled { opacity:.25; cursor:default; }
#booking-dialog button:not(:disabled):hover { background:#a8cc6615; }
#booking-dialog button[aria-pressed="true"] { background:#a8cc66; color:#172110; border-color:#a8cc66; }
.booking-times { padding-left:24px; border-left:1px solid #344357; }
.booking-times p { font-size:11px; color:#94a3b8; margin:8px 0 16px; }
#booking-slots { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#booking-slots button { padding:12px; border:1px solid #40516a; border-radius:6px; font-size:13px; }
.booking-summary { margin-top:24px; padding-top:18px; border-top:1px solid #344357; font-size:13px; line-height:1.7; color:#b9c7da; min-height:64px; }
#booking-done { margin-top:16px; width:100%; padding:12px; border:1px solid #40516a; border-radius:7px; font-size:13px; }
@media(max-width:600px) { #booking-dialog { padding:20px; } #booking-dialog h2 { font-size:26px!important; } .booking-layout { grid-template-columns:1fr; gap:20px; } .booking-times { padding-left:0; border-left:0; } .booking-days button { min-height:36px; } }
#booking-dialog [hidden] { display:none!important; }
#booking-dialog .booking-primary { width:100%; min-height:46px; margin-top:18px; padding:12px 16px; border:1px solid #a8cc66; border-radius:7px; background:#a8cc66; color:#172110; font-weight:600; font-size:13px; }
#booking-dialog .booking-primary:not(:disabled):hover { background:#b9d98a; }
.booking-selection { padding:14px; margin:20px 0; background:#0f1929; border:1px solid #344357; border-radius:8px; font-size:13px; line-height:1.7; color:#c6d7b0; }
.booking-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#booking-details label { display:block; font-size:13px; color:#c3cfdf; margin-bottom:16px; }
#booking-details label span { color:#94a3b8; font-size:11px; }
#booking-details input,#booking-details textarea { display:block; width:100%; margin-top:8px; border:1px solid #40516a; border-radius:6px; padding:12px; background:#0f1929; color:#e2e8f0; font:inherit; }
#booking-details input:focus,#booking-details textarea:focus { outline:2px solid #a8cc66; outline-offset:2px; }
#booking-details textarea { resize:vertical; }
.booking-help { font-size:12px; color:#aab7c9; line-height:1.75; }
.booking-actions { display:flex; gap:12px; align-items:stretch; margin-top:20px; }
#booking-dialog .booking-actions .booking-primary { margin:0; width:auto; flex:1; }
#booking-back { padding:12px 20px; border:1px solid #40516a; border-radius:7px; font-size:13px; }
.booking-check { margin-top:24px; width:44px; height:44px; display:grid; place-items:center; background:#a8cc661a; color:#a8cc66; border:1px solid #536b3f; border-radius:50%; font-size:24px; }
#booking-confirmation h3 { font-size:21px; margin-top:16px; }
#booking-confirmation dl { display:grid; grid-template-columns:100px 1fr; gap:12px; font-size:13px; margin:20px 0; }
#booking-confirmation dt { color:#94a3b8; }
#booking-confirmation dd { overflow-wrap:anywhere; }
@media(max-width:600px) { .booking-fields { grid-template-columns:1fr; gap:0; } #booking-details input,#booking-details textarea { font-size:16px; } .booking-eyebrow { font-size:9px; line-height:1.7; } }

#faq summary { position: relative; justify-content: center; padding: 24px 56px; text-align: center; }
#faq summary > span:first-child { width: 100%; }
#faq summary > span:last-child { position: absolute; right: 24px; top: 50%; margin-top: -10px; }
#faq details > div { text-align: left; }
@media (max-width: 767px) {
    #faq summary { padding: 20px 42px; }
    #faq summary > span:last-child { right: 14px; }
}

#contact select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 46px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b9c7da' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 16px center;
    background-repeat: no-repeat;
}
#contact textarea,#booking-details textarea { resize: none; overflow: hidden; }
#contact button[type="submit"]:disabled { opacity: .4; cursor: not-allowed; }
#contact .contact-submit {
    width:100%; min-height:52px; padding:14px 20px;
    display:flex; align-items:center; justify-content:center; gap:12px;
    background:#a8cc66; color:#172110; border:1px solid #a8cc66;
    border-radius:7px; font-size:14px; font-weight:600;
    transition:background-color .2s ease;
}
#contact .contact-submit:hover:not(:disabled) { background:#bddb87; }
#contact .contact-submit svg { width:18px; height:18px; }
#contact #contact-status { margin-top:10px; font-size:13px; line-height:1.5; color:#b9c7da; }
#contact #contact-status:empty { display:none; }
.collaboration-section { padding:72px 24px; background:#111c2d; border-top:1px solid #29374b; }
.collaboration-inner { max-width:1120px; margin:auto; }
.collaboration-heading { max-width:740px; margin:0 auto 36px; text-align:center; }
.collaboration-eyebrow { font:10px 'JetBrains Mono',monospace; letter-spacing:.13em; color:#96a6ba; margin-bottom:16px; }
.collaboration-heading h2 { color:#f1f5f9; font-size:36px; font-weight:700; margin-bottom:18px; }
.collaboration-heading > p:last-child { color:#aab7c9; font-size:15px; line-height:1.75; }
.collaboration-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.collaboration-card { display:flex; flex-direction:column; min-width:0; background:#172235; border:1px solid #314056; border-radius:12px; padding:26px; }
.collaboration-card > svg { width:24px; height:24px; color:#a8cc66; margin-bottom:22px; }
.collaboration-card h3 { font-size:21px; font-weight:600; line-height:1.35; color:#f1f5f9; margin-bottom:14px; }
.collaboration-card p { font-size:14px; line-height:1.75; color:#aab7c9; }
.collaboration-card ul { list-style:disc; padding-left:17px; margin:20px 0 24px; font-size:13px; line-height:1.9; color:#ccd5e2; }
.collaboration-card li::marker { color:#829e60; }
.collaboration-outcome { margin-top:auto; padding-top:20px; border-top:1px solid #344357; }
.collaboration-outcome > span { color:#e2e8f0; font-size:12px; font-weight:600; display:block; margin-bottom:8px; }
.collaboration-outcome p { font-size:13px; }
.collaboration-card a { color:#b2d47d; font-size:13px; margin-top:24px; padding:6px 0; }
.collaboration-card a:hover,.collaboration-link a:hover { text-decoration:underline; text-underline-offset:4px; }
.collaboration-note { margin:24px auto 0; max-width:740px; color:#99a9be; font-size:12px; line-height:1.75; text-align:center; }
.collaboration-cta { display:inline-flex; gap:18px; margin-top:36px; border-radius:7px; padding:13px 22px; background:#a8cc66; color:#172110; font-size:14px; font-weight:600; }
.collaboration-cta:hover { background:#b9d98a; }
.collaboration-link { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid #29374b; padding-top:24px; margin-top:30px; }
.collaboration-link p { color:#aab7c9; font-size:14px; }
.collaboration-link a { color:#b2d47d; font-size:13px; }
@media(max-width:900px) { .collaboration-grid { grid-template-columns:1fr; } .collaboration-card { padding:24px; } .collaboration-outcome { margin-top:0; } }
@media(max-width:767px) { .collaboration-section { padding:48px 24px; } .collaboration-link { flex-direction:column; align-items:flex-start; } }

a.whatsapp-pulse { transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease; }
@media (hover:hover) {
 a.whatsapp-pulse:hover { background:#25d366!important; border-color:#56e68b!important; box-shadow:0 0 18px #25d36655!important; }
}
a.whatsapp-pulse:focus-visible { background:#25d366!important; border-color:#56e68b!important; }

@media (min-width:768px) and (max-width:1023px) {
 nav .md\:flex,nav .md\:inline-flex { display:none!important; }
 nav .md\:hidden { display:block!important; }
 #mobile-menu { display:flex!important; }
}


.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#booking-error { color: #fca5a5; margin: 1rem 0; font-size: .9rem; }
#booking-confirmation > p:not(.booking-selection) { color: #a9b8cc; line-height: 1.6; margin: 1rem 0; }
[aria-busy="true"] input, [aria-busy="true"] textarea, [aria-busy="true"] select { opacity: .65; }


#business-benefits { background:#0f172a; }
#business-benefits > div { gap:22px; padding-top:38px; padding-bottom:38px; }
#business-benefits > div > div { position:relative; padding:22px; border-left:2px solid var(--benefit-color); background:linear-gradient(115deg,#1b283a,#121c2d); border-radius:0 9px 9px 0; --benefit-color:#f08d88; transition:background-color .2s; }
#business-benefits > div > div:nth-child(2) { --benefit-color:#a8cc66; }
#business-benefits > div > div:nth-child(3) { --benefit-color:#82b8eb; }
#business-benefits h3 { align-items:flex-start; line-height:1.5; }
#business-benefits h3 svg { flex-shrink:0; margin-top:2px; transition:transform .2s ease; }
#business-benefits p { color:#bac8da; line-height:1.7; }
@media (hover:hover) {
    #business-benefits > div > div:hover h3 svg { transform:translateY(-3px); }
}

@media (max-width:767px) {
    #business-benefits > div { gap:14px; }
    #business-benefits > div > div { text-align:left; }
    #business-benefits h3 { justify-content:flex-start; }
}
#technology-focus, #business-benefits { scroll-margin-top:100px; }

@media (max-width:767px) {
}


#projects.examples-section { background:#e9ede4; color:#101b2c; padding:88px 24px 64px; border:0; }
.examples-inner { max-width:1152px; margin:auto; }
.examples-header { display:flex; align-items:flex-end; justify-content:space-between; gap:48px; margin-bottom:48px; }
.examples-eyebrow { font:11px 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.13em; margin-bottom:24px; color:#455247; }
.examples-header h2 { font-size:clamp(36px,4.5vw,60px); line-height:1.07; letter-spacing:-.045em; font-weight:750; }
.examples-header h2 span { position:relative; z-index:0; }
.examples-header h2 span::before { content:""; position:absolute; z-index:-1; left:-3px; right:-6px; bottom:3px; height:35%; background:#b2d578; }
.examples-intro { max-width:310px; color:#465348; font-size:17px; line-height:1.6; margin-bottom:4px; }
.example-row { display:grid; grid-template-columns:60px 1.25fr 1fr; gap:32px; padding:32px 0; border-top:1px solid #b7c1b3; }
.example-number { font:14px 'JetBrains Mono',monospace; color:#53624c; padding-top:4px; }
.example-category { font:10px 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:#465b36; margin-bottom:12px; }
#projects .example-problem h3 { color:#101b2c; font-size:clamp(23px,2.3vw,30px); line-height:1.2; letter-spacing:-.025em; font-weight:700; margin:0 0 14px; }
.example-problem > p:last-child { color:#4b584f; font-size:15px; line-height:1.6; max-width:400px; }
.example-approach { align-self:center; padding:4px 0 4px 28px; border-left:2px solid #98b969; }
.example-label { display:flex; align-items:center; gap:9px; color:#23341b; font-size:12px; font-weight:700; margin-bottom:10px; }
.example-label svg { width:17px; height:17px; }
.example-approach > p:nth-child(2) { font-size:16px; line-height:1.6; color:#25382e; }
.example-detail { display:block; margin-top:16px; font:10px 'JetBrains Mono',monospace; color:#536149; }
.examples-footer { border-top:1px solid #b7c1b3; padding-top:32px; margin-top:4px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.examples-footer > p { font-size:22px; font-weight:650; letter-spacing:-.02em; }
.examples-footer a { display:inline-flex; align-items:center; justify-content:center; gap:22px; padding:17px 22px; background:#101b2c; color:#edf2e8; border-radius:6px; font-size:14px; font-weight:650; transition:background .2s,color .2s; }
.examples-footer a svg { width:19px; height:19px; transition:transform .2s; }
.examples-footer a:hover { background:#243a22; }
.examples-footer a:hover svg { transform:translate(2px,-2px); }
.examples-footer a:focus-visible { outline:3px solid #4e702a; outline-offset:4px; }
@media(max-width:767px) {
 #projects.examples-section { padding:56px 24px 40px; }
 .examples-header { display:block; margin-bottom:32px; }
 .examples-eyebrow { font-size:9px; margin-bottom:20px; }
 .examples-intro { margin-top:24px; font-size:15px; max-width:360px; }
 .example-row { grid-template-columns:28px minmax(0,1fr); gap:0 12px; padding:28px 0; }
 .example-number { font-size:11px; }
 .example-category { font-size:9px; }
 #projects .example-problem h3 { font-size:24px; }
 .example-problem h3 br { display:none; }
 .example-approach { grid-column:2; margin-top:22px; padding-left:16px; }
 .example-approach > p:nth-child(2) { font-size:15px; }
 .examples-footer { align-items:flex-start; flex-direction:column; gap:18px; padding-top:26px; }
 .examples-footer a { width:100%; }
}

#about .font-mono.mb-4 { color:#90a0b5; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }


#hero {padding-top:144px;padding-bottom:64px}
#hero > .relative {width:100%}
#hero .hero-eyebrow {font:500 13px/1.5 Inter,sans-serif;letter-spacing:.055em;color:#b9d68f;margin-bottom:24px}
@media(max-width:767px){
 #hero {padding-top:120px;padding-bottom:48px}
 #hero .hero-eyebrow {font-size:12px;letter-spacing:.035em;margin-bottom:22px}
}