/* ═══════════════════════════════
   IONYX v2 — main.css
═══════════════════════════════ */
:root {
    --orange: #f96b07;
    --red:    #f9160b;
    --black:  #000000;
    --dark2:  #0f0f0f;
    --dark3:  #161616;
    --white:  #ffffff;
    --gray:   #888;
    --gray2:  #555;
    --fh: 'Syne', sans-serif;
    --fm: 'Space Mono', monospace;
    --fb: 'Outfit', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--black); color: var(--white); font-family: var(--fb); overflow-x: hidden; cursor: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* NOISE */
body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events:none; z-index:1000; opacity:0.4; }

/* CURSOR */
.cursor { position:fixed; width:12px; height:12px; background:var(--orange); border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .2s,height .2s,background .2s; }
.cursor-ring { position:fixed; width:40px; height:40px; border:1px solid rgba(249,107,7,.4); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .3s,height .3s,border-color .3s; }
body:has(a:hover) .cursor, body:has(button:hover) .cursor { width:20px; height:20px; background:var(--red); }
body:has(a:hover) .cursor-ring, body:has(button:hover) .cursor-ring { width:60px; height:60px; border-color:rgba(249,22,11,.3); }

/* NAV */
.site-nav { position:fixed; top:0; left:0; right:0; z-index:500; display:flex; align-items:center; justify-content:space-between; padding:1.5rem 4rem; border-bottom:1px solid rgba(255,255,255,.04); backdrop-filter:blur(20px); background:rgba(0,0,0,.6); transition:padding .3s; }
.site-nav.scrolled { padding:1rem 4rem; }
.logo { font-family:var(--fh); font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:var(--white); text-decoration:none; display:flex; align-items:center; gap:.5rem; }
.logo span { color:var(--orange); }
.logo-dot { width:8px; height:8px; background:var(--red); border-radius:50%; animation:pd 2s ease-in-out infinite; }
@keyframes pd { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.5)} }
.nav-links { display:flex; gap:2.5rem; list-style:none; font-family:var(--fm); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; }
.nav-links a { color:var(--gray); text-decoration:none; transition:color .3s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background:var(--orange); transition:width .3s; }
.nav-links a:hover { color:var(--white); }
.nav-links a:hover::after { width:100%; }
.nav-cta { font-family:var(--fm); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); border:1px solid var(--orange); padding:.6rem 1.4rem; text-decoration:none; transition:background .3s,color .3s; }
.nav-cta:hover { background:var(--orange); color:var(--black); }
.nav-toggle { display:none; flex-direction:column; gap:5px; cursor:none; background:none; border:none; padding:.5rem; }
.nav-toggle span { display:block; width:24px; height:1px; background:var(--white); transition:.3s; }

