/* Yellow Pengu (YPENG) Brand Layer */
:root {
  --ypeng-bg:#0b0f15;
  --ypeng-bg-alt:#121922;
  --ypeng-panel:#1c2530;
  --ypeng-panel-alt:#243140;
  --ypeng-border:rgba(255,232,150,0.18);
  --ypeng-glow:255,220,70;
  --ypeng-accent:#ffdc46;
  --ypeng-accent-soft:#ffe17a;
  --ypeng-accent-warm:#ffbd00;
  --ypeng-accent-hot:#ff9f1c;
  --ypeng-accent-fade:linear-gradient(90deg,#ffdc46,#ffbd00,#ff9f1c,#ffdc46);
  --ypeng-radius-sm:6px;
  --ypeng-radius:14px;
  --ypeng-radius-lg:28px;
  --ypeng-shadow:0 0 0 1px rgba(var(--ypeng-glow),0.35),0 3px 18px -4px rgba(var(--ypeng-glow),0.25),0 6px 42px -10px rgba(var(--ypeng-glow),0.15);
  --ypeng-font-display:'Inter',system-ui,sans-serif;
  --noise-data:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}

html,body {background:radial-gradient(at 18% 22%,#1d242d,#0d1117 55%),radial-gradient(at 82% 78%,#1a2027,#0d1117 60%);background-attachment:fixed;color:#e5e7eb;}
body::before{content:"";position:fixed;inset:0;background:linear-gradient(125deg,rgba(var(--ypeng-glow),0.06),transparent 60%);pointer-events:none;mix-blend-mode:overlay;}
body::after{content:"";position:fixed;inset:0;background:var(--noise-data);background-size:140px;pointer-events:none;mix-blend-mode:overlay;opacity:.35;}

.hero-glow{position:absolute;inset:-8rem -10rem -6rem;pointer-events:none;background:radial-gradient(circle at 30% 35%,rgba(var(--ypeng-glow),0.18),transparent 55%),radial-gradient(circle at 80% 70%,rgba(var(--ypeng-glow),0.12),transparent 60%);filter:blur(70px);opacity:.9;}

.brand-gradient-text{background:var(--ypeng-accent-fade);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 8s linear infinite;}
@keyframes shine{0%{background-position:0 50%}100%{background-position:300% 50%}}

/* Panels */
.panel{position:relative;background:linear-gradient(145deg,rgba(255,255,255,0.05),rgba(255,255,255,0.015));border:1px solid var(--ypeng-border);border-radius:var(--ypeng-radius);padding:1.4rem;backdrop-filter:blur(26px) saturate(150%);overflow:hidden;}
.panel:before{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(var(--ypeng-glow),0.12),transparent 60%);opacity:.4;pointer-events:none;}
.panel-outline{border:1px solid rgba(var(--ypeng-glow),0.28);}

/* Fancy card hover */
.hover-card{transition:transform .45s cubic-bezier(.16,.68,.48,1), box-shadow .4s;}
.hover-card:hover{transform:translateY(-6px);box-shadow:0 8px 40px -10px rgba(var(--ypeng-glow),0.35),0 2px 18px -4px rgba(var(--ypeng-glow),0.45);} 

/* Buttons */
.btn-ypeng{--btn-bg:var(--ypeng-accent);--btn-bg2:var(--ypeng-accent-hot);display:inline-flex;align-items:center;gap:.55rem;border:none;cursor:pointer;font-weight:600;font-size:.85rem;padding:.75rem 1.4rem;border-radius:var(--ypeng-radius-sm);background:linear-gradient(96deg,var(--btn-bg),var(--btn-bg2) 90%);color:#161b22;position:relative;transition:filter .25s,transform .25s,box-shadow .35s;box-shadow:0 0 0 1px rgba(var(--ypeng-glow),0.4),0 4px 18px -4px rgba(var(--ypeng-glow),0.5);}
.btn-ypeng:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,0.35),transparent 65%);mix-blend-mode:overlay;pointer-events:none;opacity:.55;}
.btn-ypeng:hover{filter:brightness(1.07);} 
.btn-ypeng:active{transform:translateY(2px);} 
.btn-ypeng:focus-visible{outline:none;box-shadow:0 0 0 2px #0d1117,0 0 0 4px var(--ypeng-accent),0 4px 18px -4px rgba(var(--ypeng-glow),0.55);}

/* Redesigned secondary outline button */
.btn-outline{position:relative;display:inline-flex;align-items:center;gap:.55rem;font-weight:500;font-size:.85rem;padding:.75rem 1.3rem;border-radius:var(--ypeng-radius-sm);background:linear-gradient(145deg,#1d232b,#151c23);color:#e6ebf3;border:1px solid rgba(var(--ypeng-glow),0.22);overflow:hidden;cursor:pointer;transition:color .25s, background .35s, border-color .35s, box-shadow .35s, transform .35s;box-shadow:0 0 0 1px rgba(var(--ypeng-glow),0.15);backdrop-filter:blur(6px);}
.btn-outline:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 30% 20%,rgba(var(--ypeng-glow),0.25),transparent 65%),linear-gradient(120deg,rgba(var(--ypeng-glow),0.18),rgba(var(--ypeng-glow),0) 60%);opacity:.35;mix-blend-mode:overlay;pointer-events:none;}
.btn-outline:hover{background:linear-gradient(145deg,#222e3a,#1a242e);border-color:rgba(var(--ypeng-glow),0.4);box-shadow:0 0 0 1px rgba(var(--ypeng-glow),0.35),0 4px 18px -6px rgba(var(--ypeng-glow),0.35);}
.btn-outline:focus-visible{outline:none;box-shadow:0 0 0 2px #0d1117,0 0 0 4px var(--ypeng-accent),0 4px 18px -6px rgba(var(--ypeng-glow),0.5);} 
.btn-outline:active{transform:translateY(1px);}

.badge-soft{display:inline-flex;align-items:center;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.07em;padding:.3rem .55rem;border-radius:999px;background:rgba(var(--ypeng-glow),0.12);color:var(--ypeng-accent-soft);backdrop-filter:blur(6px);}

/* Icon circle */
.icon-ring{width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,#1f2833,#11181f);display:flex;align-items:center;justify-content:center;position:relative;}
.icon-ring:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(var(--ypeng-glow),0.5),rgba(var(--ypeng-glow),0.05));-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;}

/* Glass input */
.input-glass{width:100%;background:linear-gradient(140deg,#1d242d,#152029);border:1px solid rgba(var(--ypeng-glow),0.25);color:#fff;padding:.65rem .85rem;font-size:.8rem;border-radius:10px;transition:border-color .25s, background .35s;}
.input-glass:focus{outline:none;border-color:var(--ypeng-accent);background:#1f2833;}

/* Animated border wrapper */
.rainbow-border{position:relative;border-radius:var(--ypeng-radius-lg);padding:2px;background:linear-gradient(120deg,#ffdc46,#ffbd00,#ff9f1c,#ffbd00,#ffdc46);background-size:300% 100%;animation:borderSlide 12s linear infinite;}@keyframes borderSlide{0%{background-position:0 50%}100%{background-position:300% 50%}}
.rainbow-border > .inner{background:rgba(13,17,23,.92);backdrop-filter:blur(28px);border-radius:inherit;height:100%;}

/* Subtle grid overlay */
.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);background-size:60px 60px,60px 60px;mask:radial-gradient(circle at center,rgba(0,0,0,.55),transparent 75%);pointer-events:none;}

/* Particle canvas */
#particles{position:fixed;inset:0;z-index:-1;}

/* Wordmark tweak */
.brand-word{font-weight:800;letter-spacing:.5px;font-size:1.05rem;}
.brand-word strong{font-weight:800;}

/* Utility */
.blur-far{filter:blur(120px);opacity:.7;}

/* Footer */
footer.footer-ypeng{background:linear-gradient(180deg,rgba(255,220,70,0.05),transparent);}