/* ===================== RESET & TOKENS ===================== */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#fcfcfc; --dark:#333333; --ink:#333333; --muted:#545454;
  --orange:#f55733; --gray:#f2f2f2; --line:rgba(51,51,51,0.12);
  --sidebar:80px;
}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Archivo','Pretendard','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif; font-weight:300; font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

/* ===================== LAYOUT ===================== */
.page{margin-left:var(--sidebar);position:relative;z-index:1;}
.container{max-width:1440px;margin:0 auto;padding:0 96px;}
.section, section{position:relative;}
.h2{font-size:42px;line-height:1.25;font-weight:600;color:var(--ink);text-transform:uppercase;}
.eyebrow{display:flex;gap:6px;color:var(--orange);font-size:18px;font-weight:300;line-height:1.2;}
.eyebrow span:nth-child(2){margin:0 2px;}

/* ===================== FIXED HERO VIDEO ===================== */
.hero-video{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;}
.hero-video video{width:100%;height:100%;object-fit:cover;}

/* ===================== SIDEBAR ===================== */
.sidebar{position:fixed;left:0;top:0;width:80px;height:100vh;background:var(--dark);z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:24px 0;}
.sb-top{height:46px;display:flex;align-items:center;}
.menu-btn{width:46px;height:46px;border-radius:50%;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.menu-btn span{display:block;width:20px;height:1.5px;background:var(--dark);transition:.3s;}
.menu-btn.open span:nth-child(1){transform:translateY(3.75px) rotate(45deg);}
.menu-btn.open span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg);}
.sb-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.sb-mark-vert{width:26px;height:26px;flex-shrink:0;}
.sb-vert{font-family:'Archivo',sans-serif;font-weight:800;font-size:21px;letter-spacing:.06em;text-transform:uppercase;color:#fff;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;}
/* mobile top-bar wordmark (mark + Creators) */
.sb-mark{width:26px;height:26px;}
.sb-word{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.01em;text-transform:uppercase;color:#fff;}
.sb-social{display:flex;flex-direction:column;gap:15px;align-items:center;}
.sb-ico img{width:28px;height:28px;}

/* ===================== SLIDE-OUT MENU ===================== */
.navmenu{position:fixed;left:80px;top:0;width:400px;max-width:calc(100vw - 80px);height:100vh;background:var(--bg);z-index:49;
  transform:translateX(-110%);transition:transform .5s cubic-bezier(.7,0,.2,1);display:flex;flex-direction:column;padding-top:70px;}
.navmenu.open{transform:translateX(0);}
.navmenu a{display:flex;align-items:center;height:80px;padding:0 40px;font-size:24px;font-weight:300;color:var(--dark);border-bottom:1px solid var(--line);transition:.25s;}
.navmenu a:hover{background:var(--orange);color:#fff;padding-left:50px;}
.navmenu-scrim{position:fixed;inset:0;background:rgba(0,0,0,.3);opacity:0;visibility:hidden;transition:.4s;z-index:48;}
.navmenu-scrim.open{opacity:1;visibility:visible;}

/* ===================== HERO ===================== */
.hero{height:2250px;position:relative;z-index:1;}
.hero-sticky{position:sticky;top:0;height:100vh;z-index:2;}
.hero-scroll{position:relative;height:100%;overflow:hidden;}
.hero-overlay-left{position:absolute;left:0;top:0;width:50%;height:100%;background:var(--bg);z-index:1;}
.hero-overlay-right{position:absolute;right:0;top:0;width:50%;height:100%;z-index:1;}
.hero-text{position:absolute;left:90px;top:max(40px, calc(59vh - 221px));z-index:3;display:flex;flex-direction:column;}
.hero-eyebrow{display:flex;align-items:center;gap:10px;font-size:42px;font-weight:600;color:var(--ink);height:55px;}
.hero-eyebrow .asterisk{color:var(--orange);font-size:34px;line-height:1;}
.hero-h1{font-size:180px;line-height:144px;font-weight:800;color:var(--ink);text-transform:uppercase;margin-top:1px;white-space:nowrap;}
.hero-sub{font-size:18px;line-height:30px;font-weight:300;color:var(--muted);width:500px;margin-top:13px;}
.hero-cta{display:flex;align-items:center;gap:20px;margin-top:80px;}
.hero-team{display:flex;flex-direction:column;gap:5px;}
.avatars{display:flex;}
.avatars img{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid var(--bg);margin-left:-16px;}
.avatars img:first-child{margin-left:0;}
.hero-team .meet{font-size:18px;font-weight:300;color:var(--muted);}
.arrow-btn{width:60px;height:60px;border-radius:50%;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--ink);transition:.3s;align-self:flex-start;}
.arrow-btn:hover{background:var(--orange);border-color:var(--orange);color:#fff;}
.hero-bottom{position:absolute;right:20px;bottom:30px;z-index:3;text-align:right;}
.hero-h2{font-size:42px;line-height:42px;font-weight:600;color:var(--ink);text-transform:uppercase;width:380px;}
.spin-badge{position:absolute;right:20px;top:580px;width:150px;height:150px;z-index:3;display:flex;align-items:center;justify-content:center;}
.spin-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite;}
.spin-badge text{font-size:12px;letter-spacing:2.4px;fill:var(--ink);font-weight:400;text-transform:uppercase;}
.spin-badge .badge-star{color:var(--orange);font-size:28px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===================== SERVICES ===================== */
.services{background:var(--bg);padding:96px 0;}
.services .h2{margin-top:10px;}
.svc-list{margin-top:60px;}
.svc-item{position:relative;height:152px;display:flex;align-items:center;border-top:1px solid var(--line);}
.svc-list .svc-item:last-child{border-bottom:1px solid var(--line);}
.svc-num{position:absolute;left:0;top:45px;font-size:18px;font-weight:300;color:var(--orange);}
.svc-title{font-size:80px;line-height:1;font-weight:800;color:var(--ink);text-transform:uppercase;margin-left:24px;}
.svc-tag{font-size:18px;font-weight:300;color:var(--muted);align-self:flex-end;margin-bottom:35px;margin-left:6px;}
.svc-plus{position:absolute;right:0;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid #757575;}
.svc-plus::before,.svc-plus::after{content:"";position:absolute;left:50%;top:50%;background:#757575;transition:.3s;}
.svc-plus::before{width:14px;height:1.5px;transform:translate(-50%,-50%);}
.svc-plus::after{width:1.5px;height:14px;transform:translate(-50%,-50%);}
.svc-item:hover .svc-plus{background:var(--orange);border-color:var(--orange);}
.svc-item:hover .svc-plus::before,.svc-item:hover .svc-plus::after{background:#fff;}

/* ===================== ABOUT ===================== */
.about{background:var(--bg);padding:96px 0;}
.about .h2{margin-top:10px;}
.about-grid{margin-top:60px;display:grid;grid-template-columns:759px 379px;gap:30px;}
.about-img-main{height:570px;position:relative;overflow:visible;}
.about-img-main img{width:100%;height:100%;object-fit:cover;border-radius:40px;}
/* image corner notches (bg-coloured concave cut-outs, Framer style) */
.img-notch{position:absolute;background:var(--bg);z-index:3;}
.img-notch.bl{left:0;bottom:0;width:140px;height:140px;border-top-right-radius:40px;}
.img-notch.tl{left:0;top:0;width:160px;height:100px;border-bottom-right-radius:40px;}
.img-notch.br{right:0;bottom:0;width:160px;height:100px;border-top-left-radius:40px;}
/* about spinning badge sitting in the bottom-left notch */
.about-badge{position:absolute;left:0;bottom:0;width:120px;height:120px;z-index:4;display:flex;align-items:center;justify-content:center;}
.about-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite;}
.about-badge svg text{font-size:13px;letter-spacing:1.5px;fill:var(--ink);font-weight:400;text-transform:uppercase;}
.about-badge .badge-core{width:48px;height:48px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;}
.about-badge .badge-core img{width:22px;height:22px;filter:brightness(0) invert(1);}
.about-right{display:flex;flex-direction:column;gap:30px;}
.about-story{background:var(--gray);border-radius:40px;padding:30px;min-height:286px;position:relative;overflow:hidden;}
.img-notch.tr{top:0;right:0;width:160px;height:91px;border-bottom-left-radius:40px;}
.about-story h3{font-size:24px;font-weight:500;color:var(--ink);}
.about-story p{font-size:18px;line-height:30px;font-weight:300;color:var(--ink);margin-top:55px;}
.about-img-sub{height:254px;border-radius:40px;overflow:hidden;}
.about-img-sub img{width:100%;height:100%;object-fit:cover;}
.stats{display:flex;justify-content:space-between;padding:60px 0;margin-top:25px;}
.stat-num{display:flex;align-items:flex-start;font-size:80px;line-height:0.72;font-weight:300;color:var(--ink);}
.stat-num i{color:var(--orange);font-style:normal;font-size:42px;margin-left:4px;}
.stat-label{font-size:18px;font-weight:300;color:var(--muted);margin-top:8px;}
.partners{margin-top:60px;}
.partners-title{font-size:24px;font-weight:500;color:var(--ink);}
.ticker{margin-top:30px;padding:35px 0;overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.ticker-track{display:flex;align-items:center;gap:80px;width:max-content;animation:scrollx 30s linear infinite;}
.ticker-track img{height:40px;width:auto;opacity:.65;filter:grayscale(1);}
@keyframes scrollx{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ===================== PROJECTS ===================== */
.projects{background:var(--bg);padding:96px 0 0;}
.proj-stack{margin-top:60px;padding:0 96px 96px;max-width:1440px;margin-left:auto;margin-right:auto;}
.proj-card{position:sticky;top:100px;height:720px;border-radius:40px;overflow:hidden;margin-bottom:60px;}
.proj-stack .proj-card:last-child{margin-bottom:0;}
.proj-card img{width:100%;height:100%;object-fit:cover;}
.proj-info{position:absolute;left:0;bottom:0;padding:40px;display:flex;flex-direction:column;gap:10px;}
.proj-tag{align-self:flex-start;background:var(--orange);color:#fff;font-size:18px;font-weight:300;padding:6px 16px;border-radius:99px;}
.proj-info h3{font-size:42px;line-height:42px;font-weight:600;color:#fff;text-transform:uppercase;}

/* ===================== APPROACH ===================== */
.approach{background:var(--bg);padding:96px 0;}
.approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.approach-left{padding-right:60px;}
.approach-left .h2{margin-top:10px;}
.approach-img{margin-top:60px;height:350px;border-radius:40px;overflow:hidden;position:relative;}
.approach-img img{width:100%;height:100%;object-fit:cover;}
.approach-right{padding-top:120px;position:relative;}
.approach-right::before{content:"";position:absolute;left:15px;top:150px;bottom:90px;width:2px;background:rgb(84,84,84);}
.step{display:flex;gap:10px;position:relative;padding-left:60px;padding-bottom:120px;}
.step::before{content:"";position:absolute;left:0;top:13px;width:32px;height:32px;border-radius:50%;background:var(--bg);border:1.5px solid #c4c4c4;box-sizing:border-box;z-index:1;}
.step::after{content:"";position:absolute;left:12px;top:25px;width:8px;height:8px;border-radius:50%;background:rgb(84,84,84);z-index:2;}
.step-num{font-size:80px;line-height:0.9;font-weight:800;color:var(--orange);min-width:46px;flex-shrink:0;}
.step-body h4{font-size:32px;line-height:1.1;font-weight:800;color:var(--ink);}
.step-body p{font-size:18px;line-height:30px;font-weight:300;color:var(--muted);margin-top:12px;max-width:420px;}

/* ===================== TEAM ===================== */
.team{background:var(--bg);padding:96px 0;}
.team .h2{margin-top:10px;}
.team-grid{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.member{position:relative;height:499px;border-radius:40px;overflow:hidden;}
.member img{width:100%;height:100%;object-fit:cover;}
.member-info{position:absolute;left:0;right:0;bottom:0;width:100%;padding:60px 26px 22px;
  background:linear-gradient(to top, rgba(252,252,252,.92) 0%, rgba(252,252,252,.78) 45%, rgba(252,252,252,0) 100%);}
.member-info h4{font-size:24px;line-height:32px;font-weight:500;color:var(--ink);}
.member-info p{font-size:18px;line-height:26px;font-weight:300;color:var(--muted);}

/* ===================== PRICING ===================== */
.pricing{background:var(--bg);padding:96px 0;}
.pricing .h2{margin-top:10px;}
.price-toggle{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:60px;}
.pt-label{font-size:24px;font-weight:300;color:var(--ink);}
.pt-switch{width:54px;height:30px;border-radius:99px;background:var(--orange);position:relative;}
.pt-switch .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.3s;}
.pt-switch.annual .knob{left:27px;}
.price-cards{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;}
.price-card{border:1px solid var(--line);border-radius:40px;padding:30px;background:var(--bg);}
.price-card.featured{border-color:var(--orange);}
.price-card h3{font-size:24px;font-weight:500;color:var(--ink);}
.price{display:flex;align-items:baseline;gap:8px;margin-top:25px;}
.price .amt{font-size:42px;line-height:1;font-weight:800;color:var(--orange);}
.price .per{font-size:18px;font-weight:300;color:var(--ink);}
.price-desc{font-size:18px;line-height:27px;font-weight:300;color:var(--ink);margin-top:14px;min-height:52px;}
.price-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:40px;background:var(--dark);color:#fff;font-size:18px;font-weight:300;margin-top:0;transition:.3s;}
.price-btn i{position:absolute;right:24px;top:50%;transform:translateY(-50%);font-style:normal;}
.price-btn.orange{background:var(--orange);}
.price-btn:hover{opacity:.9;}
.price-feats{margin-top:10px;display:flex;flex-direction:column;gap:18px;}
.price-feats li{position:relative;padding-left:30px;font-size:16px;line-height:20px;font-weight:300;color:var(--ink);}
.price-feats li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background-position:center;background-repeat:no-repeat;}
.price-feats li.yes::before{background:#19a463;}
.price-feats li.yes::after{content:"✓";position:absolute;left:5px;top:1px;color:#fff;font-size:12px;}
.price-feats li.no{color:#cfcfcf;}
.price-feats li.no::before{background:#e9573f33;}
.price-feats li.no::after{content:"✕";position:absolute;left:5px;top:1px;color:#e9573f;font-size:11px;}

/* ===================== TESTIMONIALS ===================== */
.testimonials{background:var(--bg);padding:96px 0;overflow:hidden;}
.testi-row{margin-top:20px;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.testimonials .container + .testi-row{margin-top:60px;}
.testi-track{display:flex;gap:20px;width:max-content;animation:scrollx 40s linear infinite;}
.testi-track.rev{animation:scrollx-rev 40s linear infinite;}
@keyframes scrollx-rev{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@keyframes scrolly{from{transform:translateY(0);}to{transform:translateY(-50%);}}
.testi-card{width:350px;flex-shrink:0;background:#fff;border-radius:40px;padding:30px;display:flex;flex-direction:column;gap:20px;border:1px solid var(--line);}
.testi-card .th{display:flex;align-items:center;gap:12px;}
.testi-card .th img{width:52px;height:52px;border-radius:50%;object-fit:cover;}
.testi-card .th h5{font-size:18px;font-weight:600;color:var(--ink);}
.testi-card .th span{font-size:16px;font-weight:300;color:var(--muted);}
.testi-card p{font-size:16px;line-height:27px;font-weight:300;color:var(--muted);}
.testi-card .stars{color:#333;letter-spacing:3px;font-size:20px;line-height:1;}

/* ===================== FAQ ===================== */
.faq{background:var(--bg);padding:96px 0;}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.faq-left{padding-right:60px;}
.faq-left .h2{margin-top:10px;}
.faq-img{margin-top:60px;height:350px;border-radius:40px;overflow:hidden;position:relative;}
.faq-img img{width:100%;height:100%;object-fit:cover;}
.faq-right{padding-top:60px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{position:relative;width:100%;display:block;padding:32px 56px 32px 0;text-align:left;font-size:24px;line-height:31.2px;font-weight:500;color:var(--ink);}
.faq-q i{position:absolute;right:0;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:1px solid #757575;}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;left:50%;top:50%;background:#757575;transition:.3s;}
.faq-q i::before{width:12px;height:1.5px;transform:translate(-50%,-50%);}
.faq-q i::after{width:1.5px;height:12px;transform:translate(-50%,-50%);}
.faq-item.open .faq-q i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease;}
.faq-a p{font-size:18px;line-height:30px;font-weight:300;color:var(--muted);padding-bottom:28px;max-width:90%;}

/* ===================== BLOGS ===================== */
.blogs{background:var(--bg);padding:96px 0;}
.blogs .h2{margin-top:10px;}
.blog-grid{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.blog-card{display:flex;flex-direction:column;}
.blog-img{height:319px;border-radius:20px;overflow:hidden;}
.blog-img img{width:100%;height:100%;object-fit:cover;transition:.4s;}
.blog-card:hover .blog-img img{transform:scale(1.04);}
.blog-meta{display:flex;gap:8px;margin-top:24px;font-size:16px;font-weight:300;color:var(--muted);}
.blog-card h4{font-size:24px;line-height:1.3;font-weight:500;color:var(--ink);margin-top:8px;}

/* ===================== CONTACT ===================== */
.contact{position:relative;overflow:hidden;padding:96px 0;}
.contact .h2{line-height:1.35;margin-top:12px;}
.contact-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.contact-overlay{position:absolute;inset:0;background:rgba(28,28,28,.8);z-index:1;}
.contact-inner{position:relative;z-index:2;}
.eyebrow.light{color:var(--orange);}
.h2.light{color:#fff;}
.contact-body{margin-top:60px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.contact-info{color:#fff;}
.ci-head{display:flex;align-items:center;gap:14px;}
.ci-head img{width:52px;height:52px;border-radius:50%;object-fit:cover;}
.ci-avatar{width:52px;height:52px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Archivo','Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-weight:600;font-size:24px;flex-shrink:0;}
.ci-avatar-img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.ci-head h5{font-size:18px;font-weight:600;color:#fff;}
.ci-head span{font-size:16px;font-weight:300;color:rgb(207,207,207);}
.contact-info p{font-size:16px;line-height:28px;font-weight:300;color:rgb(207,207,207);margin-top:24px;max-width:430px;}
.contact-form{display:flex;flex-direction:column;gap:16px;}
.cf-row{display:flex;gap:16px;}
.contact-form label{display:flex;flex-direction:column;gap:8px;flex:1;font-size:16px;font-weight:300;color:#fff;}
.contact-form input,.contact-form select,.contact-form textarea{
  background:rgb(51,51,51);border:0;border-radius:6px;padding:12px 16px;
  color:#fff;font-family:inherit;font-size:16px;font-weight:300;}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,.45);}
.contact-form textarea{min-height:200px;resize:vertical;}
.cf-submit{height:52px;border-radius:10px;background:var(--orange);color:#fff;font-size:24px;font-weight:300;margin-top:8px;}

/* ===================== FOOTER ===================== */
.footer{background:var(--gray);padding:96px 0;}
.footer-top{display:grid;grid-template-columns:1fr 1fr;gap:60px;}
.footer-logo{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:auto;margin-bottom:39px;}
.footer-mark{width:56px;height:56px;}
.footer-word{font-family:'Archivo',sans-serif;font-weight:800;font-size:48px;line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);}
.footer-phone{font-size:18px;line-height:27px;font-weight:300;color:var(--ink);}
.footer-email{font-size:24px;font-weight:500;color:var(--ink);margin-top:2px;}
.footer-nav{margin-top:38px;}
.fn-title{font-size:18px;font-weight:600;color:var(--ink);}
.fn-links{display:flex;gap:20px;margin-top:14px;flex-wrap:wrap;}
.fn-links a{font-size:18px;font-weight:300;color:var(--ink);}
.fn-links a:hover{color:var(--orange);}
.footer-right h5{font-size:18px;font-weight:600;color:var(--ink);}
.footer-right p{font-size:18px;font-weight:300;color:var(--ink);margin-top:10px;}
.footer-map{margin-top:24px;height:300px;border-radius:16px;overflow:hidden;}
.footer-map iframe{width:100%;height:100%;border:0;}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:24px;padding-top:24px;border-top:1px solid var(--line);}
.footer-bottom p{font-size:18px;font-weight:300;color:var(--ink);}
.footer-bottom a{text-decoration:underline;}
.created{display:flex;align-items:center;gap:8px;}
.created img{width:40px;height:40px;border-radius:50%;}

/* ============================================================= */
/* ============== INTERACTIONS / ANIMATIONS ==================== */
/* ============================================================= */

/* --- Scroll-reveal entrance (Framer-style fade + slide up) --- */
.reveal{opacity:0;transform:translateY(32px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);will-change:opacity,transform;}
.reveal.in{opacity:1;transform:none;}

/* --- Hero entrance on load --- */
.hero-eyebrow,.hero-h1,.hero-sub,.hero-cta,.hero-bottom,.spin-badge{
  opacity:0;transform:translateY(30px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);}
.hero-in .hero-eyebrow{opacity:1;transform:none;transition-delay:.05s;}
.hero-in .hero-h1{opacity:1;transform:none;transition-delay:.16s;}
.hero-in .hero-sub{opacity:1;transform:none;transition-delay:.3s;}
.hero-in .hero-cta{opacity:1;transform:none;transition-delay:.42s;}
.hero-in .hero-bottom{opacity:1;transform:none;transition-delay:.5s;}
.hero-in .spin-badge{opacity:1;transform:none;transition-delay:.6s;}

@media (prefers-reduced-motion:reduce){
  .reveal,.hero-eyebrow,.hero-h1,.hero-sub,.hero-cta,.hero-bottom,.spin-badge{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* --- Custom cursor dot --- */
@media (hover:hover) and (pointer:fine){
  .cursor-dot{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;
    background:#545454;mix-blend-mode:difference;pointer-events:none;z-index:99999;
    transition:width .28s ease, height .28s ease, background .28s ease, opacity .3s;}
  .cursor-dot.cursor-grow{width:46px;height:46px;background:rgba(245,87,51,.85);}
  .cursor-dot.cursor-press{width:30px;height:30px;}
}

/* --- Cursor pointers on clickable surfaces --- */
.svc-item,.proj-card,.member,.blog-card,.testi-card,.price-card,.faq-q,.pt-switch,.pt-label,.stat,.sb-logo-h{cursor:pointer;}

/* --- Hover: service rows --- */
.svc-item .svc-title,.svc-item .svc-num,.svc-item .svc-tag{transition:color .3s ease, transform .35s cubic-bezier(.16,1,.3,1);}
.svc-item:hover .svc-title{color:var(--orange);}
.svc-item:hover .svc-num{color:var(--ink);}
.svc-title,.svc-tag{will-change:transform;}
.svc-item:hover .svc-title{transform:translateX(8px);}

/* --- Hover: project cards --- */
.proj-card img{transition:transform .7s cubic-bezier(.16,1,.3,1);}
.proj-card:hover img{transform:scale(1.05);}
.proj-tag{transition:transform .3s ease;}
.proj-card:hover .proj-tag{transform:translateY(-2px);}

/* --- Hover: team members --- */
.member img{transition:transform .7s cubic-bezier(.16,1,.3,1);}
.member:hover img{transform:scale(1.06);}
.member-info h4{transition:color .3s ease;}
.member:hover .member-info h4{color:var(--orange);}

/* --- Hover: blog cards (image zoom 1.19 like original) --- */
.blog-img img{transition:transform .7s cubic-bezier(.16,1,.3,1);}
.blog-card:hover .blog-img img{transform:scale(1.19);}
.blog-card h4{transition:color .3s ease;}
.blog-card:hover h4{color:var(--orange);}

/* --- Hover: pause tickers so items are readable / interactive --- */
.ticker:hover .ticker-track{animation-play-state:paused;}
.testi-row:hover .testi-track{animation-play-state:paused;}
.ticker-track img{transition:filter .3s ease, opacity .3s ease;}
.ticker-track img:hover{filter:grayscale(0);opacity:1;}

/* --- Hover: testimonial cards --- */
.testi-card{transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
.testi-card:hover{transform:translateY(-8px);box-shadow:0 20px 44px rgba(20,20,20,.10);border-color:rgba(245,87,51,.4);}

/* --- Hover: pricing --- */
.price-card{transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .35s ease;}
.price-card:hover{transform:translateY(-8px);box-shadow:0 24px 56px rgba(20,20,20,.08);border-color:var(--orange);}
.price-btn{transition:background .3s ease, transform .3s ease, opacity .3s;}
.price-btn:not(.orange):hover{background:var(--orange);}
.price-btn.orange:hover{filter:brightness(.94);}
.price-btn i{transition:transform .3s ease;}
.price-btn:hover i{transform:translateY(-50%) translate(2px,-2px);}

/* --- Hover: FAQ --- */
.faq-q{transition:color .3s ease;}
.faq-q:hover{color:var(--orange);}
.faq-q i{transition:transform .3s ease, border-color .3s ease, background .3s ease;}
.faq-q:hover i{border-color:var(--orange);}

/* --- Hover: contact submit (orange -> green like original) --- */
.cf-submit{transition:background .3s ease, transform .3s ease;}
.cf-submit:hover{background:#15bf5f;}
.contact-form input,.contact-form select,.contact-form textarea{transition:box-shadow .3s ease, background .3s ease;}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;background:#404040;box-shadow:0 0 0 1.5px var(--orange);}

/* --- Hover: social icons & sidebar --- */
.sb-ico img{transition:transform .3s ease, opacity .3s ease;}
.sb-ico:hover img{transform:scale(1.18) rotate(-6deg);}
.menu-btn{transition:transform .3s ease;}
.menu-btn:hover{transform:scale(1.06);}

/* --- Hover: hero meet-our-team --- */
.hero-team{transition:transform .3s ease;}
.hero-team:hover .meet{color:var(--ink);}
.hero-team .meet{transition:color .3s ease;}
.avatars img{transition:transform .3s ease;}
.hero-team:hover .avatars img{transform:translateY(-3px);}

/* --- Hover: blog/proj subtle lift on whole card --- */
.blog-card{transition:transform .35s ease;}
.blog-card:hover{transform:translateY(-4px);}

/* ============================================================= */
/* ===================== TABLET (810–1199) ===================== */
/* ============================================================= */
@media (max-width:1199px){
  .sidebar{width:60px;}
  .page{margin-left:60px;}
  .container{padding:0 32px;}
  .proj-stack{padding:0 32px 96px;}
  .sb-vert{font-size:19px;}
  .menu-btn{width:42px;height:42px;}

  .h2{font-size:32px;line-height:1.25;}
  .eyebrow{font-size:16px;}

  /* hero */
  .hero-text{left:40px;}
  .hero-eyebrow{font-size:32px;line-height:41.6px;height:auto;}
  .hero-eyebrow .asterisk{font-size:26px;}
  .hero-h1{font-size:100px;line-height:80px;}
  .hero-sub{font-size:18px;line-height:27px;width:440px;}
  .hero-h2{font-size:32px;line-height:32px;width:300px;}

  /* services */
  .svc-title{font-size:48px;line-height:1;}
  .svc-item{height:120px;}
  .svc-num{top:34px;}

  /* about */
  .about-grid{grid-template-columns:1.55fr 1fr;}
  .about-img-main{height:auto;aspect-ratio:686/520;}
  .about-story{height:auto;min-height:240px;}
  .about-story h3{font-size:20px;}
  .stat-num{font-size:60px;}
  .stat-num i{font-size:32px;}
  .partners-title{font-size:20px;}

  /* projects */
  .proj-card{height:auto;aspect-ratio:686/470;top:90px;}
  .proj-info h3{font-size:32px;line-height:32px;}

  /* approach */
  .step-num{font-size:48px;width:36px;}
  .step-body h4{font-size:26px;}
  .step{gap:24px;padding-bottom:90px;}

  /* team */
  .team-grid{grid-template-columns:repeat(2,1fr);}
  .member{height:auto;aspect-ratio:328/443;}
  .member-info h4{font-size:20px;}

  /* pricing -> single column */
  .price-cards{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto;}
  .price-card h3{font-size:20px;}
  .price .amt{font-size:36px;}

  /* testimonials */
  .testi-card{width:320px;}

  /* faq */
  .faq-q{font-size:20px;}
  .faq-img{aspect-ratio:1/1;height:auto;}

  /* blogs */
  .blog-card h4{font-size:20px;}
  .blog-img{height:auto;aspect-ratio:369/319;}

  /* footer */
  .footer-word{font-size:40px;}
  .footer-mark{width:48px;height:48px;}
  .footer-email{font-size:20px;}
}

/* ============================================================= */
/* ===================== PHONE (≤809) ========================== */
/* ============================================================= */
@media (max-width:809px){
  /* topbar */
  .sidebar{flex-direction:row;width:100%;height:64px;padding:0 16px;justify-content:space-between;align-items:center;}
  .sb-logo-h{display:flex;align-items:center;gap:9px;}
  .sb-mark{width:24px;height:24px;}
  .sb-word{font-size:18px;}
  .sb-top{height:auto;order:2;}
  .menu-btn{width:36px;height:36px;}
  .sb-brand,.sb-social{display:none;}
  .page{margin-left:0;margin-top:0;}
  .navmenu{left:0;top:64px;width:100%;max-width:100%;height:calc(100vh - 64px);padding-top:0;}
  .navmenu a{height:64px;padding:0 24px;}
  .navmenu-scrim{top:64px;}

  .container{padding:0 20px;}
  .proj-stack{padding:0 20px 60px;}
  .h2{font-size:22px;line-height:1.25;}
  .eyebrow{font-size:16px;}
  section.services,.about,.projects,.approach,.team,.pricing,.testimonials,.faq,.blogs,.contact,.footer{padding:60px 0;}
  .projects{padding:60px 0 0;}

  /* HERO: fixed video bg, white top overlay, transparent bottom reveal */
  .hero{height:250vh;}
  .hero-overlay-left{width:100%;height:60%;top:0;left:0;}
  .hero-overlay-right{width:100%;height:40%;bottom:0;top:auto;right:0;}
  .hero-text{left:20px;top:222px;width:350px;}
  .hero-eyebrow{font-size:22px;line-height:28.6px;gap:8px;height:auto;}
  .hero-eyebrow .asterisk{font-size:18px;}
  .hero-h1{font-size:55px;line-height:44px;margin-top:10px;white-space:normal;}
  .hero-sub{font-size:16px;line-height:24px;width:350px;margin-top:29px;}
  .hero-cta{margin-top:30px;gap:14px;}
  .avatars img{width:40px;height:40px;margin-left:-10px;}
  .hero-team .meet{font-size:16px;}
  .arrow-btn{width:44px;height:44px;font-size:18px;}
  .spin-badge{top:auto;bottom:140px;right:30px;width:90px;height:90px;}
  .spin-badge .badge-star{font-size:20px;}
  .hero-bottom{right:auto;left:20px;bottom:60px;text-align:left;}
  .hero-h2{font-size:22px;line-height:22px;width:240px;}

  /* services */
  .svc-list{margin-top:40px;}
  .svc-item{height:auto;flex-wrap:wrap;padding:17px 0;align-items:flex-start;}
  .svc-num{position:static;}
  .svc-title{font-size:28px;line-height:25.2px;margin-left:14px;}
  .svc-tag{flex-basis:100%;margin:0 0 0 38px;font-size:16px;line-height:20px;}
  .svc-plus{width:44px;height:44px;top:24px;transform:none;}

  /* about */
  .about-grid{grid-template-columns:1fr;gap:30px;margin-top:40px;}
  .about-img-main{aspect-ratio:350/400;height:auto;}
  .about-right{gap:30px;}
  .about-story{padding:24px;height:auto;min-height:0;order:2;}
  .about-story h3{font-size:18px;}
  .about-story p{margin-top:55px;font-size:16px;line-height:24px;}
  .about-img-sub{aspect-ratio:350/200;height:auto;order:1;}
  .partners{margin-top:11px;}
  .stats{flex-direction:column;gap:0;margin-top:0;padding:60px 0;}
  .stat{display:flex;align-items:center;gap:12px;padding:0;height:62px;}
  .stat:nth-child(1){order:1;} .stat:nth-child(4){order:2;}
  .stat:nth-child(2){order:3;} .stat:nth-child(3){order:4;}
  .stat-num{font-size:48px;}
  .stat-num i{font-size:24px;}
  .stat-label{margin-top:0;font-size:16px;}
  .partners-title{font-size:18px;}
  .ticker-track{gap:50px;}

  /* projects */
  .proj-stack{margin-top:40px;}
  .proj-card{aspect-ratio:350/506;height:auto;top:150px;border-radius:40px;}
  .proj-info{padding:24px;}
  .proj-info h3{font-size:22px;line-height:22px;}

  /* approach */
  .approach-grid{grid-template-columns:1fr;}
  .approach-left{padding-right:0;}
  .approach-img{aspect-ratio:1/1;height:auto;margin-top:40px;margin-bottom:60px;}
  .approach-right{padding-top:0;}
  .approach-right::before{left:14px;top:10px;bottom:60px;width:2px;}
  .step{flex-direction:column;gap:6px;padding-left:46px;padding-bottom:60px;}
  .step::before{left:0;top:2px;width:30px;height:30px;}
  .step::after{left:11px;top:13px;}
  .step-num{font-size:48px;line-height:0.9;min-width:0;}
  .step-body h4{font-size:22px;line-height:22px;}
  .step-body p{font-size:16px;line-height:26px;margin-top:10px;}

  /* team */
  .team-grid{grid-template-columns:1fr;gap:30px;margin-top:40px;}
  .member{aspect-ratio:1/1;height:auto;}
  .member-info{padding:0 0 20px 0;}
  .member-info h4{font-size:18px;}
  .member-info p{font-size:16px;}

  /* pricing */
  .price-toggle{margin-top:40px;}
  .pt-label{font-size:18px;}
  .price-cards{grid-template-columns:1fr;gap:20px;margin-top:20px;max-width:none;}
  .price-card{padding:24px;border-radius:30px;}
  .price-card h3{font-size:18px;}
  .price .amt{font-size:30px;}
  .price .per{font-size:16px;}
  .price-desc{font-size:16px;}

  /* testimonials -> vertical ticker */
  #testiRow2{display:none;}
  #testiRow1{height:1148px;overflow:hidden;margin-top:40px;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);}
  #testiRow1 .testi-track{flex-direction:column;width:100%;animation:scrolly 26s linear infinite;}
  .testi-card{width:100%;padding:24px;}

  /* faq */
  .faq-grid{grid-template-columns:1fr;}
  .faq-left{padding-right:0;}
  .faq-img{aspect-ratio:1/1;height:auto;margin-top:30px;}
  .faq-right{padding-top:40px;}
  .faq-q{font-size:18px;line-height:23.4px;padding:19px 44px 19px 0;}
  .faq-q i{width:28px;height:28px;}
  .faq-a p{font-size:16px;line-height:24px;}

  /* blogs */
  .blog-grid{grid-template-columns:1fr;gap:40px;margin-top:40px;}
  .blog-img{aspect-ratio:350/250;height:auto;}
  .blog-card h4{font-size:18px;}

  /* contact */
  .contact-body{grid-template-columns:1fr;gap:36px;margin-top:40px;}
  .contact-info p{font-size:16px;}
  .cf-row{flex-direction:column;gap:18px;}
  .contact-form{gap:18px;}
  .contact-form input,.contact-form select,.contact-form textarea{padding:18px 16px;}
  .contact-form textarea{min-height:210px;}
  .cf-submit{font-size:18px;padding:0;}

  /* footer */
  .footer-top{grid-template-columns:1fr;gap:40px;text-align:center;}
  .footer-logo{align-items:center;margin:0 auto 24px;}
  .footer-word{font-size:36px;}
  .footer-email{font-size:20px;}
  .footer-nav{display:flex;flex-direction:column;align-items:center;}
  .fn-links{justify-content:center;}
  .footer-bottom{flex-direction:column;align-items:center;gap:16px;text-align:center;}
  .footer-map{height:240px;}
}

@media (min-width:810px){ .sb-logo-h{display:none;} }