/* в”Ђ RESET в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --ink:#002a0bc4;
  --paper:#F4F1EA;
  --paper2:#EDEAE1;
  --mono:'DM Mono',monospace;

  /* paint brand spectrum */
  --c1:#E63225; /* Dulux Red */
  --c2:#F47B20; /* RAL Orange */
  --c3:#F5D327; /* Tikkurila Yellow */
  --c4:#3DB54A; /* Caparol Green */
  --c5:#1E6FB5; /* Sadolin Blue */
  --c6:#9B3FAB; /* NCS Violet */
  --c7:#E8547A; /* Jotun Rose */
  --c8:#3ECFB2; /* Teknos Mint */
}

body{cursor:auto;
  background:var(--paper);
  color:var(--ink);
  font-family:'Syne',sans-serif;
  overflow-x:hidden;

}

/* noise layer */
body::after{
  content:'';
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px;
}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--ink);border-radius:3px}


/* в”Ђ NAV в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:900;width:calc(100% - 48px);max-width:1180px}
.nav-i{display:flex;align-items:center;justify-content:space-between;padding:12px 26px;border-radius:3rem;border:1px solid rgba(11,11,11,.08);transition:background .4s,box-shadow .4s,border-color .4s}
.nav-i.s{background:rgba(244,241,234,.85);backdrop-filter:blur(20px) saturate(160%);border-color:rgba(11,11,11,.13);box-shadow:0 6px 36px rgba(0,0,0,.07)}
.logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.logo-ring{width:30px;height:30px;border-radius:50%;background:conic-gradient(var(--c1) 0 60deg,var(--c3) 60deg 120deg,var(--c4) 120deg 180deg,var(--c5) 180deg 240deg,var(--c6) 240deg 300deg,var(--c7) 300deg 360deg);animation:spin 7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nav-l{display:flex;gap:30px}
.nav-l a{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;opacity:.5;transition:opacity .2s}
.nav-l a:hover{opacity:1}
.nav-btn{padding:10px 22px;border-radius:2rem;background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:none;cursor:pointer;transition:background .3s,transform .2s}
.nav-btn:hover{background:var(--c1);transform:scale(1.04)}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   HERO  — EXPLOSIVE PAINT SPECTACLE
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.hero{
  min-height:100dvh;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:0;
  padding:0;
}

/* Full-bleed paint spectrum bg */
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background: #4475ffe3;
}

/* Animated paint splash columns */
.paint-cols{
  position:absolute;inset:0;z-index:1;
  display:flex;
}
.pcol{
  flex:1;
  position:relative;
  overflow:hidden;
  opacity:.18;
}
.pcol::before{
  content:'';
  position:absolute;inset:0;
  animation:col-breathe 6s ease-in-out infinite alternate;
}
@keyframes col-breathe{
  from{opacity:.7;transform:scaleY(1)}
  to{opacity:1;transform:scaleY(1.03)}
}
.pcol:nth-child(1)::before{background:var(--c1);animation-delay:0s}
.pcol:nth-child(2)::before{background:var(--c2);animation-delay:.5s}
.pcol:nth-child(3)::before{background:var(--c3);animation-delay:1s}
.pcol:nth-child(4)::before{background:var(--c4);animation-delay:1.5s}
.pcol:nth-child(5)::before{background:var(--c5);animation-delay:2s}
.pcol:nth-child(6)::before{background:var(--c6);animation-delay:2.5s}
.pcol:nth-child(7)::before{background:var(--c7);animation-delay:3s}
.pcol:nth-child(8)::before{background:var(--c8);animation-delay:3.5s}

/* Giant radial gradient burst — centrepiece */
.hero-burst{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 60% at 30% 50%,
      rgba(7,7,8,.92) 0%,
      rgba(7,7,8,.7) 45%,
      transparent 80%),
    radial-gradient(ellipse 55% 80% at 70% 50%,
      rgba(7,7,8,.65) 0%,
      transparent 70%);
}

