/* ==========================================================
   ISFAHANWEB HOME V10.2-A2
   HERO COMPOSITION RESET

   GOAL:
   - one visual canvas
   - correct width relationship
   - typography = primary focal point
   - project visual integrated into typography
   - no accidental clipping
   - reduced decoration
   ========================================================== */


/* ==========================================================
   CANVAS
========================================================== */

.iw10-hero{
position:relative;
isolation:isolate;

width:100%;
max-width:none;

min-height:
clamp(760px,92vh,980px);

padding-top:
clamp(105px,10vh,145px);

padding-bottom:
clamp(70px,8vh,110px);

overflow:hidden;

background:
radial-gradient(
circle at 78% 22%,
rgba(46,179,240,.24),
transparent 30%
),
radial-gradient(
circle at 11% 80%,
rgba(140,198,63,.18),
transparent 27%
),
linear-gradient(
118deg,
#ffffff 0%,
#f4fbfe 54%,
#f5fbe9 100%
);
}


/*
 * Override old narrow shell feeling ONLY inside Hero.
 * Keep safe gutters, but allow the composition to use the screen.
 */

.iw10-hero > .iw-shell,
.iw10-hero .iw-shell{
width:
min(100% - 48px,1680px);

max-width:1680px;

margin-inline:auto;
}


/* ambient layer — intentional, not decorative clutter */

.iw10-hero::before{
content:"WEB";

position:absolute;
z-index:-1;

left:-.055em;
top:42%;

font-family:var(--en);
font-weight:900;

font-size:
clamp(17rem,34vw,38rem);

line-height:.68;

letter-spacing:-.085em;

color:
rgba(13,39,51,.032);

pointer-events:none;

transform:
translateY(-50%);
}


/* thin studio coordinate */

.iw10-hero::after{
content:"ISFAHAN / DIGITAL STUDIO / 2026";

position:absolute;
z-index:4;

left:24px;
bottom:25px;

font-family:var(--en);
font-size:9px;
font-weight:800;

letter-spacing:.18em;

color:
rgba(13,39,51,.46);

writing-mode:vertical-rl;

transform:rotate(180deg);

pointer-events:none;
}


/* ==========================================================
   HEADER INTEGRATION
========================================================== */

body.home > header:first-of-type,
body.home #masthead,
body.home #site-header,
body.home .site-header,
body.home .iw-header,
body.home .isfahanweb-header{
position:absolute !important;

top:0;
right:0;
left:0;

z-index:1000;

width:100% !important;
max-width:none !important;

background:transparent !important;

border-bottom:
1px solid rgba(13,39,51,.08) !important;

box-shadow:none !important;
}


/*
 * Give the actual inner header container the same visual width
 * as Hero rather than the previous small centered strip.
 */

body.home > header:first-of-type > *,
body.home #masthead > *,
body.home #site-header > *,
body.home .site-header > *,
body.home .iw-header > *,
body.home .isfahanweb-header > *{
max-width:1680px;

margin-inline:auto;
}


/* scrolled state remains usable */

body.home.iw102-header-scrolled > header:first-of-type,
body.home.iw102-header-scrolled #masthead,
body.home.iw102-header-scrolled #site-header,
body.home.iw102-header-scrolled .site-header,
body.home.iw102-header-scrolled .iw-header,
body.home.iw102-header-scrolled .isfahanweb-header{
position:fixed !important;

background:
rgba(255,255,255,.88) !important;

-webkit-backdrop-filter:
blur(18px);

backdrop-filter:
blur(18px);

box-shadow:
0 10px 38px rgba(13,39,51,.07) !important;
}


/* ==========================================================
   ONE-CANVAS COMPOSITION
========================================================== */

.iw10-hero-grid{
position:relative;

display:grid;

grid-template-columns:
repeat(12,minmax(0,1fr));

grid-template-rows:
auto auto auto;

column-gap:
clamp(12px,1.5vw,28px);

align-items:center;

min-height:
clamp(610px,73vh,790px);
}


/* ==========================================================
   COPY — PRIMARY FOCAL POINT
========================================================== */

.iw10-hero-copy{
position:relative;
z-index:20;

grid-column:7 / 13;
grid-row:1 / 4;

width:100%;
max-width:none;

padding:
clamp(30px,4vw,68px) 0;

transform:none !important;
}


/* eyebrow stays readable */

