:root {
 --background: #f8f5f1;
 --cream: #efe7dd;
 --cream-light: #fcfaf7;
 --gold: #c6a27a;
 --gold-dark: #9b7953;
 --brown: #6b5b4d;
 --deep-brown: #46382f;
 --text: #4a4a4a;
 --muted: #75695f;
 --white: #ffffff;

 --shadow-soft: 0 28px 70px rgba(107, 91, 77, 0.10);
 --shadow-large: 0 35px 90px rgba(107, 91, 77, 0.16);
}


/* =====================================================
  RESET
===================================================== */

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

html {
 scroll-behavior: smooth;
}

body {
 font-family: "Inter", sans-serif;
 background: var(--background);
 color: var(--text);
 overflow-x: hidden;
}

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

button,
a {
 font-family: inherit;
}


/* =====================================================
  BACKGROUND ATMOSPHERE
===================================================== */

body::before {
 content: "";
 position: fixed;
 inset: 0;
 z-index: -2;
 pointer-events: none;

 background:
   radial-gradient(
     circle at 12% 20%,
     rgba(198, 162, 122, 0.11),
     transparent 30%
   ),
   radial-gradient(
     circle at 88% 70%,
     rgba(239, 231, 221, 0.85),
     transparent 34%
   );
}


/* =====================================================
  GOLD TEXT
===================================================== */

.gold-text {
 background: linear-gradient(
   115deg,
   #92704d 0%,
   #c6a27a 28%,
   #f5e3bf 48%,
   #c29b68 68%,
   #8b6848 100%
 );

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

 color: transparent;
 -webkit-text-fill-color: transparent;

 text-shadow: 0 0 22px rgba(198, 162, 122, 0.10);
}


/* =====================================================
  NAVBAR
===================================================== */

.navbar {
 position: fixed;
 top: 0;
 left: 0;

 width: 100%;
 z-index: 100;

 padding: 25px 7%;

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

 background: rgba(248, 245, 241, 0.78);

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

 border-bottom: 1px solid rgba(198, 162, 122, 0.16);

 box-shadow: 0 8px 30px rgba(107, 91, 77, 0.04);
}

.logo {
 text-decoration: none;

 font-family: "Playfair Display", serif;
 font-size: 27px;

 color: var(--deep-brown);

 letter-spacing: 0.3px;
}

nav {
 display: flex;
 align-items: center;
 gap: 31px;
}

nav a {
 position: relative;

 text-decoration: none;

 color: var(--brown);

 font-size: 13px;
 font-weight: 400;

 letter-spacing: 0.4px;
}

nav a::after {
 content: "";

 position: absolute;
 left: 0;
 bottom: -8px;

 width: 0;
 height: 1px;

 background: var(--gold);

 transition: width 0.3s ease;
}

nav a:hover::after {
 width: 100%;
}

#languageBtn {
 border: 1px solid rgba(198, 162, 122, 0.65);

 background: rgba(255, 255, 255, 0.40);

 color: var(--brown);

 padding: 8px 14px;

 border-radius: 999px;

 cursor: pointer;

 font-size: 12px;

 transition: 0.3s ease;
}

#languageBtn:hover {
 background: var(--gold);
 color: white;
}


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

.hero {
 position: relative;

 min-height: 100vh;

 overflow: hidden;

 display: flex;
 align-items: center;

 padding: 135px 7% 80px;
}

.hero-image {
 position: absolute;
 inset: 0;

 width: 100%;
 height: 100%;

 object-fit: cover;

 animation:
   heroZoom 18s ease-in-out infinite alternate;
}

.hero-overlay {
 position: absolute;
 inset: 0;

 background:
   linear-gradient(
     90deg,
     rgba(248, 245, 241, 0.97) 0%,
     rgba(248, 245, 241, 0.91) 38%,
     rgba(248, 245, 241, 0.48) 68%,
     rgba(248, 245, 241, 0.18) 100%
   );
}

.hero-content {
 position: relative;
 z-index: 3;

 max-width: 760px;

 animation:
   fadeUp 1s ease both;
}

.hero-tag,
.section-tag {
 color: var(--gold-dark);

 font-size: 12px;
 font-weight: 500;

 letter-spacing: 3px;

 text-transform: uppercase;

 margin-bottom: 22px;
}

.hero h1 {
 font-family: "Playfair Display", serif;

 font-size: clamp(58px, 7.2vw, 108px);

 line-height: 0.96;

 color: var(--deep-brown);

 max-width: 900px;

 margin-bottom: 31px;
}

.hero h1 .gold-text {
 display: block;
}

.hero-description {
 max-width: 620px;

 font-size: 18px;

 line-height: 1.8;

 color: #655c55;

 margin-bottom: 38px;
}

.hero-buttons {
 display: flex;

 gap: 15px;

 flex-wrap: wrap;
}

.primary-btn,
.secondary-btn {
 display: inline-flex;

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

 text-decoration: none;

 padding: 15px 28px;

 border-radius: 999px;

 font-size: 14px;

 transition:
   transform 0.35s ease,
   box-shadow 0.35s ease,
   background 0.35s ease;
}

.primary-btn {
 background: var(--gold);

 color: white;

 box-shadow:
   0 13px 32px rgba(155, 121, 83, 0.24);
}

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

 box-shadow:
   0 18px 38px rgba(155, 121, 83, 0.30);
}

.secondary-btn {
 border: 1px solid rgba(107, 91, 77, 0.22);

 color: var(--deep-brown);

 background: rgba(255, 255, 255, 0.42);
}

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

 background: rgba(255, 255, 255, 0.72);
}


