/* =========================================
   ParamGo Home Page Styles
   Only loaded on index.html
   ========================================= */

/* === HERO === */
.hero{padding:120px 0 64px;position:relative;overflow:hidden;background:var(--bg);display:flex;align-items:center;}

/* Animated radial glow (VaultoryHero-inspired, light theme) */
.hero-glow{position:absolute;top:10%;left:20%;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.1) 0%,rgba(16,185,129,.03) 40%,transparent 70%);filter:blur(80px);animation:heroGlow 8s ease-in-out infinite;pointer-events:none;z-index:0;}
.hero-glow-2{position:absolute;bottom:5%;right:10%;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.06) 0%,transparent 60%);filter:blur(60px);animation:heroGlow 10s ease-in-out infinite 3s;pointer-events:none;z-index:0;}
@keyframes heroGlow{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.2);opacity:.8}}

/* Decorative grid lines (subtle) */
.hero-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:80px 80px;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,black 20%,transparent 70%);}

/* Hero layout */
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;position:relative;z-index:2;}

/* Text column — staggered entrance */
.hero-text-col{opacity:0;animation:heroSlideIn .8s cubic-bezier(.16,1,.3,1) both;}
@keyframes heroSlideIn{from{opacity:0;transform:translateX(-40px) translateY(20px)}to{opacity:1;transform:translate(0)}}

.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px 6px 8px;background:var(--emerald-s);border:1px solid rgba(16,185,129,.15);border-radius:99px;font-size:12px;font-weight:600;color:var(--emerald-d);margin-bottom:24px;opacity:0;animation:fadeUp .6s ease both .2s;}
.hero-badge-dot{width:8px;height:8px;border-radius:50%;background:var(--emerald);animation:pulse 2s ease infinite;box-shadow:0 0 8px rgba(16,185,129,.4);}

.hero h1{font-family:'Plus Jakarta Sans';font-size:56px;font-weight:800;color:var(--dark);letter-spacing:-2.5px;line-height:1.08;margin-bottom:24px;opacity:0;animation:fadeUp .7s ease both .35s;}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--emerald),var(--emerald-d));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;}

.hero-desc{font-size:18px;line-height:1.75;color:var(--label);max-width:500px;margin-bottom:36px;opacity:0;animation:fadeUp .7s ease both .5s;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fadeUp .7s ease both .65s;}
.hero-stats{display:flex;gap:32px;margin-top:36px;opacity:0;animation:fadeUp .7s ease both .8s;}
.hero-stat{text-align:center;}
.hero-stat-num{font-family:'Plus Jakarta Sans';font-size:28px;font-weight:800;color:var(--dark);}
.hero-stat-label{font-size:12px;color:var(--muted);margin-top:2px;}
.hero-app-links{margin-top:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;opacity:0;animation:fadeUp .7s ease both .8s;}
.hero-app-links-label{font-size:12px;color:var(--muted);font-weight:500;}

