/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --white:#ffffff;
  --black:#111111;
  --gray:#f5f4f2;
  --gray2:#ebebeb;
  --gray3:#c8c8c8;
  --orange:#e6523d;
  --orange2:#d0432e;
  --text:#111111;
  --muted:#666666;
  --muted2:#999999;
  --border:#e8e8e8;
  --display:'Bricolage Grotesque',sans-serif;
  --body:'DM Sans',sans-serif;
  --r:12px;
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--white);color:var(--text);font-family:var(--body);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{cursor:pointer;font-family:inherit}

/* ── UTILS ── */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,60px)}
.label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.period{color:var(--orange)}

/* scroll reveal */
.sr{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.sr.in{opacity:1;transform:none}
/* Hard fallback — never leave content invisible */
.sr.d1{transition-delay:.07s}.sr.d2{transition-delay:.14s}.sr.d3{transition-delay:.21s}.sr.d4{transition-delay:.28s}.sr.d5{transition-delay:.35s}

/* buttons */
.btn-orange{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;font-size:14px;font-weight:600;padding:13px 24px;border-radius:999px;border:none;transition:background .2s,transform .15s;white-space:nowrap}
.btn-orange:hover{background:var(--orange2);transform:translateY(-1px)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--text);font-size:14px;font-weight:500;padding:12px 24px;border-radius:999px;border:1.5px solid var(--border);transition:border-color .2s,background .2s;white-space:nowrap}
.btn-outline:hover{border-color:var(--black);background:rgba(0,0,0,.03)}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--muted);font-size:13px;font-weight:500;padding:0;border:none;transition:color .2s}
.btn-ghost:hover{color:var(--text)}

/* ── NAV — compact centered pill ── */
#nav-outer{
  position:fixed;top:0;left:0;right:0;z-index:900;
  padding:14px 0 0;
  display:flex;justify-content:center;
  pointer-events:none;
}
#nav{
  pointer-events:all;
  display:inline-flex;align-items:center;
  justify-content:flex-start;
  height:54px;
  padding:0 8px 0 10px;
  gap:4px;
  /* glass pill */
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,0.95);
  border-radius:999px;
  /* layered elevated shadow */
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 8px 20px rgba(0,0,0,.10),
    0 24px 48px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow .3s, background .3s;
}
#nav.scrolled{
  background:rgba(255,255,255,.92);
  box-shadow:
    0 2px 6px rgba(0,0,0,.06),
    0 12px 32px rgba(0,0,0,.14),
    0 32px 56px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,1);
}
.nav-logo{
  display:flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:800;font-size:15px;
  font-style:italic;letter-spacing:-.01em;color:var(--black);
  padding:0 4px 0 4px;white-space:nowrap;flex-shrink:0;
}
.nav-mark{
  width:32px;height:32px;border-radius:10px;
  background:var(--orange);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;flex-shrink:0;font-style:normal;
  box-shadow:0 2px 8px rgba(230,82,61,.4);
}
.nav-divider{
  width:1px;height:20px;background:rgba(0,0,0,.1);flex-shrink:0;margin:0 6px;
}
.nav-links{
  display:flex;align-items:center;gap:0;flex-shrink:0;
}
.nav-links a{
  font-size:13px;font-weight:500;color:var(--muted);
  padding:7px 13px;border-radius:999px;
  transition:color .2s,background .2s;white-space:nowrap;
}
.nav-links a:hover{color:var(--text);background:rgba(0,0,0,.06)}
/* push CTA to the right with a small spacer */
.nav-spacer{width:14px;flex-shrink:0}
.nav-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.nav-cta{
  display:inline-flex;align-items:center;
  background:var(--black);color:#fff;
  font-size:13px;font-weight:700;
  padding:10px 20px;border-radius:999px;border:none;
  transition:background .2s,transform .15s,box-shadow .2s;
  white-space:nowrap;flex-shrink:0;
  box-shadow:0 2px 4px #111;
}
.nav-cta:hover{background:var(--orange2);transform:translateY(-1px);box-shadow:0 4px 18px rgba(230,82,61,.5)}
.nav-icon-btn{
  width:34px;height:34px;border-radius:999px;
  border:1px solid rgba(0,0,0,.09);background:transparent;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:background .2s;cursor:pointer;flex-shrink:0;
}
.nav-icon-btn:hover{background:rgba(0,0,0,.06);color:var(--text)}
.nav-icon-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.ham{
  display:none;flex-direction:column;gap:4px;
  background:none;border:1px solid rgba(0,0,0,.1);
  padding:9px 10px;border-radius:999px;cursor:pointer;flex-shrink:0;
}
.ham span{display:block;width:16px;height:1.5px;background:var(--text);border-radius:1px}
.mob{
  display:none;position:fixed;
  top:82px;left:16px;right:16px;bottom:16px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  flex-direction:column;padding:28px;
  z-index:800;border:1px solid var(--border);
  border-radius:24px;
  box-shadow:0 8px 40px rgba(0,0,0,.14);
}
.mob.open{display:flex}
.mob a{
  font-family:var(--display);font-size:26px;font-weight:800;
  padding:14px 0;border-bottom:1px solid var(--border);
  letter-spacing:-.02em;color:var(--text);
}
.mob .mob-btn{
  margin-top:24px;width:100%;justify-content:center;
  font-size:15px;background:var(--orange);color:#fff;
  border-radius:999px;padding:14px;
  box-shadow:0 4px 16px rgba(230,82,61,.35);
}

