/* ==========================================================
   ISFAHANWEB DESIGN #1
   FOUR NEEDS — VISUAL V3
   Illustration-driven / asymmetric
   ========================================================== */

.iw1-needs{
  position:relative;
  padding:115px 0 125px;
  overflow:hidden;
  background:
    radial-gradient(circle at 90% 10%,
      rgba(46,179,240,.08),transparent 22%),
    linear-gradient(180deg,#fff 0%,#f4fafc 100%);
}

.iw1-needs::before{
  content:"SERVICES";
  position:absolute;
  top:45px;
  inset-inline-start:-35px;
  color:rgba(20,94,129,.027);
  font-size:clamp(110px,17vw,260px);
  line-height:1;
  font-weight:950;
  letter-spacing:-.07em;
  pointer-events:none;
}


/* ==========================================================
   HEADING
   ========================================================== */

.iw1-needs-head{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:end;
  gap:70px;
  margin-bottom:52px;
}

.iw1-needs-kicker{
  display:block;
  margin-bottom:13px;
  color:#718692;
  font-size:13px;
  font-weight:850;
}

.iw1-needs-heading h2{
  max-width:670px;
  margin:0;
  color:#122e40;
  font-size:clamp(40px,4vw,60px);
  line-height:1.13;
  letter-spacing:-.04em;
}

.iw1-needs-heading h2 strong{
  display:block;
  color:#078fce;
  font-weight:950;
}

.iw1-needs-intro{
  padding-bottom:5px;
}

.iw1-needs-intro p{
  max-width:510px;
  margin:0 0 22px;
  color:#607784;
  font-size:15px;
  line-height:2;
}

.iw1-needs-line{
  display:block;
  width:100%;
  height:3px;
  border-radius:6px;
  background:
    linear-gradient(
      90deg,
      #7928dc 0 25%,
      #078fce 25% 50%,
      #ff8a00 50% 75%,
      #79bd38 75%
    );
}


/* ==========================================================
   ASYMMETRIC 2 × 2 GRID
   ========================================================== */

.iw1-needs-v3-grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1.06fr .94fr;
  grid-template-areas:
    "domain hosting"
    "seo design";

  gap:18px;
}

.iw1-v3-domain{grid-area:domain;}
.iw1-v3-hosting{grid-area:hosting;}
.iw1-v3-design{grid-area:design;}
.iw1-v3-seo{grid-area:seo;}


/* ==========================================================
   BASE PANEL
   ========================================================== */

.iw1-v3-card{
  --accent:#078fce;
  --rgb:7,143,206;

  position:relative;
  isolation:isolate;

  min-height:355px;
  overflow:hidden;

  display:grid;
  grid-template-columns:minmax(230px,.85fr) minmax(310px,1.15fr);
  align-items:center;

  border:1px solid rgba(var(--rgb),.13);
  border-radius:29px;

  color:#173747;
  text-decoration:none;

  background:
    linear-gradient(
      135deg,
      rgba(var(--rgb),.115) 0%,
      rgba(var(--rgb),.035) 45%,
      rgba(255,255,255,.96) 100%
    );

  box-shadow:
    0 22px 60px rgba(18,74,100,.08);

  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease,
    border-color .3s ease;
}

.iw1-v3-card::before{
  content:"";
  position:absolute;
  z-index:-1;

  width:300px;
  height:300px;
  top:-155px;
  inset-inline-end:-100px;

  border-radius:50%;

  background:
    radial-gradient(circle,
      rgba(var(--rgb),.19),
      rgba(var(--rgb),.035) 55%,
      transparent 72%);

  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}

.iw1-v3-card::after{
  content:"";
  position:absolute;
  inset-inline-start:0;
  bottom:0;

  width:105px;
  height:5px;

  background:var(--accent);

  transition:width .35s ease;
}


/* identities */

.iw1-v3-domain{
  --accent:#7928dc;
  --rgb:121,40,220;
}

