/* Budhhas Tek — site.css (v11 clean rebuild) */
:root{color-scheme:dark;--bg:#0e0d0b;--panel:#161410;--soft:#211d16;--text:#f4efe5;--muted:#ada595;--line:#2d281f;--gold:#d9ae66;--button:#d9ae66;--ink:#17130c;--header:rgba(14,13,11,.78);--shadow:0 24px 60px rgba(0,0,0,.5);--badge:#f6f0e3;--hbg:linear-gradient(135deg,rgba(38,32,22,.94),rgba(22,19,14,.94));--hline:rgba(217,174,102,.28);--hshadow:0 14px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,236,200,.07);--orb1:#c8964a;--orb2:#8a5a2a;--orb-o:.17;
--serif:"Playfair Display",Georgia,"Times New Roman",serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--ease:cubic-bezier(.2,.7,.2,1);--r:16px;--space:clamp(40px,5vw,68px);--gutter:clamp(20px,4vw,32px);--hh:104px}
:root[data-theme=light]{color-scheme:light;--bg:#f8f5ef;--panel:#fff;--soft:#f0ebe1;--text:#1b2430;--muted:#59636f;--line:#e0d9ca;--gold:#8a5a1a;--header:rgba(248,245,239,.86);--shadow:0 24px 60px rgba(60,45,20,.12);--badge:#fff;--hbg:linear-gradient(135deg,rgba(255,252,245,.96),rgba(240,228,203,.96));--hline:rgba(138,90,26,.30);--hshadow:0 12px 34px rgba(120,86,30,.18),inset 0 1px 0 #fff;--orb1:#e0b46c;--orb2:#c98f4a;--orb-o:.28}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
h1,h2,h3,h4,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{width:min(1200px,100% - 2*var(--gutter));margin-inline:auto}
.section{padding-block:var(--space)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:8px;z-index:100;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.ui-icon{width:20px;height:20px;flex:none}
/* Type */
h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;line-height:1.08}
h1{font-size:clamp(2.6rem,5.4vw,4.5rem)}
h2{font-size:clamp(2rem,3.6vw,3.1rem)}
h1 em,h2 em{color:var(--gold);font-style:italic}
h3{font-size:1.15rem;font-weight:600;line-height:1.3}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--gold);font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
/* Header */
header{position:sticky;top:12px;z-index:50;isolation:isolate;height:78px;width:min(1200px,100% - 2*var(--gutter));margin:12px auto 0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 14px 0 14px;background:var(--hbg);border:1px solid var(--hline);border-radius:22px;box-shadow:var(--hshadow);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);transition:box-shadow .35s,border-color .35s}
header.scrolled{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}header::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background-image:radial-gradient(color-mix(in srgb,var(--gold) 55%,transparent) 1px,transparent 1.4px);background-size:14px 14px;opacity:.28;-webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 100%);mask-image:linear-gradient(100deg,transparent 35%,#000 100%)}header::after{content:"";position:absolute;left:12%;right:12%;bottom:-1px;height:1px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand{gap:14px}.brand-mark{height:62px;width:auto;padding:5px 7px;background:var(--badge);border-radius:14px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);box-shadow:0 4px 16px rgba(0,0,0,.22);transition:transform .4s var(--ease),box-shadow .4s}.brand:hover .brand-mark{transform:translateY(-1px) scale(1.03);box-shadow:0 8px 24px rgba(217,174,102,.3)}
.brand-name{font:600 1.4rem/1.1 var(--serif);letter-spacing:.005em}
.brand-name small{display:block;margin-top:4px;font:600 .6rem/1 var(--sans);letter-spacing:.3em;color:var(--gold)}
nav{display:flex;align-items:center;gap:6px;margin-left:auto}
nav a{position:relative;padding:8px 14px;font-size:.92rem;font-weight:500;color:var(--muted);transition:color .25s}
nav a:not(.nav-contact)::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
nav a:hover,nav a.active{color:var(--text)}
nav a:hover::after,nav a.active::after{transform:scaleX(1)}
nav .nav-contact{margin-left:10px;background:color-mix(in srgb,var(--gold) 10%,transparent);padding:9px 20px;border:1px solid var(--gold);border-radius:999px;color:var(--text);transition:background .25s,color .25s}
nav .nav-contact:hover{background:var(--gold);color:var(--ink)}
.header-actions{display:flex;align-items:center;gap:10px}
.theme-toggle,.menu-toggle{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;background:transparent;border:1px solid var(--line);border-radius:999px;font-size:.84rem;font-weight:500;transition:border-color .25s,background .25s}
.theme-toggle:hover,.menu-toggle:hover{border-color:var(--gold)}
.menu-toggle{display:none}
/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;background:var(--button);color:var(--ink);border:0;border-radius:999px;font-weight:600;font-size:.95rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s}
.button:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(225,185,117,.28);filter:brightness(1.05)}
.button::after{content:"→";transition:transform .3s var(--ease)}
.button:hover::after{transform:translateX(4px)}
.prototype-search .button::after{display:none}
.text-link{position:relative;font-weight:500;padding-block:4px}
.text-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform-origin:right;transition:transform .35s var(--ease)}
.text-link:hover::after{transform:scaleX(.35)}
/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(20px,3vw,40px) var(--space)}
.intro{margin-top:20px;max-width:46ch;color:var(--muted);font-size:1.1rem}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:28px}
.hero-location{margin-top:32px;color:var(--muted);font-size:.85rem;letter-spacing:.04em}
.hero-location span{color:var(--gold);margin-inline:6px}
.technology-panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.panel-bar{display:flex;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid var(--line);font:500 .68rem var(--mono);letter-spacing:.14em;color:var(--muted)}
.code-symbol{color:var(--gold);font-size:.9rem}
.panel-label{margin-left:auto;color:var(--gold)}
.system-content{padding:24px}
.system-content h2{font-size:1.35rem;margin-bottom:18px}
.tech-network{position:relative;aspect-ratio:16/10;background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tech-network canvas{position:absolute;inset:0;width:100%;height:100%}
.tech-static{position:absolute;inset:0;display:grid;place-content:center;gap:6px;text-align:center;font:600 2.2rem var(--serif);color:var(--gold)}
.tech-static small{font:500 .65rem var(--mono);letter-spacing:.15em;color:var(--muted)}
.tech-network.is-ready .tech-static{display:none}
.tech-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font:500 .66rem var(--mono);letter-spacing:.14em;color:var(--muted)}
.tech-caption button,.motion-toggle{background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font:500 .74rem var(--sans);color:var(--muted);transition:border-color .25s,color .25s}
.tech-caption button:hover,.motion-toggle:hover{border-color:var(--gold);color:var(--text)}
button:disabled{opacity:.55;cursor:default}
/* Section heads */
.section-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,5vw,64px);align-items:end;margin-bottom:clamp(24px,3vw,36px)}
.section-head>p{color:var(--muted);max-width:44ch;justify-self:end}
/* Services */
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.service-card{display:flex;flex-direction:column;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease)}
.service-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 55%,var(--line));box-shadow:var(--shadow)}
.service-card-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font:500 .78rem var(--mono)}
.service-glyph{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--soft);color:var(--gold);transition:background .3s,color .3s}
.service-glyph .ui-icon{width:22px;height:22px}
.service-card:hover .service-glyph{background:var(--gold);color:var(--ink)}
.service-card h3{margin:18px 0 8px}
.service-card>p{color:var(--muted);font-size:.95rem}
details{margin-top:auto;padding-top:18px}
details>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line);color:var(--gold);font-size:.9rem;font-weight:600;cursor:pointer;list-style:none}
details>summary::-webkit-details-marker{display:none}
.expand{position:relative;width:14px;height:14px;flex:none}
.expand::before,.expand::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .35s var(--ease)}
.expand::after{transform:rotate(90deg)}
details[open] .expand::after{transform:rotate(0)}
.service-detail{overflow:hidden;padding-top:20px}
.service-detail h4{margin:18px 0 8px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.service-detail h4:first-child{margin-top:0}
.service-detail p,.service-detail li{color:var(--muted);font-size:.9rem}
.service-detail li{position:relative;padding:3px 0 3px 20px}
.service-detail li::before{content:"";position:absolute;left:2px;top:.85em;width:8px;height:1px;background:var(--gold)}
.service-link{display:inline-flex;gap:8px;margin-top:20px;color:var(--text);font-weight:600;font-size:.9rem;border-bottom:1px solid var(--gold);padding-bottom:2px}
.service-link::after{content:"→";transition:transform .3s var(--ease)}
.service-link:hover::after{transform:translateX(4px)}
/* Prototypes */
.prototype-section{background:color-mix(in srgb,var(--panel) 62%,transparent);border-block:1px solid var(--line)}
.prototype-shell{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,3vw,32px)}
.catalogue-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.catalogue-toolbar span{color:var(--muted);font:500 .78rem var(--mono)}
.prototype-search{display:flex;gap:12px}
.prototype-search input{flex:1;min-width:0;height:52px;padding:0 20px;background:var(--panel);border:1px solid var(--line);border-radius:999px;transition:border-color .25s,box-shadow .25s}
.prototype-search input::placeholder{color:var(--muted)}
.prototype-search input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent)}
.empty-catalogue{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:clamp(24px,3.5vw,36px) 16px 8px}
.empty-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--soft);color:var(--gold);margin-bottom:6px}
.empty-catalogue p{max-width:46ch;color:var(--muted)}
.reset-search{margin-top:8px;background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 18px;transition:border-color .25s}
.reset-search:hover{border-color:var(--gold)}
.result-enter{animation:rise .5s var(--ease)}
/* Work */
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.project{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:border-color .3s,box-shadow .4s var(--ease)}
.project:hover{border-color:color-mix(in srgb,var(--gold) 50%,var(--line));box-shadow:var(--shadow)}
.project-cover{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;aspect-ratio:16/9;padding:clamp(20px,3vw,32px);color:#f3efe6;overflow:hidden;isolation:isolate}
.project-cover::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 85% 0%,rgba(225,185,117,.22),transparent 55%);transition:transform .8s var(--ease)}
.project:hover .project-cover::before{transform:scale(1.15)}
.springs{background:linear-gradient(135deg,#25272b,#121315)}
.ewon-cover{background:linear-gradient(135deg,#392a1b,#17110b)}
.cover-top{display:flex;align-items:center;gap:10px;font:500 .66rem var(--mono);letter-spacing:.14em;color:#d9b97f}
.project-cover strong{font:500 clamp(2.2rem,4.5vw,3.4rem)/1 var(--serif);color:#f3efe6}
.project-cover strong span{display:block;margin-top:10px;font:600 .72rem var(--sans);letter-spacing:.4em;color:#d9b97f}
.cover-bottom{font-size:.9rem;color:#c9c2b3}
.project-info{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:22px 24px 0}
.project-type{margin-bottom:6px;color:var(--gold);font-size:.68rem;font-weight:600;letter-spacing:.16em}
.project-info>a{flex:none;color:var(--gold);font-weight:600;font-size:.9rem;border-bottom:1px solid currentColor}
.project-info>a::after{content:" ↗"}
.project>p{padding:12px 24px 0;color:var(--muted);font-size:.95rem}
.project-scope{margin:18px 24px 0;padding-top:16px;border-top:1px solid var(--line)}
.project-scope strong{display:block;margin-bottom:8px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.project-scope li{position:relative;padding:3px 0 3px 20px;color:var(--muted);font-size:.9rem}
.project-scope li::before{content:"";position:absolute;left:2px;top:.85em;width:8px;height:1px;background:var(--gold)}
.tags{display:flex;flex-wrap:wrap;gap:8px;padding:16px 24px 24px;margin-top:auto}
.tags span,.stack-strip div{padding:5px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.76rem}
.stack-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.stack-strip>span{margin-right:10px;color:var(--gold);font-size:.7rem;font-weight:600;letter-spacing:.16em}
.stack-strip div{font-family:var(--mono)}
/* About */
.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,80px);align-items:center}
.about-logo{display:grid;place-items:center;padding:clamp(24px,3.5vw,40px);background:radial-gradient(circle at 50% 30%,#fffdf8,#f1e9d8);border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));border-radius:24px;box-shadow:var(--shadow)}
.about-logo{gap:20px}.about-logo img{width:min(100%,300px);height:auto}.about-logo-name{text-align:center;font:600 1.6rem/1.1 var(--serif);color:#2a2116}.about-logo-name small{display:block;margin-top:8px;font:600 .66rem var(--sans);letter-spacing:.32em;color:#8a5a1a}
.about h2{margin-bottom:18px}
.about p+p{margin-top:12px}
.about p{color:var(--muted);max-width:58ch}
.about-values{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.about-values span{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;font-size:.85rem}
.about-values .ui-icon{width:16px;height:16px;color:var(--gold)}
/* Process */
.process{border-top:1px solid var(--line)}
.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.process-grid article{position:relative;padding-top:22px;border-top:1px solid var(--line)}
.process-grid article::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:2px;background:var(--gold);transition:width .6s var(--ease)}
.process-grid article:hover::before{width:100%}
.process-symbol{display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:12px;background:var(--soft);color:var(--gold)}
.process-grid article>span{display:block;margin-bottom:8px;color:var(--gold);font:500 .72rem var(--mono);letter-spacing:.14em}
.process-grid h3{margin-bottom:10px}
.process-grid p{color:var(--muted);font-size:.95rem}
/* Contact */
.contact-section{background:color-mix(in srgb,var(--panel) 62%,transparent);border-top:1px solid var(--line)}
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,80px);align-items:center;padding-block:var(--space)}
.contact h2{margin-bottom:16px}
.contact>div:first-child>p:not(.eyebrow){max-width:48ch;margin-bottom:26px;color:var(--muted)}
.contact-methods{display:grid;gap:12px}
.contact-methods>*{display:block;padding:16px 20px;background:var(--bg);border:1px solid var(--line);border-radius:14px;transition:border-color .3s,transform .35s var(--ease)}
.contact-methods a:hover{border-color:var(--gold);transform:translateX(4px)}
.contact-methods span{display:flex;align-items:center;gap:10px;color:var(--gold);font-size:.68rem;font-weight:600;letter-spacing:.16em}
.contact-methods .ui-icon{width:16px;height:16px}
.contact-methods strong{display:block;margin-top:8px;font-size:1.1rem;overflow-wrap:anywhere}
.contact-methods small{color:var(--muted);font-size:.85rem}
/* Footer */
footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-block:24px}
.footer-brand{display:flex;align-items:center;gap:12px;font:600 1.1rem var(--serif)}
.footer-brand img{height:44px;width:auto;padding:3px 5px;background:var(--badge);border-radius:9px}
.footer-brand span{margin-left:2px;font:600 .6rem var(--sans);letter-spacing:.28em;color:var(--gold)}
footer>p{color:var(--muted);font-size:.85rem}
footer>a:last-child{color:var(--muted);font-size:.85rem;transition:color .25s}
footer>a:last-child:hover{color:var(--gold)}
.whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;align-items:center;gap:8px;height:48px;padding:0 20px;background:#1fa855;color:#fff;border-radius:999px;font-size:.88rem;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .3s var(--ease),box-shadow .3s}
.whatsapp-float:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(31,168,85,.4)}
/* Motion */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
html.motion-ready .hero-copy>*{animation:rise .9s var(--ease) both;animation-delay:calc(var(--i,0)*90ms)}
html.motion-ready .technology-panel{animation:rise 1s var(--ease) .25s both}
html.motion-ready .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}
html.motion-ready .rv.in{opacity:1;transform:none}
html.motion-off *,html.motion-off *::before,html.motion-off *::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
html.motion-off{scroll-behavior:auto}
/* Responsive */
@media(max-width:1000px){
 .menu-toggle{display:inline-flex}
 nav{position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px 20px 20px;background:var(--panel);border:1px solid var(--hline);border-radius:20px;box-shadow:var(--hshadow);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .3s var(--ease),visibility .3s}
 nav.open{opacity:1;visibility:visible;transform:none}
 nav a{padding:14px 4px;border-bottom:1px solid var(--line);font-size:1rem}
 nav a::after{display:none}
 nav .nav-contact{margin:16px 0 0;text-align:center;border:1px solid var(--gold)}
 .hero,.about,.contact,.section-head{grid-template-columns:minmax(0,1fr)}
 .section-head>p{justify-self:start}
 .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .about-logo{max-width:420px}
}
@media(max-width:700px){
 :root{--hh:92px}header{height:68px;border-radius:18px}
 .brand-mark{height:52px}.brand-name{font-size:1.15rem}
 .theme-toggle #theme-label{display:none}.theme-toggle{padding:0 12px}
 .service-grid,.projects,.process-grid{grid-template-columns:minmax(0,1fr)}
 .prototype-search{flex-direction:column}
 .prototype-search .button{width:100%}
 .project-info{flex-direction:column;align-items:flex-start}
 .whatsapp-float{padding:0;width:48px;justify-content:center}.whatsapp-float span{display:none}
 footer{padding-bottom:88px;flex-direction:column;align-items:flex-start}
}
@media(max-width:380px){header{gap:10px;padding:0 10px}.brand{gap:8px}.brand-mark{height:46px;padding:3px 5px;border-radius:11px}.brand-name{font-size:1rem}.brand-name small{letter-spacing:.18em;font-size:.55rem}.header-actions{gap:6px}.theme-toggle,.menu-toggle{padding:0 12px;height:38px}}

/* Ambient background */
.bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg-fx::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--gold) 38%,transparent) 1px,transparent 1.3px);background-size:30px 30px;opacity:.38;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 25%,#000 10%,transparent 78%);mask-image:radial-gradient(ellipse 80% 70% at 50% 25%,#000 10%,transparent 78%)}
.bg-fx i{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--orb-o);will-change:transform}
.bg-fx i:nth-child(1){width:48vmax;height:48vmax;left:-14vmax;top:-18vmax;background:var(--orb1);animation:drift1 26s ease-in-out infinite alternate}
.bg-fx i:nth-child(2){width:40vmax;height:40vmax;right:-16vmax;top:30vh;background:var(--orb2);animation:drift2 32s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(14vmax,10vmax,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-12vmax,-8vmax,0) scale(1.1)}}
@media(max-width:700px){.bg-fx i{filter:blur(70px)}.bg-fx::before{background-size:26px 26px}}