/* ── SOCIAL SIDEBAR ── */
#social-bar{position:fixed;left:clamp(12px,2.5vw,32px);top:50%;transform:translateY(-50%);z-index:800;display:flex;flex-direction:column;gap:0;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 2px 16px rgba(0,0,0,.07);overflow:hidden}
.soc-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--muted);border-bottom:1px solid var(--border);transition:background .2s,color .2s;text-decoration:none}
.soc-btn:last-child{border-bottom:none}
.soc-btn:hover{background:var(--gray);color:var(--text)}
.soc-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.soc-btn.fill-icon svg{fill:currentColor;stroke:none}

/* ── HERO — Wibify centered layout ── */
#hero{
  padding:clamp(108px,13vw,148px) 0 clamp(56px,8vw,88px);
  background:#f8f8f7;
  position:relative;overflow:hidden;
  text-align:center;
  /* subtle grid */
  background-image:
    linear-gradient(rgba(0,0,0,.045) 1px, transparent 2px),
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 2px);
  background-size:48px 48px;
  background-color:#f8f8f7;
}
/* fade grid at edges */
#hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 75% 55% at 50% 0%,   rgba(248,248,247,.95) 0%,transparent 100%),
    radial-gradient(ellipse 75% 55% at 50% 100%,  rgba(248,248,247,.95) 0%,transparent 100%),
    radial-gradient(ellipse 40% 100% at 0%   50%, rgba(248,248,247,.9)  0%,transparent 100%),
    radial-gradient(ellipse 40% 100% at 100% 50%, rgba(248,248,247,.9)  0%,transparent 100%);
  z-index:0;
}
#hero .wrap{position:relative;z-index:1}

.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.85);border:1px solid var(--border);border-radius:999px;padding:6px 16px 6px 10px;margin-bottom:28px;box-shadow:0 1px 6px rgba(0,0,0,.05)}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);animation:blink 2s ease-in-out infinite;flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.hero-eyebrow span{font-size:12px;font-weight:500;color:var(--muted)}

/* Giant centered headline */
.hero-h1{
  font-family:var(--display);
  font-size:clamp(44px,8.5vw,112px);
  font-weight:800;
  line-height:.97;
  letter-spacing:-.035em;
  color:var(--black);
  margin-bottom:0;
  display:inline-block;
  position:relative;
}
/* Orange underline — SVG wave under last line */
.hero-h1-wrap{margin-bottom:32px;position:relative;display:inline-block}
.hero-underline{
  display:block;
  width:100%;
  margin-top:6px;
  overflow:visible;
}
.hero-underline path,.uline-path{
  stroke:var(--orange);stroke-width:6;fill:none;
  stroke-linecap:round;
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  animation:drawLine 1s ease forwards .6s;
}
@keyframes drawLine{to{stroke-dashoffset:0}}

.hero-sub{font-size:clamp(15px,1.6vw,18px);color:var(--muted);line-height:1.75;max-width:560px;margin:0 auto 36px;font-weight:400}

/* Single dark pill CTA */
.hero-cta-wrap{display:flex;justify-content:center;margin-bottom:60px}
.hero-btn-dark{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--black);color:#fff;
  font-size:15px;font-weight:600;
  padding:16px 32px;
  border-radius:999px;border:none;
  transition:background .2s,transform .15s,box-shadow .2s;
  box-shadow:0 4px 24px rgba(0,0,0,.2);
}
.hero-btn-dark:hover{background:#333;transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.25)}
.hero-btn-dark .sparkle{font-size:16px}

/* Inline stats row */
.hero-stats{
  display:inline-flex;align-items:stretch;gap:0;
  background:#fff;border:1px solid var(--border);
  border-radius:14px;box-shadow:0 2px 12px rgba(0,0,0,.06);
  overflow:hidden;flex-wrap:wrap;
}
.h-stat{padding:18px 32px;border-right:1px solid var(--border);text-align:center}
.h-stat:last-child{border-right:none}
.h-stat-n{font-family:var(--display);font-size:clamp(26px,3.5vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--black);display:block}
.h-stat-n span{color:var(--orange)}
.h-stat-l{font-size:12px;color:var(--muted);line-height:1.35;margin-top:4px;display:block}
/* hide old badge */
.hero-badge{display:none}
.avail-pill .green{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.5)}