/* Hero Visual — entrance from right */
.hero-visual{position:relative;display:flex;flex-direction:column;gap:14px;opacity:0;animation:heroVisualIn 1s cubic-bezier(.16,1,.3,1) both .4s;}
@keyframes heroVisualIn{from{opacity:0;transform:translateX(50px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}

.hero-mockup-wrap{position:relative;transition:transform .3s ease;}
.hero-mockup-wrap.anim-up{animation:heroFloat 5s ease-in-out infinite;}
.hero-mockup-wrap.anim-down{animation:heroFloat 5.5s ease-in-out infinite 1s;}
@keyframes heroFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  25%{transform:translateY(-8px) rotate(.3deg)}
  75%{transform:translateY(6px) rotate(-.3deg)}
}
.hero-mockup{width:100%;border-radius:20px;background:var(--section);border:1px solid var(--border);padding:16px;box-shadow:0 25px 80px rgba(0,0,0,.08),0 4px 20px rgba(0,0,0,.04);}
.hero-screen{background:#fff;border-radius:14px;padding:16px;border:1px solid #F3F4F6;}
.hero-screen-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.hero-screen-title{font-family:'Plus Jakarta Sans';font-weight:700;font-size:15px;color:var(--dark);}
.hero-screen-badge{font-size:10px;padding:4px 10px;border-radius:99px;background:var(--emerald-s);color:var(--emerald-d);font-weight:600;}
.hero-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.hero-card{border-radius:10px;padding:12px 10px;border:1px solid #F3F4F6;transition:box-shadow .3s,transform .3s;}
.hero-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.06);}
.hero-card-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--label);margin-bottom:6px;}
.hero-card-val{font-family:'Plus Jakarta Sans';font-size:16px;font-weight:800;letter-spacing:-.5px;}
.hero-card-sub{font-size:9px;color:var(--muted);margin-top:3px;}
.hc-green .hero-card-val{color:var(--emerald);} .hc-green{background:#FAFFFE;}
.hc-red .hero-card-val{color:var(--danger);} .hc-red{background:#FFFAFA;}
.hc-blue .hero-card-val{color:var(--blue);} .hc-blue{background:#FAFCFF;}

/* Portfoy Ozeti */
.poz-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.poz-card{border-radius:9px;padding:10px 10px 8px;border:1px solid #F3F4F6;position:relative;overflow:hidden;animation:slideInRow .5s ease both;}
.poz-card:nth-child(1){animation-delay:.05s}.poz-card:nth-child(2){animation-delay:.15s}
.poz-card:nth-child(3){animation-delay:.25s}.poz-card:nth-child(4){animation-delay:.35s}
.poz-label{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--label);margin-bottom:5px;display:flex;align-items:center;gap:5px;}
.poz-icon{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.poz-val{font-family:'Plus Jakarta Sans';font-size:14px;font-weight:800;letter-spacing:-.5px;margin-bottom:4px;}
.poz-subs{display:flex;gap:8px;flex-wrap:wrap;}
.poz-sub{font-size:8px;color:var(--muted);display:flex;align-items:center;gap:3px;}
.poz-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.poz-dot-green{background:var(--emerald);}
.poz-dot-red{background:var(--danger);}
.poz-alert{margin-top:7px;padding:8px 10px;border-radius:8px;background:#FEF2F2;border:1px solid #FECACA;display:flex;align-items:center;justify-content:space-between;animation:slideInRow .5s ease both .45s;}
.poz-alert-left{display:flex;align-items:center;gap:6px;}
.poz-alert-title{font-size:10px;font-weight:700;color:#B91C1C;}
.poz-alert-badge{font-size:8px;padding:1px 6px;background:#FEE2E2;color:#B91C1C;border-radius:99px;font-weight:700;}
.poz-alert-right{text-align:right;}
.poz-alert-amount{font-family:'Plus Jakarta Sans';font-size:11px;font-weight:800;color:var(--danger);}
.poz-alert-days{font-size:8px;color:var(--danger);margin-top:1px;}

/* Floating cards — VaultoryHero-inspired with rotation + glow */
.hero-float-card{position:absolute;background:#fff;border-radius:14px;padding:14px 18px;box-shadow:0 12px 40px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.03);z-index:2;animation:heroCardFloat 4s ease-in-out infinite;backdrop-filter:blur(10px);}
.hero-float-1{top:-14px;right:-22px;animation-delay:0s;}
.hero-float-2{bottom:-14px;left:-22px;animation-delay:1.5s;}
@keyframes heroCardFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-14px) rotate(2deg)}
}
.hero-float-card .hf-label{font-size:9px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.hero-float-card .hf-val{font-family:'Plus Jakarta Sans';font-size:14px;font-weight:800;margin-top:3px;}

/* === SOCIAL PROOF BAR === */
.proof-bar{padding:28px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--section);position:relative;overflow:hidden;}
.proof-bar::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:600px;height:1px;background:linear-gradient(90deg,transparent,var(--emerald-l),transparent);opacity:.4;}
.proof-inner{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:0;}
.proof-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 12px;position:relative;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
.proof-icon{width:36px;height:36px;border-radius:10px;background:var(--emerald-s);color:var(--emerald);display:flex;align-items:center;justify-content:center;margin-bottom:8px;transition:transform .3s,box-shadow .3s;}
.proof-item:hover .proof-icon{transform:scale(1.1) rotate(-3deg);box-shadow:0 4px 14px rgba(16,185,129,.18);}
.proof-item.visible{opacity:1;transform:translateY(0);}
.proof-item:nth-child(1){transition-delay:0s;}
.proof-item:nth-child(2){transition-delay:.1s;}
.proof-item:nth-child(3){transition-delay:.2s;}
.proof-item:nth-child(4){transition-delay:.3s;}
.proof-item+.proof-item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:32px;background:linear-gradient(180deg,transparent,var(--border),transparent);}
.proof-num{font-family:'Plus Jakarta Sans';font-size:30px;font-weight:800;color:var(--dark);letter-spacing:-1px;line-height:1;display:flex;align-items:baseline;}
.proof-prefix{font-size:20px;font-weight:700;color:var(--emerald-d);margin-right:2px;}
.proof-label{font-size:12px;color:var(--muted);margin-top:4px;font-weight:500;white-space:nowrap;letter-spacing:.2px;}
/* Odometer digit */
.odo-digit{display:inline-block;height:36px;overflow:hidden;position:relative;vertical-align:bottom;}
.odo-digit-inner{display:flex;flex-direction:column;transition:transform 1.6s cubic-bezier(.16,1,.3,1);will-change:transform;}
.odo-digit-inner span{display:block;height:36px;line-height:36px;text-align:center;min-width:.55em;}
.odo-static{display:inline;line-height:36px;}

/* === FEATURES GRID — Premium === */
.features{padding:100px 0 80px;background:var(--bg);position:relative;overflow:hidden;}
.features::before{content:'';position:absolute;top:0;right:-200px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.04),transparent 70%);pointer-events:none;}
.features::after{content:'';position:absolute;bottom:-100px;left:-150px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.03),transparent 70%);pointer-events:none;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
/* Feature Card */
.feat-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:32px 28px;position:relative;overflow:hidden;cursor:pointer;
  opacity:0;transform:translateY(40px);transition:opacity .6s ease,transform .6s ease,box-shadow .4s ease,border-color .4s ease;}
.feat-card.feat-visible{opacity:1;transform:translateY(0);}
.feat-card:hover{border-color:rgba(16,185,129,.3);box-shadow:0 20px 50px rgba(16,185,129,.1),0 8px 20px rgba(0,0,0,.04);}
/* Glow — follows mouse */
.feat-glow{position:absolute;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.12),transparent 70%);opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:0;transform:translate(-50%,-50%);}
.feat-card:hover .feat-glow{opacity:1;}
/* Top accent line */
.feat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--emerald),var(--emerald-l),var(--emerald));background-size:200% 100%;transform:scaleX(0);transition:transform .5s cubic-bezier(.4,0,.2,1);transform-origin:left;z-index:2;}
.feat-card:hover::after{transform:scaleX(1);animation:featShimmer 2s ease infinite;}
@keyframes featShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Icon */
.feat-icon-wrap{position:relative;width:56px;height:56px;margin-bottom:20px;z-index:1;}
.feat-icon{width:56px;height:56px;border-radius:14px;background:var(--emerald-s);color:var(--emerald);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s ease,background .4s ease;}
.feat-card:hover .feat-icon{transform:scale(1.1) rotate(-3deg);background:linear-gradient(135deg,var(--emerald),var(--emerald-d));color:#fff;box-shadow:0 8px 20px rgba(16,185,129,.25);}
.feat-icon-ring{position:absolute;inset:-6px;border-radius:18px;border:2px solid rgba(16,185,129,.12);opacity:0;transform:scale(.8);transition:opacity .4s,transform .4s;z-index:0;}
.feat-card:hover .feat-icon-ring{opacity:1;transform:scale(1);animation:featRingPulse 2s ease-in-out infinite;}
@keyframes featRingPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.08)}}
/* Number */
.feat-num{font-family:'Plus Jakarta Sans';font-size:11px;font-weight:800;color:var(--emerald);letter-spacing:1.5px;margin-bottom:10px;opacity:.5;transition:opacity .3s;z-index:1;position:relative;}
.feat-card:hover .feat-num{opacity:1;}
/* Title */
.feat-title{font-family:'Plus Jakarta Sans';font-size:18px;font-weight:700;color:var(--dark);margin:0 0 8px;z-index:1;position:relative;transition:color .3s;}
/* Desc */
.feat-desc{font-size:14px;color:var(--label);line-height:1.65;margin:0 0 16px;z-index:1;position:relative;}
/* Tags */
.feat-tags{display:flex;flex-wrap:wrap;gap:6px;z-index:1;position:relative;}
.feat-tags span{display:inline-block;padding:4px 10px;background:var(--section);border:1px solid var(--border);border-radius:6px;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.2px;transition:all .3s;}
.feat-card:hover .feat-tags span{border-color:rgba(16,185,129,.2);color:var(--emerald-d);background:var(--emerald-s);}

