/* UKI Design — Shared Stylesheet */
/* v1.0 — 2026-04-02 */

*,::before,::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0a0a0a;--bg-elevated:#101010;--bg-card:#0c0c0c;
  --text:#e8e8e8;--text-muted:#888;--text-dim:#555;
  --accent:#FF6B35;--accent-dim:rgba(255,107,53,.5);--accent-glow:rgba(255,107,53,.12);--accent-subtle:rgba(255,107,53,.06);
  --border:#181818;--border-light:#222;
  --font-mono:'SF Mono','Menlo','Monaco','Consolas','Liberation Mono','Courier New',monospace;
  --max-width:800px;--pad:1.25rem;
  --safe-top:env(safe-area-inset-top);--safe-bottom:env(safe-area-inset-bottom);
  --safe-left:env(safe-area-inset-left);--safe-right:env(safe-area-inset-right)
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:13px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---- Layout ---- */
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--pad);padding-left:calc(var(--pad) + var(--safe-left));padding-right:calc(var(--pad) + var(--safe-right))}
main{padding-bottom:3rem}
section{padding:3.5rem 0;border-bottom:1px solid var(--border);position:relative;overflow:hidden}
section:last-child{border-bottom:none}

/* ---- Typography ---- */
h1{font-size:1.4rem;letter-spacing:.08em;text-transform:uppercase;margin:.6rem 0 .4rem;color:var(--text)}
h2{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:1.5rem}
section p,.article-content p{line-height:1.75;margin-bottom:1rem}

h2::before{content:"// "}
h3{font-size:13px;letter-spacing:.05em;color:var(--text);margin-bottom:.6rem}
p{color:var(--text-muted);margin-bottom:.8rem;max-width:600px}
a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--text)}
strong{color:var(--text);font-weight:600}

.subtitle{font-size:11px;color:var(--text-dim);margin-bottom:2rem;letter-spacing:.04em}

