:root{--y:#ffb700;--bg:#000;--tx:#fff;--mu:#9a9aa2;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#000}
body{margin:0;background:var(--bg);color:var(--tx);font-family:'Plus Jakarta Sans',system-ui,sans-serif;overflow-x:hidden}
canvas#fx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.figure{position:fixed;right:-18%;bottom:-6%;width:70vw;max-width:520px;height:60vh;z-index:0;pointer-events:none;filter:blur(34px);opacity:.75;
background:radial-gradient(ellipse 45% 22% at 55% 30%,#2f6bd6 0,transparent 70%),radial-gradient(ellipse 30% 40% at 55% 70%,#0b1a3a 0,transparent 70%),radial-gradient(circle at 30% 40%,#8fb4ff55,transparent 25%),radial-gradient(circle at 70% 55%,#cfe2ff66,transparent 8%)}
.blob{position:fixed;left:0;top:0;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;z-index:0;pointer-events:none;filter:blur(20px);background:radial-gradient(circle,#fff 0,#bfe9ff 40%,transparent 72%);opacity:.9}
main{position:relative;z-index:1;padding:0 7%;max-width:1100px;margin:0 auto}
.top{display:flex;justify-content:space-between;align-items:center;padding:30px 0}
.avail{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.95rem}
.avail i{width:9px;height:9px;border-radius:50%;background:#18e04a;box-shadow:0 0 10px #18e04a;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
.resume{background:var(--y);color:#111;font-weight:700;font-size:.85rem;padding:12px 18px;border-radius:99px;text-decoration:none}
.resume:hover{transform:translateY(-2px)}
.hero{min-height:calc(100vh - 100px);padding:12vh 0 8vh;display:flex;flex-direction:column;justify-content:center}
.role{color:var(--y);font-weight:700;font-size:1.5rem;margin:0}
.name{font-size:clamp(3rem,9vw,5.2rem);font-weight:800;margin:6px 0 60px;line-height:1.1}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,max-content));gap:14px 40px}
.info div{display:flex;gap:12px;align-items:center;font-weight:500}
.info svg{width:22px;height:22px;stroke:var(--y);fill:none;stroke-width:1.7;flex:none}
.hero>*{opacity:0;transform:translateY(24px);animation:in .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero>*:nth-child(2){animation-delay:.15s}.hero>*:nth-child(3){animation-delay:.35s}
@keyframes in{to{opacity:1;transform:none}}
section{padding:90px 0 40px;max-width:760px}
h2{color:var(--y);font-size:clamp(2.3rem,7vw,3.2rem);font-weight:800;margin:0 0 30px}
h3{color:var(--y);font-size:1.5rem;margin:50px 0 24px}
p.about{font-size:.95rem;line-height:1.85;margin:0}
.tl{border-left:1px solid #6b4a00;padding-left:28px;margin-left:1px}
.tl div{margin-bottom:32px;position:relative}
.tl b{display:block;font-weight:700}.tl b:before{content:"•";margin-right:10px}
.tl span{color:var(--y);font-size:.95rem;margin-left:16px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:34px 26px;border-left:1px solid #2a2a2a;padding-left:26px}
.pc{display:block;color:inherit;text-decoration:none}
.pimg{aspect-ratio:1/.93;border-radius:10px;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;border:1px solid #ffffff22;transition:transform .35s,box-shadow .35s}
.pc:hover .pimg,.pc:focus-visible .pimg{transform:translateY(-6px) scale(1.02);box-shadow:0 14px 34px #ffb70033}
.pimg:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,#ffffff2e 50%,transparent 60%);transform:translateX(-120%);transition:transform .7s}
.pc:hover .pimg:after{transform:translateX(120%)}
.logo{display:flex;align-items:center;gap:8px;font-family:'Cormorant Garamond',serif;font-size:clamp(1rem,3.6vw,1.9rem);line-height:1;color:#ffffff99;text-transform:uppercase;text-align:left}
.logo em{font-style:normal;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.5em;background:linear-gradient(135deg,#3aa8ff,#6a3bd6);-webkit-background-clip:text;background-clip:text;color:transparent}
.arr,.spk{position:absolute;color:#fff;font-size:1.1rem}.arr{top:12px;right:14px}.spk{bottom:8px;right:12px;font-size:.9rem;opacity:.7}
.pc strong{display:block;margin:12px 0 4px;font-size:.95rem}.pc small{color:var(--mu);font-size:.72rem}
ul.sk{list-style:none;padding:0;margin:0 0 50px}
ul.sk li{display:flex;align-items:center;gap:16px;margin:0 0 22px;font-weight:500;font-size:1.05rem}
ul.sk li:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--y);box-shadow:0 0 8px var(--y)}
.tools{display:grid;grid-template-columns:repeat(5,1fr);gap:26px 8px;max-width:560px}
.tools div{text-align:center;font-size:.8rem;font-weight:700;transition:transform .25s}
.tools div:hover{transform:translateY(-5px)}
.tools svg{width:62px;height:62px;display:block;margin:0 auto 8px}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px}
input,textarea{font:inherit;font-size:.85rem;padding:13px;border:0;border-radius:4px;background:#fff;color:#111;width:100%}
textarea{grid-column:1/-1;height:140px;resize:vertical}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--y);outline-offset:2px}
button{grid-column:1/-1;background:var(--y);border:0;border-radius:4px;padding:16px;font:inherit;font-weight:700;color:#111;cursor:pointer}
button:hover{filter:brightness(1.1)}
#st{grid-column:1/-1;margin:0;color:var(--y);min-height:1.4em;font-size:.9rem}
footer{text-align:center;padding:90px 0 150px}
.soc{display:flex;gap:18px;justify-content:center;margin-bottom:22px}
.soc a{width:44px;height:44px;border-radius:50%;background:var(--y);display:grid;place-items:center;color:#111;transition:transform .25s}
.soc a:hover{transform:scale(1.12) rotate(-6deg)}
.soc svg{width:22px;height:22px;fill:none;stroke:#111;stroke-width:2}
footer p{margin:0;font-size:.95rem}
nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(36px + env(safe-area-inset-bottom,0px));z-index:10;display:flex;gap:2px;padding:6px;border-radius:99px;background:#1c1c1f;border:1px solid #ffffff14;box-shadow:0 10px 30px #000a}
nav a{display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:99px;color:#fff;text-decoration:none;font-size:.78rem;font-weight:700;transition:background .3s,color .3s}
nav a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
nav a.on{background:#fff;color:#111}
nav a:focus-visible{outline:2px solid var(--y)}
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}.rv.show{opacity:1;transform:none}
@media(max-width:560px){nav a span{display:none}nav a.on span{display:inline}nav a{padding:12px 14px}.tools{gap:22px 4px}.tools svg{width:52px;height:52px}main{padding:0 6%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.hero>*,.rv{opacity:1;transform:none}}
#tl {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-top: 30px;
}

.tool-card {
    position: relative;
    min-height: 125px;
    padding: 22px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;

    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition: all 0.35s ease;
    overflow: hidden;
}

.tool-card::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(212, 175, 55, 0.12);
    filter: blur(35px);
    border-radius: 50%;
    opacity: 0;
    transition: 0.35s ease;
}

.tool-card:hover {
    transform: translateY(-8px);
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.35),
        0 0 25px rgba(212, 175, 55, 0.08);
}

.tool-card:hover::before {
    opacity: 1;
}

.tool-icon {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 46px;
    transition: 0.35s ease;
}

.tool-card:hover .tool-icon {
    transform: scale(1.12);
}

.tool-card span {
    position: relative;
    z-index: 2;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;

    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 900px) {
    #tl {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    #tl {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .tool-card {
        min-height: 110px;
    }

    .tool-icon {
        font-size: 40px;
    }
}