/*
 * NBA Visuals — styles.css
 * :root = culorile și fontul de bază.
 * .hero = prima secțiune; .prices / .pricecard = pachetele.
 * .real-story și clasele de mai jos = scenele animate.
 * @media = adaptarea pentru telefon și tabletă.
 */

:root {
    color-scheme: dark;
    --ink: #f5f8ff;
    --muted: #b7c5dc;
    --line: rgba(210,230,255,.18);
    --glass: rgba(17,31,57,.78);
    --mint: #91f1dc;
    --blue: #96baff;
    --font: Inter,Arial,sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px
}

body.new {
    margin: 0;
    background: #070e1d;
    color: var(--ink);
    font: 400 17px/1.7 var(--font);
    overflow-x: hidden
}

button,input,select,textarea {
    font: inherit
}

button,a {
    -webkit-tap-highlight-color: transparent
}

a {
    color: inherit;
    text-decoration: none
}

button {
    cursor: pointer
}

img {
    display: block;
    max-width: 100%
}

h1,h2,h3,p {
    margin-top: 0
}

h1,h2,h3 {
    font-family: var(--font);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.15
}

p {
    color: var(--muted)
}

:focus-visible {
    outline: 3px solid var(--mint);
    outline-offset: 5px
}

::selection {
    background: var(--mint);
    color: #081624
}

.nw {
    width: min(1180px,calc(100% - 64px));
    margin-inline: auto
}

.announcement {
    display: none
}

.ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: radial-gradient(ellipse at 70% 15%,#142c53 0%,#070e1d 65%)
}

.ambient svg {
    width: 100%;
    height: 100%;
    opacity: .65
}

.ambient:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(5,12,25,.65),transparent 80%)
}

.scroll-track {
    position: fixed;
    left: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg,var(--mint),#94a9ff);
    width: 0;
    z-index: 100
}

.new header {
    position: sticky;
    top: 18px;
    margin: 18px auto 0;
    width: min(1280px,calc(100% - 36px));
    z-index: 30;
    border: 1px solid var(--line);
    background: rgba(16,29,51,.76);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-radius: 24px;
    box-shadow: inset 0 1px 0 #ffffff20,0 12px 40px #0003
}

.new nav.nw {
    width: 100%;
    padding: 15px 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -.025em;
    white-space: nowrap
}

.brand small {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .15em;
    color: var(--muted)
}

.mark {
    width: 39px;
    height: 39px;
    border: 1px solid #ffffff50;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg,#91f1dc35,#7498ff16);
    font-size: 11px;
    letter-spacing: .02em;
    color: var(--mint)
}

.navlinks {
    list-style: none;
    display: flex;
    gap: 22px;
    padding: 0;
    margin: 0
}

.navlinks a {
    font-size: 13px;
    color: #d9e5f7
}

.navlinks a:hover {
    color: var(--mint)
}

.actions {
    display: flex;
    align-items: center;
    gap: 14px
}

.language {
    background: transparent;
    color: #fff;
    border: 0;
    font-size: 13px;
    padding: 8px
}

.language option {
    background: #17263e
}

.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 13px 23px;
    border: 1px solid #ffffff30;
    border-radius: 15px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    transition: transform .25s,background .25s,box-shadow .25s
}

.cta:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.15);
    box-shadow: 0 12px 30px #0002
}

.cta.lime,.pricecard.feature .cta {
    background: linear-gradient(125deg,#a3f5e5,#a3c9ff);
    border-color: #d8ffff80;
    color: #0a2334;
    box-shadow: 0 4px 26px #85deed22
}

.cta.ghost {
    background: rgba(22,40,68,.7)
}

.menu {
    display: none;
    color: white;
    background: none;
    border: 0;
    font-size: 24px
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mint);
    font-weight: 600;
    line-height: 1.6
}

.eyebrow:before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 14px #91f1dc80
}

.hero {
    padding: 84px 0 72px
}

.herohead {
    display: flex;
    justify-content: space-between;
    gap: 30px
}

.herohead p {
    max-width: 270px;
    font-size: 14px
}

.hero h1 {
    font-size: clamp(48px,6.8vw,88px);
    max-width: 900px;
    margin: 22px 0 30px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.055em
}

.hero h1 em {
    font-style: normal;
    color: var(--mint)
}

.herobottom {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    align-items: center;
    gap: 50px
}

.herocopy p {
    font-size: 18px;
    max-width: 450px
}

.heroactions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px
}

.collage {
    height: 350px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 12px;
    position: relative;
    padding: 12px;
    border-radius: 30px;
    border: 1px solid #ffffff35;
    background: linear-gradient(135deg,#ffffff12,#ffffff04);
    backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 0 #ffffff24,0 30px 80px #0003;
    transform: rotate(2deg);
    transition: transform .5s
}

.collage:hover {
    transform: rotate(0)
}

.shot {
    position: relative;
    overflow: hidden;
    border-radius: 19px;
    background: #1a2c46;
    cursor: pointer
}

.shot img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .7s
}