/* ---- Header / Terminal ---- */
header{padding:4rem 0 2rem;border-bottom:1px solid var(--border)}
.terminal-header{font-size:11px;color:var(--text-dim);margin-bottom:2rem}
.terminal-header div{margin-bottom:.3rem}
.prompt{color:var(--accent);margin-right:.5rem}
.ascii-logo{color:var(--accent);font-size:11px;line-height:1.1;margin-bottom:1.5rem;white-space:pre}
.cursor{display:inline-block;width:7px;height:13px;background:var(--accent);vertical-align:text-bottom;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ---- Navigation ---- */
nav{display:flex;flex-wrap:wrap;gap:2px;padding:12px 0;justify-content:center;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:100}
nav a{color:var(--text-dim);font-size:11px;letter-spacing:.05em;padding:10px 16px;transition:.2s;border:1px solid transparent}
nav a:hover,nav a:focus{color:var(--accent);border-color:var(--accent-dim);box-shadow:3px 3px 0 rgba(255,107,53,.25);transform:translate(-1px,-1px);text-shadow:0 0 10px var(--accent-glow)}

/* ---- Metodo / Cards ---- */
.method-step{padding:1.2rem 0;border-bottom:1px solid var(--border)}
.method-step:last-child{border-bottom:none}
.step-num{color:var(--accent);font-size:10px;font-weight:700;display:inline-block;width:28px;height:28px;line-height:28px;text-align:center;border:1px solid var(--accent-dim);margin-right:.6rem;vertical-align:middle}
.method-step h3{display:inline;vertical-align:middle}

/* ---- Services ---- */
.services-list{list-style:none}
.services-list li{padding:.8rem 0;border-bottom:1px solid var(--border);color:var(--text-muted);font-size:12px}
.services-list li:last-child{border-bottom:none}
.services-list li::before{content:"\2192";color:var(--accent);margin-right:.6rem;font-size:11px}
.services-list li strong{color:var(--text);font-weight:600}

/* ---- Solutions / Feature Grid ---- */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.feature-card{background:var(--bg-card);border:1px solid var(--border);padding:1.2rem;transition:border-color .3s,box-shadow .3s}
.feature-card:hover{border-color:var(--accent-dim);box-shadow:0 0 20px var(--accent-glow)}
.feature-card h3{font-size:11px;margin-bottom:.4rem}
.feature-card p{font-size:11px;color:var(--text-dim);margin:0}

/* ---- Casi Studio ---- */
.case-card{display:block;background:var(--bg-card);border:1px solid var(--border);padding:1.5rem;margin-bottom:1rem;transition:border-color .3s,transform .2s,box-shadow .3s;text-decoration:none}
.case-card:hover{border-color:var(--accent-dim);transform:translateY(-2px);box-shadow:0 4px 20px var(--accent-glow)}
.case-card .case-tag{font-size:9px;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.4rem}
.case-card h3{font-size:12px;color:var(--text);margin-bottom:.6rem}
.case-card p{font-size:11px;color:var(--text-dim);margin:0}
.case-link{font-size:10px;color:var(--accent);margin-top:.8rem;display:inline-block;letter-spacing:.06em}

/* ---- Gallery / Glitch Slider ---- */
.gallery-container{display:flex;gap:12px;height:420px;overflow:hidden;position:relative}
.gallery-track{flex:1;position:relative;overflow:hidden;border-radius:2px}
.gallery-track img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 1.8s ease,transform 2.2s ease;filter:grayscale(70%) contrast(1.1);border:1px solid var(--border)}
.gallery-track img:hover{filter:grayscale(0%) contrast(1.05);border-color:var(--accent);box-shadow:0 0 24px var(--accent-glow)}
.gallery-track img.active{opacity:1;transform:scale(1)}
.gallery-track img.prev{opacity:0;transform:scale(0.92)}
.gallery-nav{display:flex;justify-content:center;gap:8px;margin-top:16px;align-items:center}
.gallery-indicator{width:6px;height:6px;border:1px solid var(--accent-dim);background:transparent;cursor:pointer;transition:.3s}
.gallery-indicator.left-active{background:var(--accent)}
.gallery-indicator.right-active{border-color:var(--accent);background:var(--accent-dim)}
.gallery-separator{width:1px;height:12px;background:var(--border-light);margin:0 4px}
/* ---- Pixel Buttons ---- */
.pixel-btn{display:inline-block;padding:10px 22px;border:2px solid var(--accent);color:var(--accent);background:transparent;font-family:var(--font-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;position:relative;transition:.2s;cursor:pointer}
.pixel-btn:hover{background:var(--accent);color:var(--bg);box-shadow:4px 4px 0 var(--accent-dim);transform:translate(-2px,-2px)}
.pixel-btn::after{content:"";position:absolute;right:-5px;bottom:-5px;width:100%;height:100%;border:1px solid var(--accent-dim);pointer-events:none}

/* ---- Pixel Decorations ---- */
.px-deco{position:absolute;color:var(--accent-dim);font-family:var(--font-mono);font-size:8px;opacity:.35;pointer-events:none;animation:pixelFloat 6s ease-in-out infinite alternate;letter-spacing:.2em}
.px-cross::before{content:"+"}
.px-dots::before{content:":::"}
.px-arrow::before{content:">>"}
.px-block::before{content:"\25A0\25A0"}
.px-hash::before{content:"#"}
@keyframes pixelFloat{0%{transform:translateY(0)}100%{transform:translateY(-8px)}}

/* ---- Contatti / Form ---- */
.contact-block{display:grid;gap:1rem}
.contact-block div{padding:1rem 0;border-bottom:1px solid var(--border)}
.contact-block div:last-child{border-bottom:none}
.contact-block a{color:var(--accent)}
.contact-label{font-size:10px;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem}
form{margin-top:1.5rem}
label{display:block;font-size:10px;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem}
input,textarea{width:100%;background:var(--bg-elevated);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:12px;padding:.6rem;margin-bottom:1rem;outline:none;transition:border-color .2s}
input:focus,textarea:focus{border-color:var(--accent-dim)}
textarea{min-height:100px;resize:vertical}
button[type="submit"]{background:transparent;border:2px solid var(--accent);color:var(--accent);font-family:var(--font-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;padding:10px 22px;cursor:pointer;transition:.2s;position:relative}
button[type="submit"]:hover{background:var(--accent);color:var(--bg);box-shadow:4px 4px 0 var(--accent-dim);transform:translate(-2px,-2px)}
button[type="submit"]::after{content:"";position:absolute;right:-5px;bottom:-5px;width:100%;height:100%;border:1px solid var(--accent-dim);pointer-events:none}

/* ---- Footer ---- */
footer{padding:2rem 0;text-align:center;font-size:10px;color:var(--text-dim);letter-spacing:.08em;border-top:1px solid var(--border)}

/* ---- Scroll Reveal ---- */
section h1,section .subtitle,section p,section h2,
.services-list li,.contact-block div,.method-step,.feature-card,.case-card,
.page-header h1,.page-header .page-subtitle,.article-header h1,.article-header .article-subtitle,
.article-content p,.article-content h2,.highlight-box,.cta-box{
  opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}

section.visible h1{transition-delay:0s}
section.visible .subtitle,section.visible h2{transition-delay:.12s}
section.visible p:nth-of-type(1){transition-delay:.22s}
section.visible p:nth-of-type(2){transition-delay:.32s}
section.visible .services-list li:nth-child(1){transition-delay:.1s}
section.visible .services-list li:nth-child(2){transition-delay:.18s}
section.visible .services-list li:nth-child(3){transition-delay:.26s}
section.visible .services-list li:nth-child(4){transition-delay:.34s}
section.visible .services-list li:nth-child(5){transition-delay:.42s}
section.visible .method-step:nth-child(1){transition-delay:.1s}
section.visible .method-step:nth-child(2){transition-delay:.22s}
section.visible .method-step:nth-child(3){transition-delay:.34s}
section.visible .feature-card:nth-child(1){transition-delay:.1s}
section.visible .feature-card:nth-child(2){transition-delay:.2s}
section.visible .feature-card:nth-child(3){transition-delay:.3s}
section.visible .feature-card:nth-child(4){transition-delay:.4s}
section.visible .case-card:nth-child(1){transition-delay:.1s}
section.visible .case-card:nth-child(2){transition-delay:.25s}
section.visible .contact-block div:nth-child(1){transition-delay:.1s}
section.visible .contact-block div:nth-child(2){transition-delay:.2s}
section.visible .contact-block div:nth-child(3){transition-delay:.3s}

.visible h1,.visible h2,.visible .subtitle,.visible .page-subtitle,.visible .article-subtitle,
.visible p,.visible .services-list li,.visible .contact-block div,
.visible .method-step,.visible .feature-card,.visible .case-card,
.visible .highlight-box,.visible .cta-box,.visible .article-content p,
.visible .article-content h2{opacity:1;transform:translateY(0)}

/* Gallery override - always visible */
#gallery h2,#gallery .subtitle,#gallery p{opacity:1!important;transform:none!important}

/* ---- Blog Styles ---- */
.blog-header{padding:2rem 0 1rem;border-bottom:1px solid var(--border)}
.blog-nav{margin-bottom:1rem}
.blog-nav a{margin-right:1rem}
.blog-title{font-size:1.1rem;letter-spacing:.06em}
.filter-bar{display:flex;flex-wrap:wrap;gap:6px;margin:1.5rem 0}
.filter-btn{background:transparent;border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:10px;padding:6px 14px;cursor:pointer;letter-spacing:.06em;transition:.2s}
.filter-btn:hover,.filter-btn.active{border-color:var(--accent);color:var(--accent)}
.article-card{display:block;padding:1.5rem 0;border-bottom:1px solid var(--border);text-decoration:none;transition:background .2s}
.article-card:hover{background:var(--bg-elevated)}
.article-meta{font-size:9px;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem}
.article-card h2{font-size:13px;color:var(--text);margin-bottom:.4rem;letter-spacing:.03em}
.article-card h2::before{content:""}
.article-card p{font-size:11px;color:var(--text-muted);margin:0}
.read-more{font-size:10px;color:var(--accent);margin-top:.6rem;display:inline-block}

/* Site Logo (compact - inner pages) */
.site-logo{text-align:center;padding:28px 0 10px;border-bottom:1px solid var(--border)}
.site-logo a{text-decoration:none;color:var(--accent);font-family:var(--font-mono);font-size:22px;font-weight:700;letter-spacing:.15em}
.site-logo span{display:block;font-size:8px;letter-spacing:.4em;color:var(--accent-dim);margin-top:2px}

/* Blog Article */
.article-header{padding:2rem 0 1.5rem;border-bottom:1px solid var(--border)}
.article-header h1{font-size:1.25rem;line-height:1.5;text-transform:none;letter-spacing:.02em;margin-bottom:.6rem}
.article-body{padding:2rem 0}
.article-body h2{font-size:13px;color:var(--text);margin:2rem 0 .8rem;letter-spacing:.04em}
.article-body h2::before{content:"// "}
.article-body p{font-size:13px;line-height:1.75;margin-bottom:1.2rem}
.article-body ul,.article-body ol{margin:1rem 0;padding-left:1.5rem;color:var(--text-muted)}
.article-body li{margin-bottom:.5rem;font-size:12px}
.article-body blockquote{border-left:2px solid var(--accent);padding-left:1rem;margin:1.5rem 0;color:var(--text-muted);font-style:italic}
.article-body code{background:var(--bg-elevated);padding:.15rem .4rem;font-size:12px;border:1px solid var(--border)}
.article-back{font-size:11px;color:var(--text-dim);margin-bottom:1rem;display:inline-block}
.article-back:hover{color:var(--accent)}

/* ---- Responsive ---- */
@media(max-width:600px){
  :root{--pad:1rem;--max-width:100%}
  body{font-size:12px}
  h1{font-size:1.25rem}
  .ascii-logo{font-size:9px}
  .feature-grid{grid-template-columns:1fr;gap:6px}
  nav{gap:4px;font-size:9px}
  nav a{padding:8px 12px}
  .gallery-container{flex-direction:column;height:auto;gap:8px}
  .gallery-track{height:280px}
}

@media(max-width:380px){
  h1{font-size:1.1rem}
  .subtitle{font-size:9px}
  nav a{padding:6px 8px;font-size:8px}
}

/* ---- Skip Link ---- */
.skip-link,.sr-only{position:absolute;top:-100px;left:0;background:var(--accent);color:var(--bg);padding:8px 16px;z-index:1000;font-size:11px;transition:top .2s}
.skip-link:focus,.sr-only:focus{top:0}

/* ---- Case CTA (pixel style) ---- */
.case-cta{display:inline-block;padding:8px 18px;border:2px solid var(--accent);color:var(--accent);background:transparent;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;position:relative;transition:.2s;margin-top:.8rem}
.case-cta:hover{background:var(--accent);color:var(--bg);box-shadow:4px 4px 0 var(--accent-dim);transform:translate(-2px,-2px)}
.case-cta::after{content:"";position:absolute;right:-4px;bottom:-4px;width:100%;height:100%;border:1px solid var(--accent-dim);pointer-events:none}

/* ---- Blog Page Specific ---- */
.page-header{margin:1.5rem 0 2rem;border-bottom:1px solid var(--border);padding-bottom:1.5rem}
.back-link{font-size:11px;color:var(--text-dim);border:none;display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1rem}
.back-link:hover{color:var(--accent)}
.page-subtitle{color:var(--text-muted);font-size:12px}
.blog-nav-item{font-size:10px;color:var(--text-dim);padding:4px 10px;border:1px solid var(--border);border-radius:3px;transition:.15s ease}
.blog-nav-item:hover,.blog-nav-item.active{color:var(--accent);border-color:var(--accent);background:var(--accent-subtle)}
.articles-grid{display:flex;flex-direction:column;gap:.75rem}
.article-card-link{display:block;padding:1.25rem;border:none;color:inherit}
.article-tag{color:var(--accent);background:var(--accent-subtle);padding:1px 6px;border-radius:2px}
.article-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:.5rem;line-height:1.4}
.article-title{font-size:13px}
.article-excerpt{font-size:12px;color:var(--text-muted);line-height:1.6;margin-bottom:.5rem}
.article-excerpt{font-size:11px}
.article-cta{font-size:11px;color:var(--accent);display:block}

/* ---- Article Page Specific ---- */
.article-subtitle{color:var(--text-muted);font-size:14px;line-height:1.5}
.article-content{margin:2rem 0}
.article-content p{margin-bottom:1.25rem}
.article-content h2{font-size:14px;font-weight:600;color:var(--text);margin:2rem 0 1rem;padding-top:1rem;border-top:1px solid var(--border)}
.article-content h2::before{content:"// ";color:var(--accent)}
.article-content ul,.article-content ol{margin:1rem 0 1.5rem 1.5rem}
.article-content li{margin-bottom:.5rem;color:var(--text-muted)}
.article-content li strong{color:var(--text)}
.highlight-box{background:var(--bg-card);border-left:2px solid var(--accent);padding:1rem;margin:1.5rem 0;font-size:12px}
.highlight-box p{margin:0}
.cta-box{background:var(--bg-elevated);border:1px solid var(--border);border-radius:4px;padding:1.5rem;margin:2rem 0;text-align:center}
.cta-box p{margin-bottom:.75rem;font-size:13px}
.cta-box a{display:inline-block;padding:.6rem 1.5rem;border:1px solid var(--accent);color:var(--accent);font-size:12px;border-radius:3px}
.cta-box a:hover{background:var(--accent);color:var(--bg)}
.article-author{border-top:1px solid var(--border);padding-top:1.5rem;margin-top:2rem;font-size:12px;color:var(--text-muted)}
/* ---- Glitch Hover Effect ---- */
.gallery-track{perspective:600px}
.gallery-track img.active{cursor:pointer}
.glitch-clone{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:10;will-change:transform,clip-path,filter}
@keyframes glitch-scan{0%{background-position:0 0}100%{background-position:0 100%}}