/* =====================================================
  FLOATING HERO CARD
===================================================== */

.floating-card {
 position: absolute;

 z-index: 4;

 right: 8%;
 bottom: 8%;

 width: 310px;
 height: 440px;

 border-radius: 28px;

 overflow: hidden;

 background: white;

 box-shadow: var(--shadow-large);

 transform: rotate(3deg);

 animation:
   floatCard 5.5s ease-in-out infinite;
}

.floating-card img {
 width: 100%;
 height: 100%;

 object-fit: cover;
}


/* =====================================================
  LAUNCH STRIP
===================================================== */

.launch-strip {
 position: relative;

 z-index: 10;

 max-width: 1180px;

 margin: -42px auto 0;

 display: grid;

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

 background: rgba(255, 255, 255, 0.76);

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

 border: 1px solid rgba(198, 162, 122, 0.16);

 border-radius: 24px;

 box-shadow: var(--shadow-soft);

 overflow: hidden;
}

.launch-strip div {
 padding: 28px 30px;

 text-align: center;

 border-right: 1px solid rgba(198, 162, 122, 0.16);
}

.launch-strip div:last-child {
 border-right: none;
}

.launch-strip strong {
 display: block;

 margin-bottom: 6px;

 font-family: "Playfair Display", serif;

 font-size: 35px;
 font-weight: 500;

 color: var(--gold-dark);
}

.launch-strip span {
 color: var(--muted);

 font-size: 11px;

 letter-spacing: 1.4px;

 text-transform: uppercase;
}


/* =====================================================
  WEBSITE COLLECTION
===================================================== */

.website-collection {
 padding: 145px 7% 120px;
}

.collection-heading {
 max-width: 930px;

 margin-bottom: 55px;
}

.collection-heading h2,
.pricing h2,
.process h2,
.instagram-preview h2,
.custom-section h2,
.seo-section h2,
.project-contact h2 {
 font-family: "Playfair Display", serif;

 font-size: clamp(46px, 5.4vw, 78px);

 line-height: 1.06;

 color: var(--deep-brown);

 margin-bottom: 25px;
}

.collection-intro {
 max-width: 760px;

 font-size: 16px;

 line-height: 1.8;

 color: var(--muted);
}


/* =====================================================
  FILTERS
===================================================== */

.website-filters {
 display: flex;

 flex-wrap: wrap;

 gap: 10px;

 margin-bottom: 50px;
}

.filter-btn {
 border: 1px solid rgba(198, 162, 122, 0.30);

 background: rgba(255, 255, 255, 0.45);

 padding: 11px 18px;

 border-radius: 999px;

 color: var(--brown);

 cursor: pointer;

 font-size: 10px;

 letter-spacing: 1.4px;

 transition: 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
 background: var(--gold);

 color: white;

 border-color: var(--gold);
}


/* =====================================================
  WEBSITE GRID
===================================================== */

.website-grid {
 display: grid;

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

 gap: 80px 45px;
}

.website-card {
 min-width: 0;

 transition: transform 0.35s ease;
}

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

.website-image {
 position: relative;

 width: 100%;

 aspect-ratio: 4 / 5;

 overflow: hidden;

 border-radius: 32px;

 background: #eee5dc;

 box-shadow: var(--shadow-soft);
}

.website-image img {
 width: 100%;
 height: 100%;

 object-fit: cover;

 transition: transform 0.8s ease;
}

.website-card:hover .website-image img {
 transform: scale(1.025);
}

.website-number,
.website-level {
 position: absolute;

 z-index: 2;

 top: 20px;

 display: inline-flex;

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

 height: 30px;

 background: rgba(255, 255, 255, 0.84);

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

 color: var(--deep-brown);

 border: 1px solid rgba(255, 255, 255, 0.40);

 box-shadow: 0 8px 22px rgba(70, 56, 47, 0.06);
}

.website-number {
 left: 20px;

 width: 38px;

 border-radius: 999px;

 font-family: "Playfair Display", serif;

 font-size: 13px;
}

.website-level {
 right: 20px;

 padding: 0 13px;

 border-radius: 999px;

 font-size: 8px;

 letter-spacing: 1.2px;
}

.website-info {
 padding: 25px 4px 0;
}

.website-info > p:first-child {
 color: var(--gold-dark);

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

 letter-spacing: 1.9px;

 margin-bottom: 9px;
}

.website-info h3 {
 font-family: "Playfair Display", serif;

 color: var(--deep-brown);

 font-size: 38px;

 font-weight: 500;

 margin-bottom: 6px;
}

.website-price {
 display: inline-block;

 margin-bottom: 14px;

 color: var(--gold-dark);

 font-size: 13px;

 font-weight: 600;

 letter-spacing: 0.5px;
}

.website-description {
 max-width: 550px;

 color: var(--muted);

 font-size: 13px;

 line-height: 1.7;

 margin-bottom: 20px;
}

.website-actions {
 display: flex;

 gap: 10px;

 flex-wrap: wrap;
}

.demo-btn,
.choose-btn {
 display: inline-flex;

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

 padding: 12px 19px;

 border-radius: 999px;

 text-decoration: none;

 font-size: 9px;

 letter-spacing: 1.2px;

 transition: 0.3s ease;
}

.demo-btn {
 border: 1px solid rgba(107, 91, 77, 0.20);

 color: var(--deep-brown);

 background: rgba(255, 255, 255, 0.42);
}

