:root{
--ink:#17194d;
--muted:#656985;
--pink:#ff18a8;
--purple:#8138ff;
--blue:#25a8ff;
--cyan:#19d9e8;
--gold:#ffb21c;
--line:#e9e4f5;
--max:1180px;
}

*{
box-sizing:border-box;
margin:0;
padding:0;
}

html{
scroll-behavior:smooth;
}

body{
font-family:Arial,Helvetica,sans-serif;
color:var(--ink);
background:
linear-gradient(
135deg,
#f8fcff 0%,
#edf7ff 25%,
#f5efff 55%,
#fff5fc 78%,
#f4fbff 100%
);
line-height:1.6;
overflow-x:hidden;
position:relative;
isolation:isolate;
}

/* =====================================================
   FLOATING RAINBOW BACKGROUND
   ===================================================== */

body:before{
content:"";
position:fixed;
width:750px;
height:750px;
top:-240px;
left:-220px;
border-radius:50%;
pointer-events:none;
z-index:-2;

background:
radial-gradient(
circle,
rgba(0,217,255,.42),
rgba(0,217,255,.22) 30%,
rgba(0,217,255,.08) 48%,
transparent 72%
);

filter:blur(30px);

animation:
blueFloat 12s ease-in-out infinite alternate;
}

body:after{
content:"";
position:fixed;
width:850px;
height:850px;
right:-300px;
bottom:-300px;
border-radius:50%;
pointer-events:none;
z-index:-2;

background:
radial-gradient(
circle,
rgba(173,92,255,.40),
rgba(255,83,213,.25) 32%,
rgba(255,83,213,.10) 50%,
transparent 73%
);

filter:blur(32px);

animation:
purpleFloat 15s ease-in-out infinite alternate;
}

@keyframes blueFloat{
0%{
transform:translate(0,0) scale(1);
}

50%{
transform:translate(100px,70px) scale(1.08);
}

100%{
transform:translate(180px,120px) scale(1);
}
}

@keyframes purpleFloat{
0%{
transform:translate(0,0) scale(1);
}

50%{
transform:translate(-80px,-80px) scale(1.08);
}

100%{
transform:translate(-150px,-120px) scale(1);
}
}


/* =====================================================
   ADDITIONAL FLOATING COLOUR LIGHT
   ===================================================== */

body .container:before{
content:"";
position:fixed;
width:500px;
height:500px;
left:-180px;
top:42%;
border-radius:50%;
pointer-events:none;
z-index:-3;

background:
radial-gradient(
circle,
rgba(37,168,255,.28),
rgba(25,217,232,.12) 40%,
transparent 72%
);

filter:blur(35px);

animation:
middleBlue 17s ease-in-out infinite alternate;
}

@keyframes middleBlue{
from{
transform:translate(0,0);
}

to{
transform:translate(160px,-80px);
}
}


/* =====================================================
   LINKS
   ===================================================== */

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


/* =====================================================
   IMAGES
   ===================================================== */

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


/* =====================================================
   FORM ELEMENTS
   ===================================================== */

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


/* =====================================================
   CONTAINER
   ===================================================== */

.container{
max-width:var(--max);
margin:auto;
padding:0 22px;
}


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

.site-header{
position:sticky;
top:0;
z-index:50;

background:rgba(255,255,255,.72);

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(0,170,220,.18);

box-shadow:
0 8px 30px rgba(61,94,160,.08);
}

.header-inner{
max-width:1280px;
margin:auto;

padding:14px 24px;

display:flex;
align-items:center;
gap:18px;
}

.brand{
display:flex;
align-items:center;
gap:8px;

min-width:295px;
}

.brand .crown{
font-size:22px;
color:#d99b00;
}

.brand strong{
font-size:24px;
font-style:italic;
letter-spacing:.01em;

background:
linear-gradient(
90deg,
var(--pink),
var(--purple),
var(--blue),
var(--gold)
);

-webkit-background-clip:text;
background-clip:text;

color:transparent;

line-height:1;
}

.brand small{
display:block;

font-size:8px;
letter-spacing:.17em;

font-weight:900;

color:var(--ink);

margin-top:5px;

white-space:nowrap;
}


/* =====================================================
   NAVIGATION
   ===================================================== */

.nav{
display:flex;
justify-content:center;
gap:20px;
flex:1;
}