.iw1-v3-hosting{
  --accent:#078fce;
  --rgb:7,143,206;
}

.iw1-v3-design{
  --accent:#ef7d00;
  --rgb:239,125,0;
}

.iw1-v3-seo{
  --accent:#69ae30;
  --rgb:105,174,48;
}


/* deliberate structural variation */

.iw1-v3-hosting,
.iw1-v3-seo{
  grid-template-columns:minmax(310px,1.15fr) minmax(230px,.85fr);
}

.iw1-v3-hosting .iw1-v3-visual,
.iw1-v3-seo .iw1-v3-visual{
  order:1;
}

.iw1-v3-hosting .iw1-v3-copy,
.iw1-v3-seo .iw1-v3-copy{
  order:2;
}


/* ==========================================================
   COPY
   ========================================================== */

.iw1-v3-copy{
  position:relative;
  z-index:3;
  padding:39px 34px;
}

.iw1-v3-index{
  display:block;
  margin-bottom:10px;

  color:var(--accent);

  font-size:10px;
  font-weight:950;
  letter-spacing:.09em;
}

.iw1-v3-copy h3{
  margin:0;
  color:#143447;
  font-size:32px;
  line-height:1.3;
  transition:color .3s ease;
}

.iw1-v3-copy p{
  max-width:310px;
  margin:14px 0 18px;

  color:#607784;
  font-size:13px;
  line-height:1.95;
}

.iw1-v3-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.iw1-v3-tags span{
  padding:6px 9px;

  border:1px solid rgba(var(--rgb),.13);
  border-radius:20px;

  color:#536d7a;
  background:rgba(255,255,255,.67);

  font-size:9px;
  font-weight:800;
}

.iw1-v3-action{
  margin-top:24px;

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

  color:#284b5c;
  font-size:12px;
  font-weight:950;
}

.iw1-v3-action b{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:11px;

  color:#fff;
  background:var(--accent);

  box-shadow:
    0 9px 20px rgba(var(--rgb),.22);

  transition:
    transform .3s ease,
    border-radius .3s ease;
}


/* ==========================================================
   ILLUSTRATION STAGE
   ========================================================== */

.iw1-v3-visual{
  position:relative;
  z-index:2;

  min-width:0;
  height:310px;

  display:flex;
  align-items:center;
  justify-content:center;

  perspective:900px;
}

.iw1-v3-visual svg{
  position:relative;
  z-index:2;

  display:block;
  width:100%;
  max-width:350px;
  height:auto;

  overflow:visible;

  filter:
    drop-shadow(0 18px 23px rgba(var(--rgb),.13));

  transition:
    transform .55s cubic-bezier(.2,.75,.2,1),
    filter .35s ease;
}


/* universal shadow */

.iw-scene-shadow{
  fill:rgba(16,57,77,.10);
  filter:blur(5px);
}


/* ==========================================================
   DOMAIN ILLUSTRATION
   ========================================================== */