.shot:hover img {
    transform: scale(1.06)
}

.shot:after {
    content: "";
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(transparent,#040b18dd)
}

.shotlabel {
    position: absolute;
    bottom: 14px;
    left: 14px;
    right: 12px;
    font-size: 10px;
    letter-spacing: .06em;
    color: #fff;
    z-index: 1
}

.play,.cardplay {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 1px solid #ffffff70;
    border-radius: 50%;
    background: #f4ffffe6;
    color: #102439;
    display: grid;
    place-items: center;
    font-size: 14px;
    cursor: pointer
}

.side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    min-height: 0;
    gap: 12px
}

.stamp {
    position: absolute;
    z-index: 3;
    left: 45%;
    top: 44%;
    height: 64px;
    width: 64px;
    background: rgba(166,240,233,.9);
    color: #102b3e;
    border: 1px solid #fff9;
    backdrop-filter: blur(15px);
    border-radius: 20px;
    display: grid;
    place-items: center;
    font-size: 10px;
    text-align: center;
    line-height: 1.3;
    transform: rotate(-10deg)
}

.ticker {
    overflow: hidden;
    border-block: 1px solid var(--line);
    padding: 20px 0;
    background: #0c192d99
}

.ticker>div {
    display: flex;
    width: max-content;
    animation: marquee 35s linear infinite
}

.ticker span {
    white-space: nowrap;
    padding: 0 25px;
    font-size: 12px;
    letter-spacing: .14em;
    color: #d5e2f3
}

.ticker b {
    padding-left: 45px;
    color: var(--mint)
}

@keyframes marquee {
    to {
        transform: translateX(-50%)
    }

}

.pad {
    padding: 94px 0
}

.intro {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 80px;
    align-items: center
}

.intro h2 {
    font-size: clamp(32px,3.9vw,49px);
    margin: 22px 0 0
}

.intro h2 span {
    color: var(--mint)
}

.introcopy p {
    font-size: 17px;
    line-height: 1.85
}

.flow {
    border-top: 1px solid var(--line);
    padding-top: 23px;
    font-size: 12px;
    letter-spacing: .07em
}

.flow i {
    color: var(--mint);
    padding: 0 13px;
    font-style: normal
}

.sectionhead {
    display: flex;
    justify-content: space-between;
    gap: 45px;
    align-items: end;
    margin-bottom: 36px
}

.sectionhead h2 {
    font-size: clamp(32px,3.8vw,48px);
    margin: 16px 0 0;
    max-width: 760px
}

.sectionhead>p {
    max-width: 300px;
    margin-bottom: 0;
    font-size: 16px
}

.services {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 16px
}

.service,.pricecard,.person,.form {
    border: 1px solid var(--line);
    background: var(--glass);
    border-radius: 24px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 #ffffff12,0 20px 55px #0002
}

.service {
    padding: 29px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    transition: transform .25s,border-color .25s
}

.service:hover {
    transform: translateY(-5px);
    border-color: #91f1dc70
}

.service small {
    color: var(--mint);
    font-size: 11px;
    letter-spacing: .08em
}

.service h3 {
    font-size: 23px;
    line-height: 1.3;
    margin: 38px 0 12px;
    letter-spacing: -.025em
}

.service p {
    font-size: 16px;
    margin: 0
}

.service b {
    align-self: end;
    color: var(--mint);
    font-weight: 400;
    margin-top: auto
}

.process {
    padding: 95px 0;
    background: rgba(7,16,32,.4);
    border-block: 1px solid var(--line)
}

.story-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 65px;
    margin-top: 50px
}

.story-visual {
    position: sticky;
    top: 130px;
    border: 1px solid #b6e0ff40;
    background: linear-gradient(145deg,#1c355b99,#13223ab3);
    border-radius: 32px;
    padding: 22px;
    box-shadow: inset 0 1px 1px #ffffff30,0 30px 70px #0003;
    backdrop-filter: blur(24px)
}

.story-visual svg {
    display: block;
    width: 100%;
    height: auto
}

.story-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #d0e0f8;
    padding: 12px
}

.story-caption span:first-child {
    color: var(--mint)
}

.steps {
    display: grid;
    gap: 0
}

.step {
    min-height: 260px;
    padding: 42px 0 42px 24px;
    border-left: 2px solid #ffffff20;
    transition: border-color .4s
}

.step.active {
    border-color: var(--mint)
}

.step small {
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--mint)
}

.step h3 {
    font-size: 26px;
    margin: 20px 0 14px
}

.step p {
    font-size: 17px;
    max-width: 380px
}

.stage-panel {
    opacity: 0;
    transition: opacity .65s,transform .65s;
    transform-origin: 250px 200px;
    transform: scale(.85)
}

.stage-panel.active {
    opacity: 1;
    transform: scale(1)
}