.nav a{
font-size:10px;
font-weight:900;

text-transform:uppercase;

position:relative;

padding:8px 0;

transition:.25s;
}

.nav a:hover,
.nav a.active{
color:var(--pink);
}

.nav a.active:after{
content:"";

position:absolute;

left:25%;
right:25%;
bottom:0;

height:3px;

border-radius:3px;

background:
linear-gradient(
90deg,
var(--pink),
var(--purple),
var(--blue)
);

box-shadow:
0 0 10px rgba(255,24,168,.45);
}


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

.nav-cta{
background:
linear-gradient(
90deg,
var(--blue),
var(--purple),
var(--pink)
);

color:#fff;

padding:12px 18px;

border-radius:999px;

font-size:10px;
font-weight:900;

white-space:nowrap;

box-shadow:
0 9px 22px rgba(129,56,255,.22);

transition:.25s;
}

.nav-cta:hover{
transform:translateY(-3px);

box-shadow:
0 13px 28px rgba(129,56,255,.28);
}

.menu{
display:none;

border:0;

background:none;

font-size:25px;

color:var(--ink);

margin-left:auto;

cursor:pointer;
}


/* =====================================================
   HERO
   ===================================================== */

.hero{
min-height:700px;

display:grid;

grid-template-columns:.84fr 1.16fr;

align-items:center;

gap:15px;

padding:54px 0 20px;
}

.eyebrow{
font-size:11px;

font-weight:900;

letter-spacing:.13em;

color:var(--purple);

text-transform:uppercase;

margin-bottom:14px;
}

.hero h1{
font-size:clamp(46px,5.6vw,74px);

line-height:.96;

letter-spacing:-.05em;
}

.gradient-text{
background:
linear-gradient(
90deg,
var(--pink),
var(--purple),
var(--blue),
var(--gold)
);

-webkit-background-clip:text;
background-clip:text;

color:transparent;
}

.lead{
color:var(--muted);

font-size:16px;

max-width:520px;

margin:22px 0;
}


/* =====================================================
   ACTION BUTTONS
   ===================================================== */

.actions{
display:flex;

gap:12px;

flex-wrap:wrap;
}

.btn{
display:inline-flex;

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

gap:8px;

padding:13px 20px;

border-radius:999px;

font-size:10px;

font-weight:900;

text-transform:uppercase;

border:1px solid var(--pink);

transition:.25s;

cursor:pointer;
}

.btn.primary{
border:0;

color:#fff;

background:
linear-gradient(
90deg,
var(--pink),
var(--purple),
var(--blue)
);
}

.btn.secondary{
background:rgba(255,255,255,.72);

backdrop-filter:blur(8px);
}

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

box-shadow:
0 10px 25px rgba(123,50,255,.20);
}


/* =====================================================
   CHECKS
   ===================================================== */

.checks{
display:flex;

flex-wrap:wrap;

gap:13px;

margin-top:20px;

font-size:10px;

font-weight:800;

color:#62657e;
}

.checks span:before{
content:'✓';

color:var(--pink);

margin-right:5px;
}


/* =====================================================
   HERO IMAGE
   ===================================================== */

.hero-art{
position:relative;

min-height:620px;

display:flex;

align-items:center;

justify-content:center;

overflow:visible;
}

.hero-laptop-wrap{
position:relative;

width:min(760px,100%);

padding:5px;

border:4px solid var(--pink);

border-radius:24px;

background:rgba(255,255,255,.78);

backdrop-filter:blur(8px);

animation:
frameColor 7s ease-in-out infinite;

box-shadow:
0 24px 55px rgba(111,54,168,.18),
0 0 0 8px rgba(255,255,255,.55);
}

.hero-laptop-wrap img{
display:block;

width:100%;

height:auto;

max-height:600px;

object-fit:contain;

border-radius:18px;

position:relative;

z-index:2;
}

.frame-glow{
position:absolute;

inset:-4px;

border-radius:24px;

box-shadow:
0 0 22px rgba(255,24,168,.2);

animation:
glowColor 7s ease-in-out infinite;

pointer-events:none;

z-index:1;
}


/* =====================================================
   WATCHING TEXT
   ===================================================== */