/* Floating paint blobs */
.blob{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:3;animation:blob-drift 12s ease-in-out infinite alternate}
@keyframes blob-drift{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(30px,-40px) scale(1.08)}
}
.b1{width:500px;height:500px;background:var(--c1);opacity:.35;top:-120px;left:-80px;animation-delay:0s}
.b2{width:360px;height:360px;background:var(--c5);opacity:.28;bottom:-60px;left:10%;animation-delay:-4s}
.b3{width:280px;height:280px;background:var(--c3);opacity:.22;top:30%;left:25%;animation-delay:-2s}
.b4{width:420px;height:420px;background:var(--c7);opacity:.2;top:-80px;right:20%;animation-delay:-6s}
.b5{width:300px;height:300px;background:var(--c4);opacity:.2;bottom:-40px;right:5%;animation-delay:-3s}

/* Hero content left */
.hero-l{
  position:relative;z-index:10;
  padding:120px 56px 80px 56px;
}

.h-badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.15);border-radius:2rem;
  padding:6px 14px;margin-bottom:30px;
  opacity:0;animation:fu .7s ease .15s forwards;
}
.h-badge-dot{width:6px;height:6px;border-radius:50%;animation:pdot 2s ease-in-out infinite}
@keyframes pdot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}
.h-badge span{font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.1em;text-transform:uppercase;font-family:var(--mono)}

.hero-h1{line-height:.93;margin-bottom:26px}
.h1-l1{
  display:block;
  font-size:clamp(50px,6.5vw,88px);
  font-weight:800;letter-spacing:-.04em;color:#fff;
  opacity:0;animation:fu .7s ease .3s forwards;
}
.h1-l2{
  display:block;
  font-family:'Fraunces',serif;font-style:italic;font-weight:300;
  font-size:clamp(48px,8vw,110px);
  letter-spacing:-.03em;line-height:.9;
  /* spectral gradient text */
  background:linear-gradient(90deg,
    var(--c1) 0%,
    var(--c2) 20%,
    var(--c3) 38%,
    var(--c4) 55%,
    var(--c5) 72%,
    var(--c7) 88%,
    var(--c6) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  opacity:0;animation:fu .7s ease .48s forwards;
  background-size:200% 100%;
  animation:fu .7s ease .48s forwards, grad-shift 6s linear 1.2s infinite;
}
@keyframes grad-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes fu{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

.hero-sub{
  font-size:16px;color:rgba(255,255,255,.5);line-height:1.7;
  max-width:440px;margin-bottom:40px;
  opacity:0;animation:fu .7s ease .65s forwards;
}

.hero-btns{
  display:flex;gap:14px;align-items:center;
  opacity:0;animation:fu .7s ease .8s forwards;
}
.btn-fire{
  padding:15px 32px;border-radius:3rem;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  color:#fff;font-size:13px;font-weight:800;letter-spacing:.03em;
  border:none;cursor:pointer;
  box-shadow:0 8px 32px rgba(230,50,37,.45);
  transition:transform .3s ease,box-shadow .3s ease;
}
.btn-fire:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 48px rgba(230,50,37,.55)}
.btn-ghost2{
  padding:15px 28px;border-radius:3rem;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);
  font-size:13px;font-weight:600;
  border:1px solid rgba(255,255,255,.15);cursor:pointer;
  transition:all .3s ease;
}
.btn-ghost2:hover{background:rgba(255,255,255,.14);color:#fff}

/* Paint brand logos row */
.brands-row{
  display:flex;align-items:center;gap:16px;margin-top:44px;flex-wrap:wrap;
  opacity:0;animation:fu .7s ease 1s forwards;
}
.brand-chip{
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:2rem;padding:6px 13px;
  font-size:11px;font-weight:700;letter-spacing:.05em;
  color:rgba(255,255,255,.5);text-transform:uppercase;
  transition:background .25s,color .25s;
}
.brand-chip:hover{background:rgba(255,255,255,.14);color:#fff}
.brand-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* Hero right — giant interactive color wheel demo */
.hero-r{
  position:relative;z-index:10;
  padding:120px 56px 80px 0;
  display:flex;flex-direction:column;gap:20px;
}

/* The big colour picker card */
.picker-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:2.5rem;
  overflow:hidden;
  backdrop-filter:blur(12px);
  opacity:0;animation:fu .9s ease .55s forwards;
}
.pc-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
}
.pc-dots{display:flex;gap:6px}
.pc-dot{width:9px;height:9px;border-radius:50%}
.pc-title{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.3);letter-spacing:.06em}
.pc-body{cursor:auto;padding:22px}