/* ── DUAL-ROW DARK MARQUEE ── */
.dmarquee{
  background:var(--white);
  padding:0;
  overflow:hidden;
  position:relative;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.dm-row{
  overflow:hidden;
  padding:18px 0;
  position:relative;
}
.dm-row-1{border-bottom:1px solid var(--border)}

/* fade edges */
.dm-row::before,.dm-row::after{
  content:'';position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none;
}
.dm-row::before{left:0;background:linear-gradient(to right,#fff 0%,transparent 100%)}
.dm-row::after {right:0;background:linear-gradient(to left,#fff 0%,transparent 100%)}

.dm-track{
  display:flex;align-items:center;
  gap:clamp(18px,2.5vw,32px);
  width:max-content;
  white-space:nowrap;
}
.dm-left { animation:dmLeft  28s linear infinite }
.dm-right{ animation:dmRight 32s linear infinite }

@keyframes dmLeft  {from{transform:translateX(0)}     to{transform:translateX(-50%)}}
@keyframes dmRight {from{transform:translateX(-50%)}  to{transform:translateX(0)}}

/* text items */
.dm-text{
  font-family:var(--display);
  font-size:clamp(20px,2.8vw,34px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--black);
  line-height:1;
}
.dm-text em{
  font-style:normal;
  color:var(--orange);
}
.dm-text.dm-dim{
  color:rgba(17,17,17,.22);
}

/* diamond separator */
.dm-diamond{
  font-size:clamp(9px,1.1vw,13px);
  color:var(--gray3);
  flex-shrink:0;
  line-height:1;
}

/* dash separator */
.dm-dash{
  font-size:clamp(16px,2vw,24px);
  color:var(--gray3);
  font-weight:300;
  flex-shrink:0;
  line-height:1;
}

/* orange-dot pill badge */
.dm-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--gray);
  border:1px solid var(--border);
  border-radius:999px;
  padding:7px 16px;
  font-size:clamp(11px,1.2vw,14px);
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
  flex-shrink:0;
  letter-spacing:.01em;
}
.dm-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 6px rgba(230,82,61,.5);
  flex-shrink:0;
  animation:blink 2s ease-in-out infinite;
}

/* ── SHARED SECTION STYLES ── */
.sec{padding:clamp(72px,10vw,120px) 0}
.sec-gray{background:var(--gray)}
.sec-head{margin-bottom:clamp(40px,6vw,64px)}
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:0}
.sec-title{font-family:var(--display);font-size:clamp(38px,6vw,72px);font-weight:800;line-height:1.0;letter-spacing:-.025em;color:var(--black);margin-top:8px}
.sec-sub{font-size:15px;color:var(--muted);line-height:1.75;max-width:380px;font-weight:400}
hr.divider{border:none;height:1px;background:var(--border)}

/* ── WORK / PORTFOLIO — horizontal scroll cards ── */
#work{background:var(--white);overflow:hidden}
.work-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,5vw,52px)}
.work-header-left{}
.work-view-all{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);padding:10px 20px;border:1.5px solid var(--border);border-radius:999px;transition:border-color .2s,color .2s,background .2s;white-space:nowrap;align-self:flex-end;margin-bottom:6px}
.work-view-all:hover{border-color:var(--black);color:var(--black);background:var(--gray)}
.work-view-all svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}

/* scroll track */
.work-scroll-outer{position:relative;margin:0 calc(-1 * clamp(20px,5vw,60px))}
.work-scroll{
  display:flex;gap:20px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:8px clamp(20px,5vw,60px) 28px;
  scrollbar-width:none;
  cursor:grab;
  -webkit-user-select:none;user-select:none;
}
.work-scroll::-webkit-scrollbar{display:none}
.work-scroll.dragging{cursor:grabbing}

/* card */
.pf-card{
  flex:0 0 clamp(300px,32vw,520px);
  scroll-snap-align:start;
  border-radius:20px;overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 4px 24px rgba(0,0,0,.07);
  transition:transform .3s,box-shadow .3s;
  position:relative;
  display:flex;flex-direction:column;
  text-decoration:none;
}
.pf-card:hover{transform:translateY(-8px);box-shadow:0 20px 60px rgba(0,0,0,.13)}

/* mock UI canvas */
.pf-img{
  width:100%;aspect-ratio:4/3;overflow:hidden;
  position:relative;background:#f4f4f8;
  flex:1;
}
.pf-card:hover .pf-img{transform:scale(1.02);transition:transform .5s ease}