.watching{
position:absolute;

left:5%;

bottom:-12px;

font-family:cursive;

font-size:24px;

line-height:1.05;

background:
linear-gradient(
90deg,
var(--pink),
var(--purple),
var(--blue),
var(--gold)
);

-webkit-background-clip:text;
background-clip:text;

color:transparent;

transform:rotate(-3deg);

z-index:4;

text-shadow:
0 4px 18px rgba(255,255,255,.8);
}

.watching:after{
content:'➜';

font-family:Arial;

font-size:20px;

margin-left:8px;
}


/* =====================================================
   HERO ANIMATIONS
   ===================================================== */

@keyframes frameColor{
0%,100%{
border-color:var(--pink);
}

25%{
border-color:var(--purple);
}

50%{
border-color:var(--blue);
}

75%{
border-color:var(--gold);
}
}

@keyframes glowColor{
0%,100%{
box-shadow:
0 0 22px rgba(255,24,168,.28);
}

25%{
box-shadow:
0 0 22px rgba(129,56,255,.28);
}

50%{
box-shadow:
0 0 22px rgba(37,168,255,.28);
}

75%{
box-shadow:
0 0 22px rgba(255,178,28,.28);
}
}


/* =====================================================
   STATS
   ===================================================== */

.stats{
display:grid;

grid-template-columns:repeat(4,1fr);

background:rgba(255,255,255,.76);

backdrop-filter:blur(12px);

border:1px solid rgba(233,228,245,.85);

border-radius:24px;

box-shadow:
0 15px 45px rgba(57,35,92,.12);

margin:45px auto 70px;

overflow:hidden;
}

.stat{
padding:23px;

text-align:center;

border-right:1px solid rgba(233,228,245,.8);
}

.stat:last-child{
border:0;
}

.stat strong{
display:block;

font-size:22px;

color:var(--pink);
}

.stat span{
font-size:10px;

font-weight:800;
}


/* =====================================================
   SECTIONS
   ===================================================== */

.section{
padding:85px 0;

background:rgba(255,255,255,.12);
}

.section.light{
background:
linear-gradient(
180deg,
rgba(255,255,255,.42),
rgba(251,248,255,.50)
);
}


/* =====================================================
   SECTION TITLE
   ===================================================== */

.section-title{
text-align:center;

max-width:760px;

margin:0 auto 38px;
}

.section-title h2{
font-size:clamp(34px,4.8vw,56px);

line-height:1.05;
}

.section-title p{
color:var(--muted);

margin-top:14px;
}


/* =====================================================
   SPLIT / VISUAL
   ===================================================== */

.split{
display:grid;

grid-template-columns:1fr 1fr;

gap:55px;

align-items:center;
}

.visual-card{
background:rgba(255,255,255,.72);

backdrop-filter:blur(15px);

border:1px solid rgba(233,228,245,.85);

border-radius:26px;

padding:14px;

box-shadow:
0 18px 50px rgba(60,30,100,.08);
}

.visual-card img{
display:block;

width:100%;

border-radius:18px;
}

.visual-caption{
padding:17px 8px 6px;
}

.visual-caption small{
font-size:9px;

font-weight:900;

letter-spacing:.13em;

color:var(--purple);
}

.visual-caption h3{
font-size:22px;

margin:4px 0;
}

.visual-caption p{
font-size:12px;

color:var(--muted);
}

.big-title{
font-size:clamp(38px,5vw,57px);

line-height:1.05;
}

.copy{
color:var(--muted);

font-size:15px;
}

.copy p+p{
margin-top:16px;
}

.signature{
font-family:cursive;

font-size:28px;

color:var(--pink);

margin-top:20px;
}


/* =====================================================
   CARDS
   ===================================================== */

.cards{
display:grid;

grid-template-columns:repeat(3,1fr);

gap:16px;
}

.card{
border:1px solid rgba(233,228,245,.9);

border-radius:19px;

background:rgba(255,255,255,.74);

backdrop-filter:blur(14px);

padding:26px;

box-shadow:
0 12px 35px rgba(60,30,100,.07);

transition:.25s;
}

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

box-shadow:
0 18px 45px rgba(60,30,100,.12);
}

.card .num{
color:var(--pink);

font-weight:900;

font-size:10px;
}

.card h3{
margin:28px 0 7px;
}

.card p{
color:var(--muted);

font-size:12px;
}


/* =====================================================
   PRICING
   ===================================================== */

.pricing{
display:grid;

grid-template-columns:repeat(4,1fr);

gap:13px;
}

