/* ================= الجود — الوردة كلام ================= */

:root{
  --white:#FFFFFF;
  --pink:#FFD6DE;
  --pink-deep:#F5B9C6;
  --pink-line:#E79FAF;
  --gold:#E9C46A;
  --gold-deep:#C9A227;
  --leaf:#A8C9A1;
  --leaf-deep:#7FA476;
  --beige:#FDF6EC;
  --ink:#4A3B32;
  --ink-soft:#7C6A5C;
  --ink-faint:#A89787;
  --line:rgba(233,196,106,0.35);
  --line-strong:rgba(233,196,106,0.6);
  --shadow:0 10px 20px rgba(180,140,110,0.14);
  --radius:22px;
  --radius-sm:14px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
  background-color:var(--beige);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.045'/></svg>"),
    repeating-linear-gradient(to bottom, rgba(233,196,106,0.07) 0 1px, rgba(233,196,106,0) 1px 8px);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:128px;
}

img,svg{max-width:100%}
button{font-family:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{list-style:none;padding:0}

.display{
  font-family:'Aref Ruqaa',serif;
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
}

.wrap{
  width:min(1140px,100% - 40px);
  margin-inline:auto;
}

.gold-text{
  background:linear-gradient(135deg,#E9C46A 0%,#D9B24F 45%,#C9A227 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}

/* ---------------- الهيدر ---------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(253,246,236,0.86);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(233,196,106,0.28);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:62px;
  padding-block:8px;
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.brand-mark{display:block;width:34px;height:34px}
.brand-mark svg{width:34px;height:34px;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.05}
.brand-text b{font-family:'Aref Ruqaa',serif;font-size:21px;font-weight:400;color:var(--ink)}
.brand-text em{
  font-style:normal;font-size:9.5px;letter-spacing:.28em;
  color:var(--gold-deep);font-weight:700;margin-top:2px;
}
.site-nav{
  display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{
  white-space:nowrap;
  font-size:14.5px;font-weight:500;
  color:var(--ink-soft);
  padding:8px 13px;
  border-radius:999px;
  transition:background .18s ease,color .18s ease;
}
.site-nav a:hover{background:rgba(255,214,222,0.55);color:var(--ink)}
.site-nav a:active{background:var(--pink)}

/* ---------------- الهيرو ---------------- */
.hero{
  position:relative;
  padding-block:44px 24px;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  align-items:center;
  gap:32px;
}
.eyebrow{
  display:inline-block;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;
  color:var(--gold-deep);
  background:rgba(233,196,106,0.16);
  border:1px solid rgba(233,196,106,0.4);
  padding:5px 14px;border-radius:999px;
  margin-bottom:18px;
}
.hero h1{
  font-size:clamp(30px,4.6vw,54px);
  color:var(--ink);
  margin-bottom:6px;
}
.hero-q{
  font-family:'Aref Ruqaa',serif;
  font-size:clamp(22px,3vw,32px);
  color:var(--ink);
  margin-block:18px 10px;
  position:relative;
  padding-inline-start:22px;
}
.hero-q::before{
  content:"";
  position:absolute;inset-inline-start:0;top:.42em;
  width:10px;height:10px;border-radius:50%;
  background:var(--pink-deep);
  box-shadow:0 0 0 4px rgba(245,185,198,.3);
}
.lede{color:var(--ink-soft);max-width:46ch;font-size:16px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:0 26px;border-radius:999px;
  font-size:16px;font-weight:700;
  border:1px solid transparent;cursor:pointer;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s ease,box-shadow .2s ease,background .2s ease,color .2s ease,filter .2s ease;
}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-gold{
  background:linear-gradient(180deg,#F2D68F,#E9C46A 58%,#DCB54F);
  color:#4A3B32;
  border-color:rgba(201,162,39,0.45);
  box-shadow:0 6px 16px rgba(201,162,39,0.26);
}
.btn-gold:hover{filter:brightness(1.035)}
.btn-ghost{background:var(--white);color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{background:#FFFBF3}

.hero-art{display:flex;justify-content:center;align-items:center;position:relative}
.hero-rose{width:100%;max-width:400px;height:auto;filter:drop-shadow(0 14px 24px rgba(180,140,110,0.16))}

.hero-petals{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.hero-petals span{
  position:absolute;top:-40px;
  width:12px;height:12px;
  background:linear-gradient(140deg,#F9CFD8,#EFA9BA);
  border-radius:62% 8% 62% 12%;
  opacity:0;
  animation:fall linear infinite;
  will-change:transform,opacity;
}
@keyframes fall{
  0%{transform:translate3d(0,-40px,0) rotate(0deg);opacity:0}
  8%{opacity:.85}
  85%{opacity:.55}
  100%{transform:translate3d(-46px,600px,0) rotate(300deg);opacity:0}
}

.pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:46px;
}
.pillar{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px;
}
.pillar-ico{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:rgba(253,246,236,0.9);border:1px solid rgba(233,196,106,0.3)}
.pillar h3{font-size:16px;font-weight:700;margin-bottom:2px}
.pillar p{font-size:13.5px;line-height:1.65;color:var(--ink-soft)}

/* ---------------- البطاقات والأقسام ---------------- */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.section{padding-block:56px}
.section-head{max-width:60ch;margin-bottom:32px}
.kicker{
  font-size:12px;font-weight:700;letter-spacing:.05em;
  color:var(--leaf-deep);
  margin-bottom:6px;
}
.section-head h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:8px}
.section-head .sub{color:var(--ink-soft);font-size:15.5px}
.tiny-note{font-size:13px;color:var(--ink-faint);margin-top:20px}

/* ---------------- ورد المشاعر ---------------- */
.emotion-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;
}
.rose-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:4px;
  padding:18px 12px 16px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  cursor:pointer;
  position:relative;
  transition:transform .18s ease,box-shadow .22s ease,border-color .18s ease,background .2s ease;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}
.rose-card:hover{transform:translateY(-3px);box-shadow:0 16px 26px rgba(180,140,110,0.18)}
.rose-card:active{transform:translateY(0) scale(.985)}
.rose-art{display:block;width:100%;max-width:132px;margin-inline:auto}
.rose-art svg{width:100%;height:auto;display:block}
.rose-name{font-family:'Aref Ruqaa',serif;font-size:18px;color:var(--ink);margin-top:6px;line-height:1.45}
.rose-line{font-size:14px;font-weight:700;color:var(--gold-deep)}
.rose-note{font-size:12.5px;line-height:1.6;color:var(--ink-soft);margin-top:2px}
.rose-check{
  position:absolute;top:10px;inset-inline-start:10px;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#F2D68F,#E9C46A);
  color:#4A3B32;font-size:13px;font-weight:800;
  opacity:0;transform:scale(.5);
  transition:opacity .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1);
}
.rose-card.is-selected{
  border-color:var(--gold);
  background:linear-gradient(180deg,#FFFDF8,#FFF7E9);
  box-shadow:0 10px 24px rgba(201,162,39,0.24);
}
.rose-card.is-selected .rose-check{opacity:1;transform:scale(1)}

/* ---------------- وردة باسمك ---------------- */
.name-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:start;
}
.name-form{padding:26px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:14px;font-weight:700;color:var(--ink)}
input[type="text"],textarea{
  width:100%;
  font-family:inherit;
  font-size:16px;
  color:var(--ink);
  background:#FFFDF8;
  border:1px solid var(--line);
  border-radius:16px;
  padding:13px 16px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
  resize:none;
}
input[type="text"]::placeholder,textarea::placeholder{color:#B7A695}
input[type="text"]:focus,textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:#fff;
  box-shadow:0 0 0 4px rgba(233,196,106,0.18);
}
.hint{font-size:13px;color:var(--ink-faint);line-height:1.6}
.micro-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.micro-facts span{
  font-size:12px;font-weight:500;color:var(--ink-soft);
  background:rgba(168,201,161,0.16);
  border:1px solid rgba(168,201,161,0.4);
  padding:4px 11px;border-radius:999px;
}

.petal-card{padding:22px;display:grid;place-items:center;background:linear-gradient(180deg,#FFFFFF,#FFFBFA)}
.petal-paper{
  position:relative;
  width:100%;
  max-width:340px;
  aspect-ratio:320/380;
  margin-inline:auto;
}
.petal-shape{position:absolute;inset:0;width:100%;height:100%}
.petal-names{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:4px;
  padding:19% 15% 24%;
  text-align:center;
}
.pn-sm{font-size:12px;letter-spacing:.04em;color:var(--ink-faint)}
.pn-a,.pn-b{
  font-family:'Aref Ruqaa',serif;
  font-size:30px;
  line-height:1.5;
  background:linear-gradient(135deg,#E9C46A 0%,#D9B24F 45%,#C9A227 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  overflow-wrap:break-word;
  word-break:break-word;
  max-width:100%;
  transition:opacity .2s ease;
}
.pn-a.is-empty,.pn-b.is-empty{opacity:.45}
.pn-mid{
  font-size:12px;color:var(--gold-deep);
  display:flex;align-items:center;gap:8px;
}
.pn-mid::before,.pn-mid::after{
  content:"";width:26px;height:1px;background:rgba(233,196,106,0.6);
}

/* ---------------- بوكس الجود ---------------- */
.box-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:stretch;
}
.box-visual{padding:22px;display:flex;flex-direction:column;gap:16px;align-items:center}
.box-stage{
  --ribbon:#FFFFFF;
  --ribbonEdge:#C9A227;
  --bow:#FFD6DE;
  --gold:#E9C46A;
  width:100%;
  max-width:330px;
  padding:6px;
  perspective:800px;
}
.box-stage[data-wrap="gold"]{--ribbon:#E9C46A;--ribbonEdge:#B9922A;--bow:#F2D288}
.box-stage[data-wrap="pink"]{--ribbon:#FFD6DE;--ribbonEdge:#DE93A6;--bow:#FFC2D1}
.box-turn{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.box-turn.is-turning{animation:turnBox .62s cubic-bezier(.34,1.4,.64,1)}
@keyframes turnBox{
  0%{transform:rotateY(0deg) rotateX(0deg) translateY(0)}
  35%{transform:rotateY(-16deg) rotateX(6deg) translateY(-6px)}
  70%{transform:rotateY(10deg) rotateX(-3deg) translateY(-2px)}
  100%{transform:rotateY(0deg) rotateX(0deg) translateY(0)}
}
.box-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 16px rgba(180,140,110,0.14))}

.wrap-picker{width:100%;text-align:center}
.picker-label{font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:10px}
.wrap-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.wrap-btn{
  display:inline-flex;align-items:center;gap:8px;
  min-height:46px;padding:0 16px;
  border-radius:999px;
  background:#FFFDF8;
  border:1px solid var(--line);
  color:var(--ink);
  font-size:14px;font-weight:500;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .14s ease;
}
.wrap-btn:hover{background:#FFF8EE}
.wrap-btn:active{transform:scale(.97)}
.wrap-btn.is-on{
  border-color:var(--gold);
  background:linear-gradient(180deg,#FFFDF8,#FFF4E2);
  box-shadow:0 6px 14px rgba(201,162,39,0.2);
  font-weight:700;
}
.sw{display:inline-block;width:18px;height:18px;border-radius:50%;flex:0 0 auto}
.sw.big{width:30px;height:30px}
.sw-white{background:linear-gradient(150deg,#FFFFFF,#F4EEDF);border:1px solid rgba(201,162,39,0.6)}
.sw-gold{background:linear-gradient(150deg,#F2D68F,#D8B255);border:1px solid rgba(185,146,42,0.6)}
.sw-pink{background:linear-gradient(150deg,#FFE4EA,#F7BECB);border:1px solid rgba(222,147,166,0.7)}

.box-form{padding:26px;display:flex;flex-direction:column;gap:16px}
.counter-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.counter{font-size:13px;font-weight:700;color:var(--leaf-deep);transition:color .2s ease}
.counter.is-low{color:#C1663F}
.mini{font-size:12px;color:var(--ink-faint)}
.box-facts{display:flex;flex-direction:column;gap:9px}
.box-facts li{font-size:14px;color:var(--ink-soft);display:flex;gap:8px;align-items:baseline}
.box-facts li span{color:var(--gold);font-size:12px}

/* ---------------- التغليف ---------------- */
.pack-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;align-items:start}
.pack-art{padding:22px;display:flex;flex-direction:column;align-items:center;gap:6px}
.pack-box{
  --ribbon:#FFFFFF;
  --ribbonEdge:#C9A227;
  --bow:#FFD6DE;
  --gold:#E9C46A;
  width:100%;max-width:290px;
}
.pack-cap{font-family:'Aref Ruqaa',serif;font-size:16px;color:var(--gold-deep);margin-top:4px}
.pack-list{display:flex;flex-direction:column;gap:12px}
.pack-item{display:flex;gap:16px;align-items:center;padding:18px 20px}
.pack-item h3{font-size:16px;font-weight:700;margin-bottom:2px}
.pack-item p{font-size:13.5px;color:var(--ink-soft);line-height:1.6}

/* ---------------- الاشتراك ---------------- */
.sub-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;align-items:start}
.sub-picker{padding:24px}
.sub-btns{display:flex;gap:10px;flex-wrap:wrap}
.sub-btn{
  flex:1 1 0;min-width:86px;min-height:74px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  border-radius:18px;
  background:#FFFDF8;
  border:1px solid var(--line);
  color:var(--ink);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,border-color .18s ease,box-shadow .2s ease,transform .14s ease;
}
.sub-btn b{font-family:'Aref Ruqaa',serif;font-size:24px;font-weight:400;line-height:1.2}
.sub-btn span{font-size:12.5px;color:var(--ink-soft)}
.sub-btn:hover{background:#FFF8EE}
.sub-btn:active{transform:scale(.97)}
.sub-btn.is-on{
  border-color:var(--gold);
  background:linear-gradient(180deg,#FFFDF8,#FFF3DF);
  box-shadow:0 8px 18px rgba(201,162,39,0.22);
}
.sub-btn.is-on span{color:var(--ink)}
.sub-picker .hint{margin-top:16px}

.sub-detail{padding:24px;min-height:190px}
.sub-empty{color:var(--ink-faint);font-size:14.5px}
.sub-title{font-family:'Aref Ruqaa',serif;font-size:22px;margin-bottom:4px}
.sub-sub{font-size:13.5px;color:var(--ink-soft);margin-bottom:16px}
.month-list{display:flex;flex-direction:column;gap:8px}
.month-item{
  display:flex;align-items:center;gap:10px;
  font-size:14px;color:var(--ink);
  background:rgba(253,246,236,0.85);
  border:1px solid rgba(233,196,106,0.28);
  border-radius:14px;
  padding:9px 14px;
}
.month-item i{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,214,222,0.75);
  color:#8C6A5E;font-style:normal;font-size:11px;font-weight:700;
}
.month-more{font-size:13px;color:var(--ink-faint);padding-inline-start:6px;margin-top:2px}

/* ---------------- الختام والفوتر ---------------- */
.closing{padding-block:56px 24px}
.closing-inner{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  text-align:center;
  background:linear-gradient(180deg,#FFFFFF,#FFF9F1);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:44px 24px;
}
.closing-q{font-size:clamp(22px,3.2vw,32px)}

.site-footer{border-top:1px solid rgba(233,196,106,0.28);padding-block:30px 24px;margin-top:20px}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.footer-inner .brand-text b{font-size:19px}
.site-footer p{font-size:13px;color:var(--ink-soft)}
.foot-note{color:var(--ink-faint);font-size:12.5px}

/* ---------------- شريط الملخص ---------------- */
.order-bar{
  position:fixed;
  inset-inline:0;
  bottom:0;
  z-index:60;
  background:rgba(255,255,255,0.94);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(233,196,106,0.5);
  box-shadow:0 -8px 24px rgba(180,140,110,0.14);
}
.order-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-block:10px;
}
.order-info{min-width:0;flex:1 1 auto}
.order-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.order-label{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--ink-faint)}
.order-rose{font-family:'Aref Ruqaa',serif;font-size:16px;color:var(--ink);line-height:1.3}
.order-chips{
  display:flex;gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  margin-top:2px;
  padding-bottom:2px;
}
.order-chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;color:var(--ink);
  background:#FFF8EE;
  border:1px solid rgba(233,196,106,0.35);
  border-radius:999px;
  padding:2px 10px;
  max-width:220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chip b{font-weight:700;color:var(--ink-faint);font-size:11px}
.copy-btn{flex:0 0 auto;min-height:44px;padding-inline:20px;font-size:14.5px}
.copy-btn.is-done{
  background:linear-gradient(180deg,#CDE3C6,#A8C9A1);
  border-color:rgba(127,164,118,0.6);
  color:#2F4329;
}

/* ---------------- الحركة ---------------- */
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  .hero-petals{display:none}
  .box-turn.is-turning{animation:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}

/* ---------------- استجابة ---------------- */
@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .hero-art{order:-1;margin-bottom:4px}
  .hero-rose{max-width:280px}
  .pillars{grid-template-columns:1fr;margin-top:30px}
  .name-grid,.box-grid,.pack-grid,.sub-grid{grid-template-columns:1fr}
  .hero{padding-block:26px 16px}
  .section{padding-block:44px}
}
@media (max-width:760px){
  .order-inner{flex-direction:column;align-items:stretch;gap:8px;padding-block:9px}
  .copy-btn{width:100%;min-height:46px}
  body{padding-bottom:150px}
}
@media (max-width:520px){
  .wrap{width:min(1140px,100% - 28px)}
  .hero h1{font-size:31px}
  .hero-q{font-size:23px;padding-inline-start:18px}
  .emotion-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .rose-card{padding:14px 8px 12px}
  .rose-art{max-width:112px}
  .rose-name{font-size:16px}
  .rose-note{font-size:11.5px}
  .name-form,.box-form,.sub-detail,.pack-art,.box-visual,.sub-picker{padding:18px}
  .pn-a,.pn-b{font-size:26px}
  .site-nav a{padding:8px 10px;font-size:13.5px}
  .wrap-btn{min-height:44px;padding:0 12px;font-size:13px}
}
@media (max-width:380px){
  .emotion-grid{grid-template-columns:1fr}
  .hero h1{font-size:28px}
}