/* HERO */
.hero { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:8rem 4rem 4rem; position:relative; overflow:hidden; }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(249,107,7,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(249,107,7,.04) 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 80%); }
.orb { position:absolute; border-radius:50%; filter:blur(120px); pointer-events:none; }
.orb-1 { width:500px; height:500px; background:rgba(249,107,7,.12); top:-100px; right:-100px; animation:f1 8s ease-in-out infinite; }
.orb-2 { width:300px; height:300px; background:rgba(249,22,11,.08); bottom:100px; left:-50px; animation:f2 10s ease-in-out infinite; }
@keyframes f1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,40px)} }
@keyframes f2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,-30px)} }
.hero-label { font-family:var(--fm); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--orange); margin-bottom:2rem; display:flex; align-items:center; gap:1rem; position:relative; z-index:2; animation:fu .8s both; }
.hero-label::before { content:''; width:40px; height:1px; background:var(--orange); }
.hero h1 { font-family:var(--fh); font-size:clamp(3.5rem,8vw,7.5rem); font-weight:800; line-height:.92; letter-spacing:-.04em; position:relative; z-index:2; max-width:900px; }
.hero h1 .line { display:block; overflow:hidden; }
.hero h1 .line span { display:block; animation:su .9s cubic-bezier(.16,1,.3,1) both; }
.hero h1 .line:nth-child(2) span { animation-delay:.1s; }
.hero h1 .line:nth-child(3) span { animation-delay:.2s; }
@keyframes su { from{transform:translateY(110%)} to{transform:translateY(0)} }
@keyframes fu { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.hero h1 em { font-style:normal; color:transparent; -webkit-text-stroke:1px var(--orange); }
.hero-desc { margin-top:2.5rem; font-size:1.1rem; line-height:1.7; color:rgba(255,255,255,.5); max-width:480px; position:relative; z-index:2; animation:fu 1s .5s both; }

/* BUTTONS */
.hero-actions { margin-top:3rem; display:flex; gap:1.5rem; align-items:center; position:relative; z-index:2; animation:fu 1s .7s both; }
.btn-primary { background:var(--orange); color:var(--black); font-family:var(--fm); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; padding:1rem 2.5rem; text-decoration:none; font-weight:700; transition:transform .2s; position:relative; overflow:hidden; display:inline-block; cursor:none; border:none; }
.btn-primary::before { content:''; position:absolute; inset:0; background:var(--red); transform:translateX(-100%); transition:transform .4s cubic-bezier(.16,1,.3,1); }
.btn-primary:hover::before { transform:translateX(0); }
.btn-primary:hover { transform:translateY(-2px); color:var(--white); }
.btn-primary span { position:relative; z-index:1; }
.btn-ghost { font-family:var(--fm); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; transition:color .3s; }
.btn-ghost:hover { color:var(--white); }
.arrow { width:20px; height:1px; background:currentColor; position:relative; transition:width .3s; display:inline-block; }
.arrow::after { content:''; position:absolute; right:0; top:-3px; border:4px solid transparent; border-left-color:currentColor; border-right:none; }
.btn-ghost:hover .arrow { width:35px; }

/* STATS */
.stats-bar { display:flex; border-top:1px solid rgba(255,255,255,.06); margin-top:5rem; position:relative; z-index:2; animation:fu 1s 1s both; }
.stat { flex:1; padding:2rem 3rem 2rem 0; border-right:1px solid rgba(255,255,255,.06); }
.stat:not(:first-child) { padding-left:3rem; }
.stat:last-child { border-right:none; padding-right:0; }
.stat-num { font-family:var(--fh); font-size:2.5rem; font-weight:800; letter-spacing:-.03em; }
.stat-num span { color:var(--orange); }
.stat-label { font-size:.8rem; color:var(--gray); margin-top:.3rem; letter-spacing:.05em; }

/* SCROLL */
.scroll-ind { position:absolute; bottom:3rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:2; animation:fu 1s 1.5s both; }
.scroll-ind span { font-family:var(--fm); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gray2); writing-mode:vertical-rl; }
.scroll-line { width:1px; height:60px; background:linear-gradient(to bottom,var(--orange),transparent); animation:sp 2s ease-in-out infinite; }
@keyframes sp { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 50.1%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* MARQUEE */
.marquee-section { border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); padding:1.2rem 0; overflow:hidden; background:var(--dark2); }
.marquee-track { display:flex; animation:mq 25s linear infinite; white-space:nowrap; }
.marquee-item { display:flex; align-items:center; gap:2rem; padding:0 2rem; font-family:var(--fm); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gray2); }
.marquee-item .dot { width:4px; height:4px; background:var(--orange); border-radius:50%; }
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* SECTIONS */
section { padding:7rem 4rem; }
.section-tag { font-family:var(--fm); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--orange); margin-bottom:1.5rem; display:flex; align-items:center; gap:.8rem; }
.section-tag::before { content:'//'; opacity:.5; }
h2 { font-family:var(--fh); font-size:clamp(2rem,4vw,3.5rem); font-weight:800; letter-spacing:-.03em; line-height:1.05; max-width:700px; }
h2 em { font-style:normal; color:var(--orange); }