/* === HERO & SHOWCASE DARK THEME (test) === */
/* Hero dark — birebir ozellikler.html referansı */
.hero{background:#050B15 !important;}
.hero::before{content:'' !important;position:absolute !important;inset:0 !important;z-index:0 !important;pointer-events:none !important;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%,rgba(16,185,129,.15),transparent),
    radial-gradient(ellipse 60% 50% at 80% 30%,rgba(5,150,105,.1),transparent),
    radial-gradient(ellipse 40% 40% at 50% 80%,rgba(52,211,153,.06),transparent) !important;
}
.hero-glow,.hero-glow-2{display:none !important;}
.hero-grid{background-image:linear-gradient(rgba(16,185,129,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(16,185,129,.06) 1px,transparent 1px) !important;opacity:.5 !important;}
.hero h1{color:#fff !important;}
.hero h1 em{background:linear-gradient(135deg,var(--emerald-l),var(--emerald)) !important;-webkit-background-clip:text !important;background-clip:text !important;}
.hero-desc{color:rgba(255,255,255,.55) !important;}
.hero-badge{background:rgba(16,185,129,.12) !important;border-color:rgba(16,185,129,.2) !important;color:var(--emerald-l) !important;}
.hero-stat-num{color:var(--emerald-l) !important;}
.hero-stat-label{color:rgba(255,255,255,.4) !important;}
.hero-app-links-label{color:rgba(255,255,255,.4) !important;}
.hero .app-store-btn{background:rgba(255,255,255,.1) !important;border:1px solid rgba(255,255,255,.2) !important;color:#fff !important;}
.hero .app-store-btn:hover{background:rgba(255,255,255,.18) !important;border-color:rgba(255,255,255,.35) !important;}
.hero .btn-secondary{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.15) !important;color:#fff !important;}
.hero .btn-secondary:hover{background:rgba(255,255,255,.1) !important;border-color:rgba(255,255,255,.25) !important;}

/* Showcase dark — birebir hero/özellikler referansı */
.showcase{background:#050B15 !important;}
.showcase::before{
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%,rgba(16,185,129,.15),transparent),
    radial-gradient(ellipse 60% 50% at 80% 30%,rgba(5,150,105,.1),transparent),
    radial-gradient(ellipse 40% 40% at 50% 80%,rgba(52,211,153,.06),transparent) !important;
}
.showcase .section-badge{background:rgba(16,185,129,.12) !important;color:var(--emerald-l) !important;}
.showcase .section-title{color:#fff !important;}
.showcase .section-desc{color:rgba(255,255,255,.55) !important;}
.sc-tabs{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.1) !important;}
.sc-tab{color:rgba(255,255,255,.45) !important;}
.sc-tab:hover{color:rgba(255,255,255,.75) !important;}
.sc-tab.active{color:#fff !important;}
.sc-tab-slider{background:var(--emerald) !important;}
.showcase-left .section-badge{background:rgba(16,185,129,.12) !important;color:var(--emerald-l) !important;}
.showcase-left h3{color:#fff !important;}
.showcase-left p{color:rgba(255,255,255,.55) !important;}
.showcase-points li{color:rgba(255,255,255,.7) !important;}
.showcase-points li .sp-icon{background:rgba(16,185,129,.15) !important;}
.showcase-cta{box-shadow:0 4px 16px rgba(16,185,129,.3) !important;}
.sc-glow{background:radial-gradient(ellipse,rgba(16,185,129,.15),transparent 70%) !important;}

/* === HOW IT WORKS === */
.hiw-section{padding:96px 0 104px;background:var(--bg);overflow:hidden;}

/* Header */
.hiw-header{text-align:center;margin-bottom:60px;}
.hiw-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--emerald-d);margin-bottom:18px;
}
.hiw-pulse-dot{
  width:6px;height:6px;border-radius:50%;background:var(--emerald);
  animation:hiwBlink 2s ease-in-out infinite;
}
@keyframes hiwBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}
.hiw-title{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(28px,4.5vw,44px);font-weight:800;
  letter-spacing:-1.5px;color:var(--dark);line-height:1.1;margin-bottom:14px;
}
.hiw-sub{
  font-family:'DM Sans',sans-serif;font-size:16px;color:var(--label);
  line-height:1.7;max-width:520px;margin:0 auto;
}

/* Track */
.hiw-track{max-width:960px;margin:0 auto;}

/* Grid: 4 columns on desktop */
.hiw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}

/* Each step: icon area on top, card below */
.hiw-step{display:flex;flex-direction:column;align-items:center;}

/* Node area: icon always centered, line positioned absolutely */
.hiw-node-area{position:relative;display:flex;justify-content:center;width:100%;margin-bottom:20px;}
.hiw-node{
  display:flex;flex-direction:column;align-items:center;
  position:relative;flex-shrink:0;
  opacity:0;transform:translateY(18px) scale(.9);
  transition:opacity .5s ease,transform .5s ease;
}
.hiw-node.hiw-on{opacity:1;transform:translateY(0) scale(1);}

/* Outer ring */
.hiw-ring{
  position:absolute;width:76px;height:76px;border-radius:50%;
  border:2px solid var(--emerald);top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.7);
  opacity:0;transition:opacity .5s ease .2s,transform .5s ease .2s;
  pointer-events:none;margin-top:-12px;
}
.hiw-node.hiw-on .hiw-ring{opacity:.15;transform:translate(-50%,-50%) scale(1);}
.hiw-node:hover .hiw-ring{opacity:.3;transform:translate(-50%,-50%) scale(1.08);}

/* Circle icon */
.hiw-circle{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--emerald),var(--emerald-d));
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
  box-shadow:0 6px 20px rgba(16,185,129,.25);
  transition:transform .3s ease,box-shadow .3s ease;
}
.hiw-node:hover .hiw-circle{transform:scale(1.1);box-shadow:0 8px 28px rgba(16,185,129,.35);}

/* Number below icon */
.hiw-num{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.1em;color:var(--emerald);margin-top:12px;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s ease .3s,transform .4s ease .3s;
}
.hiw-node.hiw-on .hiw-num{opacity:1;transform:translateY(0);}

