/* Final site with accent #3D84C1 and image grids */
*{box-sizing:border-box}html,body{margin:0}
:root{--bg:#121E33;--line:#141c2b;--accent:#5EA9EB;--accent-2:#06b6d4;--white:#fff}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#e6eefc;background:radial-gradient(1200px 600px at 10% -10%,rgba(94,169,235,.20),transparent),radial-gradient(1000px 500px at 110% -10%,rgba(6,182,212,.20),transparent),#121E33}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.corner-logo{position:fixed;right:16px;bottom:16px;z-index:60;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);padding:8px;border-radius:12px}
.corner-logo img{width:36px;height:36px;display:block}

.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(to bottom,rgba(11,18,32,.9),rgba(11,18,32,.6));backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:900;letter-spacing:.4px;color:#e6eefc;text-decoration:none}
.links a{color:#e6eefc;text-decoration:none;margin-left:18px;font-weight:600;opacity:.9}
.links .cta{padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:10px}

.hero{position:relative;min-height:72vh;display:grid;place-items:center;overflow:hidden}
.hero.has-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(11,18,32,.55),rgba(11,18,32,.75)),var(--hero) center/cover no-repeat;z-index:-2;filter:saturate(1.1)}
.hero-inner{text-align:center;padding:80px 0}
.hero h1{font-size: clamp(36px, 5vw, 64px);margin:0 0 10px}
.hero p{margin:0 0 20px;color:#c8d3ea}
.cta-row{display:flex;gap:12px;justify-content:center;margin:22px 0}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:800;border:1px solid rgba(255,255,255,.18);color:#e6eefc;transition:transform .15s ease, box-shadow .2s ease}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:0}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.btn.ghost{background:transparent}
.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;opacity:.9}
.badges span{border:1px solid rgba(255,255,255,.18);padding:6px 10px;border-radius:999px;font-size:14px}
.hero-bg.deco{position:absolute;inset:-10% -10% auto -10%;height:70%;background:radial-gradient(40% 60% at 50% 10%,rgba(61,132,193,.25),transparent 60%),radial-gradient(40% 60% at 60% 20%,rgba(6,182,212,.2),transparent 60%);filter:blur(40px);opacity:.8;z-index:-1}