.price{
position:relative;

border:1px solid rgba(233,228,245,.9);

border-radius:20px;

padding:23px;

background:rgba(255,255,255,.78);

backdrop-filter:blur(14px);

min-height:500px;

box-shadow:
0 12px 35px rgba(60,30,100,.07);
}

.price.featured{
border:2px solid var(--purple);

box-shadow:
0 15px 50px rgba(139,53,255,.13);
}

.ribbon{
position:absolute;

top:14px;

right:12px;

background:
linear-gradient(
90deg,
var(--pink),
var(--purple)
);

color:#fff;

border-radius:15px;

padding:5px 8px;

font-size:7px;

font-weight:900;
}

.price h3{
font-size:38px;

margin:8px 0 0;
}

.price h3 small{
font-size:12px;

color:var(--muted);
}

.price .label{
font-size:9px;

font-weight:900;

letter-spacing:.1em;

color:var(--purple);
}

.price>small{
color:var(--muted);

font-size:10px;
}

.price ul{
list-style:none;

margin:20px 0;
}

.price li{
font-size:10px;

padding:6px 0;

border-bottom:1px solid #f1eef6;
}

.price li:before{
content:'✓';

color:var(--pink);

font-weight:900;

margin-right:7px;
}

.price .btn{
width:100%;
}

.price footer{
position:absolute;

bottom:17px;

left:18px;

right:18px;

text-align:center;

font-size:8px;

color:#8a8ca0;
}


/* =====================================================
   PROCESS
   ===================================================== */

.process{
display:grid;

grid-template-columns:repeat(7,1fr);

gap:7px;
}

.step{
text-align:center;

border:1px solid rgba(233,228,245,.9);

border-radius:16px;

padding:17px 8px;

background:rgba(255,255,255,.74);

backdrop-filter:blur(12px);
}

.step b{
display:inline-flex;

width:37px;

height:37px;

border-radius:50%;

align-items:center;

justify-content:center;

background:
linear-gradient(
135deg,
var(--pink),
var(--purple)
);

color:#fff;

font-size:9px;
}

.step h3{
font-size:11px;

margin:12px 0 4px;
}

.step p{
font-size:8px;

color:var(--muted);
}


/* =====================================================
   QUOTE
   ===================================================== */

.quote{
background:
linear-gradient(
110deg,
rgba(255,255,255,.76),
rgba(251,240,255,.78),
rgba(237,251,255,.78)
);

backdrop-filter:blur(14px);

border-radius:24px;

padding:55px;

text-align:center;

border:1px solid rgba(233,228,245,.9);

box-shadow:
0 18px 45px rgba(60,30,100,.08);
}

.quote h2{
font-family:Georgia,serif;

font-size:clamp(25px,3vw,39px);

line-height:1.2;
}

.quote p{
color:var(--muted);
}


/* =====================================================
   CONTACT
   ===================================================== */

.contact{
background:
linear-gradient(
110deg,
#ff22ad,
#8a39ff,
#27bfff
);

color:#fff;

border-radius:28px;

padding:65px 35px;

text-align:center;

box-shadow:
0 25px 55px rgba(125,50,220,.18);
}

.contact h2{
font-size:clamp(38px,5vw,60px);

line-height:1;
}

.contact p{
max-width:600px;

margin:16px auto 24px;
}

.contact .btn{
background:#fff;

color:var(--ink);

border:0;
}


/* =====================================================
   PAGE HERO
   ===================================================== */

.page-hero{
text-align:center;

padding:80px 0 52px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.42),
rgba(250,245,255,.48)
);

backdrop-filter:blur(5px);
}

.page-hero h1{
font-size:clamp(43px,6vw,68px);

line-height:1;
}

.page-hero p{
max-width:650px;

margin:16px auto;

color:var(--muted);
}


/* =====================================================
   FORMS
   ===================================================== */

.form{
max-width:820px;

margin:auto;

background:rgba(255,255,255,.78);

backdrop-filter:blur(16px);

border:1px solid rgba(233,228,245,.9);

border-radius:23px;

padding:28px;

box-shadow:
0 15px 45px rgba(60,30,100,.08);
}

.grid2{
display:grid;

grid-template-columns:1fr 1fr;

gap:14px;
}

.field{
margin-bottom:14px;
}

