:root{
  --bg:#07090f;
  --bg-soft:#0e121b;
  --white:#ffffff;
  --text:#f7f8fb;
  --muted:#aab2c3;
  --line:rgba(255,255,255,.12);
  --orange:#ff4d22;
  --orange-2:#ff6c34;
  --naver:#20c463;
  --google:#4285f4;
  --kakao:#ffe100;
  --purple:#8a6cff;
  --pink:#ff6b7a;
  --container:1440px;
  --header-h:84px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
  color:#111;
  background:#fff;
  word-break:keep-all;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
button{font:inherit}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 48px),var(--container));margin:0 auto}

.site-loader{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:#05070b;
  transition:.7s cubic-bezier(.2,.8,.2,1);
}
.site-loader.is-hidden{opacity:0;visibility:hidden}
.loader-logo{
  font-size:54px;font-weight:950;letter-spacing:-4px;color:#fff
}
.loader-logo span{color:var(--orange)}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--header-h);
  background:rgba(3,5,9,.66);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  transition:.3s;
}
.site-header.is-scrolled{
  height:72px;
  background:rgba(3,5,9,.92);
}
.header-inner{
  height:100%;
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;
}
.logo{display:flex;flex-direction:column;line-height:.86;color:#fff}
.logo-main{font-size:31px;font-weight:950;letter-spacing:-2px}
.logo-main span{color:var(--orange)}
.logo small{margin-top:7px;font-size:9px;letter-spacing:3px;color:rgba(255,255,255,.65)}
.desktop-nav{display:flex;align-items:center;gap:38px}
.desktop-nav a{font-size:14px;font-weight:700;color:rgba(255,255,255,.84);transition:.2s}
.desktop-nav a:hover{color:var(--orange)}
.header-actions{display:flex;gap:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:46px;padding:0 21px;
  border-radius:8px;font-size:14px;font-weight:800;
  border:1px solid transparent;transition:.25s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#fff;box-shadow:0 14px 34px rgba(255,77,34,.24)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.03)}
.btn-glass{border-color:rgba(255,255,255,.25);background:rgba(6,9,15,.52);color:#fff;backdrop-filter:blur(10px)}
.btn-large{min-height:58px;padding:0 28px;font-size:16px}

.menu-toggle{display:none;width:46px;height:46px;border:0;background:transparent;position:relative}
.menu-toggle span{position:absolute;left:9px;width:28px;height:2px;background:#fff;transition:.25s}
.menu-toggle span:first-child{top:17px}.menu-toggle span:last-child{top:27px}
.menu-toggle.active span:first-child{top:22px;transform:rotate(45deg)}
.menu-toggle.active span:last-child{top:22px;transform:rotate(-45deg)}
.mobile-menu{display:none}

.hero{
  min-height:100svh;
  position:relative;
  display:flex;align-items:center;
  overflow:hidden;background:#07090f;
  color:#fff;padding:calc(var(--header-h) + 60px) 0 74px;
}
.hero-media{position:absolute;inset:0}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  filter:saturate(.92) contrast(1.04);
  transform:scale(1.03);
  animation:heroZoom 14s ease-out forwards;
}
@keyframes heroZoom{to{transform:scale(1.1)}}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(2,5,11,.98) 0%,rgba(2,5,11,.85) 32%,rgba(2,5,11,.25) 64%,rgba(2,5,11,.48) 100%),
    linear-gradient(180deg,rgba(2,5,11,.25),rgba(2,5,11,.5));
}
.hero-grid-glow{
  position:absolute;inset:0;opacity:.12;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(90deg,#000,transparent 70%);
}
.hero-content{position:relative;z-index:2}
.hero-copy{max-width:760px}
.eyebrow{margin:0 0 18px;font-size:15px;letter-spacing:2.2px;font-weight:700}
.hero-title{margin:0;line-height:.78}
.title-line{display:block;font-size:clamp(88px,10vw,170px);letter-spacing:-9px;font-weight:950}
.title-line span{color:var(--orange)}
.hero-slogan{
  margin:34px 0 0;font-size:clamp(38px,4vw,68px);
  line-height:1.12;letter-spacing:-4px;font-weight:800
}
.hero-slogan strong{color:var(--orange)}
.hero-desc{margin:26px 0 0;color:#d9deea;font-size:20px;line-height:1.8}
.hero-buttons{display:flex;gap:13px;flex-wrap:wrap;margin-top:36px}
.hero-proof{
  display:flex;gap:0;margin-top:52px;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.17);max-width:700px
}
.proof-item{padding-right:28px;margin-right:28px;border-right:1px solid rgba(255,255,255,.16)}
.proof-item:last-child{border:0;margin:0;padding:0}
.proof-item strong{display:block;font-size:13px;letter-spacing:1.3px;color:#fff}
.proof-item span{display:block;margin-top:7px;font-size:13px;color:var(--muted)}

.scroll-indicator{
  position:absolute;left:50%;bottom:24px;z-index:3;
  transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  color:rgba(255,255,255,.65);font-size:9px;letter-spacing:2px
}
.scroll-indicator i{display:block;width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:scrollLine 1.8s infinite}
@keyframes scrollLine{50%{transform:scaleY(.55);transform-origin:top}}

.reveal-up{opacity:0;transform:translateY(34px);transition:.85s cubic-bezier(.2,.8,.2,1)}
.reveal-up.is-visible{opacity:1;transform:none}

.service-preview{padding:110px 0 70px;background:#fff}
.section-heading{max-width:500px;margin-bottom:46px}
.section-kicker{margin:0 0 17px;color:var(--orange);font-size:13px;font-weight:900;letter-spacing:1.2px}
.section-heading h2,.placeholder-section h2,.contact-preview h2{
  margin:0;font-size:clamp(38px,4vw,64px);line-height:1.13;letter-spacing:-4px
}
.section-heading>p:last-child{margin:20px 0 0;color:#666;font-size:17px;line-height:1.8}
.service-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.service-card{
  position:relative;min-height:310px;padding:27px 25px;
  border:1px solid #e9e9ec;border-radius:18px;background:#fff;
  transition:.3s;overflow:hidden
}
.service-card:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgba(0,0,0,.09)}
.service-no{position:absolute;top:20px;left:20px;font-size:17px;font-weight:900;color:#bbb}
.service-icon{
  width:62px;height:62px;margin:45px auto 32px;border-radius:18px;
  display:grid;place-items:center;font-size:27px;font-weight:950
}
.service-icon.naver{color:var(--naver);border:2px solid rgba(32,196,99,.3);background:rgba(32,196,99,.08)}
.service-icon.google{color:var(--google);border:2px solid rgba(66,133,244,.25);background:rgba(66,133,244,.08)}
.service-icon.kakao{color:#111;border:2px solid rgba(255,225,0,.45);background:rgba(255,225,0,.75)}
.service-icon.platform{color:var(--purple);border:2px solid rgba(138,108,255,.3);background:rgba(138,108,255,.08)}
.service-icon.lms{color:var(--pink);border:2px solid rgba(255,107,122,.3);background:rgba(255,107,122,.08)}
.service-card h3{text-align:center;margin:0;font-size:21px;letter-spacing:-1px}
.service-card p{text-align:center;margin:14px 0 0;color:#666;line-height:1.7;font-size:14px}

.production-preview{padding:28px 0 110px;background:#fff}
.production-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.production-card{
  min-height:360px;border-radius:24px;overflow:hidden;position:relative;
  display:flex;align-items:flex-end;padding:34px;color:#fff;
  background-size:cover;background-position:center
}
.production-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.84))}
.production-card.video-card{background-image:url("../assets/soldup-hero.png");background-position:left center}
.production-card.web-card{background-image:url("../assets/soldup-hero.png");background-position:right center}
.production-copy{position:relative;z-index:2;max-width:500px}
.production-copy span{font-size:12px;letter-spacing:1.5px;color:var(--orange)}
.production-copy h3{margin:10px 0 12px;font-size:36px;letter-spacing:-2px}
.production-copy p{margin:0;color:rgba(255,255,255,.72);line-height:1.7}
.production-copy a{display:inline-block;margin-top:22px;font-weight:800}

.placeholder-section{padding:90px 0;background:#f4f5f7}
.placeholder-section.dark{background:#10131a;color:#fff}
.placeholder-section p:last-child{color:#777;font-size:17px}
.contact-preview{padding:110px 0;background:#0d5cff;color:#fff}
.contact-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.contact-preview .section-kicker{color:#cfe0ff}

.floating-actions{position:fixed;right:18px;bottom:18px;z-index:900;display:flex;flex-direction:column;gap:8px}
.floating-actions a{min-width:96px;height:48px;display:grid;place-items:center;border-radius:10px;font-size:13px;font-weight:900;box-shadow:0 12px 25px rgba(0,0,0,.18)}
.floating-call{background:var(--orange);color:#fff}
.floating-kakao{background:#ffe500;color:#111}

@media(max-width:1180px){
  .desktop-nav{gap:22px}
  .desktop-nav a{font-size:13px}
  .header-actions .btn-ghost{display:none}
  .service-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  :root{--header-h:72px}
  .desktop-nav,.header-actions{display:none}
  .menu-toggle{display:block}
  .mobile-menu{
    position:fixed;top:72px;left:0;right:0;
    display:grid;grid-template-rows:0fr;
    background:rgba(5,7,12,.98);overflow:hidden;
    transition:.35s;border-bottom:1px solid rgba(255,255,255,.08)
  }
  .mobile-menu>nav,.mobile-menu-actions{overflow:hidden}
  .mobile-menu.open{grid-template-rows:1fr;padding:24px}
  .mobile-menu nav{display:grid;gap:0}
  .mobile-menu nav a{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);color:#fff;font-size:18px;font-weight:800}
  .mobile-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .hero{min-height:920px;align-items:flex-end;padding-bottom:90px}
  .hero-media img{object-position:62% center}
  .hero-overlay{background:linear-gradient(180deg,rgba(2,5,11,.25),rgba(2,5,11,.96) 68%,#02050b)}
  .hero-copy{max-width:none}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .production-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .container{width:min(calc(100% - 28px),var(--container))}
  .logo-main{font-size:26px}
  .logo small{font-size:8px}
  .hero{min-height:820px;padding-bottom:72px}
  .hero-media img{object-position:66% center}
  .eyebrow{font-size:12px;margin-bottom:14px}
  .title-line{font-size:74px;letter-spacing:-5px}
  .hero-slogan{font-size:38px;letter-spacing:-2.5px;margin-top:25px}
  .hero-desc{font-size:16px;line-height:1.75;margin-top:20px}
  .desktop-only{display:none}
  .hero-buttons{display:grid;grid-template-columns:1fr;margin-top:28px}
  .btn-large{width:100%;min-height:54px;font-size:15px}
  .hero-proof{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
  .proof-item{padding:0;margin:0;border:0}
  .proof-item:last-child{grid-column:1/-1}
  .scroll-indicator{display:none}
  .service-preview{padding:80px 0 42px}
  .section-heading h2,.placeholder-section h2,.contact-preview h2{font-size:38px;letter-spacing:-2.5px}
  .section-heading>p:last-child{font-size:15px}
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:auto;padding-bottom:28px}
  .production-preview{padding-bottom:80px}
  .production-card{min-height:330px;padding:26px}
  .production-copy h3{font-size:30px}
  .contact-preview{padding:82px 0}
  .contact-inner{display:grid}
  .floating-actions{right:12px;bottom:12px}
  .floating-actions a{min-width:82px;height:44px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}


/* PHASE 2 — BRAND / COMPLETE MARKETING / PROCESS / AD PRODUCTS */
.brand-story{position:relative;background:#05070c;color:#fff}
.brand-story-sticky{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.story-scroll-spacer{height:240vh}
.brand-story-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.story-lines{min-height:180px;position:relative}
.story-line{
  position:absolute;left:0;top:0;margin:0;opacity:0;transform:translateY(38px);
  font-size:clamp(42px,5vw,76px);line-height:1.18;letter-spacing:-4px;font-weight:800;
  transition:.55s cubic-bezier(.2,.8,.2,1)
}
.story-line.active{opacity:1;transform:none}
.story-line strong{color:var(--orange)}
.story-finale{margin-top:220px}
.story-finale>span{font-size:clamp(70px,8vw,124px);font-weight:950;letter-spacing:-7px;line-height:.9}
.story-finale>span span{color:var(--orange)}
.story-finale p{margin:24px 0 0;color:#b9c0ce;font-size:18px}
.brand-story-visual{min-height:580px;display:grid;place-items:center}
.city-stage{
  width:min(100%,620px);height:520px;position:relative;border-radius:34px;overflow:hidden;
  background:
    radial-gradient(circle at 50% 85%,rgba(255,77,34,.3),transparent 35%),
    linear-gradient(180deg,#151a28,#080b12);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 100px rgba(0,0,0,.45)
}
.city-stage::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;opacity:.5
}
.city-building{position:absolute;bottom:0;background:linear-gradient(180deg,#2a3143,#111621);border:1px solid rgba(255,255,255,.1)}
.city-building::before{content:"";position:absolute;inset:10px;background:repeating-linear-gradient(180deg,rgba(255,148,88,.75) 0 3px,transparent 3px 14px);opacity:.6}
.city-building.b1{left:8%;width:13%;height:44%}.city-building.b2{left:22%;width:18%;height:66%}
.city-building.b3{left:42%;width:16%;height:86%}.city-building.b4{left:60%;width:14%;height:57%}.city-building.b5{left:76%;width:17%;height:72%}
.data-card{
  position:absolute;z-index:3;padding:16px 18px;border-radius:16px;
  background:rgba(14,18,28,.82);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);box-shadow:0 18px 45px rgba(0,0,0,.28)
}
.data-card span{display:block;color:#9da6b8;font-size:12px}
.data-card strong{display:block;margin-top:6px;color:#fff;font-size:22px}
.data-a{top:12%;left:8%;animation:floatA 4.2s ease-in-out infinite}
.data-b{top:25%;right:7%;animation:floatA 4.8s ease-in-out infinite reverse}
.data-c{bottom:13%;right:13%;animation:floatA 3.8s ease-in-out infinite}
@keyframes floatA{50%{transform:translateY(-12px)}}
.city-glow{position:absolute;width:230px;height:230px;border-radius:50%;background:rgba(255,77,34,.18);filter:blur(60px);left:50%;bottom:-80px;transform:translateX(-50%)}

.complete-marketing{padding:130px 0;background:#f4f5f7;overflow:hidden}
.wide-heading{max-width:760px}
.orbit-layout{display:grid;grid-template-columns:minmax(580px,1.2fr) minmax(320px,.8fr);gap:70px;align-items:center;margin-top:60px}
.orbit-stage{position:relative;width:680px;height:680px;max-width:100%;margin:auto}
.orbit-ring{position:absolute;inset:13%;border-radius:50%;border:1px solid rgba(0,0,0,.13)}
.orbit-ring-two{inset:30%;border-style:dashed}
.orbit-center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:190px;height:190px;border-radius:50%;
  display:grid;place-items:center;text-align:center;background:#090c13;color:#fff;box-shadow:0 25px 70px rgba(0,0,0,.25)
}
.orbit-center strong{font-size:34px;letter-spacing:-2px}.orbit-center strong span{color:var(--orange)}
.orbit-center small{position:absolute;bottom:44px;font-size:9px;letter-spacing:2px;color:#8f98aa}
.orbit-node{
  position:absolute;width:142px;height:84px;padding:12px;border-radius:16px;border:1px solid #d9dce3;background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.08);cursor:pointer;transition:.3s;text-align:left
}
.orbit-node:hover,.orbit-node.active{transform:scale(1.07);border-color:var(--orange);box-shadow:0 20px 50px rgba(255,77,34,.15)}
.orbit-node span{font-size:10px;color:var(--orange);font-weight:900}.orbit-node strong{display:block;margin-top:3px;font-size:16px}
.orbit-node small{display:block;margin-top:4px;color:#777;font-size:11px}
.node-1{left:50%;top:0;transform:translateX(-50%)}.node-1:hover,.node-1.active{transform:translateX(-50%) scale(1.07)}
.node-2{right:4%;top:18%}.node-3{right:0;top:45%}.node-4{right:8%;bottom:8%}
.node-5{left:50%;bottom:0;transform:translateX(-50%)}.node-5:hover,.node-5.active{transform:translateX(-50%) scale(1.07)}
.node-6{left:5%;bottom:8%}.node-7{left:0;top:45%}.node-8{left:7%;top:18%}
.orbit-detail{padding:44px;border-radius:24px;background:#0b0e15;color:#fff;min-height:330px;box-shadow:0 28px 80px rgba(0,0,0,.18)}
.orbit-detail-no{margin:0;color:var(--orange);font-weight:900}.orbit-detail h3{font-size:36px;line-height:1.25;letter-spacing:-2px;margin:22px 0 18px}
.orbit-detail>p:not(.orbit-detail-no){color:#aeb6c5;line-height:1.8}
.orbit-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.orbit-tags span{padding:9px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;font-size:12px;color:#dce1ea}

.process-section{padding:130px 0;background:#0b0e14;color:#fff}
.process-heading{max-width:670px}
.process-heading>p:last-child{color:#9ea7b8}
.process-roadmap{position:relative;margin-top:80px;padding-left:100px}
.process-progress{position:absolute;left:36px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.12)}
.process-progress i{display:block;width:100%;height:0;background:linear-gradient(var(--orange),#ff9a6a);transition:.15s}
.process-step{
  display:grid;grid-template-columns:90px 1fr;gap:30px;align-items:start;
  padding:34px 0 44px;border-bottom:1px solid rgba(255,255,255,.1);opacity:.4;transform:translateX(24px);transition:.45s
}
.process-step.is-active{opacity:1;transform:none}
.step-no{font-size:30px;font-weight:900;color:var(--orange)}
.process-step h3{margin:0;font-size:30px;letter-spacing:-1.5px}
.process-step p{margin:12px 0 0;color:#a9b1c0;font-size:16px;line-height:1.75;max-width:720px}

.ad-products{padding:130px 0;background:#fff}
.product-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:48px 0 26px}
.product-tab{
  height:48px;padding:0 20px;border-radius:999px;border:1px solid #dfe2e8;background:#fff;
  font-weight:900;cursor:pointer;transition:.25s
}
.product-tab.active,.product-tab:hover{background:#0a0d14;color:#fff;border-color:#0a0d14}
.product-panel{
  display:none;grid-template-columns:1fr 1.05fr;gap:65px;align-items:center;
  min-height:610px;padding:58px;border-radius:30px;background:#f4f5f7;overflow:hidden
}
.product-panel.active{display:grid}
.product-brand{width:68px;height:68px;display:grid;place-items:center;border-radius:20px;font-size:30px;font-weight:950}
.naver-brand{background:#20c463;color:#fff}.google-brand{background:#fff;color:#4285f4;border:1px solid #ddd}
.kakao-brand{background:#ffe100;color:#111}.platform-brand{background:#8a6cff;color:#fff}.lms-brand{background:#ff6b7a;color:#fff}
.product-overline{margin:24px 0 12px;color:var(--orange);font-size:12px;font-weight:900;letter-spacing:1.3px}
.product-info h3{margin:0;font-size:44px;line-height:1.2;letter-spacing:-3px}
.product-info>p:not(.product-overline){color:#666;line-height:1.8;font-size:16px}
.product-info ul{margin:25px 0 32px;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.product-info li{position:relative;padding-left:18px;font-size:14px;font-weight:700}.product-info li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.product-mockup{position:relative;min-height:460px}
.search-mockup{background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.16);overflow:hidden}
.browser-bar{height:48px;background:#eceff4;display:flex;align-items:center;gap:7px;padding:0 15px}.browser-bar i{width:9px;height:9px;border-radius:50%;background:#bbb}.browser-bar span{margin-left:10px;color:#8b93a2;font-size:11px}
.mock-search{display:flex;align-items:center;gap:16px;padding:32px}.mock-logo{font-size:38px;color:#20c463;font-weight:950}.mock-searchbox{flex:1;border:2px solid #20c463;border-radius:8px;padding:14px;color:#555}
.mock-ad-card{margin:0 28px;padding:26px;border:1px solid #e1e4ea;border-radius:14px}.mock-ad-card>span{color:#20c463;font-size:12px;font-weight:900}.mock-ad-card h4{font-size:25px;margin:14px 0 8px}.mock-ad-card p{color:#777}.mock-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}.mock-thumbs i{height:72px;border-radius:9px;background:linear-gradient(135deg,#222,#777)}
.youtube-mockup{border-radius:24px;background:#111;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.2)}
.video-screen{height:350px;border-radius:16px;display:grid;place-items:center;text-align:center;background:linear-gradient(135deg,#171c29,#ff4d22);color:#fff}.video-screen span{position:absolute;font-size:40px}.video-screen strong{font-size:32px;letter-spacing:-2px}.video-meta{display:flex;justify-content:space-between;color:#fff;padding:18px 4px 10px}.video-meta span{color:#aaa}.video-progress{height:4px;background:#333}.video-progress i{display:block;width:68%;height:100%;background:#ff2f2f}
.phone-mockup{width:310px;min-height:540px;margin:auto;border:12px solid #111;border-radius:45px;background:#f4f4f4;padding:26px 18px;box-shadow:0 30px 80px rgba(0,0,0,.24)}
.phone-notch{width:105px;height:22px;border-radius:0 0 14px 14px;background:#111;margin:-26px auto 22px}.chat-top{text-align:center;font-weight:800}.chat-date{text-align:center;margin:24px 0;color:#999;font-size:12px}.chat-bubble{background:#fff;padding:14px;border-radius:14px;font-size:14px;line-height:1.5}.biz-banner{margin-top:24px;background:#ffe100;border-radius:16px;padding:18px}.biz-banner strong{display:block;font-size:19px}.biz-banner span{display:block;margin-top:12px;font-size:12px}
.listing-mockup{background:#dfe7ef;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.16)}.listing-map{height:300px;position:relative;background:linear-gradient(135deg,#d8e1e8,#f2f4f6)}.listing-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(35deg,transparent 46%,rgba(120,140,155,.3) 47%,rgba(120,140,155,.3) 50%,transparent 51%);background-size:80px 80px}.listing-map i{position:absolute;width:32px;height:32px;border-radius:50% 50% 50% 0;background:var(--orange);transform:rotate(-45deg)}.listing-map i:nth-child(1){left:24%;top:28%}.listing-map i:nth-child(2){left:58%;top:42%}.listing-map i:nth-child(3){right:13%;top:19%}.listing-card{margin:-28px 20px 20px;position:relative;background:#fff;border-radius:16px;padding:14px;display:grid;grid-template-columns:100px 1fr;gap:15px}.listing-image{border-radius:10px;background:linear-gradient(135deg,#222,#888)}.listing-card b,.listing-card span{display:block}.listing-card span{margin-top:8px;color:#888;font-size:12px}
.lms-mockup{display:flex;align-items:center;justify-content:center;gap:14px}.sms-phone{width:30%;height:390px;border:8px solid #111;border-radius:28px;background:#fff;padding:30px 14px;box-shadow:0 30px 60px rgba(0,0,0,.2)}.sms-phone span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;font-weight:900}.sms-phone p{margin-top:35px;font-weight:800;line-height:1.7}.sms-1{transform:translateY(18px) rotate(-5deg)}.sms-3{transform:translateY(18px) rotate(5deg)}

@media(max-width:1050px){
  .brand-story-inner,.orbit-layout,.product-panel{grid-template-columns:1fr}
  .brand-story-visual{min-height:auto}.city-stage{height:460px}
  .orbit-stage{width:620px;height:620px}.orbit-detail{max-width:700px;margin:auto}
  .product-panel{padding:38px}.product-info{order:1}.product-mockup{order:2}
}
@media(max-width:720px){
  .brand-story-sticky{position:relative;min-height:auto;padding:100px 0}.story-scroll-spacer{display:none}
  .brand-story-inner{gap:50px}.story-lines{min-height:auto;display:grid;gap:26px}
  .story-line{position:relative;opacity:1;transform:none;font-size:40px;letter-spacing:-2.5px}
  .story-finale{margin-top:70px}.story-finale>span{font-size:72px}
  .city-stage{height:390px}.data-card{padding:12px}.data-card strong{font-size:18px}
  .complete-marketing,.process-section,.ad-products{padding:90px 0}
  .orbit-stage{height:auto;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .orbit-ring,.orbit-center{display:none}.orbit-node,.node-1,.node-2,.node-3,.node-4,.node-5,.node-6,.node-7,.node-8{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;transform:none!important;width:auto;height:88px}
  .orbit-node:hover,.orbit-node.active{transform:none!important}
  .orbit-detail{padding:30px;min-height:auto}.orbit-detail h3{font-size:30px}
  .process-roadmap{padding-left:50px}.process-progress{left:14px}.process-step{grid-template-columns:56px 1fr;gap:16px}.process-step h3{font-size:24px}
  .product-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px}.product-tab{flex:0 0 auto}
  .product-panel{padding:26px;min-height:auto}.product-info h3{font-size:34px;letter-spacing:-2px}.product-info ul{grid-template-columns:1fr}
  .product-mockup{min-height:360px}.video-screen{height:300px}.phone-mockup{width:min(100%,300px);min-height:500px}
  .lms-mockup{min-height:400px;gap:5px}.sms-phone{height:330px;border-width:6px;padding:24px 8px}.sms-phone p{font-size:12px}
}


/* PHASE 3 — VIDEO / WEB / DASHBOARD */
.video-service{
  position:relative;padding:140px 0;background:#07090f;color:#fff;overflow:hidden
}
.video-service::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 12% 10%,rgba(255,77,34,.13),transparent 28%),
    radial-gradient(circle at 90% 70%,rgba(70,95,255,.1),transparent 32%)
}
.video-service .container{position:relative;z-index:1}
.video-service .section-heading>p:last-child{color:#9da6b8}
.video-showcase{display:grid;grid-template-columns:1.3fr .7fr;gap:34px;margin-top:62px}
.video-stage{
  position:relative;min-height:620px;border-radius:28px;overflow:hidden;
  background:#11151e;border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 100px rgba(0,0,0,.4)
}
.video-frame{
  position:absolute;inset:0;opacity:0;transform:scale(1.04);
  transition:.65s cubic-bezier(.2,.8,.2,1);padding:54px;display:flex;align-items:flex-end
}
.video-frame::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,14,.08),rgba(5,8,14,.88))}
.video-frame:nth-child(1){background:linear-gradient(135deg,#0e1524 5%,#2c3545 48%,#ff4d22 160%)}
.video-frame:nth-child(2){background:linear-gradient(135deg,#160e12,#351a22 55%,#ff2f2f 150%)}
.video-frame:nth-child(3){background:linear-gradient(135deg,#100d1b,#27214a 58%,#8a6cff 145%)}
.video-frame.active{opacity:1;transform:none}
.video-badge{
  position:absolute;top:34px;left:34px;z-index:2;padding:9px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.25);font-size:11px;font-weight:900;letter-spacing:1.2px
}
.video-copy{position:relative;z-index:2;max-width:620px}
.video-copy span{color:var(--orange);font-size:12px;letter-spacing:1.5px;font-weight:900}
.video-copy h3{margin:12px 0 14px;font-size:clamp(42px,5vw,72px);line-height:1.05;letter-spacing:-4px}
.video-copy p{margin:0;color:#c0c6d2;font-size:17px;line-height:1.7}
.video-play{
  position:absolute;z-index:3;right:46px;top:50%;transform:translateY(-50%);
  width:98px;height:98px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(14px)
}
.video-play span{font-size:30px;margin-left:7px}
.video-timeline{position:absolute;left:34px;right:34px;bottom:24px;z-index:4;display:flex;gap:10px}
.video-tab{
  flex:1;height:48px;border:1px solid rgba(255,255,255,.16);background:rgba(5,8,14,.48);
  color:#b8c0cd;border-radius:10px;font-weight:800;cursor:pointer;transition:.25s
}
.video-tab.active,.video-tab:hover{background:#fff;color:#111}
.video-service-list{display:grid;gap:14px}
.video-service-list article{
  display:grid;grid-template-columns:58px 1fr;gap:18px;padding:28px;border-radius:20px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);transition:.3s
}
.video-service-list article:hover{transform:translateX(8px);background:rgba(255,255,255,.07)}
.video-service-list article>span{color:var(--orange);font-weight:950}
.video-service-list h3{margin:0;font-size:22px}
.video-service-list p{margin:10px 0 0;color:#98a1b0;line-height:1.65;font-size:14px}
.format-strip{
  display:flex;align-items:center;gap:22px;overflow:hidden;margin-top:54px;padding:24px 0;
  border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);
  white-space:nowrap;color:#7f8999;font-size:13px;font-weight:900;letter-spacing:1.1px
}
.format-strip i{width:5px;height:5px;border-radius:50%;background:var(--orange);flex:0 0 auto}

.web-service{padding:145px 0 110px;background:#f1f3f6;overflow:hidden}
.web-service-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:80px;align-items:center}
.web-service-copy h2{margin:0;font-size:clamp(44px,5vw,74px);line-height:1.12;letter-spacing:-4px}
.web-service-copy>p:not(.section-kicker){color:#656d7a;line-height:1.85;font-size:17px}
.web-feature-list{display:grid;gap:10px;margin:38px 0}
.web-feature-list article{
  display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid #d9dde5
}
.web-feature-list strong{color:var(--orange);font-size:13px}
.web-feature-list h3{margin:0;font-size:20px}
.web-feature-list p{margin:8px 0 0;color:#727987;line-height:1.6;font-size:14px}
.device-scene{position:relative;min-height:690px}
.device-glow{
  position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);
  width:520px;height:520px;border-radius:50%;background:rgba(255,77,34,.18);filter:blur(80px)
}
.device{position:absolute;filter:drop-shadow(0 35px 45px rgba(25,30,40,.23))}
.device-screen{overflow:hidden;background:#fff}
.laptop{width:78%;left:5%;top:15%}
.laptop::after{content:"";display:block;width:112%;height:18px;margin-left:-6%;border-radius:0 0 18px 18px;background:linear-gradient(#b8bec7,#e7e9ed)}
.laptop .device-screen{aspect-ratio:16/10;border:12px solid #171a20;border-radius:16px 16px 5px 5px}
.screen-nav{height:13%;display:flex;align-items:center;gap:9px;padding:0 6%;background:#0b0e14;color:#fff}
.screen-nav span{margin-right:auto;font-weight:950}.screen-nav i{width:8px;height:8px;border-radius:50%;background:#697284}
.screen-hero{height:61%;padding:8% 7%;color:#fff;background:linear-gradient(135deg,rgba(9,12,20,.5),rgba(9,12,20,.86)),linear-gradient(130deg,#566170,#181c24)}
.screen-hero small{font-size:8px;letter-spacing:1.3px}.screen-hero strong{display:block;margin:4% 0;font-size:clamp(18px,2.2vw,36px);line-height:1.16}.screen-hero button,.device button{border:0;border-radius:6px;background:var(--orange);color:#fff;font-weight:800;padding:9px 13px;font-size:9px}
.screen-cards{height:26%;padding:3%;display:grid;grid-template-columns:repeat(3,1fr);gap:3%}.screen-cards i{border-radius:7px;background:linear-gradient(135deg,#e3e7ec,#aeb6c1)}
.tablet{width:30%;right:3%;top:7%;transform:rotate(4deg)}
.tablet .device-screen{aspect-ratio:3/4;border:10px solid #171a20;border-radius:22px;padding:9%;background:#fff}
.mini-logo{font-size:11px;font-weight:950}.tablet-photo{height:45%;margin:10% 0;background:linear-gradient(145deg,#3c4653,#adb4bd);border-radius:8px}
.tablet strong{display:block;font-size:17px;line-height:1.2;margin-bottom:12px}
.phone{width:21%;right:12%;bottom:4%;transform:rotate(-3deg);z-index:3}
.phone .device-screen{aspect-ratio:9/18.5;border:8px solid #111;border-radius:28px;padding:18% 9% 10%;background:#fff}
.phone-speaker{position:absolute;z-index:3;top:8px;left:50%;transform:translateX(-50%);width:36%;height:8px;border-radius:8px;background:#111}
.phone-photo{height:39%;margin:16% 0 12%;background:linear-gradient(145deg,#272d38,#929ba7);border-radius:8px}
.phone strong{font-size:14px}.phone p{font-size:8px;color:#777}.phone button{width:100%}
.web-capabilities{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:60px}
.web-capabilities article{padding:24px;border-radius:16px;background:#fff;border:1px solid #e0e3e9}
.web-capabilities span{display:block;color:var(--orange);font-size:10px;font-weight:900;letter-spacing:1px}
.web-capabilities strong{display:block;margin-top:11px;font-size:15px}

.dashboard-section{padding:145px 0;background:#080b11;color:#fff;overflow:hidden}
.dashboard-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px}
.dashboard-heading h2{margin:0;font-size:clamp(44px,5vw,74px);line-height:1.12;letter-spacing:-4px}
.dashboard-heading>p{max-width:460px;color:#9ea7b7;line-height:1.8}
.dashboard-shell{
  margin-top:60px;padding:24px;border-radius:28px;background:#111620;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 45px 120px rgba(0,0,0,.35)
}
.dashboard-topbar{display:flex;align-items:center;gap:20px;padding:8px 4px 24px;border-bottom:1px solid rgba(255,255,255,.08)}
.dash-logo{font-size:24px;font-weight:950;letter-spacing:-1.5px}.dash-logo span{color:var(--orange)}
.dash-period{margin-left:auto;color:#8f99aa;font-size:12px}.dash-status{font-size:11px;font-weight:900;color:#64df94}.dash-status i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#64df94;box-shadow:0 0 12px #64df94}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.metric-card{padding:24px;border-radius:17px;background:#171d28;border:1px solid rgba(255,255,255,.07)}
.metric-card.accent{background:linear-gradient(135deg,#ff4d22,#d8320d)}
.metric-card span{display:block;color:#929cad;font-size:12px}.metric-card.accent span{color:#ffe3db}
.metric-card strong{display:block;margin:12px 0 9px;font-size:32px;letter-spacing:-1.5px}.metric-card small{color:#66db96}.metric-card.accent small{color:#fff}
.dashboard-content-grid{display:grid;grid-template-columns:1.6fr .8fr;gap:14px;margin-top:14px}
.chart-card,.channel-card{padding:24px;border-radius:18px;background:#171d28;border:1px solid rgba(255,255,255,.07)}
.chart-head{display:flex;justify-content:space-between;align-items:flex-start}.chart-head span{display:block;color:#8f99aa;font-size:11px}.chart-head strong{display:block;margin-top:6px;font-size:18px}.chart-head small{color:#687386}
.line-chart{position:relative;height:280px;margin-top:22px}
.line-chart svg{width:100%;height:100%;position:relative;z-index:2}
.line-path{fill:none;stroke:#ff4d22;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(255,77,34,.35))}
.area-path{fill:url(#areaGradient)}
.chart-grid-lines{position:absolute;inset:0;display:grid;grid-template-rows:repeat(4,1fr)}
.chart-grid-lines i{border-top:1px solid rgba(255,255,255,.07)}
.channel-bars{display:grid;gap:24px;margin-top:34px}.channel-bars>div{display:grid;grid-template-columns:80px 1fr 40px;gap:11px;align-items:center}
.channel-bars span{font-size:10px;color:#98a2b3}.channel-bars i{display:block;height:7px;border-radius:8px;background:#252d39;overflow:hidden}.channel-bars b{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,#ff4d22,#ff8a5e)}
.channel-bars strong{font-size:11px;text-align:right}
.dashboard-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.dashboard-bottom article{padding:22px;border-radius:16px;background:#171d28;border:1px solid rgba(255,255,255,.07)}
.dashboard-bottom span{display:block;color:#8e98a8;font-size:11px}.dashboard-bottom strong{display:block;margin:10px 0 7px;font-size:23px}.dashboard-bottom small{color:#778295}

@media(max-width:1050px){
  .video-showcase,.web-service-grid{grid-template-columns:1fr}
  .video-service-list{grid-template-columns:1fr 1fr}
  .device-scene{min-height:620px;max-width:780px;width:100%;margin:auto}
  .dashboard-content-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .video-service,.web-service,.dashboard-section{padding:95px 0}
  .video-showcase{gap:18px}.video-stage{min-height:570px}
  .video-frame{padding:30px 24px 105px}.video-copy h3{font-size:40px;letter-spacing:-2.5px}
  .video-play{width:68px;height:68px;right:24px;top:30%}.video-timeline{left:16px;right:16px;bottom:16px;gap:5px}.video-tab{font-size:12px}
  .video-service-list{grid-template-columns:1fr}.video-service-list article{padding:22px}
  .format-strip{overflow-x:auto}
  .web-service-copy h2,.dashboard-heading h2{font-size:40px;letter-spacing:-2.5px}
  .device-scene{min-height:470px}.laptop{width:88%;left:0;top:19%}.tablet{width:33%;right:0;top:5%}.phone{width:25%;right:8%;bottom:2%}
  .web-capabilities{grid-template-columns:1fr 1fr}
  .dashboard-heading{display:block}.dashboard-heading>p{margin-top:20px}
  .dashboard-shell{padding:14px}.dash-period{display:none}
  .metric-grid{grid-template-columns:1fr 1fr}.metric-card{padding:18px}.metric-card strong{font-size:25px}
  .line-chart{height:220px}
  .dashboard-bottom{grid-template-columns:1fr}
}
@media(max-width:480px){
  .video-stage{min-height:520px}.video-copy h3{font-size:34px}
  .video-copy p{font-size:14px}.video-play{top:25%}
  .device-scene{min-height:390px}.tablet{display:none}.phone{width:31%;right:2%}.laptop{width:94%}
  .web-capabilities{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:1fr}
  .channel-bars>div{grid-template-columns:70px 1fr 34px}
}


/* PHASE 4 — COMPANY / PORTFOLIO / CASE STUDY */
.about-company{padding:145px 0;background:#fff;overflow:hidden}
.about-company-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}
.about-copy h2{margin:0;font-size:clamp(46px,5vw,76px);line-height:1.1;letter-spacing:-4px}
.about-lead{margin-top:28px;color:#646c79;font-size:17px;line-height:1.9}
.about-quote{position:relative;margin:38px 0;padding:30px 32px;border-left:3px solid var(--orange);background:#f5f6f8}
.about-quote>span{position:absolute;right:24px;top:0;font-size:72px;color:#e0e3e8;font-weight:900}
.about-quote p{position:relative;margin:0;font-size:21px;line-height:1.65;letter-spacing:-.6px}
.about-quote strong{color:var(--orange)}
.about-values{display:grid;gap:2px}
.about-values article{display:grid;grid-template-columns:55px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid #e4e6eb}
.about-values span{color:var(--orange);font-size:12px;font-weight:900}.about-values h3{margin:0;font-size:18px}
.about-values p{margin:7px 0 0;color:#757d89;font-size:14px;line-height:1.65}
.about-visual{position:relative;min-height:650px}
.about-panel{position:absolute;border-radius:24px;box-shadow:0 30px 70px rgba(16,22,32,.16)}
.panel-main{
  left:12%;top:12%;width:68%;height:62%;padding:52px;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(145deg,#111722,#283344 58%,#ff4d22 170%)
}
.panel-main::before{content:"";position:absolute;inset:0;border-radius:24px;background:repeating-linear-gradient(90deg,transparent 0 43px,rgba(255,255,255,.04) 44px)}
.panel-main small,.panel-main strong,.panel-main p{position:relative}.panel-main small{color:#9fa8b7;letter-spacing:2px}
.panel-main strong{font-size:clamp(54px,7vw,105px);line-height:.95;letter-spacing:-6px}.panel-main strong span{color:var(--orange)}
.panel-main p{margin:15px 0 0;color:#bcc4d0;letter-spacing:2px;font-size:11px}
.panel-stat{padding:23px;background:#fff;border:1px solid #e3e6eb}
.panel-stat span{display:block;color:#8b94a1;font-size:10px;font-weight:900}.panel-stat strong{display:block;margin-top:9px;font-size:24px}
.stat-one{right:2%;top:4%;width:185px}.stat-two{left:0;bottom:12%;width:210px}.stat-three{right:5%;bottom:5%;width:210px}
.about-orbit-line{position:absolute;border:1px solid rgba(255,77,34,.18);border-radius:50%}
.line-one{width:520px;height:520px;left:2%;top:3%}.line-two{width:390px;height:390px;right:0;bottom:0}

.portfolio-section{padding:145px 0;background:#0a0d13;color:#fff}
.portfolio-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px}
.portfolio-heading h2{margin:0;font-size:clamp(46px,5vw,76px);line-height:1.1;letter-spacing:-4px}
.portfolio-heading>p{max-width:450px;color:#9aa4b5;line-height:1.8}
.portfolio-filter{display:flex;gap:10px;flex-wrap:wrap;margin:50px 0 30px}
.portfolio-filter-btn{height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:transparent;color:#9ea7b8;font-weight:900;cursor:pointer}
.portfolio-filter-btn.active,.portfolio-filter-btn:hover{background:#fff;color:#111;border-color:#fff}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.portfolio-card{transition:.4s;opacity:1;transform:none}.portfolio-card.is-hidden{display:none}
.portfolio-card-large{grid-row:span 2}.portfolio-card-wide{grid-column:1/-1}
.portfolio-visual{position:relative;min-height:390px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.portfolio-card-large .portfolio-visual{min-height:690px}
.portfolio-card-wide .portfolio-visual{min-height:360px}
.project-tag{position:absolute;z-index:3;left:24px;top:24px;padding:8px 11px;border-radius:999px;background:rgba(9,12,18,.55);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px);font-size:9px;font-weight:900;letter-spacing:1.2px}
.visual-a{background:radial-gradient(circle at 70% 20%,rgba(255,123,77,.28),transparent 25%),linear-gradient(145deg,#1a2130,#606b78)}
.project-building{position:absolute;left:18%;right:12%;bottom:0;height:82%;clip-path:polygon(12% 8%,75% 0,100% 100%,0 100%);background:linear-gradient(100deg,#121722,#87909a 48%,#303946);border:1px solid rgba(255,255,255,.15)}
.project-building::before{content:"";position:absolute;inset:5%;background:repeating-linear-gradient(180deg,rgba(255,194,140,.7) 0 3px,transparent 3px 18px);opacity:.5}
.project-ui-card{position:absolute;z-index:2;padding:15px 17px;border-radius:13px;background:rgba(11,15,23,.76);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(15px)}
.project-ui-card span{display:block;color:#9aa5b6;font-size:9px}.project-ui-card strong{display:block;margin-top:7px;font-size:22px}
.ui-a{left:7%;top:27%}.ui-b{right:7%;bottom:18%}
.visual-b{background:linear-gradient(145deg,#e9eef3,#bec8d2)}
.project-phone{position:absolute;left:50%;top:14%;transform:translateX(-50%) rotate(-5deg);width:180px;height:340px;border:10px solid #111;border-radius:32px;background:linear-gradient(#fff 0 14%,#17202d 14% 62%,#fff 62%)}
.project-search{position:absolute;left:12%;right:12%;bottom:12%;padding:17px;border-radius:12px;background:#fff;color:#555;border:2px solid #20c463;font-size:12px}
.visual-c{background:linear-gradient(145deg,#281015,#951f25 70%,#ff4d22)}
.project-play{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);font-size:28px}
.project-copy{position:absolute;left:26px;bottom:26px}.project-copy strong,.project-copy span{display:block}.project-copy strong{font-size:28px}.project-copy span{margin-top:7px;color:#f4b9a9;font-size:10px}
.visual-d{background:#ebe7df;color:#151515}
.project-logo-lockup{position:absolute;left:12%;top:26%;font-size:62px;line-height:.75;font-weight:300;letter-spacing:-4px}.project-logo-lockup span{font-size:13px;letter-spacing:4px}
.project-color-chip{position:absolute;bottom:15%;width:52px;height:90px;border-radius:26px}.chip-a{right:27%;background:#121820}.chip-b{right:17%;background:#bf865e}.chip-c{right:7%;background:#eee8dc;border:1px solid #ccc}
.visual-e{background:linear-gradient(135deg,#121724,#222d3d)}
.media-stack{position:absolute;left:6%;top:27%;display:flex;flex-wrap:wrap;gap:10px;max-width:44%}.media-stack span{padding:13px 16px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:12px;font-weight:900}
.media-chart{position:absolute;right:6%;left:56%;bottom:16%;top:18%;display:flex;align-items:flex-end;gap:12px;border-left:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:20px}
.media-chart i{flex:1;border-radius:8px 8px 0 0;background:linear-gradient(#ff7e57,#ff4d22)}.media-chart i:nth-child(1){height:32%}.media-chart i:nth-child(2){height:51%}.media-chart i:nth-child(3){height:68%}.media-chart i:nth-child(4){height:78%}.media-chart i:nth-child(5){height:94%}
.portfolio-meta{display:flex;justify-content:space-between;gap:20px;padding:20px 3px 34px}
.portfolio-meta>div>span{font-size:10px;color:#858fa1;font-weight:900}.portfolio-meta h3{margin:8px 0 0;font-size:24px;letter-spacing:-1px}
.portfolio-services{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}.portfolio-services span{padding:7px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:9px;color:#aab2c0}

.before-after-section{padding:145px 0;background:#f4f5f7}
.case-study-shell{margin-top:58px;padding:22px;border-radius:30px;background:#fff;box-shadow:0 30px 90px rgba(19,25,36,.1)}
.case-nav{display:flex;gap:8px;margin-bottom:18px}
.case-tab{height:44px;padding:0 17px;border:0;border-radius:10px;background:#eef0f4;color:#868e9b;font-weight:900;cursor:pointer}
.case-tab.active{background:#0c0f16;color:#fff}
.case-panel{display:none}.case-panel.active{display:block}
.compare-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:480px;border-radius:22px;overflow:hidden;background:#151923}
.compare-before,.compare-after{position:relative;padding:30px}.compare-before{background:#d8dde3;color:#333}.compare-after{background:linear-gradient(145deg,#131a27,#3e4b5e);color:#fff}
.compare-before>span,.compare-after>span{position:relative;z-index:2;font-size:11px;font-weight:900;letter-spacing:1.2px}
.old-site{position:absolute;inset:18% 10% 10%;padding:22px;border-radius:14px;background:#f5f5f5;border:1px solid #c8cdd4}
.old-site i{display:block;height:12px;margin-bottom:12px;border-radius:4px;background:#d3d7dc}.old-site i:nth-child(2){width:72%}.old-site i:nth-child(3){height:95px}.old-site i:nth-child(4){width:45%}
.old-site strong{position:absolute;left:20px;right:20px;bottom:20px;font-size:15px;color:#8b9199}
.new-site{position:absolute;inset:18% 10% 10%;padding:42px 34px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:14px;background:linear-gradient(145deg,rgba(10,13,20,.15),rgba(10,13,20,.9)),linear-gradient(135deg,#5d6876,#151a22)}
.new-site small{color:#ff8a61;font-size:10px;letter-spacing:1.5px}.new-site strong{margin:12px 0 20px;font-size:31px;line-height:1.25;letter-spacing:-1.5px}.new-site button{align-self:flex-start;border:0;border-radius:7px;background:var(--orange);color:#fff;padding:12px 16px;font-weight:800}
.compare-handle{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#fff;transform:translateX(-50%);z-index:4}
.compare-handle i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#111;font-style:normal;font-weight:900;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.case-result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.case-result-grid article{padding:24px;border-radius:16px;background:#f2f4f7}.case-result-grid span{display:block;color:#747d8a;font-size:11px}.case-result-grid strong{display:block;margin:12px 0 7px;font-size:32px;letter-spacing:-1px}.case-result-grid small{color:var(--orange);font-weight:800}

@media(max-width:1050px){
  .about-company-grid{grid-template-columns:1fr}.about-visual{max-width:760px;width:100%;margin:auto}
  .portfolio-heading{align-items:flex-start;flex-direction:column}
}
@media(max-width:760px){
  .about-company,.portfolio-section,.before-after-section{padding:95px 0}
  .about-copy h2,.portfolio-heading h2{font-size:40px;letter-spacing:-2.5px}
  .about-visual{min-height:500px}.panel-main{left:5%;width:82%;height:62%;padding:30px}.panel-main strong{font-size:68px}
  .stat-one{right:0}.stat-two{left:0}.stat-three{right:0}.line-one{width:400px;height:400px}.line-two{width:280px;height:280px}
  .portfolio-grid{grid-template-columns:1fr}.portfolio-card-large,.portfolio-card-wide{grid-column:auto;grid-row:auto}
  .portfolio-card-large .portfolio-visual,.portfolio-visual,.portfolio-card-wide .portfolio-visual{min-height:440px}
  .portfolio-meta{display:block}.portfolio-services{justify-content:flex-start;margin-top:14px}
  .case-study-shell{padding:12px}.case-nav{overflow-x:auto}.case-tab{flex:0 0 auto}
  .compare-stage{grid-template-columns:1fr;min-height:720px}.compare-before,.compare-after{min-height:360px}
  .compare-handle{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;transform:translateY(-50%)}
  .case-result-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .about-visual{min-height:430px}.panel-main{height:58%}.panel-main strong{font-size:56px}.panel-stat{padding:16px}.stat-one,.stat-two,.stat-three{width:160px}.panel-stat strong{font-size:18px}
  .portfolio-filter{overflow-x:auto;flex-wrap:nowrap}.portfolio-filter-btn{flex:0 0 auto}
  .portfolio-card-large .portfolio-visual,.portfolio-visual,.portfolio-card-wide .portfolio-visual{min-height:380px}
  .media-stack{max-width:90%;top:22%}.media-chart{left:8%;right:8%;top:55%;bottom:8%}
  .case-result-grid{grid-template-columns:1fr}.new-site strong{font-size:25px}
}


/* PHASE 5 — CONTACT / FOOTER / FINAL POLISH */
.contact-section{
  position:relative;padding:150px 0;background:#fff;overflow:hidden
}
.contact-section::before{
  content:"";position:absolute;right:-180px;top:-180px;width:520px;height:520px;border-radius:50%;
  background:rgba(255,77,34,.12);filter:blur(80px)
}
.contact-grid{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.contact-copy h2{margin:0;font-size:clamp(48px,5vw,78px);line-height:1.08;letter-spacing:-4px}
.contact-copy>p:not(.section-kicker){margin:28px 0 0;color:#68707d;font-size:17px;line-height:1.85;max-width:560px}
.contact-points{display:grid;gap:0;margin-top:42px;border-top:1px solid #e3e6eb}
.contact-points article{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid #e3e6eb}
.contact-points article>span{color:var(--orange);font-size:12px;font-weight:900}
.contact-points strong{font-size:18px}.contact-points p{margin:8px 0 0;color:#777f8b;font-size:14px;line-height:1.6}
.contact-direct{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:34px}
.contact-direct div{padding:20px;border-radius:14px;background:#f4f5f7}
.contact-direct span{display:block;color:#8d95a1;font-size:10px;font-weight:900;letter-spacing:1px}
.contact-direct strong{display:block;margin-top:9px;font-size:13px}

.contact-form{
  position:relative;padding:42px;border-radius:28px;background:#0d1119;color:#fff;
  box-shadow:0 35px 100px rgba(16,22,32,.18)
}
.form-head{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:25px;border-bottom:1px solid rgba(255,255,255,.1)}
.form-head span{color:var(--orange);font-size:11px;font-weight:900;letter-spacing:1.2px}
.form-head strong{font-size:28px;letter-spacing:-1px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
.form-grid label{display:grid;gap:9px}.form-grid label>span{color:#aab3c1;font-size:11px;font-weight:800}
.form-full{grid-column:1/-1}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#171d28;color:#fff;
  padding:15px 16px;font:inherit;outline:none;transition:.25s
}
.contact-form textarea{resize:vertical;min-height:140px}
.contact-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,77,34,.12)}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#667080}
.privacy-check{display:flex;align-items:center;gap:10px;margin:22px 0;color:#9da6b4;font-size:12px}
.privacy-check input{width:16px;height:16px;accent-color:var(--orange)}
.form-submit{
  width:100%;height:62px;border:0;border-radius:13px;background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-weight:900;font-size:15px;cursor:pointer;transition:.25s
}
.form-submit:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgba(255,77,34,.25)}
.form-submit i{font-style:normal;font-size:22px}
.form-note{margin:14px 0 0;color:#667080;font-size:11px;text-align:center}
.form-success{
  display:none;margin-top:16px;padding:14px;border-radius:10px;background:rgba(74,207,128,.12);color:#7de4a5;
  font-size:13px;text-align:center;border:1px solid rgba(74,207,128,.2)
}
.form-success.show{display:block}

.closing-banner{overflow:hidden;background:var(--orange);color:#fff}
.closing-track{display:flex;align-items:center;gap:30px;width:max-content;padding:28px 0;animation:closingMarquee 24s linear infinite}
.closing-track span{font-size:22px;font-weight:950;letter-spacing:1.2px}
.closing-track i{width:7px;height:7px;border-radius:50%;background:#fff}
@keyframes closingMarquee{to{transform:translateX(-25%)}}

.site-footer{padding:80px 0 30px;background:#080a0f;color:#fff}
.footer-main{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;padding-bottom:60px}
.footer-logo{display:inline-block;color:#fff;text-decoration:none;font-size:48px;font-weight:950;letter-spacing:-3px}
.footer-logo span{color:var(--orange)}
.footer-brand p{margin:20px 0 0;color:#8f98a7;line-height:1.6}
.footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.footer-nav>div{display:flex;flex-direction:column;gap:12px}
.footer-nav>div>span{margin-bottom:9px;color:#626b79;font-size:10px;font-weight:900;letter-spacing:1.3px}
.footer-nav a{color:#d7dce4;text-decoration:none;font-size:14px}.footer-nav a:hover{color:var(--orange)}
.footer-nav p{margin:0;color:#8c95a3;line-height:1.7;font-size:13px}
.footer-bottom{display:flex;align-items:center;gap:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.09);color:#6f7887;font-size:11px}
.footer-bottom>div{display:flex;gap:14px}.footer-bottom p{margin:0 auto}.footer-bottom a{color:#9fa7b4;text-decoration:none}
.floating-contact{
  position:fixed;right:24px;bottom:24px;z-index:30;width:96px;height:96px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;
  background:var(--orange);color:#fff;box-shadow:0 20px 45px rgba(255,77,34,.3);transition:.3s
}
.floating-contact:hover{transform:translateY(-5px) rotate(-3deg)}
.floating-contact span{font-size:10px;font-weight:900;line-height:1.2;text-align:center}.floating-contact i{margin-top:5px;font-style:normal;font-size:17px}

html{scroll-behavior:smooth}
::selection{background:var(--orange);color:#fff}

@media(max-width:1050px){
  .contact-grid,.footer-main{grid-template-columns:1fr}
  .contact-form{max-width:780px;width:100%}
}
@media(max-width:760px){
  .contact-section{padding:95px 0}
  .contact-copy h2{font-size:40px;letter-spacing:-2.5px}
  .contact-direct{grid-template-columns:1fr}
  .contact-form{padding:28px}
  .form-grid{grid-template-columns:1fr}.form-full{grid-column:auto}
  .footer-nav{grid-template-columns:1fr 1fr}
  .footer-bottom{align-items:flex-start;flex-direction:column;gap:14px}.footer-bottom p{margin:0}
  .floating-contact{width:78px;height:78px;right:16px;bottom:16px}
}
@media(max-width:480px){
  .contact-form{padding:22px;border-radius:20px}.form-head strong{font-size:23px}
  .footer-nav{grid-template-columns:1fr}
  .closing-track span{font-size:18px}
}