/* ============================================================
   INTERIX STUDIO – Section Styles
   ============================================================ */

/* ====================== HEADER ====================== */
.header{
  position:fixed;top:0;left:0;width:100%;
  z-index:9000;
  padding:1rem 0;
  background:var(--bg-glass);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:background var(--dur-med) var(--ease-out),padding var(--dur-med) var(--ease-out);
}
.header.scrolled{
  padding:.6rem 0;
  background:var(--bg-glass);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;
}
.header__logo{
  font-family:'Playfair Display',serif;
  font-size:1.5rem;font-weight:700;
  letter-spacing:.04em;
  color:var(--text-primary);
}
.header__logo span{color:var(--accent)}
.header__nav{display:flex;gap:2rem;align-items:center}
.header__nav a{
  font-size:.8125rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-secondary);
  transition:color var(--dur-fast);
  position:relative;
}
.header__nav a::after{
  content:'';position:absolute;bottom:-4px;left:0;
  width:0;height:1.5px;background:var(--accent);
  transition:width var(--dur-med) var(--ease-out);
}
.header__nav a:hover{color:var(--text-primary)}
.header__nav a:hover::after{width:100%}

.header__actions{display:flex;align-items:center;gap:1rem}

/* Theme Toggle */
.theme-toggle{
  position:relative;
  width:52px;height:28px;
  background:var(--bg-tertiary);
  border-radius:var(--radius-full);
  border:1px solid var(--border);
  transition:background var(--dur-med);
}
.theme-toggle__knob{
  position:absolute;top:3px;left:3px;
  width:20px;height:20px;
  border-radius:50%;
  background:var(--accent);
  transition:transform var(--dur-med) var(--ease-out);
}
[data-theme="light"] .theme-toggle__knob{
  transform:translateX(24px);
}
.theme-toggle__icon{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:.7rem;
  transition:opacity var(--dur-fast);
}
.theme-toggle__icon--moon{left:7px;opacity:1}
.theme-toggle__icon--sun{right:7px;opacity:.4}
[data-theme="light"] .theme-toggle__icon--moon{opacity:.4}
[data-theme="light"] .theme-toggle__icon--sun{opacity:1}

/* Mobile Menu */
.hamburger{
  display:none;
  flex-direction:column;gap:5px;
  width:28px;
  background:none;border:none;padding:4px;
}
.hamburger span{
  display:block;width:100%;height:2px;
  background:var(--text-primary);
  border-radius:2px;
  transition:transform var(--dur-med) var(--ease-out),opacity var(--dur-fast);
}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

@media(max-width:1024px){
  .header__nav{
    position:fixed;top:0;right:-100%;
    width:min(400px,85vw);height:100vh;
    flex-direction:column;justify-content:center;gap:2.5rem;
    background:var(--bg-secondary);
    padding:2rem;
    transition:right var(--dur-slow) var(--ease-out);
    z-index:9999;
  }
  .header__nav.open{right:0}
  .header__nav a{font-size:1.25rem}
  .hamburger{display:flex}
}

/* ====================== HERO ====================== */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  overflow:hidden;
  padding-top:80px;
}
.hero__video-wrap{
  position:absolute;inset:0;z-index:0;
}
.hero__video-wrap video,
.hero__video-wrap img{
  width:100%;height:100%;
  object-fit:cover;
}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.7) 100%);
  z-index:1;
}
.hero__content{
  position:relative;z-index:2;
  max-width:900px;
}
.hero__subtitle{
  color:var(--accent);
  font-family:'Outfit',sans-serif;
  font-size:.875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;
  margin-bottom:var(--sp-lg);
}
.hero__title{
  color:#fff;
  margin-bottom:var(--sp-lg);
  overflow:hidden;
}
.hero__title .mask-line{
  display:block;
  clip-path:inset(0 100% 0 0);
}
.hero__desc{
  color:rgba(255,255,255,.7);
  font-size:1.125rem;line-height:1.8;
  max-width:580px;
  margin-bottom:var(--sp-xl);
}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap}

/* ====================== COUNTER STRIP ====================== */
.counter-strip{
  background:var(--bg-secondary);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:3rem 0;
}
.counter-strip__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
  gap:2rem;
}
.counter-item__number{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:700;
  color:var(--accent);
  line-height:1;
  margin-bottom:.5rem;
}
.counter-item__label{
  font-size:.8125rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-secondary);
}
@media(max-width:768px){
  .counter-strip__grid{grid-template-columns:repeat(2,1fr)}
}