/* ===== v12: header identity, white logo badge, themed WhatsApp, spacing, new components ===== */
:root{--space:clamp(56px,7vw,96px);--gutter:clamp(18px,4vw,32px);
--hd-bg:linear-gradient(135deg,#ecc983,#cfa05a 55%,#b88838);--hd-panel:#dcb26c;--hd-text:#17130c;--hd-muted:rgba(23,19,12,.76);--hd-line:rgba(23,19,12,.26);--hd-accent:#5c3d0e;--hd-btn:#17130c;--hd-btn-text:#f2d49b;--hd-shadow:0 16px 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.45)}
:root[data-theme=light]{--hd-bg:linear-gradient(135deg,#2e2418,#18120a);--hd-panel:#1f1810;--hd-text:#f7f0e1;--hd-muted:rgba(247,240,225,.78);--hd-line:rgba(217,174,102,.38);--hd-accent:#e4bd78;--hd-btn:#d9ae66;--hd-btn-text:#17130c;--hd-shadow:0 16px 40px rgba(46,32,12,.38),inset 0 1px 0 rgba(255,236,200,.12)}

/* Header */
header{background:var(--hd-bg);border-color:var(--hd-line);box-shadow:var(--hd-shadow);color:var(--hd-text)}
header.scrolled{border-color:var(--hd-text)}
header::before{background-image:radial-gradient(var(--hd-line) 1px,transparent 1.4px);opacity:.6}
header::after{display:none}
header :focus-visible{outline-color:var(--hd-text)}
.brand-mark,.footer-brand img{background:#fff;border-color:var(--hd-line)}
.brand-name small,.footer-brand span{color:var(--hd-accent)}
.footer-brand span{color:var(--gold)}
nav a{color:var(--hd-muted)}
nav a:hover,nav a.active{color:var(--hd-text)}
nav a:not(.nav-contact)::after{background:var(--hd-text);height:2px;bottom:0}
nav .nav-contact{background:var(--hd-btn);border-color:var(--hd-btn);color:var(--hd-btn-text);font-weight:600}
nav .nav-contact:hover{background:transparent;color:var(--hd-text);border-color:var(--hd-text)}
.theme-toggle,.menu-toggle{border-color:var(--hd-line);color:var(--hd-text)}
.theme-toggle:hover,.menu-toggle:hover{border-color:var(--hd-text);background:color-mix(in srgb,var(--hd-text) 8%,transparent)}
.scroll-progress{position:absolute;left:22px;right:22px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--hd-text);opacity:.55;transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}

/* WhatsApp, in the header palette */
.whatsapp-float{height:54px;padding:0 20px 0 8px;gap:10px;background:var(--hd-bg);color:var(--hd-text);border:1px solid var(--hd-line);box-shadow:var(--hd-shadow);isolation:isolate}
.whatsapp-float svg{width:36px;height:36px;padding:8px;border-radius:50%;background:var(--hd-btn);color:var(--hd-btn-text)}
.whatsapp-float:hover{box-shadow:0 14px 34px rgba(217,174,102,.35)}
.whatsapp-float::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;border:2px solid var(--gold);opacity:0;animation:wa-ring 2.6s var(--ease) 1.2s 3}
@keyframes wa-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.28,1.5)}}