/* Spectrum strip */
.spectrum-strip{
  height:52px;border-radius:1.2rem;margin-bottom:18px;
  background:linear-gradient(90deg,
    #E63225,#F47B20,#F5D327,#3DB54A,
    #1E6FB5,#9B3FAB,#E8547A,#E63225);
  background-size:200% 100%;
  position:relative;overflow:hidden;cursor:pointer;
  animation:spec-shift 8s linear infinite;
}
@keyframes spec-shift{0%{background-position:0%}100%{background-position:200%}}
.spec-cursor{
  position:absolute;top:50%;left:35%;
  transform:translate(-50%,-50%);
  width:28px;height:28px;border-radius:50%;
  border:3px solid white;
  box-shadow:0 2px 16px rgba(0,0,0,.4);
  background:#E63225;
  transition:left .4s cubic-bezier(.34,1.56,.64,1),background .4s;
  pointer-events:none;
}

/* Active color display */
.active-color-row{
  display:grid;grid-template-columns:64px 1fr auto;
  gap:14px;align-items:center;margin-bottom:18px;
}
.ac-swatch{
  width:64px;height:64px;border-radius:1.2rem;
  background:#E63225;transition:background .5s ease;
  box-shadow:0 8px 24px rgba(230,50,37,.4);
}
.ac-info{}
.ac-name{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:3px}
.ac-hex{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.45)}
.ac-badge{
  padding:6px 13px;border-radius:2rem;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(230,50,37,.25);color:#E63225;border:1px solid rgba(230,50,37,.3);
  transition:all .5s;
}