/* Connector line between nodes — stretches from icon center to next icon center */
.hiw-line{
  position:absolute;top:28px;
  left:calc(50% + 38px);
  right:calc(-14px - 50% + 38px);
  height:2px;background:var(--border);overflow:hidden;
}
.hiw-line-fill{
  position:absolute;top:0;left:0;height:100%;width:0;
  background:linear-gradient(90deg,var(--emerald),var(--emerald-l));
  border-radius:2px;transition:width .65s cubic-bezier(.4,0,.2,1);
}
.hiw-line-fill.hiw-lit{width:100%;}

/* Card */
.hiw-card{
  width:100%;padding:22px 20px 20px;border-radius:16px;text-align:center;
  border:1px solid var(--border);background:var(--section);
  opacity:0;transform:translateY(18px);
  transition:opacity .5s ease,transform .5s ease,border-color .25s,background .25s,box-shadow .25s;
}
.hiw-card.hiw-on{opacity:1;transform:translateY(0);}
.hiw-card:hover{
  border-color:var(--emerald);background:var(--emerald-s);
  box-shadow:0 8px 24px rgba(16,185,129,.08);
}

.hiw-card-title{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:-.02em;color:var(--dark);margin-bottom:8px;
}
.hiw-card-desc{
  font-family:'DM Sans',sans-serif;font-size:13px;color:var(--label);
  line-height:1.65;margin-bottom:14px;
}

/* Badge */
.hiw-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(16,185,129,.08);color:var(--emerald-d);
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:4px 12px;border-radius:100px;
}
.hiw-badge-dot{
  width:5px;height:5px;border-radius:50%;background:currentColor;
  animation:hiwBlink 1.8s ease-in-out infinite;
}

/* CTA */
.hiw-cta{margin-top:52px;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;}
.hiw-cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,var(--emerald),var(--emerald-d));color:#fff;
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;
  padding:13px 28px;border-radius:10px;border:none;cursor:pointer;
  letter-spacing:-.01em;transition:all .25s ease;
  box-shadow:0 4px 16px rgba(16,185,129,.22);
}
.hiw-cta-btn:hover{box-shadow:0 8px 24px rgba(16,185,129,.35);transform:translateY(-2px);}
.hiw-arrow{display:inline-block;transition:transform .25s ease;}
.hiw-cta-btn:hover .hiw-arrow{transform:translateX(4px);}
.hiw-cta-note{font-family:'DM Sans',sans-serif;font-size:13px;color:var(--muted);}
.hiw-cta-note strong{color:var(--body);}

/* ── Responsive ── */
@media(max-width:768px){
  .hiw-section{padding:72px 0 80px;}
  .hiw-grid{grid-template-columns:1fr;gap:24px;}
  .hiw-step{flex-direction:row;align-items:flex-start;gap:16px;}
  .hiw-node-area{width:auto;margin-bottom:0;flex-shrink:0;}
  .hiw-line{display:none;}
  .hiw-node{flex-direction:column;align-items:center;}
  .hiw-card{text-align:left;}
  .hiw-ring{width:64px;height:64px;}
  .hiw-circle{width:48px;height:48px;}
  .hiw-circle svg{width:20px;height:20px;}
}

/* === PRICING === */
/* === PRICING — Dark Theme === */
.pricing{padding:100px 0 80px;background:#050B15;position:relative;overflow:hidden;}
.pricing::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 40%,rgba(16,185,129,.15),transparent),
    radial-gradient(ellipse 60% 50% at 80% 30%,rgba(5,150,105,.1),transparent),
    radial-gradient(ellipse 40% 40% at 50% 80%,rgba(52,211,153,.06),transparent);
}
/* Sparkle canvas */
.pricing-sparkles{position:absolute;top:0;left:0;width:100%;height:50%;z-index:1;pointer-events:none;
  -webkit-mask-image:radial-gradient(50% 50%,white,transparent 85%);mask-image:radial-gradient(50% 50%,white,transparent 85%);}