/* Spacing rhythm */
.hero{padding-block:clamp(28px,4vw,56px) var(--space)}
.section-head{margin-bottom:clamp(28px,4vw,48px)}
.service-grid{gap:clamp(16px,2vw,24px)}
.service-card{padding:clamp(20px,2.4vw,28px)}
.projects{gap:clamp(16px,2.4vw,28px)}
.hero-actions{gap:16px 28px;margin-top:32px}
.process-grid{gap:clamp(24px,3vw,44px)}

/* Highlights band */
.highlights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:var(--space);background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.highlights>div{padding:clamp(18px,2.6vw,30px);border-left:1px solid var(--line)}
.highlights>div:first-child{border-left:0}
.highlights strong{display:block;font:500 clamp(1.5rem,2.6vw,2.1rem)/1.1 var(--serif);color:var(--gold)}
.highlights span{display:block;margin-top:8px;color:var(--muted);font-size:.88rem;line-height:1.45}

/* Why us */
.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.why-card{padding:clamp(20px,2.4vw,28px);background:linear-gradient(160deg,var(--panel),var(--soft));border:1px solid var(--line);border-radius:var(--r)}
.why-card .service-glyph{margin-bottom:18px}
.why-card p{margin-top:8px;color:var(--muted);font-size:.93rem}