.choose-btn {
 background: var(--gold);

 color: white;
}

.demo-btn:hover,
.choose-btn:hover {
 transform: translateY(-2px);
}


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

.pricing {
 padding: 125px 7%;

 background:
   linear-gradient(
     180deg,
     #efe7dd,
     #f6f0ea
   );
}

.pricing > h2 {
 max-width: 850px;
}

.pricing-grid {
 margin-top: 60px;

 display: grid;

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

 gap: 20px;
}

.price-card {
 position: relative;

 padding: 42px 35px;

 border-radius: 28px;

 background: rgba(255, 255, 255, 0.58);

 border: 1px solid rgba(198, 162, 122, 0.16);

 box-shadow: 0 25px 60px rgba(107, 91, 77, 0.07);

 transition:
   transform 0.35s ease,
   box-shadow 0.35s ease;
}

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

 box-shadow:
   0 30px 70px rgba(107, 91, 77, 0.11);
}

.price-card.featured {
 background:
   linear-gradient(
     145deg,
     rgba(198, 162, 122, 0.21),
     rgba(255, 255, 255, 0.76)
   );

 border-color: rgba(198, 162, 122, 0.34);
}

.price-card small {
 display: inline-block;

 margin-bottom: 17px;

 color: var(--gold-dark);

 font-size: 8px;

 letter-spacing: 1.6px;
}

.price-card > span {
 display: block;

 color: var(--gold-dark);

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

 letter-spacing: 2px;

 margin-bottom: 16px;
}

.price-card h3 {
 font-family: "Playfair Display", serif;

 color: var(--deep-brown);

 font-size: 34px;

 margin-bottom: 14px;
}

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

 font-size: 13px;

 line-height: 1.7;

 margin-bottom: 22px;
}

.price-card ul {
 list-style: none;
}

.price-card li {
 position: relative;

 padding: 10px 0 10px 21px;

 color: #665b54;

 font-size: 12px;

 line-height: 1.5;

 border-bottom: 1px solid rgba(198, 162, 122, 0.12);
}

.price-card li::before {
 content: "✓";

 position: absolute;

 left: 0;

 color: var(--gold-dark);
}


/* =====================================================
  SEO SECTION
===================================================== */

.seo-section {
 padding: 130px 7%;

 background: var(--cream-light);
}

.seo-heading {
 max-width: 900px;

 margin-bottom: 65px;
}

.seo-heading > p:last-child {
 max-width: 720px;

 color: var(--muted);

 font-size: 16px;

 line-height: 1.8;
}

.seo-compare {
 display: grid;

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

 gap: 24px;

 max-width: 1100px;
}

.seo-box {
 padding: 48px;

 border-radius: 30px;

 background: rgba(255, 255, 255, 0.68);

 border: 1px solid rgba(198, 162, 122, 0.16);

 box-shadow: var(--shadow-soft);
}

.seo-box.featured {
 background:
   linear-gradient(
     145deg,
     rgba(239, 231, 221, 0.86),
     rgba(255, 255, 255, 0.78)
   );

 border-color: rgba(198, 162, 122, 0.30);
}

.seo-box > span {
 display: inline-block;

 color: var(--gold-dark);

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

 letter-spacing: 2px;

 margin-bottom: 20px;
}

.seo-box h3 {
 font-family: "Playfair Display", serif;

 font-size: 36px;
 font-weight: 500;

 line-height: 1.15;

 color: var(--deep-brown);

 margin-bottom: 14px;
}

.seo-box > p {
 color: var(--muted);

 font-size: 12px;

 margin-bottom: 30px;
}

.seo-flow {
 display: flex;

 flex-direction: column;

 gap: 9px;

 color: var(--brown);

 font-size: 12px;

 line-height: 1.5;
}

.seo-flow span {
 color: var(--gold);

 font-size: 18px;
}

.seo-message {
 max-width: 790px;

 margin-top: 65px;
}

.seo-message h3 {
 font-family: "Playfair Display", serif;

 color: var(--deep-brown);

 font-size: 42px;

 font-weight: 500;

 margin-bottom: 17px;
}

.seo-message p {
 color: var(--muted);

 font-size: 15px;

 line-height: 1.8;
}


/* =====================================================
  CUSTOM SECTION
===================================================== */

.custom-section {
 padding: 125px 7%;

 text-align: center;

 background:
   radial-gradient(
     circle at 50% 0%,
     rgba(198, 162, 122, 0.18),
     transparent 40%
   ),
   var(--background);
}

.custom-section h2 {
 max-width: 870px;

 margin-left: auto;
 margin-right: auto;
}

.custom-section > p:not(.section-tag) {
 max-width: 710px;

 margin: 0 auto 35px;

 color: var(--muted);

 font-size: 16px;

 line-height: 1.8;
}


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

.process {
 padding: 125px 7%;

 background: #efe7dd;
}

.process > h2 {
 max-width: 780px;
}

.process-grid {
 margin-top: 60px;

 display: grid;

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

 gap: 16px;
}

.process-grid > div {
 min-height: 285px;

 padding: 35px 28px;

 border-radius: 26px;

 background: rgba(255, 255, 255, 0.57);

 border: 1px solid rgba(198, 162, 122, 0.15);
}

.process-grid > div > span {
 display: block;

 margin-bottom: 53px;

 font-family: "Playfair Display", serif;

 color: var(--gold);

 font-size: 28px;
}

.process-grid h3 {
 margin-bottom: 13px;

 font-family: "Playfair Display", serif;

 color: var(--deep-brown);

 font-size: 28px;

 font-weight: 500;
}