/* SERVICES */
.services { background:var(--dark2); }
.services-intro { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:end; margin-bottom:5rem; }
.services-desc { font-size:1rem; line-height:1.8; color:rgba(255,255,255,.45); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.06); }
.service-card { background:var(--dark2); padding:2.5rem; position:relative; overflow:hidden; transition:background .4s; }
.service-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.service-card:hover { background:var(--dark3); }
.service-card:hover::before { transform:scaleX(1); }
.service-icon { width:48px; height:48px; border:1px solid rgba(249,107,7,.3); display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; font-size:1.2rem; transition:border-color .3s,background .3s; }
.service-card:hover .service-icon { border-color:var(--orange); background:rgba(249,107,7,.08); }
.service-card h3 { font-family:var(--fh); font-size:1.1rem; font-weight:700; margin-bottom:.8rem; letter-spacing:-.02em; color:var(--white); }
.service-card p { font-size:.9rem; color:rgba(255,255,255,.4); line-height:1.7; }
.service-num { position:absolute; top:1.5rem; right:1.5rem; font-family:var(--fm); font-size:.6rem; letter-spacing:.15em; color:rgba(255,255,255,.1); }

/* PROCESS */
.process { position:relative; }
.process-line { position:absolute; left:4rem; top:16rem; bottom:8rem; width:1px; background:linear-gradient(to bottom,var(--orange),var(--red),transparent); opacity:.3; }
.process-steps { margin-top:4rem; }
.step { display:grid; grid-template-columns:80px 1fr; gap:2rem; padding:2.5rem 0; border-bottom:1px solid rgba(255,255,255,.05); align-items:start; }
.step:last-child { border-bottom:none; }
.step-num { font-family:var(--fm); font-size:.7rem; letter-spacing:.15em; color:var(--orange); padding-top:.3rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.step-dot { width:10px; height:10px; border-radius:50%; border:1px solid var(--orange); background:var(--black); position:relative; z-index:2; }
.step-content h3 { font-family:var(--fh); font-size:1.4rem; font-weight:700; margin-bottom:.6rem; letter-spacing:-.02em; color:var(--white); }
.step-content p { font-size:.9rem; color:rgba(255,255,255,.4); line-height:1.7; }
.step-tag { display:inline-block; font-family:var(--fm); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); border:1px solid rgba(249,107,7,.3); padding:.2rem .7rem; margin-bottom:.7rem; }

/* TECH */
.tech { background:var(--dark2); }
.tech-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:1px; background:rgba(255,255,255,.05); margin-top:4rem; }
.tech-item { background:var(--dark2); padding:1.5rem; display:flex; align-items:center; justify-content:center; font-family:var(--fm); font-size:.7rem; letter-spacing:.1em; color:var(--gray); transition:background .3s,color .3s; }
.tech-item:hover { background:rgba(249,107,7,.05); color:var(--orange); }

/* CASES */
.cases-header { display:flex; justify-content:space-between; align-items:end; margin-bottom:3rem; }
.cases-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(255,255,255,.05); }
.case-card { background:var(--black); padding:3rem; position:relative; overflow:hidden; transition:background .4s; }
.case-card:hover { background:var(--dark3); }
.case-card.featured { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.case-tag { font-family:var(--fm); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--orange); margin-bottom:1rem; }
.case-card h3 { font-family:var(--fh); font-size:1.4rem; font-weight:700; margin-bottom:1rem; letter-spacing:-.02em; color:var(--white); }
.case-card p { font-size:.9rem; color:rgba(255,255,255,.4); line-height:1.7; }
.case-metric { font-family:var(--fh); font-size:4rem; font-weight:800; color:var(--orange); letter-spacing:-.04em; line-height:1; margin-bottom:.5rem; }
.case-metric-label { font-size:.85rem; color:var(--gray); }
.case-metrics { display:flex; gap:3rem; margin-top:2rem; }
.case-placeholder { height:280px; background:var(--dark2); border:1px solid rgba(255,255,255,.05); }

