/* ============================================
   KRUXLY — hugeinc.com style
   Generous white + dark hero/contact
   Services slide right-to-left
   ============================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    --bg:#0a0a0a;--white:#fff;--black:#000;
    --gray-100:#f5f5f5;--gray-200:#e0e0e0;--gray-400:#999;--gray-600:#666;--gray-800:#333;--border:#e0e0e0;--border-dark:#222;
    --accent:#38BDF8;
    --font:'Inter',-apple-system,sans-serif;
    --display:'Space Grotesk','Inter',sans-serif;
    --ease:cubic-bezier(.4,0,.2,1);
}
html{font-size:16px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--font);background:var(--white);color:var(--black);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{display:block;max-width:100%}
.container{max-width:1400px;margin:0 auto;padding:0 clamp(24px,5vw,80px)}

/* ---- LOADER ---- */
.loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .8s var(--ease),visibility .8s}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-pct{font-family:var(--display);font-size:clamp(200px,40vw,600px);font-weight:700;line-height:1;color:rgba(255,255,255,.04);position:absolute;user-select:none;letter-spacing:-8px}
.loader-word{font-family:var(--display);font-size:clamp(40px,8vw,100px);font-weight:300;color:var(--white);z-index:1;transition:opacity .3s,transform .3s}

/* ---- HEADER ---- */
.header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:20px 0;transition:all .4s var(--ease)}
.header.scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:14px 0;border-bottom:1px solid var(--border)}
.header.dark-mode{color:var(--white)}
.header.dark-mode.scrolled{background:rgba(10,10,10,.95);border-bottom-color:var(--border-dark)}
.header-inner{max-width:1400px;margin:0 auto;padding:0 clamp(24px,5vw,80px);display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--display);font-size:18px;font-weight:700;display:flex;align-items:center;gap:8px}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;flex-shrink:0}
.nav{display:flex;gap:32px}
.nav-link{font-size:13px;color:inherit;opacity:.5;transition:opacity .3s;position:relative}
.nav-link:hover{opacity:1}
.header-right{display:flex;align-items:center;gap:20px}
.btn-talk{font-size:13px;font-weight:500;padding:10px 20px;border:1px solid currentColor;border-radius:0;color:inherit;transition:all .3s;display:flex;align-items:center;gap:6px}
.btn-talk:hover{background:var(--black);color:var(--white)}
.header.dark-mode .btn-talk:hover{background:var(--white);color:var(--black)}
.menu-toggle{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:4px;z-index:1001}
.menu-toggle span{display:block;width:24px;height:2px;background:currentColor;transition:all .3s}
.menu-toggle.active span:first-child{transform:rotate(45deg) translate(3px,3px)}
.menu-toggle.active span:last-child{transform:rotate(-45deg) translate(3px,-3px)}
.mobile-menu{position:fixed;inset:0;z-index:999;background:var(--white);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .4s}
.mobile-menu.active{opacity:1;visibility:visible}
.mobile-nav{display:flex;flex-direction:column;align-items:center;gap:28px}
.mobile-nav-link{font-family:var(--display);font-size:clamp(28px,6vw,48px);font-weight:300;color:var(--gray-400);transition:color .3s}
.mobile-nav-link:hover{color:var(--black)}
.mobile-nav-link.accent{color:var(--accent)}