.process-grid p {
 color: var(--muted);

 font-size: 12px;

 line-height: 1.75;
}


/* =====================================================
  INSTAGRAM / SELECTED WORK
===================================================== */

.instagram-preview {
 padding: 125px 7%;
}

.instagram-preview > h2 {
 max-width: 850px;
}

.insta-grid {
 margin-top: 55px;

 display: grid;

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

 gap: 15px;
}

.insta-grid img {
 width: 100%;
 height: 430px;

 object-fit: cover;

 border-radius: 22px;

 box-shadow: 0 20px 48px rgba(107, 91, 77, 0.08);

 transition:
   transform 0.4s ease,
   box-shadow 0.4s ease;
}

.insta-grid img:nth-child(2),
.insta-grid img:nth-child(4) {
 margin-top: 36px;
}

.insta-grid img:hover {
 transform: translateY(-7px);

 box-shadow: 0 28px 65px rgba(107, 91, 77, 0.13);
}


/* =====================================================
  JOURNAL / BLOG
===================================================== */

.journal-section {
 position: relative;

 overflow: hidden;

 padding: 135px 7%;

 background:
   radial-gradient(
     circle at 92% 8%,
     rgba(190, 161, 157, 0.15),
     transparent 27%
   ),
   radial-gradient(
     circle at 8% 82%,
     rgba(198, 162, 122, 0.08),
     transparent 31%
   ),
   #f8f3ed;
}

.journal-section::before {
 content: "JOURNAL";

 position: absolute;

 top: 40px;
 right: -30px;

 font-family: "Playfair Display", serif;

 font-size: clamp(100px, 15vw, 220px);

 font-weight: 500;

 letter-spacing: -0.04em;

 color: rgba(181, 138, 93, 0.045);

 pointer-events: none;
}

.journal-heading {
 position: relative;

 z-index: 2;

 max-width: 1240px;

 margin: 0 auto 78px;

 display: grid;

 grid-template-columns:
   minmax(0, 1.25fr)
   minmax(280px, 0.75fr);

 gap: 80px;

 align-items: end;
}

.journal-heading h2 {
 max-width: 760px;

 margin: 0;

 font-family: "Playfair Display", serif;

 font-size: clamp(48px, 5.3vw, 76px);

 font-weight: 500;

 line-height: 1.03;

 letter-spacing: -0.025em;

 color: var(--deep-brown);
}

.journal-heading h2 .gold-text {
 display: block;
}

.journal-intro {
 max-width: 470px;

 margin: 0 0 5px;

 color: var(--muted);

 font-size: 14px;

 line-height: 1.9;
}


/* =====================================================
  JOURNAL FEATURED ARTICLE
===================================================== */

.journal-featured {
 position: relative;

 max-width: 1240px;

 min-height: 465px;

 margin: 0 auto 24px;

 padding: 66px;

 overflow: hidden;

 display: grid;

 grid-template-columns:
   64px
   minmax(0, 660px)
   minmax(180px, 1fr);

 gap: 45px;

 align-items: center;

 background:
   linear-gradient(
     135deg,
     #e5d2ca 0%,
     #f3e7df 48%,
     #eee0d5 100%
   );

 border: 1px solid rgba(181, 138, 93, 0.16);

 border-radius: 30px;

 box-shadow:
   0 32px 85px rgba(107, 91, 77, 0.08);
}

.journal-featured::before {
 content: "";

 position: absolute;

 inset: 0;

 background:
   linear-gradient(
     105deg,
     rgba(255, 255, 255, 0.08),
     transparent 55%
   );

 pointer-events: none;
}

.journal-featured-number {
 position: relative;

 z-index: 2;

 align-self: start;

 font-family: "Playfair Display", serif;

 font-size: 22px;

 color: var(--gold-dark);
}

.journal-featured-content {
 position: relative;

 z-index: 3;
}

.journal-category {
 display: block;

 margin-bottom: 22px;

 color: var(--gold-dark);

 font-size: 8px;
 font-weight: 600;

 letter-spacing: 0.24em;

 text-transform: uppercase;
}

.journal-featured h3 {
 max-width: 650px;

 margin: 0 0 26px;

 font-family: "Playfair Display", serif;

 font-size: clamp(39px, 4vw, 58px);

 font-weight: 500;

 line-height: 1.06;

 letter-spacing: -0.02em;

 color: var(--deep-brown);
}

.journal-featured p {
 max-width: 590px;

 margin: 0 0 31px;

 color: #6c6058;

 font-size: 14px;

 line-height: 1.85;
}

.journal-read {
 display: inline-flex;

 align-items: center;

 gap: 12px;

 color: var(--deep-brown);

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

 letter-spacing: 0.15em;

 text-decoration: none;

 transition: color 0.25s ease;
}

.journal-read::after {
 display: none;
}

.journal-read span {
 font-size: 17px;

 transition: transform 0.25s ease;
}

.journal-read:hover {
 color: var(--gold-dark);
}

.journal-read:hover span {
 transform: translateX(6px);
}

.journal-featured-art {
 position: relative;

 height: 100%;

 min-height: 300px;
}

.journal-featured-art::before,
.journal-featured-art::after {
 content: "";

 position: absolute;

 top: 50%;

 border-radius: 50%;

 border: 1px solid rgba(145, 107, 73, 0.15);

 transform: translateY(-50%);
}

.journal-featured-art::before {
 width: 330px;
 height: 330px;

 right: -65px;
}