/* ====================== INTERIX METHOD ====================== */
.method{background:var(--bg-primary)}
.method__steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3rem;
  position:relative;
  margin-top:3rem;
}
.method__line-svg{
  position:absolute;
  top:60px;left:0;width:100%;height:4px;
  z-index:0;pointer-events:none;
}
.method__line-svg line{
  stroke:var(--accent);
  stroke-width:2;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
}
.method__step{
  position:relative;z-index:1;
  text-align:center;
  padding:2rem 1.5rem;
}
.method__step-num{
  width:60px;height:60px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;
  font-size:1.25rem;font-weight:700;
  margin:0 auto var(--sp-lg);
  position:relative;
}
.method__step-num::after{
  content:'';position:absolute;inset:-6px;
  border-radius:50%;border:1.5px solid var(--accent);
  opacity:.3;
}
.method__step h3{
  font-size:1.25rem;
  margin-bottom:.75rem;
}
.method__step p{
  color:var(--text-secondary);
  font-size:.9375rem;line-height:1.7;
}
@media(max-width:768px){
  .method__steps{grid-template-columns:1fr;gap:2rem}
  .method__line-svg{display:none}
}

/* ====================== SERVICES ====================== */
.services{background:var(--bg-secondary)}
.services__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin-top:3rem;
}
.service-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:2.5rem 2rem;
  transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med) var(--ease-out),border-color var(--dur-med);
  transform-style:preserve-3d;
  perspective:800px;
  will-change:transform;
}
.service-card:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow-lg);
}
.service-card__icon{
  width:56px;height:56px;
  border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  margin-bottom:var(--sp-lg);
  color:#fff;
}
.service-card h3{
  font-size:1.2rem;
  margin-bottom:.75rem;
}
.service-card p{
  color:var(--text-secondary);
  font-size:.9375rem;line-height:1.7;
}
@media(max-width:1024px){.services__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.services__grid{grid-template-columns:1fr}}

/* ====================== PORTFOLIO ====================== */
.portfolio{background:var(--bg-primary)}
.portfolio__slider{
  position:relative;
  max-width:1000px;margin:3rem auto 0;
  border-radius:var(--radius-md);
  overflow:hidden;
  aspect-ratio:16/10;
  user-select:none;
}
.portfolio__before,
.portfolio__after{
  position:absolute;inset:0;
}
.portfolio__before img,
.portfolio__after img{
  width:100%;height:100%;object-fit:cover;
}
.portfolio__after{
  clip-path:inset(0 50% 0 0);
}
.portfolio__handle{
  position:absolute;
  top:0;bottom:0;
  left:50%;
  width:4px;
  background:var(--accent);
  z-index:5;
  transform:translateX(-50%);
}
.portfolio__handle::before{
  content:'⟷';
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:44px;height:44px;
  background:var(--accent);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1rem;
  box-shadow:var(--shadow-md);
}
.portfolio__label{
  position:absolute;bottom:1rem;
  padding:.25rem .75rem;
  border-radius:var(--radius-full);
  background:rgba(0,0,0,.6);
  color:#fff;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.1em;
  z-index:6;
}
.portfolio__label--before{left:1rem}
.portfolio__label--after{right:1rem}

/* ====================== 360 VR TOUR ====================== */
.vr-tour{background:var(--bg-secondary)}
.vr-tour__frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius-md);
  overflow:hidden;
  margin-top:2rem;
  background:#000;
}
.vr-tour__frame iframe,
.vr-tour__frame img{
  width:100%;height:100%;
  object-fit:cover;
  border:none;
}
.vr-tour__expand{
  position:absolute;top:1rem;right:1rem;
  width:44px;height:44px;
  background:rgba(0,0,0,.6);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.2rem;
  z-index:2;
  transition:background var(--dur-fast);
  border:1px solid rgba(255,255,255,.2);
}
.vr-tour__expand:hover{background:var(--accent)}
.vr-tour__frame.fullscreen{
  position:fixed;inset:0;
  z-index:10001;
  border-radius:0;
  aspect-ratio:auto;
}

/* ====================== VIDEO HUB ====================== */
.video-hub{background:var(--bg-primary)}
.video-hub__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  margin-top:3rem;
}
.video-card{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--bg-tertiary);
}
.video-card video,
.video-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out);
}
.video-card:hover video,
.video-card:hover img{
  transform:scale(1.05);
}
.video-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,transparent 60%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.25rem;
  z-index:1;
}
.video-card__play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:56px;height:56px;
  background:rgba(176,141,87,.85);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
  transition:opacity var(--dur-fast),transform var(--dur-med) var(--ease-out);
}
.video-card:hover .video-card__play{opacity:0;transform:translate(-50%,-50%) scale(.8)}
.video-card__title{color:#fff;font-size:1rem;font-weight:500;z-index:2}
.video-card__tag{color:var(--accent);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.25rem;z-index:2}
@media(max-width:1024px){.video-hub__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.video-hub__grid{grid-template-columns:1fr}}

/* ====================== MATERIAL LIBRARY ====================== */
.material-lib{background:var(--bg-secondary);overflow:hidden}
.material-lib__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  margin-top:3rem;
}
.material-card{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  aspect-ratio:1;
  will-change:transform;
}
.material-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out);
}
.material-card:hover img{transform:scale(1.08)}
.material-card__label{
  position:absolute;bottom:0;left:0;right:0;
  padding:1rem;
  background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);
  color:#fff;font-size:.875rem;font-weight:500;
}
@media(max-width:1024px){.material-lib__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.material-lib__grid{grid-template-columns:repeat(2,1fr)}}