.iw-domain-halo{
  fill:url(#iwDomainB);
  stroke:rgba(121,40,220,.15);
  stroke-width:2;
}

.iw-domain-globe{
  fill:url(#iwDomainA);
  opacity:.96;
}

.iw-domain-grid{
  fill:none;
  stroke:rgba(255,255,255,.74);
  stroke-width:2.2;
}

.iw-domain-orbit{
  fill:none;
  stroke:#7928dc;
  stroke-width:5;
  stroke-linecap:round;
  opacity:.35;
}

.iw-domain-node{
  fill:#fff;
  stroke:#7928dc;
  stroke-width:4;
}

.iw-domain-check{
  fill:none;
  stroke:#7928dc;
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.iw-domain-chip{
  fill:#fff;
  stroke:rgba(121,40,220,.15);
  stroke-width:2;
  filter:drop-shadow(0 8px 10px rgba(121,40,220,.10));
}

.iw-domain-chip-dot{
  fill:#7928dc;
}

.iw-domain-chip-line{
  fill:none;
  stroke:#b99bdd;
  stroke-width:4;
  stroke-linecap:round;
}

.iw-scene-label{
  position:absolute;
  z-index:4;

  top:44px;
  inset-inline-end:26px;

  padding:7px 10px;

  border:1px solid rgba(121,40,220,.12);
  border-radius:9px;

  color:#7928dc;
  background:rgba(255,255,255,.86);

  box-shadow:0 8px 20px rgba(121,40,220,.10);

  font-size:8px;
  font-weight:950;
  letter-spacing:.08em;

  transition:transform .4s ease;
}


/* ==========================================================
   HOSTING ILLUSTRATION
   ========================================================== */

.iw-host-halo{
  fill:url(#iwHostB);
}

.iw-server-back{
  fill:#a8e3fa;
}

.iw-server-mid{
  fill:#57c6f2;
}

.iw-server-front{
  fill:url(#iwHostA);
}

.iw-server-led{
  fill:#fff;
}

.iw-server-slot{
  fill:none;
  stroke:rgba(255,255,255,.72);
  stroke-width:5;
  stroke-linecap:round;
}

.iw-server-meter{
  fill:#fff;
  opacity:.84;
}

.iw-host-cloud{
  fill:#fff;
  stroke:#60c9f3;
  stroke-width:2;
  filter:drop-shadow(0 8px 12px rgba(7,143,206,.12));
}

.iw-server-status{
  position:absolute;
  z-index:4;

  top:37px;
  inset-inline-start:29px;

  padding:7px 11px;

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

  border-radius:9px;

  color:#087cae;
  background:rgba(255,255,255,.88);

  box-shadow:0 8px 20px rgba(7,143,206,.11);

  font-size:8px;
  font-weight:950;
}

.iw-server-status i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#79bd38;
  box-shadow:0 0 0 4px rgba(121,189,56,.13);
}


/* ==========================================================
   DESIGN ILLUSTRATION
   ========================================================== */

.iw-design-window{
  fill:url(#iwDesignB);
  stroke:rgba(239,125,0,.16);
  stroke-width:2;
}

.iw-design-top{
  fill:#fff;
}

.iw-design-dot{
  fill:#ff9a22;
}

.iw-design-hero{
  fill:url(#iwDesignA);
}

.iw-design-line{
  fill:#f1b974;
}

.iw-design-line.short{
  opacity:.55;
}

.iw-design-button{
  fill:#ef7d00;
}

.iw-design-card{
  fill:#ffd8a8;
}

.iw-design-cursor{
  fill:#fff;
  stroke:#ef7d00;
  stroke-width:3;
  stroke-linejoin:round;
  filter:drop-shadow(0 7px 8px rgba(239,125,0,.16));
}

.iw-design-chip{
  position:absolute;
  z-index:4;

  bottom:39px;
  inset-inline-end:29px;

  padding:8px 12px;

  border-radius:9px;

  color:#d96900;
  background:#fff;

  box-shadow:0 9px 22px rgba(239,125,0,.14);

  font-size:9px;
  font-weight:950;

  transition:transform .4s ease;
}


/* ==========================================================
   SEO ILLUSTRATION
   ========================================================== */

.iw-seo-board{
  fill:url(#iwSeoB);
  stroke:rgba(105,174,48,.16);
  stroke-width:2;
}

.iw-seo-sidebar{
  fill:#e4f3d3;
}

.iw-seo-side-dot{
  fill:#79bd38;
}

.iw-seo-side-line{
  fill:#acd482;
}

.iw-seo-bar{
  fill:#b6da8d;
}

.iw-seo-bar.b2{
  fill:#9bce67;
}

.iw-seo-bar.b3{
  fill:#83c347;
}

.iw-seo-bar.b4{
  fill:url(#iwSeoA);
}

.iw-seo-growth{
  fill:none;
  stroke:#65ae2e;
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.iw-seo-arrow{
  fill:none;
  stroke:#65ae2e;
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.iw-seo-point{
  fill:#fff;
  stroke:#65ae2e;
  stroke-width:4;
}

.iw-seo-chip{
  position:absolute;
  z-index:4;

  top:38px;
  inset-inline-end:30px;

  padding:8px 12px;

  border-radius:9px;

  color:#589c25;
  background:#fff;

  box-shadow:0 9px 22px rgba(105,174,48,.13);

  font-size:9px;
  font-weight:950;

  transition:transform .4s ease;
}


/* ==========================================================
   INTERACTION — SCENE, NOT SIMPLE CARD LIFT
   ========================================================== */

.iw1-v3-card:hover{
  transform:translateY(-6px);

  border-color:rgba(var(--rgb),.23);

  box-shadow:
    0 34px 75px rgba(18,74,100,.13);
}

.iw1-v3-card:hover::before{
  transform:translate(-35px,35px) scale(1.18);
}

.iw1-v3-card:hover::after{
  width:42%;
}

.iw1-v3-card:hover .iw1-v3-copy h3{
  color:var(--accent);
}

.iw1-v3-card:hover .iw1-v3-visual svg{
  transform:
    translateY(-7px)
    rotateX(2deg)
    rotateY(-2deg)
    scale(1.035);

  filter:
    drop-shadow(0 25px 28px rgba(var(--rgb),.20));
}

.iw1-v3-card:hover .iw1-v3-action b{
  transform:translateX(-5px) rotate(-5deg);
  border-radius:50%;
}

.iw1-v3-domain:hover .iw-scene-label{
  transform:translate(-8px,-7px);
}

.iw1-v3-hosting:hover .iw-server-status{
  transform:translate(7px,-7px);
}

.iw1-v3-design:hover .iw-design-chip{
  transform:translate(-8px,-7px);
}

.iw1-v3-seo:hover .iw-seo-chip{
  transform:translate(-7px,-8px);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1100px){

  .iw1-needs-v3-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "domain"
      "hosting"
      "design"
      "seo";
  }

  .iw1-v3-card,
  .iw1-v3-hosting,
  .iw1-v3-seo{
    grid-template-columns:1fr 1.15fr;
  }

  .iw1-v3-hosting .iw1-v3-visual,
  .iw1-v3-seo .iw1-v3-visual{
    order:2;
  }

  .iw1-v3-hosting .iw1-v3-copy,
  .iw1-v3-seo .iw1-v3-copy{
    order:1;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:760px){

  .iw1-needs{
    padding:76px 0 82px;
  }

  .iw1-needs-head{
    display:block;
    margin-bottom:31px;
  }

  .iw1-needs-heading h2{
    font-size:38px;
  }

  .iw1-needs-intro{
    margin-top:22px;
  }

  .iw1-needs-v3-grid{
    gap:13px;
  }

  .iw1-v3-card,
  .iw1-v3-hosting,
  .iw1-v3-seo{
    min-height:0;

    display:flex;
    flex-direction:column;

    border-radius:23px;
  }

  .iw1-v3-copy,
  .iw1-v3-hosting .iw1-v3-copy,
  .iw1-v3-seo .iw1-v3-copy{
    order:1;
    width:100%;
    padding:27px 23px 10px;
  }

  .iw1-v3-visual,
  .iw1-v3-hosting .iw1-v3-visual,
  .iw1-v3-seo .iw1-v3-visual{
    order:2;
    width:100%;
    height:245px;
  }

  .iw1-v3-visual svg{
    max-width:315px;
  }

  .iw1-v3-copy h3{
    font-size:28px;
  }

  .iw1-v3-copy p{
    max-width:none;
  }

  .iw1-v3-action{
    margin-top:18px;
  }

}