.journal-featured-art::after {
 width: 235px;
 height: 235px;

 right: -15px;
}

.journal-featured-art span {
 position: absolute;

 top: 50%;
 right: 16px;

 transform: translateY(-50%);

 font-family: "Playfair Display", serif;

 font-size: clamp(64px, 7vw, 95px);

 letter-spacing: -0.04em;

 color: rgba(145, 107, 73, 0.13);
}


/* =====================================================
  JOURNAL ARTICLE GRID
===================================================== */

.journal-grid {
 max-width: 1240px;

 margin: 0 auto;

 display: grid;

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

 border-top: 1px solid rgba(105, 82, 65, 0.14);
 border-left: 1px solid rgba(105, 82, 65, 0.14);

 border-radius: 26px;

 overflow: hidden;

 background: rgba(255, 250, 246, 0.35);
}

.journal-card {
 min-height: 365px;

 padding: 39px;

 display: flex;

 flex-direction: column;

 background: rgba(255, 250, 246, 0.64);

 border-right: 1px solid rgba(105, 82, 65, 0.14);
 border-bottom: 1px solid rgba(105, 82, 65, 0.14);

 transition:
   transform 0.35s ease,
   background 0.35s ease,
   box-shadow 0.35s ease;
}

.journal-card:hover {
 position: relative;

 z-index: 3;

 transform: translateY(-5px);

 background: rgba(255, 250, 246, 0.98);

 box-shadow:
   0 28px 58px rgba(107, 91, 77, 0.10);
}

.journal-card-top {
 margin-bottom: 50px;

 display: flex;

 align-items: center;
 justify-content: space-between;
}

.journal-card-top span {
 font-family: "Playfair Display", serif;

 font-size: 20px;

 color: var(--gold);
}

.journal-card-top small {
 color: var(--muted);

 font-size: 7px;
 font-weight: 600;

 letter-spacing: 0.18em;

 text-transform: uppercase;
}

.journal-card h3 {
 margin: 0 0 18px;

 font-family: "Playfair Display", serif;

 font-size: 28px;
 font-weight: 500;

 line-height: 1.17;

 color: var(--deep-brown);
}

.journal-card p {
 margin: 0 0 29px;

 color: var(--muted);

 font-size: 12px;

 line-height: 1.8;
}

.journal-card > a {
 position: relative;

 margin-top: auto;

 align-self: flex-start;

 color: var(--gold-dark);

 font-size: 8px;
 font-weight: 600;

 letter-spacing: 0.15em;

 text-decoration: none;

 transition:
   transform 0.25s ease,
   color 0.25s ease;
}

.journal-card > a::after {
 display: none;
}

.journal-card > a:hover {
 transform: translateX(5px);

 color: var(--deep-brown);
}


/* =====================================================
  JOURNAL BOTTOM
===================================================== */

.journal-bottom {
 max-width: 1240px;

 margin: 50px auto 0;

 padding-top: 36px;

 display: flex;

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

 gap: 30px;

 border-top: 1px solid rgba(105, 82, 65, 0.14);
}

.journal-bottom > div {
 display: flex;

 align-items: center;

 gap: 18px;
}

.journal-bottom > div > span {
 font-family: "Playfair Display", serif;

 font-size: 52px;

 line-height: 1;

 color: var(--gold);
}

.journal-bottom p {
 margin: 0;

 color: var(--muted);

 font-size: 9px;

 line-height: 1.5;

 letter-spacing: 0.1em;

 text-transform: uppercase;
}

.journal-bottom .secondary-btn {
 flex-shrink: 0;
}


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

.project-contact {
 position: relative;

 padding: 125px 7%;

 display: grid;

 grid-template-columns:
   minmax(0, 0.85fr)
   minmax(0, 1.15fr);

 gap: 90px;

 align-items: start;

 background:
   radial-gradient(
     circle at 10% 10%,
     rgba(198, 162, 122, 0.12),
     transparent 30%
   ),
   var(--cream-light);
}

.project-contact__intro {
 position: sticky;

 top: 125px;
}

.project-contact h2 {
 max-width: 620px;
}

.project-contact__lead {
 max-width: 560px;

 color: var(--muted);

 font-size: 15px;

 line-height: 1.8;

 margin-bottom: 50px;
}

.contact-details {
 display: flex;

 flex-direction: column;

 gap: 0;

 border-top: 1px solid rgba(198, 162, 122, 0.20);
}

.contact-detail {
 display: grid;

 grid-template-columns: 45px 1fr;

 gap: 18px;

 padding: 22px 0;

 border-bottom: 1px solid rgba(198, 162, 122, 0.20);
}

.contact-detail > span {
 font-family: "Playfair Display", serif;

 color: var(--gold);

 font-size: 16px;
}

.contact-detail small {
 display: block;

 margin-bottom: 7px;

 color: var(--gold-dark);

 font-size: 8px;

 letter-spacing: 1.8px;
}

.contact-detail p,
.contact-detail a {
 color: var(--deep-brown);

 font-size: 13px;

 text-decoration: none;
}


/* =====================================================
  PROJECT FORM
===================================================== */

.project-form-wrap {
 padding: 48px;

 border-radius: 30px;

 background: rgba(255, 255, 255, 0.72);

 border: 1px solid rgba(198, 162, 122, 0.18);

 box-shadow: var(--shadow-soft);
}

.project-form {
 width: 100%;
}

.form-row {
 display: grid;

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

 gap: 18px;
}

.form-field {
 margin-bottom: 20px;
}