/* Match row from other brands */
.match-label{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.match-row{display:flex;gap:8px;flex-wrap:wrap}
.match-chip{
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:1rem;padding:7px 11px;
  transition:background .25s,transform .3s cubic-bezier(.34,1.56,.64,1);
  cursor:pointer;
}
.match-chip:hover{background:rgba(255,255,255,.13);transform:translateY(-3px)}
.mc-dot{width:14px;height:14px;border-radius:4px;flex-shrink:0}
.mc-info{}
.mc-brand{font-size:9px;color:rgba(255,255,255,.35);letter-spacing:.06em;text-transform:uppercase;font-family:var(--mono)}
.mc-code{font-size:11px;color:rgba(255,255,255,.75);font-family:var(--mono);font-weight:500}

/* Mini stat row */
.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  opacity:0;animation:fu .8s ease .75s forwards;
}
.hs-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  border-radius:1.5rem;padding:16px 18px;
  transition:background .3s;
}
.hs-card:hover{background:rgba(255,255,255,.1)}
.hs-val{font-size:22px;font-weight:800;letter-spacing:-.03em;color:#fff}
.hs-lbl{font-size:10px;color:rgba(255,255,255,.35);letter-spacing:.06em;text-transform:uppercase;margin-top:3px;font-family:var(--mono)}

/* в”Ђ MARQUEE в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.mq-wrap{overflow:hidden;padding:20px 0;background:var(--ink);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)}
.mq-track{display:flex;white-space:nowrap;animation:mq 28s linear infinite}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-item{display:inline-flex;align-items:center;gap:12px;padding:0 28px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.22)}
.mq-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* в”Ђ CATALOG SECTION в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.catalog{padding:110px 56px;background:var(--paper)}
.s-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c1);border:1px solid rgba(230,50,37,.3);border-radius:2rem;padding:5px 14px;margin-bottom:18px}
.s-title{font-size:clamp(36px,5vw,60px);font-weight:800;letter-spacing:-.035em;color:var(--ink);line-height:1.05;margin-bottom:12px}
.s-sub{font-size:15px;color:#777;max-width:540px;line-height:1.65;margin-bottom:56px}

/* Brand tabs */
.brand-tabs{display:flex;gap:8px;margin-bottom:36px;flex-wrap:wrap}
.btab{
  display:flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:2rem;
  font-size:12px;font-weight:700;letter-spacing:.04em;
  background:white;color:#777;
  border:1px solid rgba(11,11,11,.08);cursor:pointer;
  transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.btab:hover,.btab.active{color:white;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.btab-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* Color grid */
.color-grid{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:8px;
}
.color-cell{
  aspect-ratio:1;border-radius:1rem;
  cursor:pointer;position:relative;overflow:visible;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease,z-index 0s;
  z-index:1;
}
.color-cell:hover{transform:scale(1.18);box-shadow:0 12px 32px rgba(0,0,0,.22);z-index:10}
.color-cell-tip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;
  font-family:var(--mono);font-size:10px;
  padding:5px 10px;border-radius:.8rem;
  white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .2s;
  z-index:20;
}
.color-cell:hover .color-cell-tip{opacity:1}

/* в”Ђ MATCHER SECTION в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.matcher{padding:0 56px 110px}
.matcher-inner{
  background:#0400ff5e;border-radius:3rem;
  padding:1rem;
  display:grid;grid-template-columns:1fr 1.2fr;gap:72px;align-items:center;
  position:relative;overflow:hidden;
}
.m-blob1{position:absolute;width:400px;height:400px;border-radius:50%;filter:blur(100px);background:var(--c5);opacity:.22;top:-120px;right:-60px;pointer-events:none}
.m-blob2{position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(80px);background:var(--c1);opacity:.18;bottom:-80px;left:200px;pointer-events:none}

.match-demo{position:relative;z-index:2}
.md-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:2rem;overflow:hidden;
}
.md-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03)}
.md-bar-dot{width:8px;height:8px;border-radius:50%}
.md-bar-url{flex:1;margin-left:8px;background:rgba(255,255,255,.06);border-radius:.8rem;padding:4px 12px;font-size:10px;color:rgba(255,255,255,.28);font-family:var(--mono)}
.md-body{cursor:auto;padding:22px}

/* Selected color big display */
.sel-color{
  width:100%;height:120px;border-radius:1.5rem;margin-bottom:16px;
  background:linear-gradient(135deg,var(--c5),#2e8fe8);
  position:relative;overflow:hidden;
  box-shadow:0 12px 40px rgba(30,111,181,.4);
  transition:all .6s ease;
}
.sel-color::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent);
  border-radius:inherit;
}
.sel-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.sel-name{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.02em}
.sel-code{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.4)}

/* Cross-brand matches */
.x-matches{display:flex;flex-direction:column;gap:10px}
.xm-row{
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:1.2rem;padding:12px 16px;
  transition:background .25s,transform .3s cubic-bezier(.34,1.56,.64,1);
  cursor:pointer;
}
.xm-row:hover{background:rgba(255,255,255,.1);transform:translateX(6px)}
.xm-swatch{width:36px;height:36px;border-radius:.8rem;flex-shrink:0}
.xm-info{flex:1}
.xm-brand{font-size:10px;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.07em;font-family:var(--mono);margin-bottom:2px}
.xm-name{font-size:13px;font-weight:600;color:#fff}
.xm-code{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.35);margin-left:auto}
.xm-pct{font-size:10px;color:rgba(255,255,255,.3);font-family:var(--mono)}