.lens-ring {
    transform-origin: 250px 200px;
    animation: orbit 24s linear infinite
}

@keyframes orbit {
    to {
        transform: rotate(360deg)
    }

}

.work {
    background: rgba(9,19,36,.3)
}

.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 26px
}

.filter {
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #14243bbf;
    color: #cbd8eb;
    padding: 11px 18px;
    font-size: 14px
}

.filter.active,.filter:hover {
    color: #102338;
    background: #a5e8de;
    border-color: #bbfff3
}

.grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px
}

.card {
    position: relative;
    aspect-ratio: 1/1.05;
    overflow: hidden;
    border-radius: 23px;
    background: #17283e;
    border: 1px solid #ffffff25;
    cursor: pointer
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s
}

.card:hover img {
    transform: scale(1.05)
}

.card:after {
    content: "";
    position: absolute;
    inset: 30% 0 0;
    background: linear-gradient(transparent,#030b19f5)
}

.cardinfo {
    position: absolute;
    z-index: 1;
    left: 22px;
    right: 20px;
    bottom: 18px
}

.cardinfo small {
    font-size: 11px;
    color: var(--mint);
    letter-spacing: .08em
}

.cardinfo h3 {
    font-size: 23px;
    margin: 7px 0 0;
    letter-spacing: -.02em
}

.hidden {
    display: none!important
}

.prices {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px
}

.pricecard {
    padding: 28px;
    display: flex;
    flex-direction: column;
    position: relative
}

.pricecard.feature {
    background: linear-gradient(160deg,#244c58e6,#1b2a4bed);
    border-color: #a6f4de80;
    box-shadow: 0 15px 55px #4cc4c312,inset 0 1px 0 #ffffff30
}

.kicker {
    font-size: 11px;
    letter-spacing: .08em;
    line-height: 1.5;
    color: var(--mint)
}

.pricecard h3 {
    font-size: 26px;
    margin: 22px 0
}

.amount {
    font-size: 48px;
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1.2;
    color: white;
    margin: 0 0 16px
}

.amount em {
    font-style: normal;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--muted)
}

.desc {
    font-size: 16px;
    line-height: 1.7;
    min-height: 82px
}

.pricecard ul {
    list-style: none;
    padding: 20px 0 0;
    margin: 0 0 26px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 13px
}

.pricecard li {
    font-size: 15px;
    line-height: 1.6;
    color: #d5dfef;
    padding-left: 20px;
    position: relative
}

.pricecard li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--mint)
}

.pricecard .cta {
    margin-top: auto
}

.contract {
    padding: 13px 15px;
    margin: 0 0 18px;
    background: #081b3380;
    border: 1px solid #c2f9ff30;
    border-radius: 12px;
    font-size: 14px;
    color: #ebf8ff;
    line-height: 1.6
}

.notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line)
}

.notes p {
    font-size: 14px
}

.notes strong {
    color: #f6f9ff
}

.talent {
    padding: 80px 0;
    background: linear-gradient(120deg,#17415280,#1c285d70);
    border-block: 1px solid var(--line)
}

.talentgrid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 80px;
    align-items: center
}

.talent h2 {
    font-size: clamp(32px,3.8vw,46px);
    margin: 20px 0
}

.talent p {
    font-size: 17px
}

.talentlist {
    border-top: 1px solid var(--line)
}

.talentlist div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px
}

.talentlist b {
    font-weight: 500
}

.talentlist i {
    font-style: normal;
    color: var(--mint);
    font-size: 12px
}

.team {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.person {
    padding: 32px;
    min-height: 175px;
    display: flex;
    justify-content: center;
    flex-direction: column
}

.person small {
    font-size: 11px;
    color: var(--mint);
    letter-spacing: .07em
}

.person h3 {
    font-size: 25px;
    margin: 15px 0 0
}

.contact {
    padding: 100px 0;
    background: #08142666
}

.contactgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px
}

.contact h2 {
    font-size: clamp(40px,5vw,64px);
    margin: 22px 0
}

.contactcopy>p {
    font-size: 18px
}

.details {
    display: grid;
    gap: 20px;
    margin-top: 36px
}

.details span {
    display: block;
    font-size: 12px;
    color: var(--mint);
    margin-bottom: 6px
}

.details a,.details strong {
    font-size: 17px;
    font-weight: 500
}

.form {
    padding: 30px;
    display: grid;
    gap: 20px
}

.form label {
    font-size: 14px;
    color: #ecf3ff
}

.form input,.form textarea,.form select {
    display: block;
    width: 100%;
    margin-top: 9px;
    padding: 13px 14px;
    background: #06112270;
    border: 1px solid #ffffff26;
    border-radius: 12px;
    color: white;
    font-size: 16px;
    outline: none
}

.form select option {
    background: #14243e
}

.form input:focus,.form textarea:focus,.form select:focus {
    border-color: var(--mint)
}

.form input::placeholder {
    color: #8f9fb9
}