/* CTA */
.cta-section { background:var(--dark2); text-align:center; padding:8rem 4rem; position:relative; overflow:hidden; }
.cta-bg { position:absolute; inset:0; background:radial-gradient(ellipse 60% 40% at 50% 100%,rgba(249,107,7,.15),transparent),radial-gradient(ellipse 40% 60% at 50% 0%,rgba(249,22,11,.08),transparent); }
.cta-section .section-tag { justify-content:center; position:relative; z-index:2; }
.cta-section h2 { max-width:100%; margin:0 auto 1.5rem; font-size:clamp(2.5rem,5vw,5rem); position:relative; z-index:2; }
.cta-desc { color:rgba(255,255,255,.4); max-width:500px; margin:0 auto 3rem; position:relative; z-index:2; font-size:1.05rem; line-height:1.7; }

/* FORM */
.contact-form { max-width:640px; margin:0 auto 3rem; display:flex; flex-direction:column; gap:1.2rem; text-align:left; position:relative; z-index:2; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-group label { font-family:var(--fm); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); }
.form-group input, .form-group textarea { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:var(--white); font-family:var(--fb); font-size:.95rem; padding:.85rem 1rem; outline:none; transition:border-color .3s; resize:vertical; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--orange); }
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--gray2); }
.form-btn { align-self:center; margin-top:.5rem; }
.form-status { font-size:.85rem; margin-top:.5rem; min-height:1.2rem; text-align:center; }
.form-status.success { color:#4ade80; }
.form-status.error { color:var(--red); }
.cta-links { display:flex; gap:2rem; justify-content:center; position:relative; z-index:2; margin-top:1rem; }

/* FOOTER */
.site-footer { background:var(--dark3); border-top:1px solid rgba(255,255,255,.05); }
.footer-inner { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding:4rem; }
.footer-brand .logo { font-size:1.3rem; margin-bottom:1rem; }
.footer-brand p { font-size:.85rem; color:var(--gray); line-height:1.7; max-width:260px; margin-top:1rem; }
.footer-col h4 { font-family:var(--fm); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--orange); margin-bottom:1.2rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.footer-col a { font-size:.85rem; color:var(--gray); text-decoration:none; transition:color .3s; }
.footer-col a:hover { color:var(--white); }
.footer-bottom { padding:1.5rem 4rem; border-top:1px solid rgba(255,255,255,.04); display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:.75rem; color:var(--gray2); font-family:var(--fm); letter-spacing:.05em; }
.footer-bottom a { color:var(--orange); text-decoration:none; }

/* REVEAL */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* RESPONSIVE */
@media(max-width:1024px) {
    .services-grid { grid-template-columns:repeat(2,1fr); }
    .footer-inner { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
    body { cursor:auto; }
    .cursor, .cursor-ring { display:none; }
    .site-nav { padding:1.2rem 1.5rem; }
    .nav-links { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.97); flex-direction:column; justify-content:center; align-items:center; gap:2rem; font-size:1.2rem; z-index:400; }
    .nav-links.open { display:flex; }
    .nav-cta { display:none; }
    .nav-toggle { display:flex; }
    section { padding:4rem 1.5rem; }
    .hero { padding:6rem 1.5rem 3rem; }
    .services-intro { grid-template-columns:1fr; gap:2rem; }
    .services-grid { grid-template-columns:1fr; }
    .stats-bar { flex-direction:column; }
    .stat { border-right:none; border-bottom:1px solid rgba(255,255,255,.06); padding:1.5rem 0 !important; }
    .stat:last-child { border-bottom:none; }
    .cases-grid { grid-template-columns:1fr; }
    .case-card.featured { grid-template-columns:1fr; }
    .case-placeholder { display:none; }
    .footer-inner { grid-template-columns:1fr; gap:2rem; padding:2rem 1.5rem; }
    .footer-bottom { flex-direction:column; gap:.5rem; text-align:center; padding:1.5rem; }
    .form-row { grid-template-columns:1fr; }
    .process-line { display:none; }
    .step { grid-template-columns:50px 1fr; }
    .case-metrics { flex-wrap:wrap; gap:1.5rem; }
}