/* в”Ђ FEATURES STRIP в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.features{padding:100px 56px;background:var(--paper2)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px}
.feat-card{
  background:white;border-radius:2rem;padding:34px 30px;
  border:1px solid rgba(11,11,11,.06);
  transition:transform .4s cubic-bezier(.23,1,.32,1),box-shadow .4s;
}
.feat-card:hover{transform:translateY(-6px);box-shadow:0 22px 60px rgba(0,0,0,.1)}
.feat-icon{
  width:54px;height:54px;border-radius:1.4rem;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:22px;
}
.feat-num{font-family:var(--mono);font-size:11px;color:#ccc;letter-spacing:.08em;margin-bottom:9px}
.feat-title{font-size:18px;font-weight:800;letter-spacing:-.025em;color:var(--ink);margin-bottom:8px}
.feat-desc{font-size:13px;color:#888;line-height:1.65}

/* в”Ђ PRICING в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.pricing{padding:100px 56px;background:var(--paper)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:60px auto 0}
.p-card{
  background:white;border-radius:2rem;padding:36px 30px;
  border:1px solid rgba(11,11,11,.07);
  transition:transform .4s cubic-bezier(.23,1,.32,1),box-shadow .4s;
  position:relative;cursor:pointer;
}
.p-card:hover{transform:translateY(-8px);box-shadow:0 28px 72px rgba(0,0,0,.12)}
.p-card.hot{background:var(--ink)}
.p-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:5px 16px;border-radius:2rem;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.p-tier{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.p-price{display:flex;align-items:baseline;gap:4px;margin-bottom:8px}
.p-cur{font-size:14px;color:#aaa}
.p-hot .p-cur{color:rgba(255,255,255,.4)}
.p-num{font-size:clamp(36px,4vw,48px);font-weight:800;letter-spacing:-.03em;font-family:'Fraunces',serif}
.p-period{font-size:14px;color:#bbb}
.p-desc{font-size:13px;color:#888;line-height:1.6;margin-bottom:24px}
.p-features{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.p-features li{display:flex;gap:10px;align-items:center;font-size:13px;color:#666}
.p-features li::before{content:'✓';width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;flex-shrink:0}
.p-card.hot .p-tier{color:rgba(255,255,255,.4)}
.p-card.hot .p-num{color:#fff}
.p-card.hot .p-desc{color:rgba(255,255,255,.4)}
.p-card.hot .p-features li{color:rgba(255,255,255,.65)}
.p-card.hot .p-features li::before{background:var(--c1);color:white}
.p-cta{
  width:100%;padding:14px;border-radius:2rem;
  font-size:13px;font-weight:700;letter-spacing:.03em;
  border:none;cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease;
}
.p-cta:hover{transform:translateY(-2px)}

/* в”Ђ CTA FINAL в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cta-fin{padding:0 56px 56px}
.cta-box{
  border-radius:3rem;overflow:hidden;position:relative;
  padding:100px 80px;text-align:center;
  background:#607;
}
.cta-spectrum{
  position:absolute;bottom:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6),var(--c7),var(--c8),var(--c1));
  background-size:200% 100%;
  animation:spec-shift 5s linear infinite;
}
.cta-blobs{position:absolute;inset:0;pointer-events:none}
.cta-b{position:absolute;border-radius:50%;filter:blur(80px);animation:blob-drift 10s ease-in-out infinite alternate}
.cta-b1{width:350px;height:350px;background:var(--c1);opacity:.2;top:-80px;left:-60px}
.cta-b2{width:280px;height:280px;background:var(--c5);opacity:.18;top:-60px;right:10%;animation-delay:-4s}
.cta-b3{width:220px;height:220px;background:var(--c4);opacity:.15;bottom:-60px;left:40%;animation-delay:-2s}
.cta-title{font-size:clamp(40px,6vw,80px);font-weight:800;letter-spacing:-.04em;color:#fff;line-height:1;margin-bottom:18px;position:relative}
.cta-sub{font-size:16px;color:rgba(255,255,255,.45);max-width:480px;margin:0 auto 44px;line-height:1.65;position:relative}
.cta-actions{display:flex;gap:14px;justify-content:center;position:relative}

/* в”Ђ FOOTER в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
footer{
  background:var(--ink);
  border-radius:4rem 4rem 0 0;
  padding:68px 56px 44px;
  position:relative;overflow:hidden;
}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.07)}
.fl{font-size:14px;color:rgba(255,255,255,.3);line-height:1.7;max-width:280px;margin:14px 0 22px}
.f-status{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:2rem;padding:7px 14px}
.fh{font-size:11px;color:rgba(255,255,255,.25);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.fa{display:block;font-size:13px;color:rgba(255,255,255,.4);text-decoration:none;margin-bottom:10px;transition:color .2s}
.fa:hover{color:#fff}
.fb{display:flex;justify-content:space-between;align-items:center;padding-top:30px}
.fc{font-size:12px;color:rgba(255,255,255,.18)}
.fp{display:flex;gap:5px}
.fp-c{width:22px;height:22px;border-radius:50%;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.fp-c:hover{transform:scale(1.35)}

/* в”Ђ REVEAL UTIL в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.rv{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:translateY(0)}
.rl{opacity:0;transform:translateX(-32px);transition:opacity .8s ease,transform .8s ease}
.rl.in{opacity:1;transform:translateX(0)}
.rr{opacity:0;transform:translateX(32px);transition:opacity .8s ease,transform .8s ease}
.rr.in{opacity:1;transform:translateX(0)}

/* Publii menu integration */
.nav-links-wrap ul.nav-l { display:flex; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links-wrap li { list-style:none; }
.nav-links-wrap a, .nav-links-wrap span { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); text-decoration:none; opacity:.5; transition:opacity .2s; }
.nav-links-wrap a:hover { opacity:1; }