/* Grid lines */
.pricing-grid-lines{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  -webkit-mask-image:radial-gradient(50% 40% at 50% 0%,white,transparent);mask-image:radial-gradient(50% 40% at 50% 0%,white,transparent);
  background-image:linear-gradient(to right,rgba(16,185,129,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(16,185,129,.06) 1px,transparent 1px);
  background-size:70px 80px;}
/* Glow behind popular card */
.pricing-glow{position:absolute;top:20%;left:50%;transform:translateX(-50%);width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.18),transparent 70%);z-index:0;pointer-events:none;filter:blur(40px);}
/* Dark section header overrides */
.pricing .section-badge{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.2);color:var(--emerald-l);}
.pricing .section-title{color:#fff;}
.pricing .section-desc{color:rgba(255,255,255,.55);}
/* Pill toggle — dark variant */
.pricing-toggle-wrap{display:flex;justify-content:center;margin-bottom:52px;}
.pricing-pill{position:relative;display:inline-flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:99px;padding:4px;gap:0;}
.pricing-pill-btn{position:relative;z-index:1;padding:9px 24px;border:none;background:transparent;border-radius:99px;font-size:14px;font-weight:600;cursor:pointer;transition:color .25s;font-family:'DM Sans',sans-serif;color:rgba(255,255,255,.45);white-space:nowrap;}
.pricing-pill-btn:hover{color:rgba(255,255,255,.75);}
.pricing-pill-btn.active{color:#fff;}
.pricing-pill-thumb{position:absolute;top:4px;left:4px;height:calc(100% - 8px);border-radius:99px;background:linear-gradient(135deg,var(--emerald),var(--emerald-d));transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 12px rgba(16,185,129,.4);}
.save-badge{display:inline-block;padding:2px 8px;background:rgba(255,255,255,.15);color:#fff;border-radius:99px;font-size:10px;font-weight:700;margin-left:5px;vertical-align:middle;}
.save-badge-muted{background:rgba(16,185,129,.15);color:var(--emerald-l);}
/* Cards — dark glassmorphic */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.price-card{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:36px 28px;position:relative;transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s,border-color .3s;display:flex;flex-direction:column;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.price-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.3);border-color:rgba(255,255,255,.15);}
.price-card.popular{border-color:rgba(16,185,129,.4);box-shadow:0 0 60px rgba(16,185,129,.15),0 8px 40px rgba(0,0,0,.3);background:linear-gradient(160deg,rgba(16,185,129,.1),rgba(255,255,255,.04));}
.price-card.popular:hover{box-shadow:0 0 80px rgba(16,185,129,.2),0 16px 48px rgba(0,0,0,.4);}
.price-popular-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;padding:5px 16px;background:linear-gradient(135deg,var(--emerald),var(--emerald-d));color:#fff;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.3px;white-space:nowrap;box-shadow:0 4px 16px rgba(16,185,129,.35);}
.price-popular-badge svg{width:12px;height:12px;fill:#fff;}
/* Card content — dark text colors */
.price-name{font-family:'Plus Jakarta Sans';font-size:20px;font-weight:700;color:#fff;margin-bottom:6px;text-align:center;}
.price-desc{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:20px;min-height:36px;text-align:center;line-height:1.5;}
.price-amount-wrap{text-align:center;margin-bottom:4px;}
.price-amount{font-family:'Plus Jakarta Sans';font-size:44px;font-weight:800;color:#fff;letter-spacing:-2px;line-height:1;display:inline-block;transition:opacity .2s,transform .2s;}
.price-amount.flipping{opacity:0;transform:translateY(-8px);}
.price-amount span{font-size:16px;font-weight:500;color:rgba(255,255,255,.4);letter-spacing:0;}
.price-period{font-size:13px;color:rgba(255,255,255,.4);text-align:center;margin-bottom:4px;}
.price-yearly-note{font-size:11px;color:var(--emerald-l);font-weight:600;margin-bottom:20px;min-height:16px;text-align:center;}
/* Buttons — dark variant */
.price-btn{width:100%;padding:14px;border-radius:10px;font-weight:700;font-size:14px;border:none;cursor:pointer;transition:all .25s;font-family:'DM Sans';display:block;text-align:center;margin-top:auto;}
.price-btn-primary{background:linear-gradient(135deg,var(--emerald),var(--emerald-d));color:#fff;box-shadow:0 4px 16px rgba(16,185,129,.3);}
.price-btn-primary:hover{box-shadow:0 6px 24px rgba(16,185,129,.45);transform:translateY(-2px);}
.price-btn-secondary{background:rgba(16,185,129,.08);color:var(--emerald-l);border:1.5px solid rgba(16,185,129,.3);}
.price-btn-secondary:hover{border-color:var(--emerald);color:#fff;background:rgba(16,185,129,.18);box-shadow:0 4px 16px rgba(16,185,129,.2);transform:translateY(-2px);}
.price-divider{height:1px;background:rgba(255,255,255,.08);margin:20px 0;}
/* Features list — dark */
.price-features{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:24px;}
.price-features li{font-size:13px;color:rgba(255,255,255,.6);display:flex;align-items:flex-start;gap:9px;line-height:1.5;}
.price-features li .pf-check{flex-shrink:0;width:16px;height:16px;border-radius:50%;background:rgba(16,185,129,.15);display:flex;align-items:center;justify-content:center;margin-top:1px;}
.price-features li .pf-check svg{width:9px;height:9px;stroke:var(--emerald-l);stroke-width:2.5;}
.price-features li.disabled{color:rgba(255,255,255,.25);}
.price-features li.disabled .pf-check{background:rgba(255,255,255,.06);}
.price-features li.disabled .pf-check svg{stroke:rgba(255,255,255,.2);}
.pricing-note{text-align:center;margin-top:32px;font-size:13px;color:rgba(255,255,255,.4);}
.pricing-note strong{color:var(--emerald-l);}

/* === TESTIMONIALS — Marquee Columns === */
.testimonials{padding:80px 0 0;background:var(--section);overflow:hidden;}
.testi-marquee-wrap{position:relative;max-height:680px;overflow:hidden;margin-top:48px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 8%,black 88%,transparent);
  mask-image:linear-gradient(to bottom,transparent,black 8%,black 88%,transparent);}
.testi-marquee-cols{display:flex;justify-content:center;gap:20px;padding:0 20px;}
.testi-col{flex:1;max-width:360px;overflow:hidden;}
.testi-col-inner{display:flex;flex-direction:column;gap:20px;animation:testiScroll var(--testi-speed,18s) linear infinite;}
@keyframes testiScroll{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
.testi-col-inner:hover{animation-play-state:paused;}
/* Card */
.testi-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;transition:all .3s ease;cursor:default;}
.testi-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.06);border-color:var(--emerald-l);}
.testi-stars{color:var(--amber);font-size:14px;letter-spacing:2px;margin-bottom:12px;}
.testi-text{font-size:14px;color:var(--body);line-height:1.7;margin:0 0 18px;font-style:italic;}
.testi-text::before{content:'"';font-family:'Plus Jakarta Sans';font-size:28px;font-weight:800;color:var(--emerald);line-height:0;vertical-align:middle;margin-right:2px;position:relative;top:4px;}
.testi-footer{display:flex;align-items:center;gap:12px;}
.testi-avatar{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--emerald),var(--emerald-d));color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:.5px;}
.testi-name{font-weight:700;font-size:13px;color:var(--dark);}
.testi-role{font-size:11px;color:var(--muted);margin-top:1px;}

/* === ENTERPRISE === */
.enterprise{padding:80px 0;background:var(--bg);}
.ent-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.ent-features{display:flex;flex-direction:column;gap:16px;margin-top:24px;}
.ent-feature{display:flex;gap:14px;align-items:flex-start;}
.ent-feature-icon{width:40px;height:40px;border-radius:10px;background:var(--emerald-s);color:var(--emerald);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ent-feature-title{font-weight:700;font-size:15px;color:var(--dark);}
.ent-feature-desc{font-size:13px;color:var(--label);line-height:1.6;margin-top:2px;}

/* === FAQ === */
.faq{padding:80px 0;background:var(--section);}
.faq-grid{max-width:760px;margin:48px auto 0;display:flex;flex-direction:column;gap:10px;}

/* === SHOWCASE === */
.showcase{padding:80px 0;background:var(--section);overflow:hidden;position:relative;}
.showcase::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:
  radial-gradient(ellipse 600px 400px at 70% 60%,rgba(16,185,129,.04),transparent),
  radial-gradient(ellipse 400px 300px at 30% 40%,rgba(14,165,233,.03),transparent);
pointer-events:none;}

/* ─── Modern Segmented Tabs ─── */
.sc-tabs-wrap{display:flex;justify-content:center;margin-bottom:52px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 16px;}
.sc-tabs-wrap::-webkit-scrollbar{display:none;}
.sc-tabs{display:inline-flex;position:relative;background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:4px;gap:2px;box-shadow:0 2px 8px rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.02);flex-shrink:0;}
.sc-tab-slider{position:absolute;top:4px;left:4px;height:calc(100% - 8px);background:var(--dark);border-radius:10px;transition:transform .35s cubic-bezier(.16,1,.3,1),width .35s cubic-bezier(.16,1,.3,1);z-index:0;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.sc-tab{position:relative;z-index:1;display:flex;align-items:center;gap:6px;padding:9px 16px;border:none;background:transparent;font-size:13px;font-weight:600;color:var(--label);cursor:pointer;transition:color .25s;font-family:'DM Sans',sans-serif;border-radius:10px;white-space:nowrap;}
.sc-tab svg{width:16px;height:16px;flex-shrink:0;transition:color .25s;}
.sc-tab:hover{color:var(--dark);}
.sc-tab.active{color:#fff;}
.sc-tab.active svg{color:#fff;}

/* Panel layout */
.showcase-panel{display:none;opacity:0;transform:translateY(20px);}
.showcase-panel.active{display:flex;gap:52px;align-items:center;animation:scPanelIn .55s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes scPanelIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes scPanelOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-16px)}}

/* Left text column */
.showcase-left{flex:0 0 360px;padding-top:10px;}
.showcase-left .section-badge{margin-bottom:14px;}
.showcase-left h3{font-family:'Plus Jakarta Sans';font-size:32px;font-weight:800;color:var(--dark);letter-spacing:-1px;line-height:1.2;margin-bottom:14px;}
.showcase-left p{font-size:15px;color:var(--label);line-height:1.7;margin-bottom:24px;}
.showcase-points{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}
.showcase-points li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--body);line-height:1.5;}
.showcase-points li .sp-icon{flex-shrink:0;width:22px;height:22px;border-radius:6px;background:var(--emerald-s);display:flex;align-items:center;justify-content:center;margin-top:1px;}
.showcase-points li .sp-icon svg{width:12px;height:12px;stroke:var(--emerald);stroke-width:2.5;}
.showcase-cta{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:linear-gradient(135deg,var(--emerald),var(--emerald-d));color:#fff;border-radius:10px;font-weight:700;font-size:14px;border:none;cursor:pointer;transition:all .25s;box-shadow:0 4px 16px rgba(16,185,129,.25);}
.showcase-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,185,129,.35);}
.showcase-cta svg{transition:transform .2s;}
.showcase-cta:hover svg{transform:translateX(3px);}