/* ====================== CLIENT REVIEWS ====================== */
.reviews{background:var(--bg-primary)}
.reviews__carousel{
  position:relative;
  max-width:900px;
  margin:3rem auto 0;
  overflow:hidden;
}
.reviews__track{
  display:flex;
  transition:transform var(--dur-slow) var(--ease-out);
}
.review-card{
  min-width:100%;
  padding:2.5rem;
  text-align:center;
}
.review-card__avatar{
  width:72px;height:72px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto var(--sp-lg);
  border:2px solid var(--accent);
}
.review-card__quote{
  font-family:'Playfair Display',serif;
  font-size:1.25rem;
  font-style:italic;
  line-height:1.8;
  color:var(--text-primary);
  margin-bottom:var(--sp-lg);
  max-width:700px;
  margin-left:auto;margin-right:auto;
}
.review-card__name{
  font-weight:600;font-size:1rem;
  margin-bottom:.25rem;
}
.review-card__role{
  color:var(--text-muted);font-size:.875rem;
}
.review-card__stars{
  color:var(--accent);font-size:1rem;
  margin-bottom:var(--sp-md);
}
.reviews__dots{
  display:flex;justify-content:center;gap:.5rem;
  margin-top:var(--sp-lg);
}
.reviews__dot{
  width:10px;height:10px;
  border-radius:50%;
  background:var(--border);
  transition:background var(--dur-fast);
}
.reviews__dot.active{background:var(--accent);width:28px;border-radius:var(--radius-full)}

/* ====================== DESIGN INSIGHTS ====================== */
.insights{background:var(--bg-secondary)}
.insights__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  margin-top:3rem;
}
.insight-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med);
}
.insight-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}
.insight-card__img{
  aspect-ratio:16/10;overflow:hidden;
}
.insight-card__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out);
}
.insight-card:hover .insight-card__img img{transform:scale(1.08)}
.insight-card__body{padding:1.5rem}
.insight-card__tag{
  display:inline-block;
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent);font-weight:600;
  margin-bottom:.5rem;
}
.insight-card__title{
  font-size:1.1rem;line-height:1.4;
  margin-bottom:.75rem;
}
.insight-card__excerpt{
  color:var(--text-secondary);font-size:.875rem;line-height:1.6;
  margin-bottom:1rem;
}
.insight-card__link{
  font-size:.8125rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent);
  transition:color var(--dur-fast);
}
.insight-card__link:hover{color:var(--accent-light)}
@media(max-width:1024px){.insights__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.insights__grid{grid-template-columns:1fr}}

/* ====================== CONTACT FORM ====================== */
.contact{background:var(--bg-primary)}
.contact__wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  margin-top:3rem;
}
.contact__info{display:flex;flex-direction:column;gap:2rem}
.contact__info-item{display:flex;gap:1rem;align-items:flex-start}
.contact__info-icon{
  width:44px;height:44px;
  background:var(--bg-tertiary);
  border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:1.1rem;
  flex-shrink:0;
}
.contact__info-text h4{font-family:'Outfit',sans-serif;font-size:.9375rem;font-weight:600;margin-bottom:.25rem}
.contact__info-text p{color:var(--text-secondary);font-size:.875rem}

.contact__form{display:flex;flex-direction:column;gap:1.5rem}
.form-group{position:relative}
.form-group input,
.form-group textarea{
  width:100%;
  padding:1.125rem 1rem .625rem;
  background:var(--bg-secondary);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:.9375rem;
  transition:border-color var(--dur-med) var(--ease-out),box-shadow var(--dur-med);
}
.form-group textarea{resize:vertical;min-height:130px}
.form-group label{
  position:absolute;
  left:1rem;top:50%;
  transform:translateY(-50%);
  font-size:.9375rem;
  color:var(--text-muted);
  pointer-events:none;
  transition:all var(--dur-med) var(--ease-out);
}
.form-group textarea ~ label{top:1.125rem;transform:none}