/* Content templates */
.content-hero {
  padding: 100px 56px 40px;
  background:#4475ffe3;
  color: white;
}
.content-hero-inner { max-width: 920px; margin: 0 auto; }
.content-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.content-meta {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.content-section { padding: 60px 56px 120px; background: var(--paper); }
.content-inner { margin: 0 auto; }
.content-body {
  font-size: 17px;
  line-height: 1.85;
  color: #2b2b2b;
}
.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4 {
  margin: 30px 0 14px;
  line-height: 1.2;
}
.content-body p { margin: 0 0 16px; }
.content-body a { color: var(--c5); text-decoration: none; }
.content-body a:hover { color: var(--c1); }
.content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  margin: 18px 0;
}

/* Responsive tweaks */
@media (max-width: 980px) {
  nav { width: calc(100% - 24px); }
  .nav-i { padding: 10px 18px; gap: 14px; }
  .hero { grid-template-columns: 1fr; }
  .hero-l { padding: 120px 32px 60px; }
  .hero-r { padding: 0 32px 80px; }
  .catalog, .matcher, .features, .pricing, .cta-fin { padding-left: 32px; padding-right: 32px; }
  .ft { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .nav-i { flex-direction: column; align-items: flex-start; }
  .nav-links-wrap ul.nav-l { flex-wrap: wrap; gap: 12px; }
  .hero-l { padding: 120px 20px 40px; }
  .hero-r { padding: 0 20px 60px; }
  .catalog, .matcher, .features, .pricing, .cta-fin { padding-left: 20px; padding-right: 20px; }
  .ft { grid-template-columns: 1fr; gap: 30px; }
  .fb { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Reverse nav colors for dark vs light backgrounds */
.nav-i{color:#fff}
.nav-i .logo{color:#fff}
.nav-i .nav-l a, .nav-i .nav-l span{color:rgba(255,255,255,.75);opacity:1}
.nav-i.s{color:var(--ink)}
.nav-i.s .logo{color:var(--ink)}
.nav-i.s .nav-l a, .nav-i.s .nav-l span{color:var(--ink);opacity:.55}


/* Mobile layout fixes */
@media (max-width: 980px) {
  .active-color-row { grid-template-columns: 48px 1fr; grid-template-rows: auto auto; }
  .ac-badge { grid-column: 1 / -1; justify-self: start; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .color-grid { grid-template-columns: repeat(8, 1fr); }
  .matcher-inner { grid-template-columns: 1fr; gap: 40px; }
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .pc-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pc-body { padding: 18px; }
  .hero-btns { flex-direction: column; align-items: stretch; }
  .active-color-row { grid-template-columns: 1fr; }
  .ac-swatch { width: 56px; height: 56px; }
  .hero-stats { grid-template-columns: 1fr; }
  .color-grid { grid-template-columns: repeat(4, 1fr); }
  .feat-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .matcher-inner { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: column; align-items: stretch; }
}


/* Mobile nav fixes */
@media (max-width: 700px) {
  nav { top: 12px; }
  .nav-i { width: 100%; padding: 12px 16px; gap: 10px; background: rgba(244,241,234,.92); border-radius: 20px; }
  .nav-i.s { background: rgba(244,241,234,.96); }
  .nav-links-wrap { width: 100%; }
  .nav-links-wrap ul.nav-l { flex-wrap: wrap; gap: 10px 14px; }
  .nav-l a, .nav-l span { font-size: 11px; line-height: 1.2; }
  .hero-l { padding-top: 180px; }
}


/* Burger menu */
.nav-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);cursor:pointer}
.nav-burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;margin:2px 0;transition:transform .25s,opacity .25s}
.nav-i.s .nav-burger{border-color:rgba(11,11,11,.18);background:rgba(11,11,11,.04)}
.nav-i.s .nav-burger span{background:var(--ink)}
.nav-i.open .nav-burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nav-i.open .nav-burger span:nth-child(2){opacity:0}
.nav-i.open .nav-burger span:nth-child(3){transform:translateY(-4px) rotate(-45deg)}

@media (max-width: 700px){
  .nav-burger{display:flex}
  .nav-links-wrap{display:none;width:100%}
  .nav-i.open .nav-links-wrap{display:block}
  .nav-links-wrap ul.nav-l{flex-direction:column;align-items:flex-start;padding:10px 2px 4px}
}

/* Prevent mobile overflow */
html,body{overflow-x:hidden}
.hero,.catalog,.matcher,.features,.pricing,.cta-fin,footer{overflow-x:hidden}
.hero-r,.picker-card,.matcher-inner,.price-grid,.feat-grid{max-width:100%}
.color-grid{grid-template-columns:repeat(auto-fit,minmax(26px,1fr))}


/* Mobile header: logo + burger only */
@media (max-width: 700px){
  .nav-i{justify-content:space-between}
  .nav-links-wrap{display:none !important}
  .nav-i.open .nav-links-wrap{display:block !important}
  .logo{gap:8px;font-size:16px}
  .logo-ring{width:26px;height:26px}
}

/* Force container widths to avoid horizontal overflow */
*{max-width:100%}
img,svg,video{max-width:100%;height:auto}
.hero-l,.hero-r,.catalog,.matcher,.features,.pricing,.cta-fin,footer{width:100%}
.picker-card,.matcher-inner,.price-grid,.feat-grid,.color-grid{max-width:100%}


/* Force burger visibility on small screens */
@media (max-width: 700px){
  .nav-burger{display:flex !important}
  .nav-links-wrap{display:none !important}
  .nav-i.open .nav-links-wrap{display:block !important}
  .nav-i{justify-content:space-between}
  .nav-i .logo{margin-right:8px}
}


/* Rebuild mobile header: no background, burger right */
@media (max-width: 700px){
  nav{top:10px}
  .nav-i{background:transparent !important;border:none !important;box-shadow:none !important;padding:8px 12px !important}
  .nav-i.s{background:transparent !important}
  .nav-i::before{content:none !important}
  .nav-links-wrap{display:none !important}
  .nav-burger{margin-left:auto;display:flex !important;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.1)}
  .nav-burger span{background:#fff}
  .nav-i.s .nav-burger{border-color:rgba(11,11,11,.25);background:rgba(255,255,255,.7)}
  .nav-i.s .nav-burger span{background:var(--ink)}
}


/* Hard reset for mobile header + burger */
@media (max-width: 700px){
  .nav-i{display:flex !important;align-items:center !important;gap:12px !important}
  .nav-burger{width:44px;height:44px;border-radius:12px !important;display:flex !important;flex-direction:column;justify-content:center;align-items:center;gap:5px !important}
  .nav-burger span{width:22px !important;height:2px !important;border-radius:2px !important}
}

/* Hard clamp widths to viewport */
@media (max-width: 700px){
  .hero, .hero-l, .hero-r, .catalog, .matcher, .features, .pricing, .cta-fin, footer{max-width:100vw !important}
  .hero *{max-width:100vw}
  .picker-card, .matcher-inner, .price-grid, .feat-grid, .color-grid, .brands-row{max-width:100% !important}
}


/* Matcher mobile clamp */
@media (max-width: 700px){
  .matcher-inner{grid-template-columns:1fr !important;gap:28px !important}
  .matcher .match-demo{max-width:100% !important;overflow:hidden}
  .match-card{max-width:100% !important}
  .match-row{flex-wrap:wrap}
  .x-matches{width:100%}
  .xm-row{flex-wrap:wrap;gap:8px}
  .xm-code,.xm-pct{white-space:normal}
}


@media (max-width: 700px){
  .nav-i{display:flex !important;gap:12px !important;flex-direction:row !important;align-items:center !important}
}
.cta-actions p {
    margin: 0;
    display: contents;
}
.cta-actions br {
    display: none;
}
/* Submenu (nav-sub) */
.nav-l > li { position: relative; }
.nav-sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin-top: 10px;
  padding: 10px;
  list-style: none;
  border-radius: 18px;
  background: #4475ffe3;
  border: 1px solid rgba(11,11,11,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  display: none;
  z-index: 50;
}
.nav-l > li:hover > .nav-sub,
.nav-l > li:focus-within > .nav-sub { display: block; }
.nav-sub a, .nav-sub span {
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--ink);
  opacity: .9;
  white-space: nowrap;
}
.nav-sub a:hover { background:#4475ffe3; opacity: 1; }

@media (max-width: 700px) {
  .nav-sub {
    position: static;
    display: block;
    margin-top: 6px;
    padding: 0 0 0 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .nav-sub a, .nav-sub span { padding: 10px 12px; }
}

/* Submenu (nav-sub) */
.nav-l > li { position: relative; }

/* Hover bridge: covers the gap so submenu doesn't disappear while moving cursor */
@media (min-width: 701px) {
  .nav-l > li::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
  }
}

.nav-sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin-top: 0;
  padding: 10px;
  list-style: none;
  border-radius: 18px;
  background: rgba(244,241,234,.94);
  border: 1px solid rgba(11,11,11,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  display: none;
  z-index: 50;
  transform: translateY(10px);
}
.nav-l > li:hover > .nav-sub,
.nav-l > li:focus-within > .nav-sub { display: block; }

.nav-sub a, .nav-sub span {
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--ink);
  opacity: .9;
  white-space: nowrap;
}
.nav-sub a:hover { background: rgba(11,11,11,.06); opacity: 1; }

@media (max-width: 700px) {
  .nav-sub {
    position: static;
    display: block;
    margin-top: 6px;
    padding: 0 0 0 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
  }
  .nav-sub a, .nav-sub span { padding: 10px 12px; }
}