@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#0A0A0A;
  --panel:#111111;
  --line:#262626;
  --text:#F7F7F7;
  --muted:#8F8F8F;
  --accent:#FF5500;
  --max:1200px;
  --hero-progress:0;
  --page-progress:0;
}

*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  margin:0;min-width:320px;background:var(--bg);color:var(--text);
  font-family:Geist,Inter,system-ui,sans-serif;line-height:1.5;overflow-x:hidden;text-rendering:optimizeLegibility
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{display:block;max-width:100%}
.section-shell{width:min(var(--max),calc(100% - 40px));margin-inline:auto}
.eyebrow{margin:0 0 13px;color:var(--accent);font:500 .72rem "JetBrains Mono",monospace;letter-spacing:.13em}
.page-progress{position:fixed;z-index:70;inset:0 0 auto;height:2px;background:var(--accent);transform:scaleX(var(--page-progress));transform-origin:left center;pointer-events:none}

/* Header */
.site-header{
  position:fixed;z-index:60;top:0;left:0;right:0;height:72px;width:100%;
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease;
  overflow:visible
}
.header-inner{
  width:min(var(--max),calc(100% - 40px));height:100%;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;overflow:visible
}
.site-header.is-scrolled{
  background:rgba(10,10,10,.82);backdrop-filter:blur(18px);
  border-color:rgba(255,255,255,.09)
}
.brand{display:inline-flex;align-items:baseline;font-weight:700;font-size:1.08rem;letter-spacing:-.055em}
.brand i{color:var(--accent);font-style:normal}.brand b{color:var(--accent);font-weight:700}
.desktop-nav{display:flex;gap:26px;color:#9A9A9A;font-size:.8rem}
.desktop-nav a{transition:color .2s ease}.desktop-nav a:hover{color:#fff}
.header-actions{display:flex;gap:13px;align-items:center}
.lang-switch{display:flex;border:1px solid #2A2A2A;border-radius:999px;padding:3px;background:rgba(10,10,10,.65)}
.lang-switch button{border:0;background:transparent;color:#6E6E6E;padding:5px 8px;border-radius:999px;cursor:pointer;font:500 .66rem "JetBrains Mono",monospace}
.lang-switch button[aria-pressed="true"]{background:#1C1C1C;color:#fff}
.header-cta{font-size:.78rem;border-bottom:1px solid var(--accent);padding-bottom:2px}

/* Hero */
.hero{
  position:relative;min-height:72svh;display:flex;align-items:flex-end;overflow:hidden;
  border-bottom:1px solid #1B1B1B;
  background:
    radial-gradient(ellipse at 72% 55%,rgba(255,85,0,.07),transparent 33%),
    linear-gradient(180deg,#090909 0%,#0a0a0a 54%,#070707 100%)
}
.hero-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-light{
  position:absolute;right:4%;top:20%;width:min(46vw,640px);aspect-ratio:1.45;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,92,24,.14) 0%,rgba(255,85,0,.06) 36%,transparent 72%);
  transform:translate3d(0,calc(var(--hero-progress) * 18px),0);
  opacity:.72;
  will-change:transform
}
.hero-haze{
  position:absolute;left:-8%;right:-8%;bottom:8%;height:34%;
  background:linear-gradient(90deg,transparent 0%,rgba(94,73,60,.035) 24%,rgba(255,105,36,.07) 54%,rgba(94,73,60,.025) 78%,transparent 100%);
  transform:translate3d(0,calc(var(--hero-progress) * 12px),0);
  opacity:.68
}
.hero-waves{
  position:absolute;left:-3%;width:106%;height:72%;bottom:-8%;fill:none;
  vector-effect:non-scaling-stroke;will-change:transform
}
.hero-waves path{vector-effect:non-scaling-stroke}
.hero-waves-back{
  stroke:rgba(172,164,157,.105);stroke-width:1;
  transform:translate3d(0,calc(var(--hero-progress) * 18px),0);
  animation:waveDriftBack 24s ease-in-out infinite alternate
}
.hero-waves-back path:nth-child(2){stroke:rgba(255,255,255,.055)}
.hero-waves-back path:nth-child(3){stroke:rgba(255,85,0,.105)}
.hero-waves-front{
  stroke:rgba(255,255,255,.075);stroke-width:1;
  filter:drop-shadow(0 -1px 8px rgba(255,85,0,.07));
  transform:translate3d(0,calc(var(--hero-progress) * 30px),0);
  animation:waveDriftFront 19s ease-in-out infinite alternate
}
.hero-waves-front path:first-child{stroke:rgba(255,95,32,.19)}
.hero-grain{position:absolute;inset:0;opacity:.055;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 190px;align-items:end;gap:42px;padding-top:118px;padding-bottom:54px}
.hero-copy{max-width:790px}
.hero h1{margin:0;max-width:820px;font-size:clamp(3rem,5.9vw,6.15rem);line-height:.94;letter-spacing:-.063em;font-weight:600}
.hero-body{margin:19px 0 0;max-width:590px;color:#B0B0B0;font-size:clamp(.93rem,1.2vw,1.02rem)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}
.button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border:1px solid transparent;border-radius:3px;font-weight:600;font-size:.82rem;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--accent);color:#1A0800}
.button-ghost{border-color:#3A3A3A;background:rgba(10,10,10,.38);backdrop-filter:blur(8px)}
.hero-signature{justify-self:end;align-self:center;width:190px;color:#858585;font:400 .7rem "JetBrains Mono",monospace;letter-spacing:.06em;display:grid;gap:10px}
.hero-signature>span{color:#D0D0D0;font-size:.82rem;font-weight:500;letter-spacing:.04em}
.hero-signature small{font-size:.67rem;white-space:nowrap}
.hero-signature div{height:1px;background:linear-gradient(90deg,var(--accent),transparent)}

@keyframes waveDriftBack{
  0%{translate:-1.15% 2px}
  100%{translate:1.1% -7px}
}
@keyframes waveDriftFront{
  0%{translate:1.25% 4px}
  100%{translate:-1.2% -8px}
}
@keyframes waveFlow{
  to{stroke-dashoffset:-260}
}
.wave-flow{
  fill:none!important;
  stroke:rgba(255,105,48,.26)!important;
  stroke-width:1.15!important;
  stroke-linecap:round;
  stroke-dasharray:18 112;
  animation:waveFlow 18s linear infinite!important;
  opacity:.7;
}
.wave-flow-back{animation-duration:24s!important;opacity:.46}
.wave-flow-front{animation-duration:18s!important}

/* Shared */
.section{padding:74px 0}
.section-head{max-width:740px;margin-bottom:30px}
.section-head.compact h2{margin:0;font-size:clamp(2.25rem,3.7vw,3.8rem);line-height:.98;letter-spacing:-.052em;font-weight:600}

/* Projects */
.work-section{background:#0A0A0A}
.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.project-card{--mx:50%;--my:50%;position:relative;overflow:hidden;border:1px solid #262626;background:#101010;min-width:0;transition:transform .28s ease,border-color .28s ease}
.project-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(360px circle at var(--mx) var(--my),rgba(255,85,0,.07),transparent 60%);transition:opacity .25s ease}
.project-card:hover{transform:translateY(-4px);border-color:#3B3B3B}.project-card:hover::after{opacity:1}
.project-media{position:relative;overflow:hidden;background:#0B0B0B;aspect-ratio:16/9}
.project-media-shot{display:block}
.project-shot{width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;background:#0B0B0B;transition:transform .45s cubic-bezier(.2,.75,.2,1)}
.project-card:hover .project-shot{transform:scale(1.012)}
.browser-top{height:25px;display:flex;align-items:center;gap:5px;padding:0 8px;border-bottom:1px solid #222;background:#111}
.browser-top span{width:5px;height:5px;border-radius:50%;background:#414141}
.project-info{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:7px 18px;padding:20px}
.project-info p{grid-column:1/-1;margin:0;color:var(--accent);font:400 .66rem "JetBrains Mono",monospace;letter-spacing:.08em}
.project-info h3{margin:0;font-size:1.22rem;letter-spacing:-.032em}
.project-info>span{grid-column:1;color:#858585;font-size:.84rem}
.project-info b{grid-column:2;grid-row:2/4;align-self:center;color:#C7C7C7;font-size:.76rem;font-weight:500;white-space:nowrap}

/* Portfolio preview */
.portfolio-preview{height:300px;padding:18px;display:grid;place-items:center;background:radial-gradient(circle at 20% 20%,rgba(168,85,247,.07),transparent 35%),#0D0D0D}
.portfolio-browser{width:88%;height:82%;border:1px solid #303030;background:#0A0A0A;box-shadow:0 22px 55px rgba(0,0,0,.36)}
.portfolio-content{height:calc(100% - 25px);padding:28px;display:flex;flex-direction:column;justify-content:center;gap:14px;background:radial-gradient(circle at 75% 20%,rgba(168,85,247,.1),transparent 32%),radial-gradient(circle at 20% 80%,rgba(6,182,212,.07),transparent 32%)}
.portfolio-content small{color:#727272;font:400 .66rem "JetBrains Mono",monospace}
.portfolio-content strong{max-width:420px;font-size:clamp(1.2rem,2.2vw,2rem);line-height:1.05;letter-spacing:-.045em}
.portfolio-lines{display:grid;gap:7px;width:56%;margin-top:4px}.portfolio-lines span{height:1px;background:#2B2B2B}.portfolio-lines span:nth-child(2){width:82%}.portfolio-lines span:nth-child(3){width:64%}

/* Services */
.services-section{background:#0D0D0D;border-block:1px solid #1F1F1F}
.split-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.service-list{border-top:1px solid #282828}
.service-row{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;padding:22px 0;border-bottom:1px solid #282828}
.service-row>span{color:#5F5F5F;font:400 .59rem "JetBrains Mono",monospace}
.service-row h3{margin:0 0 6px;font-size:1.12rem;letter-spacing:-.02em}
.service-row p{margin:0;max-width:690px;color:#929292;font-size:.88rem;line-height:1.55}

/* Pricing */
.pricing-section{background:#0A0A0A}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #292929;border-left:1px solid #292929}
.price-card{--mx:50%;--my:50%;position:relative;min-height:210px;padding:20px;display:flex;flex-direction:column;border-right:1px solid #292929;border-bottom:1px solid #292929;overflow:hidden}
.price-card::after{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(240px circle at var(--mx) var(--my),rgba(255,85,0,.08),transparent 62%);transition:opacity .25s ease;pointer-events:none}
.price-card:hover::after{opacity:1}
.price-card>span{color:#686868;font:400 .66rem "JetBrains Mono",monospace}
.price-card h3{margin:23px 0 7px;font-size:1rem;font-weight:600;letter-spacing:-.02em}
.price-card p{margin:0;color:#858585;font-size:.83rem;line-height:1.5;max-width:220px}
.price-card strong{margin-top:auto;padding-top:18px;font-size:1.16rem;letter-spacing:-.035em}
.price-card i{position:absolute;right:18px;bottom:18px;color:var(--accent);font-style:normal}
.pricing-note{margin:14px 0 0;max-width:720px;color:#686868;font:400 .82rem "JetBrains Mono",monospace;line-height:1.6}

/* Contact */
.contact-section{position:relative;padding:82px 0 66px;border-top:1px solid #1F1F1F;background:#090909;overflow:hidden}
.contact-light{position:absolute;width:650px;height:650px;right:-18%;top:-42%;border-radius:50%;background:radial-gradient(circle,rgba(255,85,0,.085),transparent 68%);pointer-events:none}
.contact-grid{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;gap:68px;align-items:start}
.contact-copy h2{margin:0;font-size:clamp(2.8rem,4.8vw,5rem);line-height:.95;letter-spacing:-.058em;font-weight:600}
.contact-copy>p:not(.eyebrow){margin:18px 0 0;max-width:510px;color:#8A8A8A}
.contact-steps{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:24px;color:#707070;font:400 .74rem "JetBrains Mono",monospace}.contact-steps i{color:var(--accent);font-style:normal}
.project-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid #333;padding-top:20px}
.form-honey{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.form-status{grid-column:1/-1;min-height:1.4em;margin:0;color:#9A9A9A;font-size:.8rem}
.form-status.is-success{color:#B8D8C2}
.form-status.is-error{color:#E4A28A}
.form-button[disabled]{opacity:.62;cursor:wait;transform:none!important}
.project-form label{display:grid;gap:7px;color:#A8A8A8;font-size:.8rem}
.project-form input,.project-form select,.project-form textarea{width:100%;background:#0E0E0E;border:1px solid #292929;border-radius:2px;color:#F3F3F3;padding:11px 12px;outline:none;transition:border-color .2s ease}
.project-form input:focus,.project-form select:focus,.project-form textarea:focus{border-color:rgba(255,85,0,.62)}
.project-form .message-field{grid-column:1/-1}.project-form textarea{min-height:96px;resize:vertical}.form-button{grid-column:1/-1;border:0}

/* Footer */
.footer{min-height:104px;border-top:1px solid #1F1F1F;display:flex;justify-content:space-between;align-items:center;gap:24px}
.footer>div:first-child{display:flex;align-items:center;gap:14px}
.footer small{color:#5F5F5F;font:400 .69rem "JetBrains Mono",monospace}
.footer-links{display:flex;gap:20px;color:#8B8B8B;font-size:.76rem}

/* Motion */
[data-reveal]{opacity:0;transform:translateY(15px);clip-path:inset(0 0 9% 0);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.75,.2,1),clip-path .6s ease}
[data-reveal].is-visible{opacity:1;transform:none;clip-path:inset(0)}
@supports (animation-timeline:view()){
  .project-media,.portfolio-preview{
    animation:mediaShift linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 42%;
  }
  @keyframes mediaShift{from{transform:scale(.987) translateY(12px)}to{transform:none}}
}

/* Tablet */
@media (max-width:980px){
  .desktop-nav{display:none}
  .hero-inner{grid-template-columns:1fr}.hero-signature{display:none}
  .projects-grid{grid-template-columns:1fr}
  .split-section,.contact-grid{grid-template-columns:1fr;gap:36px}
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
}

/* Mobile */
@media (max-width:640px){
  .section-shell{width:min(var(--max),calc(100% - 26px))}
  .header-inner{width:min(var(--max),calc(100% - 26px))}
  .site-header{height:64px}.header-cta{display:none}
  .hero{min-height:68svh}
  .hero-inner{padding-top:100px;padding-bottom:42px}
  .hero h1{font-size:clamp(2.75rem,13.5vw,4.2rem);line-height:.96}
  .hero-body{margin-top:16px;font-size:.9rem;max-width:92%}
  .hero-actions{margin-top:22px}.button{min-height:42px;font-size:.78rem}
  .hero-waves{left:-30%;width:160%;height:62%;bottom:-3%}
  .hero-light{right:-34%;top:20%;width:105vw}
  .hero-haze{bottom:12%;height:25%}
  .hero-waves-back{animation-duration:30s}
  .hero-waves-front{animation-duration:25s}
  .wave-flow-back{animation-duration:32s!important}
  .wave-flow-front{animation-duration:27s!important}
  .section{padding:58px 0}
  .section-head{margin-bottom:26px}.section-head.compact h2{font-size:2.35rem}
  .portfolio-preview{height:260px}
  .project-media-shot{height:auto;aspect-ratio:16/9}
  .project-info{padding:17px;grid-template-columns:1fr}
  .project-info h3{font-size:1.16rem}.project-info>span{grid-column:1}.project-info b{grid-column:1;grid-row:auto;margin-top:3px;justify-self:start}
  .portfolio-browser{width:94%;height:84%}.portfolio-content{padding:22px}.portfolio-content strong{font-size:1.45rem}
  .split-section{gap:26px}
  .service-row{grid-template-columns:30px 1fr;gap:11px;padding:18px 0}.service-row h3{font-size:1.05rem}.service-row p{font-size:.82rem;line-height:1.5}
  .pricing-grid{grid-template-columns:1fr}
  .pricing-note{font-size:.78rem;line-height:1.55}
  .price-card{min-height:170px;padding:17px}.price-card h3{margin-top:18px}.price-card p{max-width:88%}
  .contact-section{padding:64px 0 50px}.contact-copy h2{font-size:2.8rem}
  .contact-copy>p:not(.eyebrow){font-size:.92rem}
  .contact-steps{font-size:.78rem}
  .project-form{grid-template-columns:1fr}.project-form .message-field,.form-button{grid-column:1}
  .footer{min-height:128px;padding:25px 0;flex-direction:column;align-items:flex-start;justify-content:center}.footer-links{gap:15px;flex-wrap:wrap}
}

@media (max-width:390px){
  .hero h1{font-size:2.65rem}
  .portfolio-preview{height:235px}
}

@media (hover:none),(pointer:coarse){
  .project-card:hover,.button:hover{transform:none}
  .project-card::after,.price-card::after{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none;clip-path:none}
  .hero-waves,.hero-light,.hero-haze{transform:none!important;translate:0 0!important}
  .wave-flow{animation:none!important}
}