.form-group input:focus,
.form-group textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label{
  top:.35rem;
  font-size:.6875rem;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.06em;
}
@media(max-width:768px){
  .contact__wrapper{grid-template-columns:1fr}
}

/* ====================== FOOTER ====================== */
.footer{
  background:var(--bg-secondary);
  border-top:1px solid var(--border);
  padding:4rem 0 0;
}
.footer__grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.5fr;
  gap:3rem;
}
.footer__brand p{color:var(--text-secondary);font-size:.9rem;line-height:1.7;margin-top:1rem;max-width:300px}
.footer__heading{
  font-family:'Outfit',sans-serif;
  font-size:.8125rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--text-muted);
  margin-bottom:1.5rem;
}
.footer__links li{margin-bottom:.75rem}
.footer__links a{color:var(--text-secondary);font-size:.9rem;transition:color var(--dur-fast)}
.footer__links a:hover{color:var(--accent)}

.footer__map{
  border-radius:var(--radius-md);
  overflow:hidden;
  aspect-ratio:1;
  background:var(--bg-tertiary);
}
.footer__map iframe{width:100%;height:100%;border:none;filter:grayscale(.8) invert(.92) contrast(.85);transition:filter var(--dur-med)}
[data-theme="light"] .footer__map iframe{filter:grayscale(.3) contrast(.9)}
.footer__map:hover iframe{filter:grayscale(0) invert(0) contrast(1)}

.footer__bottom{
  border-top:1px solid var(--border);
  margin-top:3rem;
  padding:1.5rem 0;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;
}
.footer__copy{color:var(--text-muted);font-size:.8125rem}
.footer__socials{display:flex;gap:1rem}
.footer__social-link{
  width:38px;height:38px;
  border-radius:50%;
  background:var(--bg-tertiary);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);
  font-size:.9rem;
  transition:background var(--dur-fast),color var(--dur-fast);
  border:1px solid var(--border);
}
.footer__social-link:hover{
  background:var(--accent);color:#fff;border-color:var(--accent);
}

@media(max-width:1024px){
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .footer__grid{grid-template-columns:1fr}
}

/* ====================== CHATBOT ====================== */
.chatbot-fab{
  position:fixed;bottom:2rem;right:2rem;
  width:60px;height:60px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.5rem;
  box-shadow:0 8px 30px var(--accent-glow);
  z-index:9500;
  transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med);
  cursor:pointer;
}
.chatbot-fab:hover{
  transform:scale(1.1);
  box-shadow:0 12px 40px var(--accent-glow);
}
.chatbot-panel{
  position:fixed;bottom:6.5rem;right:2rem;
  width:380px;max-height:500px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  z-index:9500;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;
  transform:translateY(20px) scale(.95);
  transition:all var(--dur-med) var(--ease-out);
}
.chatbot-panel.open{
  opacity:1;visibility:visible;
  transform:translateY(0) scale(1);
}
.chatbot-panel__header{
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.chatbot-panel__header h4{
  font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;
}
.chatbot-panel__close{
  background:none;border:none;
  color:var(--text-muted);font-size:1.25rem;
  transition:color var(--dur-fast);
}
.chatbot-panel__close:hover{color:var(--text-primary)}
.chatbot-panel__messages{
  flex:1;overflow-y:auto;padding:1.25rem 1.5rem;
  display:flex;flex-direction:column;gap:.75rem;
  min-height:250px;
}
.chat-msg{
  max-width:85%;padding:.75rem 1rem;
  border-radius:var(--radius-md);font-size:.875rem;line-height:1.5;
}
.chat-msg--bot{
  background:var(--bg-tertiary);
  color:var(--text-primary);
  align-self:flex-start;
  border-bottom-left-radius:4px;
}
.chat-msg--user{
  background:var(--accent);
  color:#fff;
  align-self:flex-end;
  border-bottom-right-radius:4px;
}
.chatbot-panel__input{
  padding:1rem 1.5rem;
  border-top:1px solid var(--border);
  display:flex;gap:.75rem;
}
.chatbot-panel__input input{
  flex:1;
  padding:.6rem 1rem;
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-full);
  color:var(--text-primary);
  font-size:.875rem;
}
.chatbot-panel__input input:focus{border-color:var(--accent)}
.chatbot-panel__input button{
  padding:.6rem 1.25rem;
  background:var(--accent);
  color:#fff;
  border-radius:var(--radius-full);
  font-size:.8125rem;font-weight:500;
  transition:background var(--dur-fast);
}
.chatbot-panel__input button:hover{background:var(--accent-light)}
@media(max-width:480px){
  .chatbot-panel{width:calc(100vw - 2rem);right:1rem;bottom:5.5rem}
}