.form-field label {
 display: block;

 margin-bottom: 9px;

 color: var(--brown);

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

 letter-spacing: 1.4px;

 text-transform: uppercase;
}

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

 padding: 14px 15px;

 border: 1px solid rgba(198, 162, 122, 0.24);

 border-radius: 12px;

 outline: none;

 background: rgba(252, 250, 247, 0.88);

 color: var(--deep-brown);

 font-family: "Inter", sans-serif;

 font-size: 13px;

 transition:
   border-color 0.3s ease,
   box-shadow 0.3s ease,
   background 0.3s ease;
}

.form-field textarea {
 resize: vertical;

 min-height: 145px;

 line-height: 1.7;
}

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

 background: white;

 box-shadow:
   0 0 0 3px rgba(198, 162, 122, 0.08);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
 color: #aaa09a;
}

.privacy-check {
 display: flex;

 align-items: flex-start;

 gap: 11px;

 margin: 7px 0 25px;

 cursor: pointer;

 color: var(--muted);

 font-size: 10px;

 line-height: 1.65;
}

.privacy-check input {
 margin-top: 2px;

 accent-color: var(--gold);
}

.privacy-check a {
 color: var(--gold-dark);
}

.project-submit {
 width: 100%;

 border: none;

 padding: 16px 22px;

 display: flex;

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

 gap: 13px;

 background: var(--gold);

 color: white;

 border-radius: 999px;

 cursor: pointer;

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

 letter-spacing: 1.6px;

 box-shadow:
   0 14px 30px rgba(155, 121, 83, 0.20);

 transition:
   transform 0.3s ease,
   box-shadow 0.3s ease;
}

.project-submit span {
 font-size: 17px;

 transition: transform 0.25s ease;
}

.project-submit:hover {
 transform: translateY(-2px);

 box-shadow:
   0 18px 38px rgba(155, 121, 83, 0.27);
}

.project-submit:hover span {
 transform: translateX(4px);
}

.form-note {
 margin-top: 13px;

 text-align: center;

 color: var(--muted);

 font-size: 9px;

 line-height: 1.6;
}

.form-success {
 margin-top: 22px;

 padding: 18px;

 display: flex;

 align-items: flex-start;

 gap: 13px;

 background: rgba(198, 162, 122, 0.10);

 border: 1px solid rgba(198, 162, 122, 0.24);

 border-radius: 15px;

 color: var(--deep-brown);
}

.form-success > span {
 color: var(--gold-dark);

 font-size: 20px;
}

.form-success strong {
 display: block;

 margin-bottom: 4px;

 font-family: "Playfair Display", serif;

 font-size: 17px;

 font-weight: 500;
}

.form-success p {
 margin: 0;

 font-size: 11px;

 line-height: 1.6;
}


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

.footer {
 padding: 110px 7% 45px;

 text-align: center;

 background: #46382f;

 color: white;
}

.footer h2 {
 max-width: 820px;

 margin: 0 auto 25px;

 font-family: "Playfair Display", serif;

 font-size: clamp(45px, 5.7vw, 80px);

 font-weight: 500;

 line-height: 1.05;
}

.footer > p:not(.section-tag) {
 color: rgba(255, 255, 255, 0.62);

 font-size: 13px;
}

.footer .section-tag {
 color: #d5b58f;
}

.footer-links,
.footer-legal {
 display: flex;

 justify-content: center;

 flex-wrap: wrap;

 gap: 23px;
}

.footer-links {
 margin: 37px 0 28px;
}

.footer-legal {
 margin-bottom: 35px;
}

.footer-links a,
.footer-legal a {
 text-decoration: none;

 color: rgba(255, 255, 255, 0.70);

 font-size: 11px;

 transition: color 0.25s ease;
}

.footer-links a:hover,
.footer-legal a:hover {
 color: #d8b995;
}

.footer small {
 color: rgba(255, 255, 255, 0.42);

 font-size: 9px;
}


/* =====================================================
  CURSOR GLOW
===================================================== */

.cursor-glow {
 position: fixed;

 z-index: 9999;

 top: 0;
 left: 0;

 width: 260px;
 height: 260px;

 border-radius: 50%;

 pointer-events: none;

 transform: translate(-50%, -50%);

 background:
   radial-gradient(
     circle,
     rgba(198, 162, 122, 0.11),
     rgba(198, 162, 122, 0) 67%
   );

 opacity: 0;

 transition: opacity 0.25s ease;
}


/* =====================================================
  COOKIE BANNER
===================================================== */

.cookie-banner {
 position: fixed;

 z-index: 99999;

 left: 28px;
 right: 28px;
 bottom: 28px;

 display: none;

 border-radius: 24px;

 border: 1px solid rgba(198, 162, 122, 0.22);

 background: rgba(252, 250, 247, 0.97);

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

 box-shadow:
   0 25px 75px rgba(70, 56, 47, 0.18);
}

.cookie-banner.show {
 display: block;
}

.cookie-inner {
 max-width: 1260px;

 margin: auto;

 padding: 28px 32px;

 display: flex;

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

 gap: 35px;
}

.cookie-copy {
 max-width: 760px;
}

.cookie-copy span {
 display: block;

 margin-bottom: 8px;

 color: var(--gold-dark);

 font-size: 8px;
 font-weight: 600;

 letter-spacing: 1.7px;
}

.cookie-copy h3 {
 margin-bottom: 7px;

 font-family: "Playfair Display", serif;

 color: var(--deep-brown);

 font-size: 26px;

 font-weight: 500;
}

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

 font-size: 11px;

 line-height: 1.7;
}