.form textarea {
    min-height: 110px;
    resize: vertical
}

.form button {
    justify-self: start
}

.footer {
    padding: 30px 0;
    background: #050e1dcc;
    border-top: 1px solid var(--line)
}

.foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    color: var(--muted);
    font-size: 12px
}

.foot .brand {
    color: white
}

.foot>a:last-child {
    color: var(--mint)
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    place-items: center;
    background: #030917e8;
    backdrop-filter: blur(20px);
    padding: 24px
}

.modal.open {
    display: grid
}

.frame {
    width: min(100%,1000px);
    aspect-ratio: 16/9;
    background: black;
    position: relative
}

.frame iframe {
    width: 100%;
    height: 100%;
    border: 0
}

.close {
    position: absolute;
    right: 0;
    top: -52px;
    width: 40px;
    height: 40px;
    border: 1px solid #fff8;
    border-radius: 50%;
    background: #13243f;
    color: white;
    font-size: 24px
}

.reveal {
    opacity: 1;
    transform: none
}

.motion-enabled .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s,transform .7s
}

.motion-enabled .reveal.on {
    opacity: 1;
    transform: none
}

.motion-toggle {
    position: fixed;
    bottom: 18px;
    right: 18px;
    z-index: 35;
    border: 1px solid #ffffff30;
    background: #15253ddd;
    backdrop-filter: blur(15px);
    border-radius: 30px;
    color: #e1edff;
    padding: 10px 16px;
    font-size: 12px
}

@media(max-width:1050px) {
    .navlinks {
        gap: 14px
    }

    .navlinks a {
        font-size: 12px
    }

    .actions>.cta {
        display: none
    }

    .herobottom {
        gap: 30px
    }

    .pricecard {
        padding: 23px
    }

    .amount {
        font-size: 42px
    }

    .story-layout {
        gap: 35px
    }

    .contactgrid {
        gap: 40px
    }

}