.field label{
display:block;

font-size:10px;

font-weight:900;

margin-bottom:5px;
}

.field input,
.field textarea,
.field select{
width:100%;

border:1px solid #e6e1ef;

border-radius:11px;

padding:11px;

font:inherit;

outline:none;

background:rgba(255,255,255,.92);
}

.field textarea{
min-height:125px;

resize:vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus{
border-color:var(--purple);

box-shadow:
0 0 0 3px #eee5ff;
}


/* =====================================================
   QUESTIONNAIRE
   ===================================================== */

.form-intro{
display:flex;

align-items:flex-start;

gap:16px;

padding:26px 0 18px;

margin-top:18px;

border-top:1px solid var(--line);
}

.form-intro:first-child{
margin-top:0;

border-top:0;
}

.form-intro>span{
display:flex;

align-items:center;

justify-content:center;

min-width:40px;

height:40px;

border-radius:50%;

background:
linear-gradient(
135deg,
var(--pink),
var(--purple)
);

color:#fff;

font-size:10px;

font-weight:900;
}

.form-intro h2{
font-size:24px;

line-height:1.15;
}

.form-intro p{
font-size:11px;

color:var(--muted);

margin-top:3px;
}


/* =====================================================
   CHOICES
   ===================================================== */

.choice-grid{
display:grid;

grid-template-columns:repeat(2,1fr);

gap:9px;

margin-top:7px;
}

.choice-grid label{
display:flex;

align-items:center;

gap:8px;

border:1px solid #e8e3f1;

border-radius:11px;

padding:10px 12px;

background:rgba(252,251,255,.82);

font-size:10px;

font-weight:700;

color:#4e526d;

cursor:pointer;

transition:.2s;
}

.choice-grid label:hover{
border-color:#bca4ff;

background:#fff;
}

.choice-grid input,
.consent input{
accent-color:var(--purple);
}


/* =====================================================
   CONSENT
   ===================================================== */

.consent{
display:flex;

gap:9px;

align-items:flex-start;

margin:22px 0;

font-size:10px;

color:var(--muted);

line-height:1.5;
}


/* =====================================================
   TERMS GATE
   ===================================================== */

.terms-gate{
margin-top:24px;

padding:20px;

border:1px solid #eadff7;

border-radius:18px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.82),
rgba(251,246,255,.84)
);

backdrop-filter:blur(10px);
}

.terms-gate h3{
font-size:20px;

margin:3px 0 7px;
}

.terms-gate p{
font-size:10px;

color:var(--muted);

line-height:1.6;
}

.terms-gate>a,
.terms-gate a{
color:var(--purple);

font-weight:900;
}

.terms-gate .consent{
margin:16px 0 0;
}


/* =====================================================
   FORM SUBMIT
   ===================================================== */

.form-submit{
width:100%;

font-size:11px;

padding:16px;
}

.form-note{
text-align:center;

color:#8a8ca0;

font-size:9px;

margin-top:10px;
}


/* =====================================================
   MINI PROOF
   ===================================================== */

.mini-proof{
display:grid;

grid-template-columns:repeat(3,1fr);

gap:10px;

margin-top:24px;
}

.mini-proof div{
border:1px solid var(--line);

border-radius:16px;

padding:14px;

background:rgba(255,255,255,.76);

backdrop-filter:blur(10px);

display:flex;

flex-direction:column;

gap:7px;
}

.mini-proof b{
font-size:10px;

color:var(--pink);
}

.mini-proof span{
font-size:10px;

font-weight:800;
}


/* =====================================================
   PAGE ARTWORK
   ===================================================== */

.about-picture-section{
max-width:1100px;

margin:0 auto 65px;

padding:0 25px;
}

.about-picture-frame{
position:relative;

overflow:hidden;

border-radius:26px;

border:1px solid rgba(0,190,255,.30);

background:#050611;

box-shadow:
0 22px 55px rgba(10,20,60,.22),
0 0 28px rgba(0,190,255,.10),
0 0 45px rgba(220,0,190,.08);
}

.about-picture-frame img{
width:100%;

height:auto;

display:block;

transition:transform .6s ease;
}

.about-picture-frame:hover img{
transform:scale(1.015);
}


/* =====================================================
   SERVICES / CONTACT ART
   ===================================================== */

