:root{
  --page-bg:#eef2f7;

  --card-radius:22px;
  --shadow:0 18px 70px rgba(2,6,23,.12);
  --stroke:rgba(2,6,23,.10);

  --text:#0b1b3a;
  --muted:rgba(15,23,42,.65);

  --maxW: 1280px;
  --logoSize: min(320px, 34vw);

  /* ARC + ITEMS GEOMETRY */
  --timelineH: 590px;     /* umumiy yoy balandligi */
  --arcW: 330px;          /* yoy joyi */
  --itemShift: 150px;     /* yoydan o‘ngga surish */
  --itemShift1: 170px;
  --itemShift: 150px;
  --itemW: min(500px, 20vw);
  --itemMaxW: 420px;

  /* YOY PATH (560px balandlikka mos) */
  --arcPath: path("M 52 24 C 240 110 240 390 52 540");
}

.wrap{ width:min(var(--maxW),100%); }
.org-hero{ margin:70px 0; }

.org-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--card-radius);
  border:1px solid var(--stroke);
  background:
    radial-gradient(900px 420px at 18% 15%, rgba(37,99,235,.16), transparent 58%),
    radial-gradient(780px 420px at 88% 5%, rgba(6,182,212,.18), transparent 55%),
    rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);

  display:grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 16px;
  align-items:center;

  padding: 18px;
  min-height: 640px; /* old: 700 */
}

.org-card::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.30) 50%, transparent 60%);
  transform:translateX(-25%) rotate(6deg);
  animation:orgSheen 7.5s linear infinite;
  pointer-events:none;
}
@keyframes orgSheen{
  0%{ transform: translateX(-35%) rotate(6deg); opacity:.35; }
  50%{ transform: translateX(35%) rotate(6deg); opacity:.18; }
  100%{ transform: translateX(-35%) rotate(6deg); opacity:.35; }
}

.org-left,.org-right{ position:relative; z-index:1; }
.org-left { margin-left: 150px;}

.org-biglogo{
  width: var(--logoSize);
  aspect-ratio:1/1;
  margin:0 auto;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(2,6,23,.10);
  box-shadow:
    0 24px 70px rgba(2,6,23,.14),
    0 0 0 12px rgba(37,99,235,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  transform: translateY(6px);
  animation: logoFloat 4.2s ease-in-out infinite;
}
.org-biglogo img{
  width:78%;
  height:78%;
  object-fit:contain;
  filter: drop-shadow(0 18px 30px rgba(2,6,23,.18));
  user-select:none;
  -webkit-user-drag:none;
}
@keyframes logoFloat{
  0%,100%{ transform: translateY(6px); }
  50%{ transform: translateY(-5px); }
}

.org-title{
  margin:0 0 10px;
  font-size: clamp(18px, 2.0vw, 24px);
  letter-spacing:.2px;
  color:var(--text);
  font-weight:900;
}
.org-hint{
  margin:10px 0 0;
  color:var(--muted);
  font-size:13px;
}

/* ===== ARC AREA ===== */
.org-timeline{
  position:relative;
  height: var(--timelineH);
  overflow: visible;
}

/* chiziq (arc) */
.org-arc{
  position:absolute;
  left: -6px;                 /* yoy biroz chaproqda */
  top: 0;
  width: var(--arcW);
  height: 100%;
  pointer-events:none;
  z-index:0;
  filter: drop-shadow(0 10px 16px rgba(2,6,23,.10));
  opacity:.95;
}

/* ===== ITEM ===== */
.org-item{
  position:absolute;
  left: 0;
  top: 0;

  width: var(--itemW);
  max-width: var(--itemMaxW);

  display:flex;
  align-items:center;
  gap: 10px;

  padding: 10px 10px 10px 8px;
  border-radius: 14px;
  text-decoration:none;

  border: 1px solid rgba(2,6,23,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.64));
  box-shadow: 0 14px 40px rgba(2,6,23,.10);

  /* follow arc */
  offset-path: var(--arcPath);
  offset-distance: calc(var(--p) * 100%);
  offset-rotate: 0deg;
  offset-anchor: 118px 50%;

  /* push cards right from arc */
  /* transform: translateX(var(--itemShift)); */
  transform: translateX(calc(var(--itemShift) + var(--x, 0px))) translateY(var(--y, 0px));


  opacity:0;
  animation: orgDrop .55s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--d);

  z-index:2;
  overflow:hidden;
}
.org-item1{
  position:absolute;
  left: 0;
  top: 0;

  width: var(--itemW);
  max-width: var(--itemMaxW);

  display:flex;
  align-items:center;
  gap: 10px;

  padding: 10px 10px 10px 8px;
  border-radius: 14px;
  text-decoration:none;

  border: 1px solid rgba(2,6,23,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.64));
  box-shadow: 0 14px 40px rgba(2,6,23,.10);

  /* follow arc */
  offset-path: var(--arcPath);
  offset-distance: calc(var(--p) * 100%);
  offset-rotate: 0deg;
  offset-anchor: 118px 50%;

  /* push cards right from arc */
  /* transform: translateX(var(--itemShift)); */
  transform: translateX(calc(var(--itemShift1) + var(--x, 0px))) translateY(var(--y, 0px));


  opacity:0;
  animation: orgDrop .55s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--d);

  z-index:2;
  overflow:hidden;
}