@media(max-width:760px) {
    .nw {
        width: calc(100% - 36px)
    }

    .new header {
        top: 10px;
        width: calc(100% - 20px);
        margin-top: 10px;
        border-radius: 20px
    }

    .new nav.nw {
        padding: 12px 15px;
        gap: 12px
    }

    .brand {
        font-size: 16px
    }

    .brand small {
        font-size: 8px
    }

    .mark {
        width: 34px;
        height: 34px
    }

    .navlinks {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 75px;
        background: #14243df5;
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 18px;
        flex-direction: column;
        gap: 0
    }

    .open-menu .navlinks {
        display: flex
    }

    .navlinks a {
        display: block;
        padding: 13px;
        font-size: 17px
    }

    .menu {
        display: block
    }

    .actions {
        margin-left: auto
    }

    .hero {
        padding: 55px 0
    }

    .herohead>p {
        display: none
    }

    .hero h1 {
        font-size: clamp(40px,9.8vw,65px);
        line-height: 1.12;
        letter-spacing: -.045em;
        margin: 24px 0
    }

    .herohead .eyebrow {
        font-size: 10px;
        letter-spacing: .07em
    }

    .herobottom {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .herocopy p {
        font-size: 17px
    }

    .heroactions {
        margin-top: 22px
    }

    .collage {
        height: 330px;
        transform: none
    }

    .pad {
        padding: 65px 0
    }

    .intro,.talentgrid,.contactgrid {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .intro h2 {
        font-size: 34px
    }

    .sectionhead {
        display: block;
        margin-bottom: 28px
    }

    .sectionhead h2 {
        font-size: 34px;
        margin-bottom: 20px
    }

    .sectionhead>p {
        max-width: 100%
    }

    .services {
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    .service {
        padding: 22px;
        min-height: 245px
    }

    .service h3 {
        font-size: 21px;
        margin-top: 28px
    }

    .service p {
        font-size: 15px
    }

    .process {
        padding: 65px 0
    }

    .story-layout {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .story-visual {
        top: 95px;
        z-index: 2;
        width: 100%;
        padding: 12px;
        background: rgba(16,34,57,.95)
    }

    .story-visual svg {
        height: 220px
    }

    .story-caption {
        padding: 6px 10px;
        font-size: 11px
    }

    .step {
        min-height: 260px;
        padding: 45px 0 45px 20px
    }

    .step h3 {
        font-size: 25px
    }

    .grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px
    }

    .card {
        aspect-ratio: .8/1
    }

    .cardinfo {
        left: 13px;
        right: 10px;
        bottom: 15px
    }

    .cardinfo h3 {
        font-size: 18px
    }

    .cardinfo small {
        font-size: 9px
    }

    .prices {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .pricecard {
        padding: 28px
    }

    .desc {
        min-height: 0
    }

    .pricecard li {
        font-size: 16px
    }

    .amount {
        font-size: 48px
    }

    .notes {
        grid-template-columns: 1fr;
        gap: 5px
    }

    .talent {
        padding: 65px 0
    }

    .talent h2 {
        font-size: 34px
    }

    .team {
        grid-template-columns: 1fr
    }

    .contact {
        padding: 65px 0
    }

    .contact h2 {
        font-size: 44px
    }

    .form {
        padding: 24px
    }

    .foot {
        flex-wrap: wrap;
        padding-bottom: 45px
    }

    .foot>span {
        order: 3;
        width: 100%
    }

    .motion-toggle {
        font-size: 11px;
        padding: 9px 13px
    }

    .ticker span {
        font-size: 11px
    }

}

@media(max-width:420px) {
    .services {
        grid-template-columns: 1fr
    }

    .service {
        min-height: 200px
    }

    .grid {
        grid-template-columns: 1fr
    }

    .card {
        aspect-ratio: 1.1/1
    }

    .collage {
        height: 300px
    }

    .heroactions .cta {
        font-size: 13px;
        padding: 13px 16px
    }

    .language {
        padding: 4px;
        font-size: 12px
    }

    .brand {
        font-size: 14px
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .ticker>div,.lens-ring {
        animation: none!important
    }

    .reveal,.motion-enabled .reveal {
        opacity: 1;
        transform: none;
        transition: none
    }

    .stage-panel,.collage,.cta,.shot img {
        transition: none
    }

}

body.paused .ticker>div,body.paused .lens-ring {
    animation-play-state: paused
}

/* Cinematic objects and real portfolio imagery */
.real-story {
    padding: 0;
    background: radial-gradient(ellipse at 40% 20%,#23374e,#0b1423 75%);
    overflow: hidden;
    box-shadow: inset 0 1px 0 #fff3,0 30px 70px #0006
}

.real-stage {
    position: relative;
    aspect-ratio: 1.17;
    isolation: isolate;
    perspective: 1100px;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 45%,#3d657829,transparent 65%)
}

.real-stage:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 30px;
    background: linear-gradient(120deg,#a0dcff0a,transparent 45%,#090d1733);
    z-index: 6
}

.real-panel {
    --scene-progress: .5;
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px) scale(.93);
    transition: opacity .65s,transform .9s cubic-bezier(.2,.7,.2,1),visibility .65s;
    pointer-events: none
}

.real-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1)
}

.object-floor {
    position: absolute;
    bottom: 6%;
    left: 15%;
    width: 70%;
    height: 8%;
    background: #0009;
    filter: blur(14px);
    border-radius: 50%;
    z-index: -1
}

.camera-object {
    position: absolute;
    width: 78%;
    height: 60%;
    left: 11%;
    top: 23%;
    transform-style: preserve-3d;
    transform: rotateX(calc(8deg - var(--scene-progress)*6deg)) rotateY(calc(-21deg + var(--scene-progress)*30deg)) rotateZ(-6deg);
    filter: drop-shadow(18px 25px 12px #0007)
}

.camera-body {
    position: absolute;
    inset: 13% 0 10%;
    border-radius: 21px 23px 21px 17px;
    background: repeating-linear-gradient(12deg,#fff0 0 1px,#ffffff03 1px 2px),linear-gradient(120deg,#3c4148 0%,#15191d 20%,#24292c 55%,#101316 86%);
    border: 1px solid #737e8590;
    box-shadow: inset 0 3px 2px #b9c8ce55,inset -9px -7px 15px #0009,11px 8px 0 #0b1016,12px 9px 0 #5c636c50
}

.camera-top {
    position: absolute;
    width: 38%;
    height: 20%;
    left: 30%;
    top: 3%;
    border-radius: 14px 14px 2px 2px;
    background: linear-gradient(135deg,#4c565f,#12171d);
    clip-path: polygon(12% 0,83% 0,100% 100%,0 100%);
    box-shadow: inset 0 2px 0 #fff5
}

.camera-grip {
    position: absolute;
    left: 0;
    top: 0;
    width: 20%;
    height: 100%;
    border-radius: 19px 10px 15px 17px;
    background: repeating-radial-gradient(ellipse at 0 0,#2d3033 0 1px,#171b1e 2px 3px);
    box-shadow: inset 4px 0 8px #ffffff14,7px 0 9px #0007
}

.camera-brand {
    position: absolute;
    left: 45%;
    top: 6%;
    color: #d8e0e3;
    font: 600 13px Inter,Arial;
    letter-spacing: .15em
}

.camera-spec {
    position: absolute;
    right: 5%;
    bottom: 12%;
    font: 7px Inter,Arial;
    color: #a0a6aa;
    letter-spacing: .1em
}

.camera-button {
    position: absolute;
    right: 7%;
    top: -7%;
    width: 11%;
    height: 8%;
    border-radius: 50%;
    background: linear-gradient(#8b949d,#272b30);
    box-shadow: 0 3px 0 #0c1014
}

.lens-barrel {
    position: absolute;
    width: 64%;
    aspect-ratio: 1;
    left: 19%;
    top: 4%;
    border-radius: 50%;
    transform: translateZ(45px);
    background: linear-gradient(135deg,#575f66,#0a0d12 60%,#424a53);
    padding: 3.6%;
    box-shadow: 0 0 0 1px #b6c2c455,13px 14px 14px #0009,inset 0 0 0 5px #171c22
}

.lens-rim {
    height: 100%;
    border-radius: 50%;
    padding: 6%;
    background: repeating-conic-gradient(#4d545b 0deg 1deg,#181e24 1deg 3deg);
    box-shadow: inset 0 0 5px #000,0 0 0 2px #0d1117
}

.lens-focus {
    height: 100%;
    padding: 4%;
    border-radius: 50%;
    background: linear-gradient(130deg,#879099,#151b20 35%,#3f464d 65%,#969da4);
    box-shadow: 0 0 0 3px #05080c,0 0 0 4px #858e9433
}

.lens-metal {
    height: 100%;
    border-radius: 50%;
    padding: 8%;
    background: radial-gradient(circle,#070b12 59%,#303b42 60%,#070a0e 64%,#606970 66%,#151c23 69%);
    box-shadow: inset 0 1px 4px #000
}

.lens-glass {
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 45% 35%,#27576c,#091126 58%,#020609 75%);
    box-shadow: inset 0 0 14px 6px #000,0 0 0 1px #2aa7a14d
}

.lens-glass img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .21;
    transform: scale(1.8) rotate(8deg);
    filter: blur(2px) saturate(.7)
}

.lens-aperture {
    position: absolute;
    inset: 26%;
    border-radius: 50%;
    background: radial-gradient(circle,#01040b 0 50%,#1f554a33 53%,#81c1bf22 55%,#07101a 60%);
    box-shadow: 0 0 8px #0e87ad22
}

.lens-coating {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background: conic-gradient(from calc(35deg + var(--scene-progress)*70deg),transparent,#39daca26,transparent 35%,#7961fb40 55%,transparent 74%,#2de5c317);
    box-shadow: inset 3px 4px 9px #80aadc33
}

.lens-highlight {
    position: absolute;
    left: 20%;
    top: 11%;
    width: 39%;
    height: 19%;
    border-radius: 50%;
    background: linear-gradient(165deg,#fff9,#c9ecff11 70%);
    filter: blur(2px);
    transform: rotate(-40deg)
}

.lens-engraving {
    position: absolute;
    bottom: 3.5%;
    left: 0;
    right: 0;
    text-align: center;
    font: 8px Inter,Arial;
    color: #bac4cd;
    letter-spacing: .12em
}

.capture-window {
    position: absolute;
    inset: 12% 7% 21%;
    border: 1px solid #bdc7ce60;
    border-radius: 15px;
    overflow: hidden;
    background: #09121e;
    box-shadow: 0 20px 40px #0007;
    transform: rotateY(calc(-6deg + var(--scene-progress)*12deg))
}

.capture-image,.editor-preview>img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: scale(calc(1.12 + var(--scene-progress)*.13)) translateX(calc(-2% + var(--scene-progress)*4%))
}

.capture-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(#0007,transparent 40%,transparent 60%,#0009)
}

.capture-top,.capture-bottom {
    position: absolute;
    left: 6%;
    right: 6%;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font: 9px Inter,Arial;
    letter-spacing: .04em;
    text-shadow: 0 1px 4px #000
}

.capture-top {
    top: 7%
}

.capture-bottom {
    bottom: 7%;
    justify-content: space-between;
    font-size: 8px
}

.capture-time {
    margin-left: auto
}

.rec-dot {
    width: 6px;
    height: 6px;
    background: #ff584d;
    border-radius: 50%;
    box-shadow: 0 0 10px #ff463b80
}

.focus-mark {
    position: absolute;
    left: 37%;
    top: 31%;
    width: 26%;
    height: 37%;
    background: linear-gradient(#fff,#fff) left top/10px 1px no-repeat,linear-gradient(#fff,#fff) right top/10px 1px no-repeat,linear-gradient(#fff,#fff) left bottom/10px 1px no-repeat,linear-gradient(#fff,#fff) right bottom/10px 1px no-repeat;
    border-inline: 1px solid #ffffff70;
    opacity: .85
}

.contact-sheet {
    position: absolute;
    bottom: 7%;
    left: 20%;
    right: 20%;
    display: flex;
    gap: 9px;
    transform: translateY(calc(12px - var(--scene-progress)*18px)) rotate(-3deg)
}

.contact-sheet>div {
    width: 33%;
    height: 58px;
    background: #1c2631;
    padding: 4px;
    border: 1px solid #c8d2d340;
    box-shadow: 0 7px 12px #0007;
    border-radius: 5px
}

.contact-sheet img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.edit-workstation {
    position: absolute;
    inset: 13% 6% 16%;
    border-radius: 12px;
    border: 1px solid #9eacbc66;
    background: linear-gradient(140deg,#26303e,#0d1520);
    box-shadow: inset 0 1px 0 #fff3,0 24px 36px #0009;
    overflow: hidden;
    transform: rotateX(4deg) rotateY(calc(-7deg + var(--scene-progress)*12deg))
}

.editor-top {
    height: 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4%;
    font: 7px Inter,Arial;
    color: #a5b4c7;
    border-bottom: 1px solid #ffffff12
}

.window-dots {
    display: flex;
    gap: 4px
}

.window-dots i {
    width: 4px;
    height: 4px;
    background: #637286;
    border-radius: 50%
}

.editor-upper {
    height: 53%;
    display: flex;
    gap: 9px;
    padding: 10px
}

.editor-library {
    width: 19%;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.editor-library img {
    width: 100%;
    height: 30%;
    object-fit: cover;
    border: 1px solid #ffffff15;
    border-radius: 2px
}

.editor-preview {
    width: 72%;
    overflow: hidden;
    position: relative;
    background: #000
}

.preview-corner {
    position: absolute;
    inset: 12%;
    border: 1px solid #ffffff40
}

.editor-meters {
    width: 5%;
    display: flex;
    gap: 2px;
    align-items: end;
    padding-bottom: 10px
}

.editor-meters i {
    width: 3px;
    height: 70%;
    background: linear-gradient(#e8bf60 5%,#93d2a7 20%,#248f6d 90%);
    transform: scaleY(calc(.4 + var(--scene-progress)*.6));
    transform-origin: bottom
}

.editor-meters i:nth-child(even) {
    height: 54%
}

.timeline-ruler {
    height: 7%;
    margin: 0 5%;
    display: flex;
    justify-content: space-between;
    font: 6px Inter,Arial;
    color: #8b9caf
}

.edit-timeline {
    height: 25%;
    position: relative;
    margin: 0 5%;
    background: repeating-linear-gradient(90deg,transparent 0 22px,#ffffff06 22px 23px);
    border-top: 1px solid #ffffff15
}

.video-track {
    display: flex;
    gap: 3px;
    height: 45%;
    padding-top: 5px
}

.video-track img {
    width: 32.5%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #87a8dfaa;
    border-radius: 3px
}

.title-track {
    height: 14%;
    display: flex;
    gap: 5px;
    margin-top: 4px
}

.title-track i {
    width: 24%;
    background: #b29ed3;
    border-radius: 2px
}

.title-track i+ i {
    width: 40%
}

.audio-track {
    height: 18%;
    margin-top: 4px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg,#7ccbb5 0 1px,#2e7b6e 1px 3px);
    clip-path: polygon(0 40%,3% 15%,6% 40%,9% 5%,13% 35%,17% 20%,20% 45%,25% 10%,30% 25%,35% 0,40% 30%,45% 10%,50% 35%,55% 20%,60% 5%,65% 40%,70% 15%,75% 30%,80% 10%,85% 40%,90% 0,95% 30%,100% 15%,100% 85%,95% 70%,90% 100%,85% 60%,80% 90%,75% 70%,70% 85%,65% 60%,60% 95%,55% 80%,50% 65%,45% 90%,40% 70%,35% 100%,30% 75%,25% 90%,20% 55%,17% 80%,13% 65%,9% 95%,6% 60%,3% 85%,0 60%)
}

.timeline-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #eefaff;
    left: calc(8% + var(--scene-progress)*83%);
    box-shadow: 0 0 6px #fff8
}

.timeline-playhead:before {
    content: "";
    position: absolute;
    left: -3px;
    top: -4px;
    border: 4px solid transparent;
    border-top-color: #e4f4ff
}

.social-phone {
    position: absolute;
    left: 31%;
    top: 6%;
    width: 39%;
    height: 86%;
    border-radius: 29px;
    padding: 5px;
    background: linear-gradient(115deg,#c1c5cc,#3a414e 8%,#141a22 40%,#87929b 98%);
    box-shadow: inset 0 0 0 1px #c9d4df88,13px 18px 26px #0009,-3px 0 0 #070a10;
    transform: rotateY(calc(-20deg + var(--scene-progress)*32deg)) rotateZ(calc(-8deg + var(--scene-progress)*10deg))
}

.phone-screen {
    position: relative;
    border: 3px solid #05080d;
    border-radius: 25px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #05080e
}

.phone-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.3) translateX(calc(-5% + var(--scene-progress)*10%))
}

.phone-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(#0006,transparent 35%,#0002 55%,#000c)
}

.phone-island {
    position: absolute;
    top: 8px;
    left: 31%;
    width: 38%;
    height: 13px;
    background: #05070b;
    border-radius: 20px
}

.phone-clock {
    position: absolute;
    top: 10px;
    left: 10px;
    font: 7px Inter,Arial;
    color: #fff
}

.reel-brand {
    position: absolute;
    bottom: 14%;
    left: 8%;
    display: flex;
    align-items: center;
    gap: 6px;
    font: 9px Inter,Arial;
    color: white
}

.reel-brand small {
    display: block;
    font-size: 7px;
    margin-top: 3px;
    opacity: .75
}

.reel-avatar {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid #fff8;
    border-radius: 50%;
    font-size: 6px;
    background: #13202e80
}

.reel-title {
    position: absolute;
    top: 37%;
    left: 10%;
    font: 500 clamp(20px,2.5vw,36px)/1.05 Inter,Arial;
    color: #fff;
    letter-spacing: -.05em;
    text-shadow: 0 3px 10px #0005
}

.reel-controls {
    position: absolute;
    right: 7%;
    bottom: 28%;
    display: grid;
    gap: 11px;
    font-size: 21px;
    color: white;
    line-height: 1
}

.reel-progress {
    position: absolute;
    bottom: 8%;
    left: 8%;
    right: 8%;
    height: 2px;
    background: #ffffff40
}

.reel-progress i {
    display: block;
    width: calc(10% + var(--scene-progress)*80%);
    height: 100%;
    background: #fff
}

.phone-home {
    position: absolute;
    bottom: 5px;
    left: 33%;
    width: 34%;
    height: 3px;
    border-radius: 10px;
    background: #fff
}

.phone-aura {
    position: absolute;
    inset: 15% 15% 15%;
    border-radius: 50%;
    background: #61a6cb16;
    filter: blur(25px)
}

.published-card {
    position: absolute;
    bottom: 16%;
    right: 6%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border: 1px solid #c4e7e359;
    border-radius: 12px;
    background: #243b4aed;
    box-shadow: 0 10px 20px #0005;
    color: #f3fbff;
    font: 10px Inter,Arial;
    transform: translateY(calc(15px - var(--scene-progress)*25px));
    backdrop-filter: blur(12px)
}

.published-card small {
    display: block;
    font-size: 7px;
    color: #a8bfce;
    margin-top: 4px
}

.published-check {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #95e5cd;
    color: #163e32;
    font-size: 13px
}

.real-story .story-caption {
    padding: 15px 20px 9px;
    gap: 12px;
    font-size: 12px;
    background: #08132299;
    border-top: 1px solid #cbe8ff14
}

.scene-dots {
    display: flex;
    gap: 6px;
    padding: 0 20px 17px;
    background: #08132299
}

.scene-dots i {
    width: 19px;
    height: 3px;
    border-radius: 10px;
    background: #ffffff24;
    transition: background .5s,width .5s
}

.scene-dots i.active {
    width: 38px;
    background: #a2eddb
}

@media(max-width:760px) {
    .real-story {
        padding: 0
    }

    .real-stage {
        aspect-ratio: 1.45;
        max-height: 260px
    }

    .camera-object {
        width: 68%;
        left: 16%;
        top: 19%
    }

    .contact-sheet>div {
        height: 42px
    }

    .capture-window {
        inset: 7% 12% 23%
    }

    .contact-sheet {
        bottom: 5%
    }

    .social-phone {
        left: 36%;
        width: 29%;
        height: 90%;
        top: 4%;
        border-radius: 21px
    }

    .phone-screen {
        border-radius: 17px
    }

    .phone-island {
        height: 9px;
        top: 5px
    }

    .phone-clock {
        top: 6px;
        font-size: 5px
    }

    .reel-brand {
        font-size: 7px;
        gap: 3px
    }

    .reel-brand small {
        font-size: 6px
    }

    .reel-avatar {
        width: 16px;
        height: 16px;
        font-size: 5px
    }

    .reel-controls {
        font-size: 15px;
        gap: 7px
    }

    .reel-title {
        font-size: 23px
    }

    .published-card {
        right: 12%;
        font-size: 9px;
        padding: 8px 10px
    }

    .real-story .story-caption {
        font-size: 10px;
        padding: 10px 14px 6px
    }

    .scene-dots {
        padding: 0 14px 12px
    }

    .edit-workstation {
        inset: 9% 9% 12%
    }

}

@media(prefers-reduced-motion:reduce) {
    .real-panel,.scene-dots i {
        transition: none
    }

    .camera-object,.capture-window,.edit-workstation,.social-phone,.contact-sheet,.published-card {
        transform: none!important
    }

    .capture-image,.phone-photo,.editor-preview>img {
        transform: none!important
    }

}

body.paused .real-panel {
    transition: none
}

body.paused .camera-object,body.paused .capture-window,body.paused .social-phone,body.paused .edit-workstation,body.paused .contact-sheet,body.paused .published-card {
    transform: none
}

@media(min-width:761px) {
    .prices {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

}

.digital {
    border-color: #96baff70;
    background: linear-gradient(145deg,#1e3454eb,#101e36eb)
}

.digital .kicker {
    color: #b7d4ff
}

.digital .contract {
    border-color: #96baff30
}