/* ---- HERO (dark) ---- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;background:var(--bg);color:var(--white)}
.hero-content{text-align:center;z-index:1}
.hero-tagline{font-size:13px;color:var(--gray-400);letter-spacing:3px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:40px}
.hero-title{font-family:var(--display);font-size:clamp(80px,18vw,220px);font-weight:300;line-height:1;letter-spacing:-4px}
.hero-line{display:block;will-change:transform,opacity}
.hero-nav-row{position:absolute;bottom:100px;left:0;right:0;padding:0 clamp(24px,5vw,80px);display:flex;justify-content:space-between;align-items:center}
.hero-nav-links{display:flex;gap:24px}
.hero-nav-links a{font-size:13px;color:var(--gray-600);transition:color .3s}
.hero-nav-links a:hover{color:var(--white)}
.hero-nav-right{display:flex;align-items:center;gap:12px}
.hero-talk{font-size:14px;color:var(--accent);font-weight:500}
.hero-talk-sub{font-size:12px;color:var(--gray-600)}
.hero-bottom{position:absolute;bottom:40px;left:0;right:0;padding:0 clamp(24px,5vw,80px)}
.hero-scroll{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--gray-600);text-transform:uppercase;letter-spacing:2px}
.scroll-line{width:40px;height:1px;background:var(--accent);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.3;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.5)}}

/* ---- SECTIONS ---- */
.section{padding:clamp(100px,16vw,200px) 0;position:relative}
.section--light{background:var(--white);color:var(--black)}
.section--dark{background:var(--bg);color:var(--white)}
.section--flush{padding:clamp(40px,6vw,80px) 0}
.label{font-size:12px;font-weight:500;letter-spacing:2px;text-transform:uppercase;margin-bottom:40px}
.section--light .label{color:var(--accent)}
.section--dark .label{color:var(--accent)}
.big-text{font-family:var(--display);font-size:clamp(28px,4.5vw,52px);font-weight:300;line-height:1.2;max-width:800px;margin-bottom:24px}
.big-text--xl{font-size:clamp(36px,6vw,72px);max-width:none}
.sub-text{font-size:clamp(16px,2vw,20px);font-weight:300;line-height:1.7;max-width:600px}
.section--light .sub-text{color:var(--gray-600)}
.section--dark .sub-text{color:var(--gray-400)}

/* ---- GIANT LABEL (hugeinc "Ideas —" style) ---- */
.giant-label{font-family:var(--display);font-size:clamp(60px,12vw,160px);font-weight:300;line-height:1;letter-spacing:-3px;margin-bottom:40px}
.ideas-sub{font-size:clamp(18px,2.5vw,28px);font-weight:300;color:var(--gray-600);line-height:1.5;max-width:600px;margin-left:auto;margin-bottom:80px;text-align:right}

/* ---- REEL ---- */
.reel{position:relative;width:100%;aspect-ratio:16/9;max-height:650px;border-radius:16px;overflow:hidden;background:#000}
.reel-viewport{position:absolute;inset:0}
.reel-frame{position:absolute;inset:0;visibility:hidden;opacity:0;z-index:1}
.reel-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.reel-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:1}
.reel-center{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.reel-dot{width:14px;height:14px;border-radius:50%;background:var(--accent);margin-bottom:20px}
.reel-brand{font-family:var(--display);font-size:clamp(36px,8vw,80px);font-weight:700;color:var(--white);letter-spacing:-1px}
.reel-sub{font-size:clamp(12px,1.5vw,18px);font-weight:300;color:rgba(255,255,255,.6);margin-top:8px;letter-spacing:4px;text-transform:uppercase}
.reel-kw{font-family:var(--display);font-size:clamp(24px,5vw,48px);font-weight:300;color:var(--white)}
.reel-tagline{font-family:var(--display);font-size:clamp(28px,5vw,60px);font-weight:300;color:var(--white);letter-spacing:-1px}
.reel-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.06);z-index:10}
.reel-progress-fill{height:100%;width:0%;background:var(--accent)}
.reel-label{position:absolute;top:20px;right:24px;font-size:11px;color:rgba(255,255,255,.3);z-index:10;letter-spacing:1px}

