:root{
  --bg:#0A0B0E;
  --bg-2:#0E1015;
  --card:#14161C;
  --card-2:#191C23;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.15);
  --text:#F4F5F7;
  --muted:#9AA0AB;
  --faint:#6C727C;

  --orange:#FF5A24;      /* primary accent, harmonises w/ logo #F53E20 */
  --orange-2:#FF7A45;
  --orange-3:#E8420F;
  --orange-soft:rgba(255,90,36,.14);
  --orange-glow:rgba(255,90,36,.30);

  --grad-text:linear-gradient(92deg,#FF8A3D 0%,#FF5A24 55%,#F53E20 100%);

  --font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  --wrap:1160px;
  --gutter:clamp(20px,5vw,56px);
  --radius:18px;
  --logo:url("../assets/logo.png");
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  touch-action:pan-y pinch-zoom;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:1; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- type ---------- */
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.04; letter-spacing:-.03em; margin:0; }
h2{ font-size:clamp(30px,4.8vw,50px); }
h3{ font-size:20px; letter-spacing:-.02em; }
p{ margin:0; }
.grad{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ color:var(--muted); font-size:clamp(16px,1.35vw,19px); line-height:1.6; max-width:56ch; }
.lead .hl{ color:var(--orange-2); font-weight:600; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-2);
}
.eyebrow::before{ content:""; width:16px; height:2px; border-radius:2px; background:var(--orange); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:14px 24px; border-radius:12px; border:1px solid transparent; cursor:pointer;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; white-space:nowrap;
}
.btn:focus-visible{ outline:2px solid var(--orange-2); outline-offset:3px; }
.btn-primary{ background:var(--orange); color:#1A0A03; box-shadow:0 8px 30px -10px var(--orange-glow); }
.btn-primary:hover{ background:var(--orange-2); transform:translateY(-2px); }
.btn-ghost{ background:var(--card); border-color:var(--line-2); color:var(--text); }
.btn-ghost:hover{ border-color:var(--text); transform:translateY(-2px); }
.btn .ar{ transition:transform .16s ease; }
.btn:hover .ar{ transform:translateX(3px); }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:60; backdrop-filter:blur(14px); background:color-mix(in srgb,var(--bg) 78%,transparent); border-bottom:1px solid transparent; transition:border-color .2s ease, background .2s ease; }
.nav.scrolled{ border-color:var(--line); background:color-mix(in srgb,var(--bg) 92%,transparent); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .logo-img{ width:34px; height:34px; border-radius:9px; border:1px solid var(--line-2); background:var(--logo) center/cover no-repeat; flex:0 0 auto; }
.brand span{ font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.03em; }
.brand span b{ color:var(--orange); font-weight:700; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:15px; color:var(--muted); font-weight:500; transition:color .15s ease; }
.nav-links a:hover{ color:var(--text); }
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover{ color:#fff; }
.burger{ display:none; background:none; border:0; color:var(--text); cursor:pointer; padding:8px; }

@media (max-width:900px){
  .nav-links{ position:fixed; inset:auto 0 auto 0; top:72px; flex-direction:column; gap:0; background:var(--bg-2); border-bottom:1px solid var(--line); padding:6px var(--gutter) 22px; transform:translateY(-100vh); transition:transform .28s ease; }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ padding:15px 0; width:100%; border-bottom:1px solid var(--line); font-size:17px; }
  .nav-links .btn{ margin-top:14px; width:100%; }
  .burger{ display:block; }
}

/* ---------- hero ---------- */
.hero{ position:relative; padding:clamp(52px,9vw,104px) 0 clamp(40px,6vw,80px); overflow:hidden; }
.hero::before{ content:""; position:absolute; top:-160px; left:50%; transform:translateX(-50%); width:min(1100px,120vw); height:640px; background:radial-gradient(50% 60% at 50% 40%, var(--orange-glow), transparent 70%); filter:blur(20px); pointer-events:none; z-index:0; opacity:.9; }
.hero::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size:32px 32px; -webkit-mask-image:radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%); mask-image:radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%); pointer-events:none; z-index:0; }
.hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center; }
.hero h1{ font-size:clamp(42px,6.4vw,76px); letter-spacing:-.04em; max-width:14ch; }
.hero .lead{ margin-top:22px; max-width:52ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; }