/* Right device area */
.showcase-right{flex:1;position:relative;min-height:440px;}

/* Device composition container */
.sc-devices{position:relative;width:100%;height:100%;min-height:440px;perspective:1400px;}

/* Emerald glow behind devices */
.sc-glow{position:absolute;top:45%;left:45%;transform:translate(-50%,-50%);width:480px;height:380px;border-radius:50%;background:radial-gradient(ellipse,rgba(16,185,129,.08) 0%,rgba(16,185,129,.03) 40%,transparent 70%);filter:blur(50px);pointer-events:none;z-index:0;animation:scGlowPulse 4s ease-in-out infinite;}
@keyframes scGlowPulse{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

/* ─── MacBook Pro Frame ─── */
.sc-laptop{position:relative;width:88%;z-index:1;transform-style:preserve-3d;}

/* Screen lid */
.sc-laptop-screen{background:linear-gradient(180deg,#2C2C2E 0%,#1D1D1F 100%);border-radius:12px 12px 0 0;padding:10px 10px 0;position:relative;
box-shadow:
  inset 0 1px 0 rgba(255,255,255,.06),
  0 0 0 1px rgba(0,0,0,.4);
transform:rotateX(2deg) rotateY(-3deg);
transform-origin:bottom center;
animation:laptopFloat 6s ease-in-out infinite;}

@keyframes laptopFloat{
  0%,100%{transform:rotateX(2deg) rotateY(-3deg) translateY(0)}
  50%{transform:rotateX(2deg) rotateY(-3deg) translateY(-8px)}
}

/* Webcam */
.sc-laptop-cam{width:6px;height:6px;border-radius:50%;background:#1A1A1A;margin:0 auto 6px;position:relative;box-shadow:inset 0 0 2px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04);}
.sc-laptop-cam::after{content:'';position:absolute;top:1px;left:1px;width:2px;height:2px;border-radius:50%;background:rgba(16,185,129,.3);}

/* Display area */
.sc-laptop-display{border-radius:4px 4px 0 0;overflow:hidden;background:#000;position:relative;line-height:0;}
.sc-laptop-display img{display:block;width:100%;height:auto;}
/* Subtle screen reflection */
.sc-laptop-display::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.03) 0%,transparent 40%,transparent 60%,rgba(255,255,255,.01) 100%);pointer-events:none;z-index:3;}

/* ─── Laptop display with tab cycling ─── */
.sc-display-tabs{position:relative;}
.sc-display-tabs .sc-dimg{position:absolute;top:0;left:0;width:100%;height:auto;opacity:0;transition:opacity .5s ease;}
.sc-display-tabs .sc-dimg.active{position:relative;opacity:1;}

/* Display nav overlay — bottom pill bar */
.sc-display-nav{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;gap:6px;padding:5px 8px;
  background:rgba(17,24,39,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:99px;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.sc-dnav-dot{
  position:relative;border:none;cursor:pointer;background:none;padding:0;
  display:flex;align-items:center;gap:0;height:24px;border-radius:99px;overflow:hidden;
  transition:all .3s ease;
}
.sc-dnav-dot i{
  display:block;width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.35);transition:background .3s ease,transform .3s ease;
}
.sc-dnav-dot span{
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;
  color:rgba(255,255,255,.85);letter-spacing:.2px;white-space:nowrap;
  max-width:0;opacity:0;overflow:hidden;padding:0;
  transition:max-width .4s ease,opacity .3s ease,padding .3s ease;
}
.sc-dnav-dot.active i{background:var(--emerald);transform:scale(1.1);}
.sc-dnav-dot.active span{max-width:140px;opacity:1;padding:0 8px 0 6px;}
.sc-dnav-dot.active{background:rgba(255,255,255,.1);}

/* Progress ring on active dot */
.sc-dnav-dot.active i::after{
  content:'';position:absolute;top:-2px;left:-2px;width:12px;height:12px;
  border-radius:50%;border:2px solid transparent;border-top-color:var(--emerald-l);
  animation:dotSpin 3.5s linear forwards;
}
@keyframes dotSpin{
  0%{transform:rotate(0deg);opacity:1}
  100%{transform:rotate(360deg);opacity:1}
}

/* Hover state */
.sc-dnav-dot:hover i{background:rgba(255,255,255,.6);}
.sc-dnav-dot.active:hover i{background:var(--emerald-l);}

/* Keyboard base */
.sc-laptop-base{height:14px;background:linear-gradient(180deg,#C4C4C6 0%,#A8A8AA 40%,#8E8E90 100%);border-radius:0 0 2px 2px;position:relative;
transform:rotateX(2deg) rotateY(-3deg);
transform-origin:top center;
box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 2px 4px rgba(0,0,0,.1);}

/* MacBook hinge notch */
.sc-laptop-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:4px;background:linear-gradient(180deg,#9E9E9E,#8A8A8A);border-radius:0 0 4px 4px;}

/* Bottom lip */
.sc-laptop-bottom{height:4px;background:linear-gradient(180deg,#7A7A7C,#6E6E70);border-radius:0 0 8px 8px;
transform:rotateX(2deg) rotateY(-3deg);
transform-origin:top center;
box-shadow:0 4px 12px rgba(0,0,0,.12);}

/* Screen shadow on "desk" */
.sc-laptop::after{content:'';position:absolute;bottom:-20px;left:10%;right:10%;height:20px;background:radial-gradient(ellipse,rgba(0,0,0,.1),transparent);border-radius:50%;filter:blur(6px);z-index:-1;}

/* ─── iPhone 15 Pro Max Frame ─── */
.sc-iphone{position:absolute;right:-24px;bottom:10px;z-index:3;width:155px;
background:linear-gradient(165deg,#86868B 0%,#A1A1A6 10%,#C8C8CA 20%,#A1A1A6 40%,#86868B 60%,#6E6E73 100%);
border-radius:34px;padding:3px;
box-shadow:
  0 30px 60px rgba(0,0,0,.3),
  0 10px 20px rgba(0,0,0,.12),
  inset 0 1px 0 rgba(255,255,255,.35),
  inset 0 -1px 0 rgba(0,0,0,.1),
  0 0 0 .5px rgba(0,0,0,.15);
animation:iphoneFloat 5s ease-in-out infinite .5s;}

@keyframes iphoneFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-10px) rotate(.8deg)}
}

/* iPhone inner body */
.sc-iphone::before{content:'';position:absolute;inset:3px;background:#1A1A1C;border-radius:31px;z-index:0;}

/* Dynamic Island */
.sc-iphone-notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:52px;height:15px;background:#000;border-radius:99px;z-index:5;box-shadow:inset 0 0 3px rgba(0,0,0,.8);}
.sc-iphone-notch::before{content:'';position:absolute;top:4px;right:8px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#1A2030,#0D0D0D);box-shadow:inset 0 0 1px rgba(255,255,255,.05);}

/* iPhone screen */
.sc-iphone-screen{position:relative;z-index:1;border-radius:31px;overflow:hidden;background:#000;margin:2px;}
.sc-iphone-screen img{display:block;width:100%;height:auto;}
/* Screen reflection */
.sc-iphone-screen::after{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.04) 0%,transparent 50%);pointer-events:none;z-index:1;}

/* ─── Auto-scroll long screenshots ─── */
/* aspect-ratio matches normal 430x932 screenshots so phone frame stays same size */
.sc-iphone-screen.sc-autoscroll{aspect-ratio:430/932;}
.sc-iphone-screen.sc-autoscroll img{
  position:absolute;top:0;left:0;width:100%;height:auto;
  will-change:transform;
  -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
/* Animations only start after image is loaded (JS adds .sc-img-ready) */
/* Each tab gets its own scroll % and duration based on image height */
/* Formula: renderH = screenW * (imgH/1290), screenH = screenW * (932/430) */
/* scrollPx = renderH - screenH, translateY% = scrollPx / renderH * 100 */
/* cek:5097 → 45%, kasa:7050 → 60%, cari:3777 → 28%, veresiye:5517 → 49%, odeme:4575 → 39%, vade:4566 → 39%, dashboard:7500 → 63% */
.sc-scroll-cek img.sc-img-ready{animation:scrollCek 12s ease-in-out 1s infinite}
.sc-scroll-kasa img.sc-img-ready{animation:scrollKasa 16s ease-in-out 1s infinite}
.sc-scroll-cari img.sc-img-ready{animation:scrollCari 9s ease-in-out 1s infinite}
.sc-scroll-veresiye img.sc-img-ready{animation:scrollVeresiye 13s ease-in-out 1s infinite}
.sc-scroll-odeme img.sc-img-ready{animation:scrollOdeme 11s ease-in-out 1s infinite}
.sc-scroll-vade img.sc-img-ready{animation:scrollVade 11s ease-in-out 1s infinite}
.sc-scroll-dashboard img.sc-img-ready{animation:scrollDashboard 16s ease-in-out 1s infinite}

@keyframes scrollCek{0%,6%{transform:translate3d(0,0,0)}44%,56%{transform:translate3d(0,-45%,0)}94%,100%{transform:translate3d(0,0,0)}}
@keyframes scrollKasa{0%,5%{transform:translate3d(0,0,0)}45%,55%{transform:translate3d(0,-60%,0)}95%,100%{transform:translate3d(0,0,0)}}
@keyframes scrollCari{0%,8%{transform:translate3d(0,0,0)}42%,58%{transform:translate3d(0,-28%,0)}92%,100%{transform:translate3d(0,0,0)}}
@keyframes scrollVeresiye{0%,6%{transform:translate3d(0,0,0)}44%,56%{transform:translate3d(0,-49%,0)}94%,100%{transform:translate3d(0,0,0)}}
@keyframes scrollOdeme{0%,7%{transform:translate3d(0,0,0)}43%,57%{transform:translate3d(0,-39%,0)}93%,100%{transform:translate3d(0,0,0)}}
@keyframes scrollVade{0%,7%{transform:translate3d(0,0,0)}43%,57%{transform:translate3d(0,-39%,0)}93%,100%{transform:translate3d(0,0,0)}}
@keyframes scrollDashboard{0%,5%{transform:translate3d(0,0,0)}45%,55%{transform:translate3d(0,-63%,0)}95%,100%{transform:translate3d(0,0,0)}}

/* iPhone home indicator */
.sc-iphone-home{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:42px;height:4px;border-radius:99px;background:rgba(255,255,255,.15);z-index:5;}

/* iPhone buttons */
.sc-iphone-btn-side{position:absolute;top:76px;right:-2px;width:2px;height:30px;background:linear-gradient(180deg,#B0B0B2,#86868B);border-radius:0 2px 2px 0;z-index:2;}
.sc-iphone-btn-vol1{position:absolute;top:68px;left:-2px;width:2px;height:18px;background:linear-gradient(180deg,#B0B0B2,#86868B);border-radius:2px 0 0 2px;z-index:2;}
.sc-iphone-btn-vol2{position:absolute;top:92px;left:-2px;width:2px;height:18px;background:linear-gradient(180deg,#B0B0B2,#86868B);border-radius:2px 0 0 2px;z-index:2;}

/* iPhone shadow */
.sc-iphone::after{content:'';position:absolute;bottom:-12px;left:15%;right:15%;height:12px;background:radial-gradient(ellipse,rgba(0,0,0,.15),transparent);border-radius:50%;filter:blur(4px);z-index:-1;}

/* ─── Device Entrance Animations ─── */
.sc-laptop{opacity:0;}
.sc-iphone{opacity:0;}
.showcase-panel.active .sc-laptop{animation:scLaptopIn .7s cubic-bezier(.16,1,.3,1) .05s forwards;}
.showcase-panel.active .sc-iphone{animation:scPhoneIn .6s cubic-bezier(.16,1,.3,1) .2s forwards;}

@keyframes scLaptopIn{
  from{opacity:0;transform:scale(.92) translateY(30px) rotateX(4deg)}
  to{opacity:1;transform:scale(1) translateY(0) rotateX(0deg)}
}
@keyframes scPhoneIn{
  from{opacity:0;transform:scale(.85) translateY(40px) translateX(20px)}
  to{opacity:1;transform:scale(1) translateY(0) translateX(0)}
}

/* Points stagger animation */
.showcase-panel.active .showcase-points li{opacity:0;animation:scPointIn .4s ease forwards;}
.showcase-panel.active .showcase-points li:nth-child(1){animation-delay:.1s}
.showcase-panel.active .showcase-points li:nth-child(2){animation-delay:.18s}
.showcase-panel.active .showcase-points li:nth-child(3){animation-delay:.26s}
.showcase-panel.active .showcase-points li:nth-child(4){animation-delay:.34s}
@keyframes scPointIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}

.counter{display:inline-block;}

/* === BLOG SECTION (Home SPA) === */
.blog-section{padding:80px 0;background:var(--bg);}
.blog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:48px;}
.blog-back-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:var(--section);border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-weight:600;color:var(--dark);cursor:pointer;transition:all .2s;font-family:'DM Sans',sans-serif;}
.blog-back-btn:hover{border-color:var(--emerald);color:var(--emerald);}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

/* === RESPONSIVE HOME === */
@media(max-width:1024px){
  .hero{min-height:auto;padding:100px 0 48px;}
  .hero-inner,.ent-inner{grid-template-columns:1fr;}
  .hero-visual{display:none;}
  .hero h1{font-size:42px;}
  .hero-glow{width:500px;height:500px;top:5%;left:10%;}
  .hero-glow-2{display:none;}
  .features-grid{grid-template-columns:repeat(2,1fr);}
  .pricing-grid{grid-template-columns:repeat(2,1fr);}
  .testi-col:nth-child(3){display:none;}
  .how-steps{grid-template-columns:repeat(2,1fr);}
  .how-step::after{display:none;}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .price-card.popular:hover{transform:translateY(-4px);}
  .showcase-panel.active{flex-direction:column;gap:36px;}
  .showcase-left{flex:none;width:100%;text-align:center;}
  .showcase-right{width:100%;min-height:auto;}
  .sc-devices{min-height:auto;perspective:1000px;}
  .sc-laptop{width:95%;margin:0 auto;}
  .sc-iphone{width:120px;right:0;bottom:0;}
}
@media(max-width:768px){
  .hero{padding:84px 0 40px;min-height:auto;}
  .hero-glow{width:300px;height:300px;top:0;left:0;filter:blur(50px);}
  .hero-grid{display:none;}
  .hero h1{font-size:34px;letter-spacing:-1.2px;text-align:center;}
  .hero-text-col{animation:fadeUp .7s ease both;}
  .hero-badge{margin-left:auto;margin-right:auto;}
  .hero-desc{text-align:center;margin-left:auto;margin-right:auto;}
  .hero-actions{justify-content:center;}
  .hero-app-links{justify-content:center;}
  .features-grid,.pricing-grid,.blog-grid{grid-template-columns:1fr;}
  .testi-col:nth-child(2),.testi-col:nth-child(3){display:none;}
  .testi-marquee-wrap{max-height:560px;}
  .how-steps{grid-template-columns:1fr 1fr;}
  .price-card.popular{order:-1;}
  .sc-tabs-wrap{justify-content:flex-start;}
  .sc-tabs{border-radius:10px;}
  .sc-tab{padding:8px 12px;font-size:12px;gap:5px;}
  .sc-tab span{display:none;}
  .sc-tab svg{width:18px;height:18px;}
  .sc-laptop{display:none;}
  .sc-iphone{position:relative;right:auto;bottom:auto;width:200px;margin:0 auto;}
  .sc-glow{width:250px;height:250px;}
  .sc-devices{min-height:auto;display:flex;justify-content:center;perspective:none;}
  .blog-header{flex-direction:column;align-items:flex-start;gap:16px;}
  .proof-inner{grid-template-columns:repeat(2,1fr);gap:4px 0;}
  .proof-item{padding:10px 8px;}
  .proof-item+.proof-item::before{height:24px;}
  .proof-item:nth-child(3)::before{display:none;}
  .proof-icon{width:30px;height:30px;border-radius:8px;margin-bottom:6px;}
  .proof-icon svg{width:15px;height:15px;}
  .proof-num{font-size:24px;}
  .odo-digit,.odo-digit-inner span{height:28px;line-height:28px;}
  .odo-static{line-height:28px;}
  .proof-label{font-size:11px;}
}