/* ---- SERVICES — full-width sliding panels (hugeinc style) ---- */
.svc-panels{position:relative;overflow:hidden;min-height:500px}
.svc-panel{
    display:grid;grid-template-columns:1fr 1fr;
    position:absolute;inset:0;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:none;
}
.svc-panel.active{position:relative;opacity:1;visibility:visible;pointer-events:auto}
.svc-panel-img{overflow:hidden;padding:0 clamp(24px,5vw,80px)}
.svc-panel-img img{width:100%;height:100%;object-fit:cover;border-radius:12px;max-height:500px}
.svc-panel-text{
    padding:clamp(40px,5vw,80px) clamp(24px,5vw,80px) clamp(40px,5vw,80px) 0;
    display:flex;flex-direction:column;justify-content:center;
}
.svc-title{
    font-family:var(--display);
    font-size:clamp(32px,4vw,52px);
    font-weight:300;line-height:1.1;
    margin-bottom:24px;
}
.svc-title sup{font-size:.4em;color:var(--gray-400);margin-left:8px;vertical-align:super}
.svc-panel-text p{font-size:clamp(16px,1.8vw,20px);color:var(--gray-600);line-height:1.7;margin-bottom:32px;max-width:480px}
.svc-cta{
    display:inline-flex;align-items:center;gap:8px;
    font-size:14px;font-weight:600;
    padding:14px 28px;border:1px solid var(--black);
    transition:all .3s;
}
.svc-cta:hover{background:var(--accent);color:var(--white);border-color:var(--accent)}
.svc-nav{display:flex;gap:12px;margin-top:40px;padding-bottom:20px}
.svc-nav-btn{
    width:40px;height:40px;
    font-family:var(--display);font-size:12px;font-weight:600;
    border:1px solid var(--border);background:none;color:var(--gray-400);
    cursor:pointer;transition:all .3s;
}
.svc-nav-btn.active{background:var(--accent);color:var(--white);border-color:var(--accent)}
.svc-nav-btn:hover{border-color:var(--black)}

/* ---- IDEAS ---- */
.ideas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.idea-card{display:block;overflow:hidden;transition:transform .4s var(--ease)}
.idea-card:hover{transform:translateY(-6px)}
.idea-img{overflow:hidden;aspect-ratio:16/10;border-radius:8px}
.idea-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.idea-card:hover .idea-img img{transform:scale(1.05)}
.idea-info{padding:16px 0}
.idea-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin-bottom:8px;display:block}
.idea-info h3{font-family:var(--display);font-size:18px;font-weight:500;line-height:1.3;color:var(--black)}

/* ---- CONTACT (dark) ---- */
.marquee{overflow:hidden;white-space:nowrap;margin:24px 0 56px}
.marquee-inner{display:inline-flex;gap:24px;font-size:16px;font-weight:500;color:var(--accent)}
.marquee-inner span{white-space:nowrap}
.contact-grid{display:grid;grid-template-columns:2fr 1fr;gap:80px}
.form{display:flex;flex-direction:column;gap:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field label{font-size:12px;color:var(--gray-400)}
.form-field input,.form-field textarea{padding:14px 0;background:transparent;border:none;border-bottom:1px solid var(--border-dark);color:var(--white);font-family:var(--font);font-size:15px;outline:none;resize:vertical;transition:border-color .3s}
.form-field input:focus,.form-field textarea:focus{border-color:var(--accent)}
.btn-accent{align-self:flex-start;padding:14px 40px;background:var(--accent);color:var(--white);font-size:14px;font-weight:600;font-family:var(--font);border:none;cursor:pointer;transition:all .3s}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(56,189,248,.3)}
.contact-links{display:flex;flex-direction:column;gap:16px;padding-top:8px}
.contact-links a{font-size:16px;color:var(--gray-400);transition:color .3s}
.contact-links a:hover{color:var(--white)}

/* ---- FOOTER ---- */
.footer{padding:40px 0;border-top:1px solid var(--border);background:var(--white);color:var(--black)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-logo{font-family:var(--display);font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px}
.footer-left p{font-size:13px;color:var(--gray-400);margin-top:8px}
.footer-right{display:flex;gap:24px}
.footer-right a{font-size:13px;color:var(--gray-400);transition:color .3s}
.footer-right a:hover{color:var(--black)}

/* ---- RESPONSIVE ---- */
@media(max-width:1024px){
    .svc-panel{grid-template-columns:1fr}
    .svc-panel-text{padding:32px clamp(24px,5vw,80px)}
    .svc-panel-img img{max-height:350px}
    .ideas-grid{grid-template-columns:1fr 1fr}
    .contact-grid{grid-template-columns:1fr;gap:48px}
    .hero-nav-row{display:none}
    .ideas-sub{margin-left:0;text-align:left}
}
@media(max-width:768px){
    .nav{display:none}
    .btn-talk{display:none}
    .menu-toggle{display:flex}
    .ideas-grid{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .footer-inner{flex-direction:column;gap:24px;text-align:center}
    .footer-left{display:flex;flex-direction:column;align-items:center}
}