/* hero visual — live browser mockup */
.hero-visual{ position:relative; height:clamp(360px,42vw,480px); display:grid; place-items:center; }

.hv-glow{
  position:absolute; inset:0; margin:auto; width:min(460px,84vw); height:min(460px,84vw); border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--orange-2), var(--orange) 45%, var(--orange-3) 68%, transparent 76%);
  filter:blur(60px); opacity:.32; animation:hvPulse 9s ease-in-out infinite;
}

.hv-browser{
  position:relative; z-index:1; width:min(380px,86vw); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,var(--card),var(--bg-2)); border:1px solid var(--line-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
}
.hv-bar{ display:flex; align-items:center; gap:6px; padding:12px 14px; border-bottom:1px solid var(--line); }
.hv-dot{ width:8px; height:8px; border-radius:50%; background:var(--line-2); }
.hv-dot:nth-child(1){ background:#FF5F57; }
.hv-dot:nth-child(2){ background:#FEBC2E; }
.hv-dot:nth-child(3){ background:#28C840; }
.hv-url{ margin-left:8px; display:flex; align-items:center; gap:7px; font-size:11px; color:var(--faint); background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:4px 10px; flex:1; }
.hv-live{ width:6px; height:6px; border-radius:50%; background:#28C840; box-shadow:0 0 0 3px rgba(40,200,64,.22); animation:hvLive 1.8s ease-in-out infinite; flex:0 0 auto; }

.hv-body{ padding:18px; display:grid; grid-template-columns:96px 1fr; gap:16px; }
.hv-media{ aspect-ratio:1; border-radius:10px; overflow:hidden; background:radial-gradient(120% 100% at 30% 20%, var(--orange-soft), transparent 70%), linear-gradient(160deg,#221a15,#14161c); border:1px solid var(--line); }
.hv-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hv-info{ display:flex; flex-direction:column; gap:9px; padding-top:4px; }
.hv-title{ display:block; height:11px; width:88%; border-radius:4px; background:var(--line-2); }
.hv-title.short{ width:55%; }
.hv-row{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:10px; }
.hv-price{ font-family:var(--font-display); font-weight:700; font-size:17px; }
.hv-btn{ font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:9px; background:var(--orange); color:#1A0A03; white-space:nowrap; }

.hv-cursor{ position:absolute; top:0; left:0; z-index:3; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); animation:hvCursor 5s ease-in-out infinite; will-change:transform; }
.hv-click{ position:absolute; top:0; left:0; z-index:2; width:26px; height:26px; border-radius:50%; border:2px solid var(--orange-2); animation:hvClick 5s ease-in-out infinite; will-change:transform; }

.hv-badge{
  position:absolute; z-index:2; display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:14px; background:var(--card); border:1px solid var(--line-2);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6); animation:hvFloat 6s ease-in-out infinite;
}
.hv-badge svg{ color:var(--orange-2); flex:0 0 auto; }
.hv-badge b{ display:block; font-family:var(--font-display); font-size:16px; color:var(--text); line-height:1.2; white-space:nowrap; }
.hv-badge span{ font-size:11px; color:var(--faint); }

.hv-badge.b1{ top:6%; right:1%; }
.hv-badge.b2{ top:6%; left:1%; animation-delay:.6s; }
.hv-badge.b3{ bottom:-4%; left:50%; transform:translateX(-50%); animation:hvFloatCenter 6s ease-in-out infinite 1.2s; }

@keyframes hvPulse{ 0%,100%{ transform:scale(1) rotate(0deg); } 50%{ transform:scale(1.08) rotate(8deg); } }
@keyframes hvFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes hvFloatCenter{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-10px); } }
@keyframes hvLive{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes hvCursor{
  0%,8%{ transform:translate(84px,44px); opacity:0; }
  22%{ opacity:1; }
  46%,60%{ transform:translate(304px,139px); opacity:1; }
  72%,100%{ transform:translate(304px,139px); opacity:0; }
}
@keyframes hvClick{
  0%,56%{ transform:translate(304px,139px) translate(-50%,-50%) scale(.6); opacity:0; }
  60%{ transform:translate(304px,139px) translate(-50%,-50%) scale(.6); opacity:1; }
  74%{ transform:translate(304px,139px) translate(-50%,-50%) scale(1.6); opacity:0; }
  100%{ transform:translate(304px,139px) translate(-50%,-50%) scale(1.6); opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .hv-glow,.hv-badge,.hv-cursor,.hv-click,.hv-live{ animation:none; } }

/* ---------- stats ---------- */
.stats{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); }
.stats .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-block:clamp(26px,4vw,40px); }
.stat .k{ font-family:var(--font-display); font-weight:700; font-size:clamp(24px,2.6vw,32px); letter-spacing:-.02em; }
.stat .k .grad{ font-weight:700; }
.stat .v{ font-size:13.5px; color:var(--faint); margin-top:5px; }
@media (max-width:760px){ .stats .wrap{ grid-template-columns:1fr 1fr; gap:22px 18px; } }

/* ---------- section frame ---------- */
.section{ padding:clamp(64px,9vw,120px) 0; position:relative; }
#echipa{ padding-bottom:clamp(32px,5vw,60px); }
.section-head{ display:flex; flex-direction:column; gap:16px; margin-bottom:52px; max-width:680px; }
.section.center .section-head{ margin-inline:auto; align-items:center; text-align:center; }

/* ---------- echipa ---------- */
.team-note{ margin-top:34px; color:var(--muted); font-size:15px; max-width:60ch; }

/* team pipeline — fork at the editors, merge back, one signal that splits in two */
.pipe-wrap{ position:relative; max-width:960px; margin:16px auto 0; padding:36px 6px 20px; }
.pipe-glow{
  position:absolute; z-index:0; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(820px,92vw); height:420px; border-radius:50%;
  background:radial-gradient(closest-side, var(--orange-glow), transparent 72%);
  filter:blur(90px); opacity:.32; pointer-events:none;
}
.pipe-scroll{ position:relative; z-index:1; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding-inline:78px; }
.pipe-scroll::-webkit-scrollbar{ display:none; }
.pipe-fade{ display:none; position:absolute; z-index:2; top:36px; right:6px; bottom:20px; width:56px; background:linear-gradient(90deg, transparent, var(--bg) 80%); pointer-events:none; }
@media (max-width:900px){ .pipe-fade{ display:block; } }

.pipe-diagram{ position:relative; width:100%; min-width:680px; aspect-ratio:1000/300; min-height:540px; }
.pipe-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:visible; }
.pipe-path{ fill:none; stroke:var(--line-2); stroke-width:2; vector-effect:non-scaling-stroke; }
.pipe-dot{ fill:url(#pipeDotGlow); }

.pipe-node{
  position:absolute; z-index:2; transform:translate(-50%,-38px);
  display:flex; flex-direction:column; align-items:center; gap:12px; width:150px; text-align:center;
}
.pipe-circle{
  width:76px; height:76px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto;
  background:var(--card); border:1.5px solid var(--line-2); color:var(--orange-2);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5);
}
.pipe-circle.pf-1{ animation:pipeFillScript 9s ease-in-out infinite; }
.pipe-circle.pf-2{ animation:pipeFillEditor 9s ease-in-out infinite; }
.pipe-circle.pf-3{ animation:pipeFillReviewer 9s ease-in-out infinite; }
.pipe-circle.pf-4{ animation:pipeFillPM 9s ease-in-out infinite; }

.pipe-node h3{ font-size:16px; margin:0; letter-spacing:-.01em; }
.pipe-node p{ font-size:12.5px; color:var(--faint); margin:0; }

/* each stage lights up when the signal reaches it, stays lit until the loop resets */
@keyframes pipeFillScript{
  0%,100%{ background:var(--card); border-color:var(--line-2); color:var(--orange-2); transform:scale(1); box-shadow:0 14px 30px -14px rgba(0,0,0,.5); }
  2%,98%{ background:var(--orange); border-color:var(--orange); color:#1A0A03; transform:scale(1.07); box-shadow:0 14px 34px -12px var(--orange-glow); }
}
@keyframes pipeFillEditor{
  0%,28%,100%{ background:var(--card); border-color:var(--line-2); color:var(--orange-2); transform:scale(1); box-shadow:0 14px 30px -14px rgba(0,0,0,.5); }
  31%,98%{ background:var(--orange); border-color:var(--orange); color:#1A0A03; transform:scale(1.07); box-shadow:0 14px 34px -12px var(--orange-glow); }
}
@keyframes pipeFillReviewer{
  0%,50%,100%{ background:var(--card); border-color:var(--line-2); color:var(--orange-2); transform:scale(1); box-shadow:0 14px 30px -14px rgba(0,0,0,.5); }
  53%,98%{ background:var(--orange); border-color:var(--orange); color:#1A0A03; transform:scale(1.07); box-shadow:0 14px 34px -12px var(--orange-glow); }
}
@keyframes pipeFillPM{
  0%,72%,100%{ background:var(--card); border-color:var(--line-2); color:var(--orange-2); transform:scale(1); box-shadow:0 14px 30px -14px rgba(0,0,0,.5); }
  75%,98%{ background:var(--orange); border-color:var(--orange); color:#1A0A03; transform:scale(1.07); box-shadow:0 14px 34px -12px var(--orange-glow); }
}
@media (prefers-reduced-motion:reduce){
  .pipe-dot{ display:none; }
  .pipe-circle.pf-1,.pipe-circle.pf-2,.pipe-circle.pf-3,.pipe-circle.pf-4{ animation:none; }
}
@media (max-width:640px){
  .pipe-scroll{ overflow:visible; padding-inline:0; }
  .pipe-fade{ display:none !important; }
  .pipe-diagram{ min-width:0; min-height:245px; }
  .pipe-node{ width:78px; transform:translate(-50%,-19px); gap:6px; }
  .pipe-circle{ width:38px; height:38px; }
  .pipe-circle svg{ width:16px; height:16px; }
  .pipe-node h3{ font-size:11.5px; line-height:1.25; }
  .pipe-node p{ display:none; }
}

/* ---------- portofoliu ---------- */
.port-showcase{
  position:relative; margin-top:48px;
  display:grid; grid-template-columns:auto auto; align-items:center; justify-content:center;
  gap:clamp(32px,6vw,72px);
}

.port-amb{
  position:absolute; z-index:0; top:50%; left:50%; transform:translate(-50%,-50%);
  width:560px; height:560px; border-radius:50%; filter:blur(70px);
  opacity:0; transition:opacity 1s ease; pointer-events:none;
}
.port-amb.active{ opacity:.45; }
.port-amb.c1{ background:radial-gradient(closest-side, var(--orange-glow), transparent 72%); }
.port-amb.c2{ background:radial-gradient(closest-side, rgba(107,140,255,.28), transparent 72%); }
.port-amb.c3{ background:radial-gradient(closest-side, rgba(255,160,70,.3), transparent 72%); }

/* phone mockup */
.port-phone{
  position:relative; z-index:1; width:min(300px,68vw); margin-inline:auto; touch-action:pan-y pinch-zoom;
  background:
    linear-gradient(155deg, #4a4d57 0%, #232530 8%, #0c0d10 24%, #16171c 50%, #0c0d10 76%, #232530 92%, #4a4d57 100%);
  border-radius:50px; padding:5px;
  box-shadow:
    0 70px 130px -30px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(255,255,255,.12),
    inset 0 1px 2px rgba(255,255,255,.18),
    inset 0 -1px 2px rgba(0,0,0,.6);
}
.port-phone::before{
  content:""; position:absolute; inset:5px; border-radius:45px; z-index:0; pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.55), inset 0 0 12px rgba(0,0,0,.4);
}
.port-btn{ position:absolute; z-index:0; border-radius:3px; background:linear-gradient(90deg,#0a0b0d,#2e3038); box-shadow:inset 0 0 1px rgba(255,255,255,.15); }
.port-btn.pb-mute{ left:-3px; top:19%; width:3px; height:24px; }
.port-btn.pb-vol-up{ left:-3px; top:27%; width:3px; height:42px; }
.port-btn.pb-vol-down{ left:-3px; top:38%; width:3px; height:42px; }
.port-btn.pb-power{ right:-3px; top:24%; width:3px; height:58px; background:linear-gradient(90deg,#2e3038,#0a0b0d); }

.port-notch{
  position:absolute; z-index:3; top:16px; left:50%; transform:translateX(-50%);
  width:84px; height:24px; background:#000; border-radius:16px;
  display:flex; align-items:center; justify-content:flex-end; padding-right:9px;
  box-shadow:inset 0 0 2px rgba(255,255,255,.08);
}
.port-notch::after{
  content:""; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #4a6478, #05070a 72%);
  box-shadow:inset 0 0 1.5px rgba(255,255,255,.2);
}
.port-screen{ position:relative; z-index:1; aspect-ratio:9/16; border-radius:45px; overflow:hidden; background:#000; }
.port-screen::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 84%, rgba(255,255,255,.05) 100%);
}
.port-slide{ position:absolute; inset:0; opacity:0; transform:scale(1.05); transition:opacity .5s ease, transform .6s ease; }
.port-slide.active{ opacity:1; transform:scale(1); z-index:1; }
.port-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.port-playbtn{
  position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%; border:0; padding:0;
  background:rgba(255,255,255,.94); display:grid; place-items:center; cursor:pointer; z-index:2;
  transition:opacity .25s ease, transform .2s ease;
}
.port-playbtn:hover{ transform:scale(1.06); }
.port-playbtn .ic-pause{ display:none; }
.port-slide.playing .port-playbtn{ opacity:0; }
.port-slide.playing .port-playbtn:hover{ opacity:1; }
.port-slide.playing .port-playbtn .ic-play{ display:none; }
.port-slide.playing .port-playbtn .ic-pause{ display:block; }

.port-scrub{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:3; width:calc(100% - 28px);
  height:16px; margin:0; -webkit-appearance:none; appearance:none; background:linear-gradient(to right, var(--orange) 0%, rgba(255,255,255,.28) 0%);
  border-radius:99px; cursor:pointer;
}
.port-scrub::-webkit-slider-runnable-track{ height:4px; border-radius:99px; background:transparent; }
.port-scrub::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:12px; margin-top:-4px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.port-scrub::-moz-range-track{ height:4px; border-radius:99px; background:rgba(255,255,255,.28); }
.port-scrub::-moz-range-progress{ height:4px; border-radius:99px; background:var(--orange); }
.port-scrub::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:#fff; border:0; box-shadow:0 2px 6px rgba(0,0,0,.5); }

.canvas{ position:absolute; inset:0; }
.canvas.c1{ background:radial-gradient(120% 90% at 30% 20%, #33261f, #100e0c 72%), linear-gradient(200deg, var(--orange-soft), transparent 55%); }
.canvas.c2{ background:radial-gradient(120% 90% at 70% 18%, #2b2f38, #101318 72%), linear-gradient(160deg, rgba(255,255,255,.06), transparent 55%); }
.canvas.c3{ background:radial-gradient(120% 90% at 50% 26%, #34241d, #100e0c 72%), linear-gradient(180deg, var(--orange-soft), transparent 60%); }

/* info column */
.port-info{ position:relative; z-index:1; max-width:340px; }
.port-segments{ display:flex; gap:6px; }
.seg{ position:relative; flex:1; height:3px; border-radius:99px; background:var(--line-2); overflow:hidden; }
.seg i{ position:absolute; inset:0; width:0; background:var(--orange); border-radius:inherit; display:block; }

.port-nav-row{ display:flex; align-items:center; gap:16px; margin-top:22px; }
.port-count{ display:flex; align-items:baseline; gap:6px; font-family:var(--font-display); color:var(--faint); font-size:14px; }
.port-count b{ font-size:15px; color:var(--text); font-weight:700; }
.port-arrow{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--line-2); color:var(--text); cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
}
.port-arrow:hover{ border-color:var(--text); transform:translateY(-2px); }

.port-results-btn{
  display:inline-flex; align-items:center; gap:9px; margin-top:16px;
  padding:11px 20px; border-radius:11px; background:var(--card-2); border:1px solid var(--line-2); color:var(--text);
  font-family:var(--font-body); font-size:14.5px; font-weight:600; cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
}
.port-results-btn svg{ color:var(--orange-2); flex:0 0 auto; }
.port-results-btn:hover{ border-color:var(--orange-2); transform:translateY(-2px); }
.port-results-btn[hidden]{ display:none; }

.port-stat{ display:flex; align-items:baseline; gap:9px; margin-top:12px; }
.port-stat b{ font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--orange-2); letter-spacing:-.02em; }
.port-stat span{ font-size:13px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; }

.port-thumbs{ display:flex; gap:12px; margin-top:32px; }
.port-thumb{
  position:relative; width:56px; aspect-ratio:9/16; border-radius:10px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; padding:0; opacity:.5; background:none;
  transition:opacity .25s ease, border-color .25s ease, transform .2s ease;
}
.port-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.port-thumb:hover{ transform:translateY(-2px); }
.port-thumb.active{ opacity:1; border-color:var(--orange); }

@media (prefers-reduced-motion:reduce){ .port-amb{ transition:none; } }

@media (max-width:760px){
  .port-showcase{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .port-info{ max-width:none; width:100%; display:flex; flex-direction:column; align-items:center; }
  .port-segments{ width:min(272px,64vw); }
  .port-thumbs{ justify-content:center; }
}

/* ---------- pachete ---------- */
.pack-wrap{ position:relative; }
.pack-glow{
  position:absolute; z-index:0; top:-70px; left:50%; transform:translateX(-50%);
  width:min(680px,92%); height:440px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, var(--orange-glow), transparent 72%);
  filter:blur(50px); opacity:.5; animation:packGlow 8s ease-in-out infinite;
}
.pack-grid{ position:relative; z-index:1; display:grid; grid-template-columns:.82fr 1.18fr 1fr; gap:18px; align-items:stretch; }
.pack{ position:relative; border:1px solid var(--line); border-radius:20px; background:var(--card); display:flex; flex-direction:column; padding:30px 28px 28px; transition:transform .2s ease, border-color .2s ease; }
.pack:hover{ transform:translateY(-5px); }
.pack.featured{ border:2px solid var(--orange); background:linear-gradient(180deg,#1a140f,var(--card)); box-shadow:0 30px 70px -34px var(--orange-glow); padding-top:36px; }
.pack .flag{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:11.5px; font-weight:600; letter-spacing:.06em; padding:5px 13px; border-radius:99px; background:var(--orange); color:#1A0A03; white-space:nowrap; animation:packFlagPulse 3.4s ease-in-out infinite; }
.pack-ico{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--orange-soft); color:var(--orange-2); margin-bottom:16px; }
.pack.featured .pack-ico{ background:rgba(255,90,36,.2); }
.pack-shine-wrap{ position:absolute; inset:0; z-index:-1; overflow:hidden; border-radius:inherit; pointer-events:none; }
.pack-shine{
  position:absolute; top:-40%; right:14%; width:2px; height:180%;
  background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
  opacity:0; will-change:transform;
  animation:ctaShine 7s ease-in-out infinite 2s;
}
.pack .tier{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-2); }
.pack h3{ font-size:25px; margin:12px 0 6px; }
.pack .who{ color:var(--faint); font-size:14px; min-height:40px; }
.pack .feats{ list-style:none; margin:22px 0 26px; padding:22px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px; }
.pack .feats li{ display:flex; gap:11px; font-size:14.5px; color:var(--muted); }
.pack .feats li svg{ flex:0 0 auto; margin-top:3px; color:var(--orange); }
.pack .btn{ width:100%; margin-top:auto; }
.pack:not(.featured) .btn{ background:var(--card-2); border-color:var(--line-2); color:var(--text); }
.pack:not(.featured) .btn:hover{ border-color:var(--text); }

.pack-stat{ display:flex; align-items:baseline; gap:9px; margin:14px 0 10px; }
.pack-stat b{ font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:-.02em; color:var(--orange-2); }
.pack-stat span{ font-size:12.5px; color:var(--faint); max-width:15ch; line-height:1.35; }

.pack-plus{ font-size:13px; color:var(--muted); margin-top:16px; }
.pack-plus b{ color:var(--text); font-weight:600; }

.pack.featured .feats{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; align-items:start; }
.pack.featured .feats li{ padding:12px 0; border-bottom:1px solid var(--line); }
.pack.featured .feats li:nth-child(-n+2){ padding-top:0; }
.pack.featured .feats li:nth-last-child(-n+2){ border-bottom:none; padding-bottom:0; }

.pack-grid .pack:nth-child(1){ transition-delay:0s; }
.pack-grid .pack:nth-child(2){ transition-delay:.12s; }
.pack-grid .pack:nth-child(3){ transition-delay:.24s; }

@keyframes packGlow{ 0%,100%{ opacity:.35; } 50%{ opacity:.6; } }
@keyframes packFlagPulse{ 0%,100%{ transform:translateX(-50%) scale(1); } 50%{ transform:translateX(-50%) scale(1.06); } }
@media (prefers-reduced-motion:reduce){ .pack-glow,.pack-shine,.pack .flag,.flag-soon .dot{ animation:none; } }

/* web card — deliberately quieter, this isn't the main offer */
.pack.compact{ background:var(--bg-2); padding:26px 24px 24px; }
.pack.compact h3{ font-size:21px; }
.pack.compact .who{ min-height:auto; margin-bottom:4px; }
.pack.compact .feats{ margin:18px 0 22px; padding-top:18px; gap:10px; }
.pack.compact .feats li{ font-size:13.5px; }

.pack.soon{ padding-top:36px; border-style:dashed; }
.pack.soon:hover{ transform:none; }
.pack.soon .pack-ico{ background:var(--card-2); color:var(--faint); }
.pack.soon .who,
.pack.soon .feats li{ color:var(--faint); }
.pack.soon .feats li svg{ color:var(--line-2); }
.pack .flag.flag-soon{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--bg); border:1px solid var(--orange); color:var(--orange-2); animation:none;
}
.flag-soon .dot{ width:6px; height:6px; border-radius:50%; background:var(--orange); animation:packFlagPulse 1.6s ease-in-out infinite; }
.pack .btn.btn-disabled{
  width:100%; background:transparent; border:1px dashed var(--line-2); color:var(--faint);
  cursor:default; pointer-events:none;
}

/* ---------- final cta ---------- */
.cta{ padding:clamp(64px,9vw,110px) 0; }
.cta-card{
  position:relative; overflow:hidden; border-radius:28px; text-align:center; isolation:isolate;
  padding:clamp(48px,7vw,84px) clamp(28px,6vw,60px);
  background:
    radial-gradient(70% 60% at 16% 0%, rgba(255,255,255,.3), transparent 50%),
    linear-gradient(165deg, #FF8A3D 0%, var(--orange) 26%, var(--orange-3) 54%, #2A0E04 100%);
  box-shadow:0 50px 110px -40px rgba(232,66,15,.55);
}
.cta-card>*{ position:relative; z-index:2; }

.cta-shine{
  position:absolute; z-index:1; top:-40%; right:8%; width:2px; height:180%;
  background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity:0; will-change:transform;
  animation:ctaShine 6s ease-in-out infinite;
}
.cta-dot{ position:absolute; z-index:1; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.5); }
.cta-dot.d1{ top:16%; left:9%; } .cta-dot.d2{ top:24%; left:72%; } .cta-dot.d3{ top:72%; left:15%; } .cta-dot.d4{ top:64%; left:84%; }

.cta-badge{
  display:inline-flex; align-items:center; gap:11px; margin:0 auto 26px; padding:8px 20px 8px 9px;
  border-radius:99px; background:#fff; box-shadow:0 10px 30px -12px rgba(0,0,0,.3);
  animation:hvFloat 6s ease-in-out infinite;
}
.cta-badge .logo-img{ width:30px; height:30px; border-radius:9px; flex:0 0 auto; background:var(--logo) center/cover no-repeat; }
.cta-badge b{ font-size:14px; color:#1A0A03; font-weight:600; }

.cta-card h2{ color:#fff; font-size:clamp(32px,5.2vw,58px); letter-spacing:-.04em; max-width:16ch; margin:0 auto 16px; }
.cta-card .lead{ color:rgba(255,255,255,.85); margin:0 auto 34px; }
.cta-card .row{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap; }

.btn-white{ background:#fff; color:#1A0A03; box-shadow:0 14px 34px -12px rgba(0,0,0,.35); }
.btn-white:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(0,0,0,.4); }

@keyframes ctaShine{
  0%,15%{ opacity:0; transform:translateX(-160px) rotate(28deg); }
  30%,42%{ opacity:1; }
  58%,100%{ opacity:0; transform:translateX(320px) rotate(28deg); }
}
@media (prefers-reduced-motion:reduce){ .cta-card,.cta-shine,.cta-badge{ animation:none; } }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line); padding:44px 0 50px; }
.foot-inner{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.foot-links{ display:flex; gap:24px; font-size:14px; color:var(--faint); }
.foot-links a:hover{ color:var(--text); }
.copy{ margin-top:26px; font-size:13px; color:var(--faint); }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:40px;
  background:rgba(5,6,8,.88); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-frame{
  padding:10px; border-radius:20px; background:linear-gradient(155deg,var(--card),var(--bg-2));
  border:1px solid var(--orange); max-width:94vw; max-height:90vh; overflow:auto; -webkit-overflow-scrolling:touch;
  box-shadow:0 0 0 1px var(--orange-soft), 0 40px 100px -30px rgba(0,0,0,.7), 0 0 70px -10px var(--orange-glow);
  transform:scale(.96); transition:transform .25s ease;
}
.lightbox.open .lightbox-frame{ transform:scale(1); }
.lightbox-frame img{ display:block; height:min(75vh,560px); width:auto; max-width:none; border-radius:12px; }
.lightbox-close{
  position:absolute; top:24px; right:24px; width:44px; height:44px; border-radius:50%;
  background:var(--card); border:1px solid var(--line-2); color:var(--text); display:grid; place-items:center;
  cursor:pointer; transition:border-color .15s ease;
}
.lightbox-close:hover{ border-color:var(--text); }
.lightbox-hint{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  padding:10px 16px; border-radius:999px; pointer-events:none;
  background:rgba(10,11,14,.92); border:1px solid var(--line-2); color:var(--text);
  font-family:var(--font-display); font-size:13px; font-weight:600;
  opacity:0; transition:opacity .3s ease;
}
.lightbox-hint.show{ opacity:1; }
.lightbox-hint svg{ animation:hintNudge 1.3s ease-in-out infinite; }
@keyframes hintNudge{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(4px);} }
@media (min-width:641px){ .lightbox-hint{ display:none; } }
@media (prefers-reduced-motion:reduce){ .lightbox,.lightbox img{ transition:none; } .lightbox-hint svg{ animation:none; } }

/* reveal */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* responsive */
@media (max-width:940px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ order:2; height:clamp(320px,80vw,420px); max-width:520px; margin-top:8px; }
  .pack-grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .pack.featured{ order:-1; }
  .pack.featured .feats{ grid-template-columns:1fr; }
  .pack.featured .feats li{ padding-top:12px; }
  .pack.featured .feats li:nth-last-child(-n+2){ border-bottom:1px solid var(--line); padding-bottom:12px; }
  .pack.featured .feats li:first-child{ padding-top:0; }
  .pack.featured .feats li:last-child{ border-bottom:none; padding-bottom:0; }
}