/* ── MOCK 1: Dashboard ── */
.pm1{background:#f0f2ff;position:relative}
.pm1 .db-topbar{position:absolute;top:0;left:0;right:0;height:14%;background:#fff;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;padding:0 5%;gap:3%}
.pm1 .db-logo{width:8%;height:55%;background:#6c63ff;border-radius:4px}
.pm1 .db-search{flex:1;height:55%;background:#f4f4f8;border-radius:999px}
.pm1 .db-av{width:6%;height:55%;background:#e0e0e0;border-radius:50%}
.pm1 .db-sidebar{position:absolute;top:14%;left:0;bottom:0;width:18%;background:#fff;border-right:1px solid #eee;padding:5% 0;display:flex;flex-direction:column;gap:8%}
.pm1 .db-nav{width:75%;height:6%;background:#6c63ff;border-radius:0 8px 8px 0;opacity:.15;margin-left:5%}
.pm1 .db-nav:first-child{opacity:1;background:#6c63ff}
.pm1 .db-main{position:absolute;top:14%;left:18%;right:0;bottom:0;padding:4%}
.pm1 .db-cards{display:flex;gap:4%;margin-bottom:4%}
.pm1 .db-stat{flex:1;height:18%;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.pm1 .db-stat:nth-child(1)::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:#6c63ff;border-radius:0 0 8px 8px}
.pm1 .db-chart{height:38%;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.06);overflow:hidden;position:relative}
.pm1 .db-chart::after{content:'';position:absolute;inset:10%;background:linear-gradient(180deg,rgba(108,99,255,.3) 0%,rgba(108,99,255,.05) 100%);clip-path:polygon(0 80%,10% 55%,20% 65%,35% 30%,50% 45%,65% 20%,80% 35%,100% 10%,100% 100%,0 100%)}
.pm1 .db-row{display:flex;gap:4%;margin-top:4%}
.pm1 .db-half{flex:1;height:24%;background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.06)}

/* ── MOCK 2: Mobile App ── */
.pm2{background:linear-gradient(160deg,#e8f4ff 0%,#f0e8ff 100%);display:flex;align-items:center;justify-content:center;gap:6%}
.pm2 .mob-phone{width:30%;aspect-ratio:9/18;background:#fff;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.12);overflow:hidden;flex-shrink:0;position:relative}
.pm2 .mob-phone:nth-child(2){transform:scale(1.06);z-index:2}
.pm2 .mob-bar{width:100%;height:6%;background:#f8f8f8;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;padding:0 8%}
.pm2 .mob-dot{width:10%;height:40%;background:#e0e0e0;border-radius:999px}
.pm2 .mob-hero{width:100%;height:30%;background:linear-gradient(135deg,#a8edea,#fed6e3);position:relative}
.pm2 .mob-hero::after{content:'';position:absolute;bottom:0;left:15%;width:70%;height:80%;background:rgba(255,255,255,.3);border-radius:8px 8px 0 0}
.pm2 .mob-list{padding:6% 8%;display:flex;flex-direction:column;gap:8%}
.pm2 .mob-row{height:9%;background:#f4f4f8;border-radius:6px;width:100%}
.pm2 .mob-row:nth-child(2){width:80%}
.pm2 .mob-row:nth-child(3){width:90%}
.pm2 .mob-tabbar{position:absolute;bottom:0;left:0;right:0;height:12%;background:#fff;border-top:1px solid #eee;display:flex;align-items:center;justify-content:space-around}
.pm2 .mob-icon{width:14%;height:50%;background:#e0e0e0;border-radius:4px}
.pm2 .mob-icon.act{background:#6c63ff}

/* ── MOCK 3: Landing Page ── */
.pm3{background:#fff;position:relative;overflow:hidden}
.pm3 .lp-nav{position:absolute;top:0;left:0;right:0;height:10%;background:#fff;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;padding:0 5%;gap:3%}
.pm3 .lp-logo{width:12%;height:40%;background:#111;border-radius:4px}
.pm3 .lp-links{flex:1;display:flex;gap:4%}
.pm3 .lp-link{width:8%;height:30%;background:#e8e8e8;border-radius:999px}
.pm3 .lp-btn{width:12%;height:55%;background:var(--orange);border-radius:999px}
.pm3 .lp-hero{position:absolute;top:10%;left:0;right:0;height:45%;background:linear-gradient(135deg,#fff8f7 0%,#fff 100%);display:flex;flex-direction:column;justify-content:center;padding:0 8%}
.pm3 .lp-h1-a{width:70%;height:10%;background:#111;border-radius:4px;margin-bottom:2%}
.pm3 .lp-h1-b{width:50%;height:10%;background:#333;border-radius:4px;opacity:.5;margin-bottom:4%}
.pm3 .lp-sub{width:60%;height:6%;background:#e0e0e0;border-radius:999px;margin-bottom:2%}
.pm3 .lp-sub2{width:45%;height:6%;background:#e0e0e0;border-radius:999px;margin-bottom:6%}
.pm3 .lp-cta{width:25%;height:12%;background:var(--orange);border-radius:999px}
.pm3 .lp-cards{position:absolute;top:55%;left:0;right:0;bottom:0;background:#f8f8f8;padding:3% 5%;display:flex;gap:3%}
.pm3 .lp-card{flex:1;background:#fff;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.pm3 .lp-card::before{content:'';display:block;height:40%;background:linear-gradient(135deg,var(--orange),#ff8c75);border-radius:8px 8px 0 0;opacity:.7}

/* bottom dribbble bar */
.pf-info{
  padding:14px 22px;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  border-top:1px solid var(--border);
}
.pf-arrow{
  width:36px;height:36px;border-radius:50%;
  background:var(--gray);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .2s,transform .2s,border-color .2s;
  color:var(--muted);
}
.pf-card:hover .pf-arrow{background:var(--orange);border-color:var(--orange);color:#fff;transform:scale(1.1)}
.pf-arrow svg{width:15px;height:15px}

/* scroll progress dots */
.work-dots{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px}
.work-dot{width:28px;height:3px;border-radius:99px;background:var(--border);transition:background .3s,width .3s;cursor:pointer}
.work-dot.active{background:var(--black);width:44px}

/* ── PROCESS FLOWCHART ── */
#process .sec-head{margin-bottom:clamp(32px,5vw,56px)}
.proc-outer{width:100%;overflow-x:auto;padding:0 clamp(20px,5vw,60px) clamp(48px,7vw,80px);scrollbar-width:none}
.proc-outer::-webkit-scrollbar{display:none}
.proc-diagram{position:relative;width:1000px;height:540px;margin:0 auto}
.proc-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.proc-line{fill:none;stroke:rgba(17,17,17,.15);stroke-width:1.5;stroke-dasharray:6 4}
.proc-dot{fill:#fff;stroke:rgba(17,17,17,.25);stroke-width:1.5}
.proc-card{position:absolute;width:210px;border-radius:16px;padding:24px 22px 22px;z-index:1;transition:transform .3s,box-shadow .3s;cursor:default}
.proc-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 56px rgba(0,0,0,.16)}
.proc-dark{background:var(--black);box-shadow:0 8px 32px rgba(0,0,0,.2)}
.proc-dark .proc-step{color:var(--orange)}
.proc-dark .proc-title{color:#fff}
.proc-dark ul li{color:rgba(255,255,255,.6)}
.proc-orange{background:var(--orange);box-shadow:0 8px 32px rgba(230,82,61,.3)}
.proc-orange .proc-step{color:rgba(255,255,255,.5)}
.proc-orange .proc-title{color:#fff}
.proc-orange ul li{color:rgba(255,255,255,.85)}
.proc-step{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.12em;margin-bottom:8px}
.proc-title{font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;line-height:1}
.proc-card ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.proc-card ul li{font-size:12.5px;font-weight:500;line-height:1.4;padding-left:14px;position:relative}
.proc-card ul li::before{content:'•';position:absolute;left:0;font-size:10px;top:1px}
.proc-dark ul li::before{color:var(--orange)}
.proc-orange ul li::before{color:rgba(255,255,255,.7)}
/* 4-card diamond positions */
.proc-top-center{top:20px;left:390px}
.proc-mid-left{top:210px;left:60px}
.proc-mid-right{top:210px;left:720px}
.proc-bot-center{top:360px;left:390px}
@media(max-width:640px){
  .proc-outer{padding-bottom:40px}
  .proc-diagram{width:100%;height:auto;display:flex;flex-direction:column;gap:12px;position:static}
  .proc-svg{display:none}
  .proc-card{position:static;width:100%}
}
.price-note{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:clamp(20px,3vw,28px);justify-content:center}
.price-note::before,.price-note::after{content:'';flex:1;height:1px;background:var(--border)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.price-card{background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:clamp(26px,3.5vw,40px);display:flex;flex-direction:column;gap:20px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.price-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.1)}
.price-card.hot{border-color:var(--orange)}
.price-card.hot:hover{box-shadow:0 16px 48px rgba(230,82,61,.18)}
.price-badge{position:absolute;top:0;left:50%;transform:translateX(-50%);background:var(--orange);color:#fff;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:5px 16px;border-radius:0 0 10px 10px}
.price-name{font-family:var(--display);font-size:14px;font-weight:700;color:var(--black);letter-spacing:.01em}
.price-tagline{font-size:13px;color:var(--muted);margin-top:3px;font-weight:400;line-height:1.4}
.price-amount{font-family:var(--display);font-size:clamp(40px,5vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--black)}
.price-card.hot .price-amount{color:var(--orange)}
.price-sep{height:1px;background:var(--border)}
.price-list{flex:1;display:flex;flex-direction:column;gap:10px}
.price-list li{font-size:13px;color:var(--muted);padding-left:18px;position:relative;line-height:1.5}
.price-list li::before{content:'✓';position:absolute;left:0;color:var(--orange);font-size:11px;font-weight:700;top:1px}
.price-btn{padding:13px 22px;border-radius:999px;font-size:13px;font-weight:600;font-family:var(--body);text-align:center;cursor:pointer;transition:.2s;border:none;display:block;width:100%}
.pb-o{background:transparent;color:var(--black);border:1.5px solid var(--border) !important}
.pb-o:hover{border-color:var(--black) !important;background:var(--gray)}
.pb-s{background:var(--orange);color:#fff}
.pb-s:hover{background:var(--orange2);transform:translateY(-1px)}

/* ── CTA SECTION ── (Wibify "Bereit für Ihr Projekt?" style) */
#cta-sec{background:var(--black);padding:clamp(64px,10vw,100px) 0;position:relative;overflow:hidden}
#cta-sec::before{content:'';position:absolute;top:-40%;right:-10%;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle,rgba(230,82,61,.12) 0%,transparent 65%);pointer-events:none}
.cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
.cta-left h2{font-family:var(--display);font-size:clamp(36px,5vw,60px);font-weight:800;letter-spacing:-.025em;line-height:1.05;color:#fff;margin-bottom:18px}
.cta-left h2 span{color:var(--orange)}
.cta-left p{font-size:15px;color:rgba(255,255,255,.55);line-height:1.75;margin-bottom:32px}
.cta-btns{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cta-right{display:flex;flex-direction:column;gap:16px}
.cta-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:22px 24px}
.cta-card-title{font-family:var(--display);font-size:15px;font-weight:700;color:#fff;margin-bottom:4px}
.cta-card-sub{font-size:13px;color:rgba(255,255,255,.45)}
.cta-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cta-tag{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:rgba(255,255,255,.5)}
.cta-tag.active{border-color:var(--orange);color:var(--orange)}

/* ── RESULTS / FEATURES ── */
#results{background:var(--gray)}
.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start}
.results-left h2{font-family:var(--display);font-size:clamp(32px,4.5vw,52px);font-weight:800;letter-spacing:-.025em;line-height:1.05;margin-bottom:20px}
.results-left p{font-size:15px;color:var(--muted);line-height:1.8;margin-bottom:32px}
.feature-list{display:flex;flex-direction:column;gap:14px}
.feat{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;background:var(--white);border:1px solid var(--border);border-radius:var(--r);transition:border-color .2s}
.feat:hover{border-color:var(--orange)}
.feat-icon{width:38px;height:38px;border-radius:9px;background:rgba(230,82,61,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat-icon svg{width:17px;height:17px;stroke:var(--orange);fill:none;stroke-width:1.8;stroke-linecap:round}
.feat-title{font-size:14px;font-weight:600;color:var(--black);margin-bottom:3px}
.feat-desc{font-size:13px;color:var(--muted);line-height:1.55}
.results-right{display:flex;flex-direction:column;gap:16px}
.stat-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:24px 28px;display:flex;align-items:baseline;gap:12px}
.stat-big{font-family:var(--display);font-size:clamp(40px,5vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--black)}
.stat-big span{color:var(--orange)}
.stat-label{font-size:14px;color:var(--muted);line-height:1.4}
.score-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:24px 28px}
.score-title{font-family:var(--display);font-size:16px;font-weight:700;color:var(--black);margin-bottom:16px}
.score-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.score-row:last-child{margin-bottom:0}
.score-label{font-size:12px;color:var(--muted);width:80px;flex-shrink:0}
.score-bar-wrap{flex:1;height:6px;background:var(--gray2);border-radius:3px;overflow:hidden}
.score-bar{height:100%;background:var(--orange);border-radius:3px}
.score-num{font-size:13px;font-weight:700;color:var(--black);width:30px;text-align:right;flex-shrink:0}

/* ── TESTIMONIALS ── */
#reviews{background:var(--white)}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.review-card{background:var(--gray);border:1px solid var(--border);border-radius:14px;padding:24px;transition:box-shadow .25s}
.review-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.08)}
.review-stars{display:flex;gap:3px;margin-bottom:14px}
.star{color:var(--orange);font-size:14px}
.review-text{font-size:14px;color:var(--text);line-height:1.7;margin-bottom:18px;font-style:italic}
.reviewer{display:flex;align-items:center;gap:10px}
.reviewer-av{width:36px;height:36px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.reviewer-name{font-size:13px;font-weight:600;color:var(--black)}
.reviewer-meta{font-size:11px;color:var(--muted2);margin-top:1px}

/* ── FAQ ── (Wibify: left intro, right accordion) */
#faq{background:var(--gray)}
.faq-wrap{display:grid;grid-template-columns:1fr 1.8fr;gap:clamp(48px,8vw,100px);align-items:start}
.faq-left .label{display:block;margin-bottom:12px}
.faq-left h2{font-family:var(--display);font-size:clamp(36px,5vw,58px);font-weight:800;letter-spacing:-.025em;line-height:1.0;margin-bottom:20px}
.faq-left p{font-size:15px;color:var(--muted);line-height:1.8;margin-bottom:28px}
.faq-list{display:flex;flex-direction:column}
.faq-item{border-top:1px solid var(--border);background:transparent}
.faq-item:last-child{border-bottom:1px solid var(--border)}
.faq-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(18px,2.2vw,24px) 0;background:none;border:none;text-align:left;cursor:pointer;color:var(--text)}
.faq-q{font-family:var(--display);font-size:clamp(14px,1.7vw,17px);font-weight:700;letter-spacing:-.01em;line-height:1.3;color:var(--black)}
.faq-icon{font-size:22px;font-weight:300;color:var(--muted);transition:transform .32s cubic-bezier(.16,1,.3,1),color .2s;user-select:none;flex-shrink:0;line-height:1}
.faq-item.on .faq-icon{transform:rotate(45deg);color:var(--orange)}
.faq-ans{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-ans-i{padding:0 48px 20px 0;font-size:14px;color:var(--muted);line-height:1.85}
.faq-item.on .faq-ans{max-height:300px}

/* ── SERVICES — interactive accordion with preview ── */
#services{background:var(--white);overflow:hidden}
.svc-header{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,64px)}
.svc-label-pill{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:999px;padding:6px 18px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.svc-main-title{font-family:var(--display);font-size:clamp(40px,6vw,72px);font-weight:800;line-height:1.0;letter-spacing:-.03em;color:var(--black)}
.svc-header-right{max-width:320px}
.svc-header-right p{font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:20px}

/* two-column layout */
.svc-layout{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:20px;overflow:hidden}

/* left: accordion list */
.svc-accordion{}
.svc-item{
  border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .2s;
}
.svc-item:last-child{border-bottom:none}
.svc-item-head{
  display:flex;align-items:center;gap:16px;
  padding:clamp(20px,2.5vw,28px) clamp(24px,3vw,36px);
  transition:padding .3s;
}
.svc-item-num{
  font-family:var(--display);font-size:12px;font-weight:700;
  color:var(--muted2);letter-spacing:.06em;
  flex-shrink:0;width:28px;transition:color .2s;
}
.svc-item-name{
  font-family:var(--display);font-size:clamp(16px,1.8vw,20px);
  font-weight:700;color:var(--black);letter-spacing:-.01em;
  flex:1;transition:color .2s;
}
.svc-item-icon{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .2s,border-color .2s,transform .3s;
}
.svc-item-icon svg{width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:2.2;stroke-linecap:round;transition:stroke .2s}

/* active state */
.svc-item.active{background:var(--gray)}
.svc-item.active .svc-item-num{color:var(--orange)}
.svc-item.active .svc-item-name{color:var(--black)}
.svc-item.active .svc-item-icon{background:var(--black);border-color:var(--black);transform:rotate(45deg)}
.svc-item.active .svc-item-icon svg{stroke:#fff}

/* expandable body */
.svc-item-body{
  max-height:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1);
}
.svc-item.active .svc-item-body{max-height:300px}
.svc-item-body-inner{
  padding:0 clamp(24px,3vw,36px) clamp(20px,2.5vw,28px);
  padding-left:calc(clamp(24px,3vw,36px) + 28px + 16px);
}
.svc-item-desc{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:14px}
.svc-item-tags{display:flex;flex-wrap:wrap;gap:6px}
.svc-tag{font-size:11px;font-weight:600;padding:4px 12px;border-radius:999px;background:var(--white);border:1px solid var(--border);color:var(--muted);letter-spacing:.02em}

/* right: preview panel */
.svc-preview{
  border-left:1px solid var(--border);
  background:var(--gray);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(32px,4vw,48px);
  position:relative;overflow:hidden;
  min-height:420px;
}
.svc-preview-card{
  width:100%;max-width:340px;
  background:#fff;border-radius:16px;border:1px solid var(--border);
  box-shadow:0 8px 40px rgba(0,0,0,.08);
  overflow:hidden;
  transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s;
}
.svc-preview-card:hover{transform:translateY(-4px);box-shadow:0 16px 56px rgba(0,0,0,.12)}
.svc-preview-top{
  padding:24px 24px 20px;
  border-bottom:1px solid var(--border);
}
.svc-preview-tag{
  display:inline-block;font-size:10px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--orange);margin-bottom:12px;
}
.svc-preview-title{font-family:var(--display);font-size:18px;font-weight:800;color:var(--black);letter-spacing:-.015em;line-height:1.2;margin-bottom:8px}
.svc-preview-sub{font-size:12px;color:var(--muted);line-height:1.6}
/* mock UI in preview card */
.svc-preview-mock{padding:20px 24px 24px}
.svc-mock-bar{height:8px;border-radius:4px;background:var(--gray);margin-bottom:8px}
.svc-mock-bar.w80{width:80%}.svc-mock-bar.w60{width:60%}.svc-mock-bar.w90{width:90%}.svc-mock-bar.w40{width:40%}
.svc-mock-btn{display:inline-block;margin-top:12px;padding:8px 18px;border-radius:999px;background:var(--orange);height:28px;width:90px}
.svc-mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.svc-mock-cell{height:36px;border-radius:8px;background:var(--gray)}
/* active panel highlight */
.svc-preview-card .svc-active-bar{height:3px;background:var(--orange);border-radius:0}

@media(max-width:900px){
  .svc-layout{grid-template-columns:1fr}
  .svc-preview{display:none}
  .svc-header{flex-direction:column;align-items:flex-start}
}
.exp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:clamp(40px,5vw,56px)}
.exp-stat{background:var(--white);padding:28px 24px;text-align:center}
.exp-stat-n{font-family:var(--display);font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.03em;color:var(--black);display:block}
.exp-stat-n span{color:var(--orange)}
.exp-stat-l{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.3}
.exp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:24px}
.exp-card{background:var(--white);padding:clamp(26px,3.5vw,36px);transition:background .25s;position:relative;overflow:hidden}
.exp-card::after{content:'';position:absolute;left:0;bottom:0;right:0;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.exp-card:hover{background:var(--gray)}
.exp-card:hover::after{transform:scaleX(1)}
.exp-card-n{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.exp-card-t{font-family:var(--display);font-size:clamp(17px,2vw,21px);font-weight:700;letter-spacing:-.015em;margin-bottom:10px;color:var(--black)}
.exp-card-d{font-size:14px;color:var(--muted);line-height:1.75}
.exp-card-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13px;font-weight:600;color:var(--orange);transition:gap .2s}
.exp-card-link:hover{gap:10px}
.exp-card-link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.exp-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.exp-industries{background:var(--gray);border:1px solid var(--border);border-radius:14px;padding:clamp(22px,3vw,30px)}
.exp-industries h4{font-family:var(--display);font-size:15px;font-weight:700;color:var(--black);margin-bottom:16px}
.ind-list{display:flex;flex-direction:column;gap:10px}
.ind-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.ind-row:last-child{border-bottom:none}
.ind-name{font-size:13px;font-weight:500;color:var(--text)}
.ind-count{font-size:12px;color:var(--muted);background:var(--white);border:1px solid var(--border);padding:3px 10px;border-radius:999px}
.exp-tech{background:var(--gray);border:1px solid var(--border);border-radius:14px;padding:clamp(22px,3vw,30px)}
.exp-tech h4{font-family:var(--display);font-size:15px;font-weight:700;color:var(--black);margin-bottom:16px}
.tech-chips{display:flex;flex-wrap:wrap;gap:8px}
.tech-chip{font-size:12px;font-weight:500;padding:6px 14px;border:1.5px solid var(--border);border-radius:999px;color:var(--muted);background:var(--white);transition:border-color .2s,color .2s}
.tech-chip:hover{border-color:var(--orange);color:var(--orange)}

/* ── ABOUT ── (Wibify: photo + text + stats) */
#about{background:var(--gray)}
.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,80px);align-items:center}
.about-img-col{position:relative}
.about-img-frame{border-radius:16px;overflow:hidden;border:1px solid var(--border);background:var(--white);aspect-ratio:4/3}
.about-img-frame img{width:100%;height:100%;object-fit:cover}
.about-fl{position:absolute;bottom:-16px;right:-16px;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px 20px;box-shadow:0 4px 24px rgba(0,0,0,.08)}
.about-fl-n{font-family:var(--display);font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--orange);display:block;line-height:1}
.about-fl-l{font-size:11px;color:var(--muted);margin-top:2px}
.about-text .label{display:block;margin-bottom:12px}
.about-text h2{font-family:var(--display);font-size:clamp(32px,4.5vw,52px);font-weight:800;letter-spacing:-.025em;line-height:1.0;margin-bottom:20px;color:var(--black)}
.about-bar{width:36px;height:3px;background:var(--orange);border-radius:2px;margin-bottom:20px}
.about-text p{font-size:15px;color:var(--muted);line-height:1.85;margin-bottom:14px}
.about-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:28px}
.ams{background:var(--white);padding:16px 12px;text-align:center}
.ams-n{font-family:var(--display);font-size:clamp(20px,2.5vw,28px);font-weight:800;letter-spacing:-.02em;color:var(--orange);display:block}
.ams-l{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.3}
.about-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.about-tag{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border:1.5px solid var(--border);border-radius:999px;color:var(--muted);transition:border-color .2s,color .2s}
.about-tag:hover{border-color:var(--orange);color:var(--orange)}

/* ── FOOTER ── */
footer{
  background:var(--white);
  border-top:1px solid var(--border);
  text-align:center;
  padding:clamp(40px,6vw,64px) clamp(24px,5vw,48px) clamp(28px,4vw,40px);
}
.footer-logo-wrap{margin-bottom:6px}
.footer-brand{
  font-family:var(--display);font-size:clamp(18px,2.2vw,24px);
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--black);
}
.footer-logo-img{height:48px;width:auto;display:block;margin:0 auto 6px}
.footer-nav-links{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,3vw,36px);flex-wrap:wrap;
  margin-bottom:20px;
}
.footer-nav-links a{
  font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--black);
  transition:color .2s;
}
.footer-nav-links a:hover{color:var(--orange)}
.footer-nav-links a.active{color:var(--orange)}
.footer-divider{
  width:40px;height:2px;background:var(--orange);
  margin:0 auto 20px;border-radius:2px;
}
.footer-socials{
  display:flex;gap:10px;align-items:center;
  justify-content:center;margin-bottom:24px;
}
.fsoc{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--muted);
  border:1.5px solid var(--border);
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.fsoc:hover{background:var(--orange);color:#fff;border-color:var(--orange);transform:translateY(-2px)}
.fsoc svg{width:13px;height:13px}
.footer-contact{
  font-size:12px;color:var(--muted2);line-height:1.9;
}
.footer-contact a{color:var(--muted2);transition:color .2s}
.footer-contact a:hover{color:var(--orange)}
.fsoc{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.2s}
.fsoc:hover{border-color:var(--text);color:var(--text)}
.fsoc svg{width:13px;height:13px;fill:currentColor}

/* ── RESPONSIVE ── */
@media(max-width:1000px){
  .work-card{grid-template-columns:1fr !important;direction:ltr !important}
  .work-card>*{direction:ltr !important}
  .work-mock{min-height:220px}
  .cta-inner,.results-grid,.about-grid,.exp-bottom{grid-template-columns:1fr}
  .exp-stats{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .faq-wrap{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr 1fr}
  .about-fl{display:none}
}
@media(max-width:768px){
  .nav-links,.nav-cta,.nav-icon-btn,.nav-divider,.nav-spacer{display:none}
  .ham{display:flex}
  #social-bar{display:none}
  .hero-stats{flex-direction:column}
  .h-stat{border-right:none !important;border-bottom:1px solid var(--border);padding:16px 24px}
  .h-stat:last-child{border-bottom:none}
  .exp-grid,.reviews-grid{grid-template-columns:1fr}
  .about-mini-stats{grid-template-columns:repeat(3,1fr)}
}