.iw10-hero-copy > small,
.iw10-hero-copy .iw10-eyebrow{
position:relative;
z-index:22;

display:inline-flex;

margin-bottom:
clamp(18px,2.4vh,28px);
}


/*
 * Main headline is now the composition.
 * No narrow-column H1.
 */

.iw10-hero h1{
position:relative;
z-index:22;

width:
min(108%,980px);

max-width:none;

margin:0;

font-size:
clamp(4.6rem,7.25vw,8.35rem);

font-weight:900;

line-height:.89;

letter-spacing:-.055em;

text-wrap:balance;

overflow:visible;

isolation:isolate;
}


/*
 * Remove old underline decoration.
 * It competed with Persian typography.
 */

.iw10-hero h1::after{
display:none !important;
}


/*
 * Any emphasis in the existing H1 remains typography,
 * not another detached block.
 */

.iw10-hero h1 em,
.iw10-hero h1 strong{
position:relative;

z-index:2;

width:auto;
max-width:none;

margin:0;

font-style:normal;
}


/* create a controlled orange editorial accent */

.iw10-hero h1 em::after,
.iw10-hero h1 strong::after{
content:"";

position:absolute;
z-index:-1;

right:-.05em;
left:-.04em;

bottom:.06em;

height:.11em;

border-radius:999px;

background:var(--orange);

opacity:.9;
}


/* Supporting copy remains clearly subordinate */

.iw10-hero-copy > p{
position:relative;
z-index:22;

max-width:590px;

margin-top:
clamp(25px,3.3vh,38px);

font-size:
clamp(.95rem,1.05vw,1.12rem);

line-height:2;

color:
rgba(13,39,51,.72);
}


/* CTA group */

.iw10-hero-actions,
.iw10-hero-copy .iw-actions{
position:relative;
z-index:24;

margin-top:
clamp(26px,3.5vh,42px);
}


/* ==========================================================
   PROJECT VISUAL — INSIDE THE SAME CANVAS
========================================================== */

.iw10-hero-art{
position:relative;
z-index:10;

grid-column:1 / 8;
grid-row:1 / 4;

width:118%;

height:
clamp(560px,69vh,760px);

margin:0;

transform:
translateX(-3.5vw);

perspective:1400px;
transform-style:preserve-3d;

overflow:visible;
}


/*
 * Main project browser.
 * Deliberately enters the typography zone.
 */

.iw10-browser{
position:absolute;

top:51%;
left:48%;

z-index:12;

width:
min(88%,760px);

height:
clamp(520px,63vh,690px);

margin:0;

transform:
translate(-50%,-50%)
rotate(-4.2deg);

transform-origin:center;

border-radius:
clamp(15px,1.4vw,24px);

box-shadow:
0 48px 110px
rgba(13,39,51,.24);

overflow:hidden;

will-change:transform;

transition:
transform .45s
cubic-bezier(.2,.75,.25,1),
box-shadow .45s ease;
}


/*
 * Force internal project image to cover its frame correctly
 * without text/asset accidental overflow.
 */

.iw10-browser img{
display:block;

width:100%;
height:100%;

object-fit:cover;
object-position:top center;
}


/* ==========================================================
   REDUCE OLD DECORATIVE NOISE
========================================================== */

/*
 * A1 used pseudo-elements for a second project card and badge.
 * A2 removes them.
 */

.iw10-hero-art::before,
.iw10-hero-art::after{
display:none !important;
}


/*
 * If older V10/V10.1 has a caption, keep one purposeful card.
 */

.iw10-hero-caption{
position:absolute;

z-index:30;

right:1.5%;
bottom:8%;

width:
clamp(210px,17vw,285px);

padding:
18px 20px;

border:
1px solid rgba(255,255,255,.45);

border-radius:15px;

background:
rgba(13,39,51,.92);

color:#fff;

box-shadow:
0 24px 55px
rgba(13,39,51,.2);

-webkit-backdrop-filter:
blur(14px);

backdrop-filter:
blur(14px);

transform:
rotate(2.5deg);

overflow:visible;
}


/* ==========================================================
   CONTROLLED DEPTH ELEMENT
========================================================== */

.iw10-hero-art .iw10-shape,
.iw10-hero-art .iw10-orbit{
opacity:.55;
}


/* ==========================================================
   CTA
========================================================== */

.iw10-hero .iw-btn{
position:relative;

z-index:1;

overflow:hidden;

transition:
transform .28s ease,
box-shadow .28s ease;
}