.cookie-copy a {
 color: var(--gold-dark);
}

.cookie-actions {
 display: flex;

 gap: 9px;

 flex-shrink: 0;
}

.cookie-btn {
 border: 1px solid rgba(198, 162, 122, 0.30);

 padding: 12px 17px;

 border-radius: 999px;

 cursor: pointer;

 background: white;

 color: var(--deep-brown);

 font-size: 8px;
 font-weight: 600;

 letter-spacing: 1px;
}

.cookie-btn.primary {
 border-color: var(--gold);

 background: var(--gold);

 color: white;
}


/* =====================================================
  COOKIE MODAL
===================================================== */

.cookie-modal {
 position: fixed;

 z-index: 100000;

 inset: 0;

 display: none;

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

 padding: 25px;

 background: rgba(70, 56, 47, 0.48);

 backdrop-filter: blur(7px);
 -webkit-backdrop-filter: blur(7px);
}

.cookie-modal.show {
 display: flex;
}

.cookie-modal-box {
 position: relative;

 width: min(600px, 100%);

 max-height: 90vh;

 overflow-y: auto;

 padding: 48px 38px 34px;

 border-radius: 28px;

 background: var(--cream-light);

 box-shadow:
   0 30px 90px rgba(70, 56, 47, 0.25);
}

.cookie-close {
 position: absolute;

 top: 18px;
 right: 20px;

 border: none;

 background: transparent;

 color: var(--brown);

 cursor: pointer;

 font-size: 25px;
}

.cookie-modal-box > span {
 display: block;

 margin-bottom: 10px;

 color: var(--gold-dark);

 font-size: 8px;

 letter-spacing: 1.8px;
}

.cookie-modal-box h3 {
 margin-bottom: 13px;

 font-family: "Playfair Display", serif;

 color: var(--deep-brown);

 font-size: 34px;

 font-weight: 500;
}

.cookie-modal-box > p {
 margin-bottom: 28px;

 color: var(--muted);

 font-size: 12px;

 line-height: 1.7;
}

.cookie-option {
 padding: 19px 0;

 display: flex;

 justify-content: space-between;

 gap: 25px;

 border-top: 1px solid rgba(198, 162, 122, 0.18);
}

.cookie-option:last-of-type {
 border-bottom: 1px solid rgba(198, 162, 122, 0.18);
}

.cookie-option h4 {
 margin-bottom: 5px;

 color: var(--deep-brown);

 font-size: 13px;
}

.cookie-option p {
 color: var(--muted);

 font-size: 10px;

 line-height: 1.6;
}

.cookie-option input {
 flex-shrink: 0;

 width: 18px;
 height: 18px;

 accent-color: var(--gold);
}

.cookie-modal-actions {
 margin-top: 28px;

 display: flex;

 justify-content: flex-end;

 gap: 9px;
}

/* =====================================================
  HOMEPAGE FEATURED JOURNAL
===================================================== */

.journal-grid-featured {
 grid-template-columns: repeat(3, minmax(0, 1fr));
}

.journal-grid-featured .journal-card {
 min-height: 390px;
}

@media (max-width: 900px) {

 .journal-grid-featured {
   grid-template-columns: 1fr;
 }

}

/* =====================================================
  ORDER FORM ERROR
===================================================== */

.form-error {
 width: 100%;
 margin-top: 32px;
 padding: 18px 22px;

 display: flex;
 align-items: flex-start;
 gap: 14px;

 border: 1px solid rgba(155, 121, 83, 0.3);
 border-radius: 16px;

 background: rgba(198, 162, 122, 0.1);

 box-shadow: 0 12px 30px rgba(107, 91, 77, 0.06);

 animation: formErrorIn 0.3s ease;
}

.form-error[hidden] {
 display: none !important;
}

.form-error-icon {
 width: 30px;
 height: 30px;

 flex: 0 0 30px;

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

 border-radius: 50%;

 background: #c6a27a;

 color: #ffffff;

 font-family: "Inter", sans-serif;
 font-size: 14px;
 font-weight: 600;
}

.form-error > div {
 flex: 1;
}

.form-error strong {
 display: block;

 margin: 1px 0 5px;

 font-family: "Playfair Display", serif;
 font-size: 16px;
 font-weight: 500;

 color: #46382f;
}

.form-error p {
 margin: 0;

 color: #75695f;

 font-family: "Inter", sans-serif;
 font-size: 11px;
 line-height: 1.6;
}

.field-error {
 border-color: #c6a27a !important;

 background: rgba(198, 162, 122, 0.05) !important;

 box-shadow:
   0 0 0 3px rgba(198, 162, 122, 0.09) !important;
}

@keyframes formErrorIn {
 from {
   opacity: 0;
   transform: translateY(8px);
 }

 to {
   opacity: 1;
   transform: translateY(0);
 }
}


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

@keyframes fadeUp {
 from {
   opacity: 0;
   transform: translateY(34px);
 }

 to {
   opacity: 1;
   transform: translateY(0);
 }
}

@keyframes floatCard {
 0%,
 100% {
   transform: translateY(0);
 }

 50% {
   transform: translateY(-16px);
 }
}

@keyframes heroZoom {
 from {
   transform: scale(1);
 }

 to {
   transform: scale(1.055);
 }
}


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