/* FAQ */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,80px);align-items:start}
.faq-wrap>div:first-child>p:not(.eyebrow){margin:16px 0 24px;max-width:40ch;color:var(--muted)}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{margin:0;padding:0;border-bottom:1px solid var(--line)}
.faq-list summary{margin:0;padding:20px 4px;border:0;color:var(--text);font-size:1.02rem;font-weight:600}
.faq-list summary .expand{color:var(--gold)}
.faq-list details>p{padding:0 40px 22px 4px;color:var(--muted);font-size:.95rem}

@media(max-width:1000px){
 nav{background:var(--hd-panel);border-color:var(--hd-line)}
 nav a{border-bottom-color:var(--hd-line)}
 .highlights,.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .highlights>div:nth-child(3){border-left:0}
 .highlights>div:nth-child(n+3){border-top:1px solid var(--line)}
 .faq-wrap{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
 .why-grid{grid-template-columns:minmax(0,1fr)}
 .whatsapp-float{width:54px;padding:0;justify-content:center}
 .whatsapp-float svg{width:40px;height:40px;padding:10px}
 .prototype-search input{padding:0 16px;font-size:.9rem}
 .hero-actions .button{width:100%}
 .scroll-progress{left:16px;right:16px}
}
@media(max-width:380px){.highlights{grid-template-columns:minmax(0,1fr)}.highlights>div{border-left:0;border-top:1px solid var(--line)}.highlights>div:first-child{border-top:0}}

/* ===== v13: bigger plain header, softer light mode, refined type ===== */
:root{--hh:128px;--mono:var(--sans)}
:root[data-theme=light]{--hd-bg:linear-gradient(135deg,#f4e0b4,#e3c283);--hd-panel:#efd6a0;--hd-text:#1c1509;--hd-muted:rgba(28,21,9,.78);--hd-line:rgba(28,21,9,.22);--hd-accent:#6b4510;--hd-btn:#1c1509;--hd-btn-text:#f4dba5;--hd-shadow:0 14px 36px rgba(120,86,30,.22),inset 0 1px 0 rgba(255,255,255,.6)}
header{height:96px;padding:0 20px;top:14px;margin-top:14px;border-radius:26px}
header::before,.scroll-progress{display:none}
.brand{gap:16px}
.brand-mark{height:74px;padding:6px 8px;border-radius:16px}
.brand-name{font-size:1.7rem}
.brand-name small{font-size:.66rem;margin-top:6px}
nav{gap:8px}
nav a{padding:10px 16px;font-size:1rem}
nav .nav-contact{padding:12px 26px}
.theme-toggle,.menu-toggle{height:46px;padding:0 20px;font-size:.92rem}

/* Typography */
body{line-height:1.72;font-feature-settings:"kern","liga";text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--serif);letter-spacing:-.01em}
h3{font-weight:600;font-size:1.3rem}
h2{line-height:1.12}
.eyebrow,.project-type,.cover-top,.stack-strip>span,.service-detail h4,.project-scope strong,.contact-methods span{font-family:var(--sans);letter-spacing:.12em}
.service-card-top,.catalogue-toolbar span,.panel-bar,.tech-caption,.stack-strip div,.process-grid article>span{font-family:var(--sans);letter-spacing:.06em}
.intro,.section-head>p,.about p,.contact p{font-size:1.06rem}

@media(max-width:1000px){:root{--hh:122px}}
@media(max-width:700px){
 :root{--hh:100px}
 header{height:78px;top:10px;margin-top:10px;border-radius:20px;padding:0 12px}
 .brand-mark{height:58px;padding:5px 6px}
 .brand-name{font-size:1.25rem}
 .theme-toggle,.menu-toggle{height:42px}
}
@media(max-width:380px){
 header{padding:0 10px}
 .brand-mark{height:50px}
 .brand-name{font-size:1.08rem}
}

/* ===== v14/v15: tech palette (light brown), wider header, code + grid backgrounds ===== */
:root{--bg:#1b1612;--panel:#241e18;--soft:#2f2720;--text:#f6efe8;--muted:#bfb2a4;--line:#3d332a;--gold:#dbbea6;--button:#dbbea6;--ink:#241810;--shadow:0 24px 60px rgba(0,0,0,.55);--orb1:#b88a6a;--orb2:#9a7152;--orb-o:.2;--grid:rgba(219,190,166,.07);--code:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
:root[data-theme=light]{--bg:#faf5ef;--panel:#fff;--soft:#f1e8de;--text:#33261d;--muted:#706255;--line:#e8dccf;--gold:#9c7152;--button:#9c7152;--ink:#fff;--shadow:0 24px 60px rgba(70,45,25,.12);--orb1:#e0c3ab;--orb2:#d1ac90;--orb-o:.25;--grid:rgba(156,113,82,.07)}
:root,:root[data-theme=light]{--hd-bg:linear-gradient(120deg,#ead7c6,#e0c8b2 60%,#d6baa1);--hd-panel:#e2cbb6;--hd-text:#2a1c12;--hd-muted:rgba(42,28,18,.86);--hd-line:rgba(42,28,18,.26);--hd-accent:#684428;--hd-btn:#2a1c12;--hd-btn-text:#f5e6d6;--hd-shadow:0 10px 30px rgba(60,38,20,.28),inset 0 1px 0 rgba(255,255,255,.4)}

/* Wider layout + header */
.wrap{width:min(1320px,100% - 2*var(--gutter))}
header{width:min(1320px,100% - 2*var(--gutter));padding:0 28px}
nav{gap:12px}
nav a{padding:10px 20px}
.brand:hover .brand-mark{box-shadow:0 8px 24px rgba(42,28,18,.28)}
@media(max-width:1000px){header{padding:0 16px}}
@media(max-width:700px){header{padding:0 12px}}

/* Accent details */
.button:hover{box-shadow:0 10px 28px color-mix(in srgb,var(--gold) 38%,transparent)}
.whatsapp-float:hover{box-shadow:0 14px 34px rgba(90,58,34,.45)}
.eyebrow::before{content:"//";width:auto;height:auto;background:none;font:500 .95rem var(--code);letter-spacing:0}
.springs{background:linear-gradient(135deg,#6a4c39,#2b1e15)}
.ewon-cover{background:linear-gradient(135deg,#7b5a45,#33241a)}
.project-cover::before{background:radial-gradient(circle at 85% 0%,rgba(230,205,184,.28),transparent 55%)}
.cover-top,.project-cover strong span{color:#eed9c6}
.about-logo{background:radial-gradient(circle at 50% 30%,#fff,#f5ece3);border-color:color-mix(in srgb,var(--gold) 35%,var(--line))}
.about-logo-name{color:#33261d}
.about-logo-name small{color:#9c7152}

/* Technical backgrounds: blueprint grid + code */
.bg-fx::before{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px;opacity:1;-webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 20%,#000 15%,transparent 80%);mask-image:radial-gradient(ellipse 90% 75% at 50% 20%,#000 15%,transparent 80%)}
.code-bg{position:absolute;margin:0;font:500 13px/1.85 var(--code);color:var(--gold);opacity:.13;white-space:pre;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.code-bg.a{right:2.5vw;top:130px}
.code-bg.b{left:2.5vw;bottom:5vh;-webkit-mask-image:linear-gradient(0deg,#000 30%,transparent);mask-image:linear-gradient(0deg,#000 30%,transparent)}
.prototype-section,.contact-section{background-color:color-mix(in srgb,var(--panel) 66%,transparent);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:44px 44px}
@media(max-width:1100px){.code-bg{font-size:11px}}
@media(max-width:700px){.code-bg.b{display:none}.code-bg.a{right:12px;top:110px;font-size:10px;opacity:.1}}

/* ===== v15: light-brown theme + full-width header ===== */
header{width:100%;max-width:none;margin:0;top:0;border-radius:0;border-width:0 0 1px 0;padding-inline:max(var(--gutter),calc((100% - 1320px)/2))}
:root{--hh:96px}
@media(max-width:1000px){:root{--hh:96px}}
@media(max-width:700px){
 :root{--hh:78px}
 header{top:0;margin-top:0;border-radius:0;padding-inline:var(--gutter)}
 nav{left:var(--gutter);right:var(--gutter)}
}


/* v17: compact identity, technical project art and accessible service popups */
:root{--hh:88px}
header{height:88px;padding-inline:max(var(--gutter),calc((100% - 1320px)/2))}
.brand{gap:11px}
.brand-mark{height:48px;width:48px;object-fit:contain;padding:4px;border-radius:12px}
.brand-name{font-size:1.22rem}
.brand-name small{font-size:.55rem;letter-spacing:.25em}
nav{gap:4px}
nav a{padding-inline:clamp(10px,1.25vw,17px)}
nav .nav-contact{padding-inline:19px}
@media(max-width:1000px){:root{--hh:88px}header{height:82px}}
@media(max-width:700px){:root{--hh:78px}header{height:76px}.brand-mark{height:43px;width:43px}.brand-name{font-size:1.08rem}.brand-name small{font-size:.5rem}}
@media(max-width:380px){header{height:72px}.brand-mark{height:39px;width:39px}.brand-name{font-size:.98rem}}

/* Turn the pale source-code wallpaper into a quiet technical blueprint. */
.code-bg{font-size:11px;line-height:1.9;letter-spacing:.025em;opacity:.09;text-shadow:0 0 18px color-mix(in srgb,var(--gold) 25%,transparent)}
.code-bg.a{right:3vw;top:118px}
.code-bg.b{left:3vw;bottom:4vh;opacity:.075}
.bg-fx::before{background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 82% 70% at 55% 24%,#000 8%,transparent 76%);mask-image:radial-gradient(ellipse 82% 70% at 55% 24%,#000 8%,transparent 76%)}
.project-cover{background-image:linear-gradient(135deg,rgba(22,18,15,.78),rgba(30,20,14,.96))}
.project-cover::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.52;background-image:linear-gradient(90deg,transparent 49.7%,rgba(238,217,198,.13) 50%,transparent 50.3%),linear-gradient(0deg,transparent 49.7%,rgba(238,217,198,.13) 50%,transparent 50.3%),radial-gradient(circle at 78% 30%,rgba(238,217,198,.8) 0 2px,transparent 3px),radial-gradient(circle at 78% 70%,rgba(238,217,198,.7) 0 2px,transparent 3px),radial-gradient(circle at 22% 70%,rgba(238,217,198,.6) 0 2px,transparent 3px);background-size:36px 36px,36px 36px,auto,auto,auto;mask-image:linear-gradient(110deg,transparent 5%,#000 100%)}
.springs{background-color:#34271e;background-image:linear-gradient(135deg,rgba(72,51,37,.84),rgba(20,21,23,.95))}
.ewon-cover{background-color:#34271e;background-image:linear-gradient(135deg,rgba(95,64,43,.78),rgba(25,18,14,.96))}

.service-card details{padding-top:18px}
.service-card details>summary{border:1px solid var(--line);border-radius:999px;padding:10px 14px;transition:background .2s,border-color .2s,color .2s}
.service-card details>summary:hover{background:var(--soft);border-color:var(--gold)}
.service-dialog{width:min(680px,calc(100% - 32px));max-height:min(82vh,780px);padding:0;border:1px solid color-mix(in srgb,var(--gold) 42%,var(--line));border-radius:24px;background:var(--panel);color:var(--text);box-shadow:0 28px 100px rgba(0,0,0,.45);overflow:auto}
.service-dialog[open]{animation:dialog-in .22s var(--ease)}
.service-dialog::backdrop{background:rgba(16,12,9,.64);backdrop-filter:blur(5px)}
.service-dialog-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px 14px;background:color-mix(in srgb,var(--panel) 94%,transparent);border-bottom:1px solid var(--line)}
.service-dialog-head .eyebrow{margin:0;font-size:.68rem}
.service-dialog-close{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--soft);font-size:1.6rem;line-height:1;color:var(--muted)}
.service-dialog-close:hover{border-color:var(--gold);color:var(--text)}
.service-dialog h2{padding:24px 28px 0;font-size:clamp(1.7rem,4vw,2.25rem)}
.service-dialog-content{padding:8px 28px 30px}
.service-dialog-content .service-detail{overflow:visible;padding-top:6px}
.service-dialog-content .service-detail h4{margin-top:22px}
.service-dialog-content .service-detail p,.service-dialog-content .service-detail li{font-size:1rem;line-height:1.75}
.service-dialog-content .service-detail ul{margin-top:6px}
body.dialog-open{overflow:hidden}
@keyframes dialog-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:700px){.service-dialog{width:calc(100% - 20px);max-height:86vh;border-radius:20px}.service-dialog-head{padding:16px 18px 12px}.service-dialog h2{padding:20px 18px 0}.service-dialog-content{padding:6px 18px 24px}.code-bg.a{opacity:.055}}
@media(prefers-reduced-motion:reduce){.service-dialog[open]{animation:none}}