.services-page-art,
.contact-page-art{
width:min(900px,82%);

margin:85px auto 55px;

position:relative;

border-radius:24px;

overflow:hidden;

border:1px solid rgba(255,40,205,.38);

box-shadow:
0 22px 60px rgba(0,0,0,.48),
0 0 35px rgba(145,0,255,.12);
}

.services-page-art img,
.contact-page-art img{
width:100%;

height:auto;

display:block;

border-radius:22px;

object-fit:contain;

image-rendering:auto;

filter:
contrast(1.05)
saturate(1.03);
}


/* =====================================================
   FOOTER
   ===================================================== */

.footer{
border-top:1px solid rgba(233,228,245,.8);

padding:42px 0;

margin-top:70px;

background:rgba(255,255,255,.65);

backdrop-filter:blur(14px);
}

.footer-grid{
display:grid;

grid-template-columns:1.3fr 1fr 1fr;

gap:30px;
}

.footer p,
.footer a{
font-size:10px;

color:var(--muted);
}

.footer-links{
display:flex;

flex-direction:column;

gap:6px;
}

.copyright{
text-align:center;

margin-top:28px;

font-size:8px;

color:#9799aa;
}


/* =====================================================
   REVEAL ANIMATION
   ===================================================== */

.reveal{
opacity:0;

transform:translateY(20px);

transition:.7s ease;
}

.reveal.show{
opacity:1;

transform:none;
}


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

@media(max-width:1050px){

.nav{
gap:11px;
}

.nav a{
font-size:8px;
}

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

.process{
grid-template-columns:repeat(4,1fr);
}

}


/* =====================================================
   950px
   ===================================================== */

@media(max-width:950px){

.hero{
grid-template-columns:1fr;

gap:28px;

text-align:center;
}

.hero-copy{
text-align:center;
}

.lead{
margin-left:auto;

margin-right:auto;
}

.actions{
justify-content:center;
}

.checks{
justify-content:center;
}

.hero-art{
order:2;
}

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

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

.stat:nth-child(2){
border-right:0;
}

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

}


/* =====================================================
   820px
   ===================================================== */

@media(max-width:820px){

.header-inner{
padding:13px 18px;
}

.brand{
min-width:0;
}

.brand strong{
font-size:18px;
}

.brand small{
font-size:7px;
}

.nav,
.nav-cta{
display:none;
}

.menu{
display:block;
}

.nav.open{
display:flex;

position:absolute;

left:12px;

right:12px;

top:62px;

background:rgba(255,255,255,.96);

padding:17px;

flex-direction:column;

border:1px solid var(--line);

border-radius:18px;

box-shadow:
0 15px 40px rgba(50,30,90,.12);
}

.hero{
grid-template-columns:1fr;

padding-top:42px;
}

.hero-art{
min-height:470px;
}

.hero-laptop-wrap{
width:min(700px,100%);
}

.split{
grid-template-columns:1fr;

gap:30px;
}

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

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

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

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

.watching{
bottom:-12px;

left:3%;
}

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

}


/* =====================================================
   700px
   ===================================================== */

@media(max-width:700px){

.services-page-art,
.contact-page-art{
width:92%;

margin:65px auto 40px;
}

}


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

@media(max-width:560px){

.section{
padding:60px 0;
}

.hero h1{
font-size:43px;
}

.hero-art{
min-height:350px;
}

.hero-laptop-wrap{
border-width:3px;

border-radius:17px;
}

.hero-laptop-wrap img{
border-radius:12px;
}

.watching{
font-size:19px;

bottom:-6px;

left:1%;
}

.cards,
.pricing,
.process,
.grid2,
.footer-grid{
grid-template-columns:1fr;
}

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

.stat{
border-right:0;

border-bottom:1px solid var(--line);
}

.stat:last-child{
border-bottom:0;
}

.quote{
padding:38px 20px;
}

.brand small{
display:block;

font-size:7px;
}

.form-intro h2{
font-size:20px;
}

}


/* =====================================================
   EXTRA SMALL MOBILE
   ===================================================== */

@media(max-width:400px){

.brand strong{
font-size:16px;
}

.brand .crown{
font-size:18px;
}

.hero h1{
font-size:38px;
}

.hero-laptop-wrap{
padding:3px;
}

.watching{
font-size:17px;
}

}


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

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

*{
animation:none !important;

transition:none !important;
}

}