.section{padding:64px 0;border-top:1px solid rgba(255,255,255,.06)}
.section.alt{background:rgba(255,255,255,.02)}
h2{margin:0 0 10px;font-size: clamp(28px, 3.5vw, 40px)}
.sub{color:#b9c6e1;margin:0 0 20px}

.grid{display:grid;gap:16px}
.cards.two-col{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pill-list{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:10px 0 0;list-style:none}
.pill-list li{border:1px solid rgba(255,255,255,.14);padding:8px 12px;border-radius:999px}

.shots{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.shot{width:100%;height:220px;border-radius:14px;object-fit:contain;background:#0e1626;border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.shot.tall{height:280px}

.contact .contact-grid{display:grid;grid-template-columns:1fr 320px;gap:16px}
@media (max-width: 900px){.contact .contact-grid{grid-template-columns:1fr}}
.contact-form textarea,.contact-form input{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.12);color:#e6eefc;border-radius:12px;padding:10px;width:100%}
.contact-form button{margin-top:6px}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px}

.page-hero{padding:80px 0;background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.06)}
.page-hero h1{margin:0 0 8px;font-size: clamp(32px, 4vw, 56px)}
.two-col{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:20px 0;background:rgba(0,0,0,.2)}
.foot{display:flex;align-items:center;justify-content:space-between}
.foot a{text-decoration:none;color:#cfe1ff;opacity:.9}

/* Framed image style */
.shot{background:#0e1626;object-fit:contain;border-radius:14px;border:1px solid rgba(74,149,214,.6);box-shadow:0 6px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06)}
figure{margin:0}
figure figcaption{padding:8px 6px;color:#b9cfe9;font-size:14px;opacity:.9}

/* Launch polish */
.section{position:relative}
.section::before{content:"";position:absolute;inset:auto 0 -20px 0;height:20px;background:linear-gradient(to bottom,rgba(0,0,0,0.18),transparent);pointer-events:none}
.hero.has-bg::before{background:linear-gradient(rgba(11,18,32,.45),rgba(11,18,32,.78)),var(--hero) center/cover no-repeat;}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:none}

.links a, .brand{transition:opacity .2s ease, color .2s ease}
.links a:hover{opacity:1;color:#dff1ff}

/* Sticky contact on mobile */
.sticky-contact{position:fixed;right:14px;bottom:20px;z-index:70;display:none}
@media (max-width: 900px){
  .sticky-contact{display:block}
}
.sticky-contact .btn{padding:12px 16px;border-radius:999px}

/* Improve focus states */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* OG image helper not needed in CSS */

/* Button hover glow */
.btn.primary:hover{box-shadow:0 10px 28px rgba(94,169,235,.35)}

/* Mobile nav improvements */
.menu-btn{display:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#e6eefc;border-radius:10px;padding:8px 12px;font-size:18px}
@media (max-width: 900px){
  .links{position:absolute;top:64px;left:0;right:0;background:rgba(11,18,32,.96);backdrop-filter:blur(8px);display:none;flex-direction:column;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.12)}
  .links.open{display:flex}
  .links a{padding:12px 10px;border:1px solid rgba(255,255,255,.12);border-radius:12px}
  .links .cta{border:0;background:linear-gradient(135deg,var(--accent),var(--accent-2));text-align:center}
  .menu-btn{display:inline-block}
  .nav{position:relative}
}


/* Floating quote CTA */
.floating-quote{position:fixed;right:16px;bottom:84px;z-index:70;background:linear-gradient(135deg,var(--accent),var(--accent-2));
color:#fff;text-decoration:none;padding:12px 16px;border-radius:999px;font-weight:800;border:0;box-shadow:0 10px 28px rgba(0,0,0,.35);transition:opacity .25s ease;opacity:0}

/* Lightbox */
#lightbox[aria-hidden="true"]{display:none}
#lightbox{position:fixed;inset:0;z-index:90;display:grid;place-items:center}
#lightbox .lb-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(2px)}
.lb-frame{position:relative;max-width:92vw;max-height:86vh;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.lb-frame img{display:block;max-width:92vw;max-height:74vh;object-fit:contain;background:#0e1626}
.lb-frame figcaption{padding:10px 12px;color:#cfe1ff;border-top:1px solid rgba(255,255,255,.14)}
#lb-close{position:absolute;top:8px;right:8px;border:0;border-radius:10px;padding:6px 10px;background:rgba(0,0,0,.6);color:#fff;font-size:20px;cursor:pointer}

/* Hover overlay on project tiles */
.shots figure{position:relative;overflow:hidden;border-radius:14px}
.shots figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.35));
opacity:0;transition:opacity .25s easepointer-events:none;}
.shots figure:hover::after{opacity:1}
.shots figure figcaption{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.5);padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.12);opacity:.95}

/* Exit intent modal */
#exit-modal[aria-hidden="true"]{display:none}
#exit-modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center}
#exit-modal .em-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
#exit-modal .em-card{position:relative;width:min(92vw,520px);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:20px;box-shadow:0 20px 46px rgba(0,0,0,.5)}
#exit-modal h3{margin:0 0 8px}
#exit-modal .em-actions{display:flex;gap:10px;margin-top:10px}
#exit-modal .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.18)}

/* Minor motion tuning */
.reveal{transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); filter:drop-shadow(0 2px 8px rgba(0,0,0,.2))}

/* Corner logo gradient outline */
.corner-logo{box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.35);
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(94,169,235,.35)}

/* Optional light theme toggle (kept dark default) */
body.light{color:#0f172a}
body.light .site-header{background:rgba(255,255,255,.8); border-bottom:1px solid rgba(0,0,0,.08)}
body.light .links a{color:#0f172a}
body.light .section{border-top:1px solid rgba(0,0,0,.06)}
body.light .card, body.light .price{background:rgba(255,255,255,.75); border:1px solid rgba(0,0,0,.08); color:#0f172a}
body.light .shot{background:#eef3ff}

.shots a.case-link{display:block;color:inherit;text-decoration:none}