.iw10-hero .iw-btn:hover{
transform:translateY(-3px);

box-shadow:
0 16px 32px
rgba(13,39,51,.14);
}


/* remove A1 shine gimmick */

.iw10-hero .iw-btn::after{
display:none !important;
}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media(min-width:1450px){

.iw10-hero > .iw-shell,
.iw10-hero .iw-shell{
width:
min(100% - 72px,1760px);

max-width:1760px;
}

.iw10-hero-grid{
min-height:
clamp(650px,76vh,840px);
}

.iw10-hero-copy{
grid-column:7 / 13;
}

.iw10-hero-art{
grid-column:1 / 8;

width:121%;
}

.iw10-hero h1{
font-size:
clamp(6rem,7vw,9.2rem);
}

}


/* ==========================================================
   LAPTOP
========================================================== */

@media(min-width:901px) and (max-width:1099px){

.iw10-hero{
min-height:760px;
}

.iw10-hero > .iw-shell,
.iw10-hero .iw-shell{
width:
calc(100% - 36px);
}

.iw10-hero-grid{
min-height:610px;
}

.iw10-hero-copy{
grid-column:7 / 13;
}

.iw10-hero-art{
grid-column:1 / 8;

width:115%;
height:570px;

transform:translateX(-3vw);
}

.iw10-browser{
height:530px;
}

.iw10-hero h1{
font-size:
clamp(4rem,7vw,6.1rem);
}

}


/* ==========================================================
   TABLET / MOBILE — INDEPENDENT COMPOSITION
========================================================== */

@media(max-width:900px){

.iw10-hero{
min-height:auto;

padding-top:96px;
padding-bottom:72px;

overflow:hidden;
}

.iw10-hero > .iw-shell,
.iw10-hero .iw-shell{
width:
calc(100% - 32px);
}

.iw10-hero::before{
left:-.05em;
top:35%;

font-size:
clamp(11rem,48vw,22rem);

opacity:.8;
}

.iw10-hero::after{
display:none;
}

.iw10-hero-grid{
display:flex;

flex-direction:column;

min-height:0;

gap:38px;
}

.iw10-hero-copy{
order:1;

width:100%;

padding:24px 0 0;

transform:none !important;
}

.iw10-hero h1{
width:100%;
max-width:760px;

font-size:
clamp(3.25rem,11vw,6rem);

line-height:.92;

letter-spacing:-.045em;
}

.iw10-hero-copy > p{
max-width:650px;

margin-top:22px;

font-size:.95rem;

line-height:1.9;
}

.iw10-hero-art{
order:2;

width:100%;

height:
clamp(390px,68vw,570px);

margin:0;

transform:none !important;

perspective:none;
}

.iw10-browser{
top:50%;
left:50%;

width:
min(91%,690px);

height:
clamp(370px,64vw,535px);

transform:
translate(-50%,-50%)
rotate(-2deg);

border-radius:15px;

box-shadow:
0 28px 65px
rgba(13,39,51,.2);
}

.iw10-hero-caption{
right:2%;
bottom:3%;

width:
min(230px,58vw);

padding:14px 15px;

transform:rotate(1deg);
}

}


/* ==========================================================
   PHONE
========================================================== */

@media(max-width:600px){

.iw10-hero{
padding-top:82px;
padding-bottom:54px;
}

.iw10-hero > .iw-shell,
.iw10-hero .iw-shell{
width:
calc(100% - 24px);
}

.iw10-hero-grid{
gap:26px;
}

.iw10-hero-copy{
padding-top:18px;
}

.iw10-hero h1{
font-size:
clamp(3rem,13.5vw,4.7rem);

line-height:.91;
}

.iw10-hero-copy > p{
font-size:.89rem;

line-height:1.85;
}

.iw10-hero-art{
height:
clamp(330px,93vw,455px);
}

.iw10-browser{
width:94%;

height:
clamp(320px,89vw,430px);

transform:
translate(-50%,-50%)
rotate(-1.5deg);
}

.iw10-hero-caption{
right:0;
bottom:0;

width:min(205px,65vw);

font-size:.78rem;
}

}


/* ==========================================================
   VERY SMALL
========================================================== */

@media(max-width:390px){

.iw10-hero h1{
font-size:
clamp(2.75rem,13vw,3.6rem);
}

.iw10-hero-art{
height:315px;
}

.iw10-browser{
height:300px;
}

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

.iw10-browser,
.iw10-hero .iw-btn{
transition:none !important;
}

}