@media (max-width: 1100px) {

 .floating-card {
   width: 260px;
   height: 370px;
 }

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

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

 .journal-heading {
   grid-template-columns: 1fr;

   gap: 28px;
 }

 .journal-intro {
   max-width: 700px;
 }

 .journal-featured {
   grid-template-columns: 55px 1fr;

   min-height: auto;
 }

 .journal-featured-art {
   display: none;
 }

 .journal-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }

}


/* =====================================================
  PROJECT CONTACT RESPONSIVE
===================================================== */

@media (max-width: 950px) {

 .project-contact {
   grid-template-columns: 1fr;

   gap: 65px;

   padding-top: 100px;
   padding-bottom: 100px;
 }

 .project-contact__intro {
   position: static;
 }

 .contact-details {
   margin-top: 40px;
 }

}


/* =====================================================
  COOKIE RESPONSIVE
===================================================== */

@media (max-width: 850px) {

 .cookie-banner {
   left: 16px;
   right: 16px;
   bottom: 16px;
 }

 .cookie-inner {
   padding: 26px;

   flex-direction: column;

   align-items: stretch;

   gap: 22px;
 }

 .cookie-actions {
   width: 100%;

   flex-wrap: wrap;
 }

 .cookie-btn {
   flex: 1;
 }

}


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

@media (max-width: 850px) {

 .navbar {
   padding: 20px 6%;
 }

 .logo {
   font-size: 23px;
 }

 nav a {
   display: none;
 }

 nav {
   gap: 0;
 }

 .hero {
   min-height: 95vh;

   padding: 125px 6% 70px;
 }

 .hero-overlay {
   background: rgba(248, 245, 241, 0.87);
 }

 .hero h1 {
   font-size: clamp(48px, 14vw, 72px);
 }

 .hero-description {
   font-size: 16px;
 }

 .floating-card {
   display: none;
 }

 .launch-strip {
   margin: -25px 6% 0;

   grid-template-columns: 1fr;
 }

 .launch-strip div {
   border-right: none;

   border-bottom:
     1px solid rgba(198, 162, 122, 0.16);
 }

 .launch-strip div:last-child {
   border-bottom: none;
 }

 .website-collection {
   padding: 110px 6% 90px;
 }

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

   gap: 58px;
 }

 .website-image {
   aspect-ratio: 3 / 4;

   border-radius: 28px;
 }

 .website-actions {
   flex-direction: column;
 }

 .demo-btn,
 .choose-btn {
   text-align: center;
 }

 .pricing,
 .process,
 .instagram-preview {
   padding: 100px 6%;
 }

 .seo-section,
 .custom-section {
   padding: 100px 6%;
 }

 .seo-compare {
   grid-template-columns: 1fr;
 }

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

 .process-grid > div {
   min-height: auto;
 }

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

 .insta-grid img,
 .insta-grid img:nth-child(2),
 .insta-grid img:nth-child(3),
 .insta-grid img:nth-child(4) {
   margin-top: 0;

   height: 390px;
 }

 .journal-section {
   padding: 100px 6%;
 }

 .journal-heading {
   margin-bottom: 55px;
 }

 .journal-featured {
   padding: 44px 36px;

   grid-template-columns: 1fr;

   gap: 18px;
 }

 .journal-featured-number {
   font-size: 18px;
 }

 .journal-featured h3 {
   font-size: clamp(35px, 8vw, 46px);
 }

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

 .journal-card {
   min-height: 315px;
 }

 .journal-bottom {
   align-items: flex-start;

   flex-direction: column;
 }

 .cursor-glow {
   display: none;
 }

}


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

@media (max-width: 620px) {

 .project-contact {
   padding: 80px 22px;
 }

 .project-contact h2 {
   font-size: 48px;
 }

 .project-form-wrap {
   padding: 38px 25px;
 }

 .form-row {
   grid-template-columns: 1fr;

   gap: 0;
 }

}


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

@media (max-width: 550px) {

 .cookie-copy h3 {
   font-size: 23px;
 }

 .cookie-actions {
   flex-direction: column;
 }

 .cookie-btn {
   width: 100%;
 }

 .cookie-modal {
   padding: 15px;
 }

 .cookie-modal-box {
   padding: 38px 22px 28px;
 }

 .cookie-option {
   align-items: flex-start;
 }

 .cookie-modal-actions {
   flex-direction: column;
 }

}


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

@media (max-width: 520px) {

 .hero-buttons {
   flex-direction: column;
 }

 .primary-btn,
 .secondary-btn {
   width: 100%;
 }

 .website-filters {
   gap: 8px;
 }

 .filter-btn {
   padding: 10px 13px;

   font-size: 9px;
 }

 .website-image {
   aspect-ratio: 3 / 4;
 }

 .price-card {
   padding: 31px 25px;
 }

 .journal-section {
   padding: 90px 22px;
 }

 .journal-section::before {
   top: 35px;

   font-size: 88px;
 }

 .journal-heading {
   margin-bottom: 48px;
 }

 .journal-heading h2 {
   font-size: 43px;
 }

 .journal-intro {
   font-size: 13px;
 }

 .journal-featured {
   padding: 34px 27px;

   border-radius: 24px;
 }

 .journal-featured h3 {
   font-size: 35px;
 }

 .journal-featured p {
   font-size: 13px;
 }

 .journal-card {
   min-height: 300px;

   padding: 31px 28px;
 }

 .journal-card-top {
   margin-bottom: 38px;
 }

 .journal-card h3 {
   font-size: 27px;
 }

 .journal-bottom {
   margin-top: 40px;
 }

 .journal-bottom .secondary-btn {
   width: 100%;
 }

}