@keyframes orgDrop{
  from{ opacity:0; transform: translateX(var(--itemShift)) translateY(10px); }
  to  { opacity:1; transform: translateX(var(--itemShift)) translateY(0); }
}

.org-item::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(37,99,235,0), rgba(37,99,235,.10), rgba(6,182,212,.12), rgba(6,182,212,0));
  transform: translateX(-70%);
  transition: transform .45s ease;
  pointer-events:none;
}
.org-item:hover::before{ transform: translateX(70%); }

.org-item:hover{
  border-color: rgba(37,99,235,.25);
  box-shadow:
    0 22px 70px rgba(2,6,23,.14),
    0 0 0 8px rgba(37,99,235,.10);
  transform: translateX(var(--itemShift)) translateY(-1px);
}

.org-dot{
  width: 46px;
  height: 46px;
  border-radius:999px;
  background:#fff;
  border:2px solid rgba(37,99,235,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  box-shadow: 0 14px 26px rgba(2,6,23,.12);
}
.org-dot img{
  width:88%;
  height:88%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}

.org-text{
  font-size: clamp(13px, 1.35vw, 17px);
  font-weight: 900;
  letter-spacing:.2px;
  line-height: 1.12;
  color: var(--text);

  max-width: 280px;
  white-space: normal;
  word-break: break-word;
}

.org-arrow{
  margin-left:auto;
  font-size: 15px;
  color: rgba(15,23,42,.55);
  transform: translateX(-4px);
  transition: transform .2s ease, color .2s ease;
  flex:0 0 auto;
}
.org-item:hover .org-arrow{
  transform: translateX(2px);
  color: rgba(37,99,235,.85);
}

/* ===== MUHIM: HAR BIR ITEMGA --p BERILADI (BIRLASHMAYDI) ===== */
.org-timeline .org-item:nth-child(1){ --p: 0.02; }
.org-timeline .org-item:nth-child(2){ --p: 0.14; }
.org-timeline .org-item:nth-child(3){ --p: 0.28; }
.org-timeline .org-item:nth-child(4){ --p: 0.44; }
.org-timeline .org-item:nth-child(5){ --p: 0.60; }
.org-timeline .org-item:nth-child(6){ --p: 0.74; }
.org-timeline .org-item:nth-child(7){ --p: 0.88; }
.org-timeline .org-item:nth-child(8){ --p: 0.98; }

/* ===== RESPONSIVE ===== */
@media (max-width:1200px){
  :root{
    --logoSize: min(280px, 34vw);
    --timelineH: 520px;
    --arcW: 270px;
    --itemShift: 96px;
    --itemW: min(420px, 46vw);
    --itemMaxW: 390px;
    --arcPath: path("M 52 20 C 220 100 220 360 52 500");
  }
  .org-card{ min-height: 600px; }
}

@media (max-width:980px){
  .org-card{
    grid-template-columns:1fr;
    align-items:start;
  }
  .org-biglogo{ width:min(260px, 70vw); }

  /* mobile: normal list */
  .org-timeline{
    height:auto;
    display:grid;
    gap:12px;
  }
  .org-arc{ display:none; }

  .org-item{
    position:relative;
    offset-path:none;
    offset-distance:0;
    offset-anchor:auto;
    transform:none;
    width:100%;
    max-width:none;
    opacity:1;
    animation:none;
  }
  .org-item:hover{ transform: translateY(-2px); }
}

@media (max-width:520px){
  .org-dot{ width:42px; height:42px; }
  .org-text{ font-size:15px; max-width: 100%; }
}